Using a Canvas

[GuzTech]

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?

[alexislozano]

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.

[GuzTech]

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.

[GuzTech]

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.

[alexislozano]

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 ?

[alexislozano]

When I say "display" I mean using println! in the render() function of Window

[GuzTech]

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.

[alexislozano]

It seems okay to me :/ I'll try it tomorrow ;)

[GuzTech]

Ah, I checked the console output and I see a looooot of output, and at the end an error:

output.txt

[alexislozano]

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 :/

[GuzTech]

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.

[alexislozano]

@GuzTech : I now have the same error as you with webkit... Are you using Archlinux ? Have you found how to solve it ?

[GuzTech]

Sorry for the late reply. Yes I'm running Arch. I haven't looked into solving this issue, so unfortunately no :'(

[alexislozano]

I just updated my packages, webkit2gtk is now 2.26.2-1, and the inspector seems to be working :D

[GuzTech]

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.