This forum uses cookies

batistacaceres · 27.10.2019, 20:09

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

buuuudzik · 27.10.2019, 22:39

You can do this like below:

Code:
123
constcvs = document.querySelector("icanvas2")
constctx = cvs.getContext("2d");
console.log(cvs);

batistacaceres · 02.11.2019, 07:37

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

Code:
123
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

buuuudzik · 02.11.2019, 08:24

And what is the result of below line?

Code:

1

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.

batistacaceres · 02.11.2019, 17:17

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

Code:
1
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

buuuudzik · 02.11.2019, 18:12

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

Code:
1
constcvs = document.querySelector(".icanvas2")

Erwin van der Zwart · 03.11.2019, 08:30

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

batistacaceres · 03.11.2019, 09:05

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

Code:
1
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

Erwin van der Zwart · (This post was last modified: 03.11.2019, 10:27 by Erwin van der Zwart.)

Hi,

Try this:

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

Code:
123456
<!DOCTYPEhtml>
<html>
<body>
<canvasid="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:
1234567891011121314
$(function(){
    $( document ).ready(function() {      
      varf= $('iframe')
        f.load(function(){ 
      constcvs = f.contents().find('#myCanvas')
      console.log(cvs);
      constctx = cvs[0].getContext("2d");
      console.log(ctx);
      ctx.moveTo(0,0);
      ctx.lineTo(200,100);
      ctx.stroke();
    })
  });
});

BR,

Erwin

batistacaceres · 03.11.2019, 12:25

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

Try this:

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

Code:
123456
<!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:
1234567891011121314
$(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

Joep · 05.11.2019, 12:48

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

DGrandes · 05.11.2019, 15:51

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

Try this:

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

Code:
123456
<!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:
1234567891011121314
$(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

Joep · (This post was last modified: 05.11.2019, 16:07 by Joep.)

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>');
});

Login
Username:
Password:	Lost Password?
	Remember me