This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

Using API canvas HTML
#1
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
Reply
#2
You can do this like below:
Code:
const cvs = document.querySelector("icanvas2")
const ctx = cvs.getContext("2d");
console.log(cvs);
Done is better than perfect
Reply
#3
(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
Reply
#4
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.
Done is better than perfect
Reply
#5
(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
Reply
#6
You have a typo, add a dot before a "icanvas2" if this is a className:
Code:
const cvs = document.querySelector(".icanvas2")
Done is better than perfect
Reply
#7
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
Reply
#8
(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
Reply
#9
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
Reply
#10
(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
Reply
#11
You could use the append function as well: https://api.jquery.com/append/
Reply
#12
(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
Reply
#13
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>');
});
Reply


Forum Jump: