neutrino
neutrino copied to clipboard
alexislozano
Using a Canvas
I want to implement a 2D plotting widget from what I could find, the easiest way to draw lines is to use a canvas with a 2D context. Now, I'm not an expert in web-related stuff at all, so I followed this tutorial, and in the eval() function of my new widget, I'm returning the following.
Style:
<style type="text/css"></style>
HTML:
<canvas id="my_graph" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('my_graph');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>
But all I'm getting is a blank window. Is what I'm doing not currently possible with neutrino? How can I view the DOM that gets generated, and then rendered? Is there a different and better way of doing this?
Hey ! I never thought of having a canvas in neutrino, but that should be possible I think. I am not sure what is the problem in what you have. First, are the provided examples working ? Second, you can add .set_debug() to your window in order to get the right click and the code inspector.
Well, if we have access to a canvas, then we can basically do anything. Yes, the examples work well (except for the contrast, because I use a dark theme but that's a separate thing).
I didn't know about .set_debug(), I'll try it and see what goes wrong.
I have added .set_debug() to the hello_world demo and used the inspector. When I right click and select `Inspect Element' nothing happens the first time. The second time, I get this window:
Sometimes it will rerender the window, and I lose the right click menu. So unfortunately it doesn't help me. Btw, this also happens with my widget.
Weird that it does not work with hello_world. I just tried it with set_debug() I get the right result :
Seems that your issue is that you have a tag mismatch... Could you try displaying the whole evaluated html ? Maybe you'll see where the issue is ?
When I say "display" I mean using println! in the render() function of Window
I added println!("{}", rendered); to the render() function of Window:
render("<div id=\"app\"><style type=\"text/css\"></style><canvas id=\"my_graph\" width=\"500\" height=\"500\"></canvas>
<script>
var canvas = document.getElementById('my_graph');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script></div>")
But like I said, I have very little experience with HTML, CSS, and other web related stuff, so maybe I'm doing something very wrong here.
Ah, I checked the console output and I see a looooot of output, and at the end an error:
Oh yes, it is because the render JavaScript function cannot take as an input a string containing line breaks. I need to work on this :/
I see. So I changed the the html section to one string without line breaks, and I don't get that error anymore. It still doesn't work though, and the inspection gives the same error as in the picture I posted before.
Maybe it's related to the web-view crate.
@GuzTech : I now have the same error as you with webkit... Are you using Archlinux ? Have you found how to solve it ?
Sorry for the late reply. Yes I'm running Arch. I haven't looked into solving this issue, so unfortunately no :'(
I just updated my packages, webkit2gtk is now 2.26.2-1, and the inspector seems to be working :D
I can confirm that the inspector is working! However, the context menu after right-clicking appears only once, so if I misclick, then the menu does not appear anymore.