How to use HTML5 object canvas?

[HmiGuide]

I want to display some 2D geometry in my WebIQ program. How can I use the standard HTML5 object canvas? Is there any example program or documentation?

[webiq-sk]

In our customer area we provide a tutorial on how to create a custom widget.

Implementing anything specific with HTML, CSS and JavaScript is what needs to be done then and just wrapped inside the WebIQ "shell" to create a custom widget out of it.

[HmiGuide]

OK. I found the link: https://www.smart-hmi.de/user/download/deliver/docs/documentation-how-to-simple-control-2.11-9600/in... But webiq-eg ask me to put that post. He wanted to provide an example.

[HmiGuide · Accepted solution]

WebIQ is an very open framework, where you can:

• use any JS packages to extend the functionality
• use the features of WebIQ at the same time as the basic HTML5 features
• Create HTML5 elements graphically (with the WebIQ Designer) and textually (with JavaScript) in the same project

Therefore there is a 2nd possibility (beside creating a package as mentioned above) to add any HTML5 element, which are not available in the visual package of WebIQ. The attached example uses the canvas element to demonstrate how to insert an HTML5 element into WebIQ using JS.

Local script: "canvas" is a very basic example that demonstrates:

• How to create an HTML5 element (e.g. Canvas) with JavaScript and add it to a screen.
• To keep the example code clear, the canvas code is kept very basic
• With JS any HTML5 object can be inserted into WebIQ
• As the canvas element is created by JS, it is not visible and not editable in the WebIQ Designer.
• The canvas element resizes to the height and width of the local script container "script-canvas"