Posts: 76
Threads: 16
Joined: Mar 2017
Reputation:
0
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
Posts: 942
Threads: 161
Joined: Jul 2015
Reputation:
33
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
Posts: 76
Threads: 16
Joined: Mar 2017
Reputation:
0
(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
Posts: 942
Threads: 161
Joined: Jul 2015
Reputation:
33
And what is the result of below line?
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
Posts: 76
Threads: 16
Joined: Mar 2017
Reputation:
0
(02.11.2019, 08:24)buuuudzik Wrote: And what is the result of below line?
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
Posts: 942
Threads: 161
Joined: Jul 2015
Reputation:
33
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
Posts: 1807
Threads: 7
Joined: Jul 2015
Reputation:
121
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
Posts: 76
Threads: 16
Joined: Mar 2017
Reputation:
0
(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
Posts: 1807
Threads: 7
Joined: Jul 2015
Reputation:
121
03.11.2019, 10:26
(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: <!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
Posts: 76
Threads: 16
Joined: Mar 2017
Reputation:
0
(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>
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();
})
});
});
Erwin
Thank you... than you very much, it works ....
best regards
Posts: 120
Threads: 15
Joined: Nov 2019
Reputation:
6
You could use the append function as well: https://api.jquery.com/append/
Posts: 245
Threads: 32
Joined: May 2018
Reputation:
2
(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>
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();
})
});
});
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
Posts: 120
Threads: 15
Joined: Nov 2019
Reputation:
6
05.11.2019, 16:06
(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>');
});
|
