Using API canvas HTML - Printable Version

Using API canvas HTML - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Using API canvas HTML (/showthread.php?tid=2307)

Using API canvas HTML - batistacaceres - 27.10.2019

Hello:

Can I use api Canvas HTML in LM?
I want to draw lines and elements using canvas in javascript, how can I get that element?
When I try:
var icanvas = $('icanvas2').getContext('2d');
console.log(icanvas)

It doesnt work. How could I use objet canvas in LM?
best regards
Roger

RE: Using API canvas HTML - buuuudzik - 27.10.2019

You can do this like below:

Code:
const cvs = document.querySelector("icanvas2")

const ctx = cvs.getContext("2d");

console.log(cvs);

RE: Using API canvas HTML - batistacaceres - 02.11.2019

(27.10.2019, 22:39)buuuudzik Wrote: You can do this like below:

Code:
const cvs = document.querySelector("icanvas2") const ctx = cvs.getContext("2d"); console.log(cvs);

Hello:
I am trying to draw a simple line, in an element "Frame" in LogicMachine, but I think something is wrong

I try to do this, but it doesnt work:

const cvs = document.querySelector(".icanvas3")
console.log(cvs);
const ctx = cvs.getContext("2d");
console.log(ctx);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Could you help me please?

best regards

RE: Using API canvas HTML - buuuudzik - 02.11.2019

And what is the result of below line?

Code:
console.log(ctx);

All should work, but you must be sure if canvas is already created. You can add some background in css to it.

RE: Using API canvas HTML - batistacaceres - 02.11.2019

(02.11.2019, 08:24)buuuudzik Wrote: And what is the result of below line?

Code:
console.log(ctx);

All should work, but you must be sure if canvas is already created. You can add some background in css to it.

The result in console.log(ctx) is NULL ...

And.. How can add some background in css ???

I just add a frame element in LM, and put in parameter "Additional classes" : icanvas3.

but seem it doesnt work as canvas, any suggestion??

best regards

RE: Using API canvas HTML - buuuudzik - 02.11.2019

You have a typo, add a dot before a "icanvas2" if this is a className:

Code:
const cvs = document.querySelector(".icanvas2")

RE: Using API canvas HTML - Erwin van der Zwart - 03.11.2019

Hi,

Just following this discussion, but when I read it correct you want to draw inside a canvas and you try to do this on a empty iframe. This will never work if you ask me because you need to add a html canvas element in the frame first in my opinion.. You now try to select a non existing element because the iframe is empty..

BR,

Erwin

RE: Using API canvas HTML - batistacaceres - 03.11.2019

(02.11.2019, 18:12)buuuudzik Wrote: You have a typo, add a dot before a "icanvas2" if this is a className:

Code:
const cvs = document.querySelector(".icanvas2")

I have tried with this, well as you said, this is a className ".icanvas3", that is in code I add a dot:

const cvs = document.querySelector(".icanvas3")
console.log(cvs);
const ctx = cvs.getContext("2d");
console.log(ctx);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

even so, it doesnt work, console.log(ctx), its result is NULL

best regards

RE: Using API canvas HTML - Erwin van der Zwart - 03.11.2019

Hi,

Try this:

1) Create a html named canvas.html with this content

Code:
<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="100%" height="100%" style="border:1px solid #000000;"></canvas>

</body>

</html>

2) Upload canvas.html to the background images tab
3) Create a iframe and add source to: /scada/resources/img/canvas.html
4) Add this code to the custom JavaScript

Code:
$(function(){

    $( document ).ready(function() {      

      var f= $('iframe')

        f.load(function(){ 

      const cvs = f.contents().find('#myCanvas')

      console.log(cvs);

      const ctx = cvs[0].getContext("2d");

      console.log(ctx);

      ctx.moveTo(0,0);

      ctx.lineTo(200,100);

      ctx.stroke();

    })

  });

});

BR,

Erwin

RE: Using API canvas HTML - batistacaceres - 03.11.2019

(03.11.2019, 10:26)Erwin van der Zwart Wrote: Hi,

Try this:

1) Create a html named canvas.html with this content

Code:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="100%" height="100%" style="border:1px solid #000000;"></canvas> </body> </html>
2) Upload canvas.html to the background images tab
3) Create a iframe and add source to: /scada/resources/img/canvas.html
4) Add this code to the custom JavaScript

Code:
$(function(){ $( document ).ready(function() { var f= $('iframe') f.load(function(){ const cvs = f.contents().find('#myCanvas') console.log(cvs); const ctx = cvs[0].getContext("2d"); console.log(ctx); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); }) }); });
BR,

Erwin

Thank you... than you very much, it works ....
best regards

RE: Using API canvas HTML - Joep - 05.11.2019

You could use the append function as well: https://api.jquery.com/append/

RE: Using API canvas HTML - DGrandes - 05.11.2019

(03.11.2019, 10:26)Erwin van der Zwart Wrote: Hi,

Try this:

1) Create a html named canvas.html with this content

Code:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="100%" height="100%" style="border:1px solid #000000;"></canvas> </body> </html>
2) Upload canvas.html to the background images tab
3) Create a iframe and add source to: /scada/resources/img/canvas.html
4) Add this code to the custom JavaScript

Code:
$(function(){ $( document ).ready(function() { var f= $('iframe') f.load(function(){ const cvs = f.contents().find('#myCanvas') console.log(cvs); const ctx = cvs[0].getContext("2d"); console.log(ctx); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); }) }); });
BR,

Erwin

Hi, I have a question about porcentage.
When you put "width="100%" height="100%"" what is the origin? In my frame is a small square.

Thanks

RE: Using API canvas HTML - Joep - 05.11.2019

Here's an example with the Jquery append function that will add an extra div at the left bottom of the widget with id 36 but you can change it to the class or id from every page or widget in your visualization.
To use it you can add it this line of script to your custom Javascript.

$(function() {
$("#widget-36").append('<div style="position: absolute; bottom: 0; left: 0; z-index: 60;">This text was added to my widget from script</div>');
});