I'm trying to access the new HTML5 Control Editor in SP18 as in the

https://www.codesys.com/index.php?eID=tx_securedownloads&p=359&u=0&g=0&t=1649451726&hash=b2955a0d5d7e7dc80299f0d3d56be2b344d0f80d&file=/fileadmin/Download/ALL/Releaseinformation/features-and-improvements-V35SP18-en.pdf

I have tried to access the Visual Element Repository with closed project but I don't have the HTML5 Controls option available.

Is there any documentation or examples on how to use the new HTML5 Control Editor?

Cheers,
Matthew

Hi,
now the online help contains the documentation for it:
https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_html5_dev.html

I have been trying to use the existing HTML Examples and have installed them via the HTML5 Editor and have enabled Support client animations and overlay of native elements.

The Button is display as a GreenBox ( Green Colour by default ) It does not look like the SVG Image at all. The SVG images does not scale smoothly in the editor.

The combo box is not displayed correctly, just an arrow.

The Table is not displayed at all.

The documentation is still not enough to fully understand how it all works. Is there any videos or tuturials? I have been going through all the examples and reading the DOCs without much help.

How would I integrate dynamic SVGs. For example in the Past on other systems it was easy to access the SVG Elements and use CSS on these elements to change colour of the element or blink, rotate etc

Can I copy the complete SVG into the .html5control or access it externally? Is the image selector in the HTML Editor just an Icon image and not and SVG available dynamically?

For example I have a pump SVG symbol, If I have SVG Elements PumpColour , RotateIndicator. I set the element tags via an SVG editor like Inkscape etc

I use an INT to set the states:

0 = Off ( Standard Colour Grey etc )
1 = Running ( Green or what user selects in properties and Rotate Indicator rotating )
2 = Warning ( Yellow or what user selects in properties )
3 = Fault ( Red or what user selects in properties and blinking if enabled )
4 = Unknown State or Comms fault etc ( Black/Dark Grey or what user selects in properties )

Basically I will have Properties for the user to select in the editor
4x colour options
1x Rotate Indicator Enable
1x Rotate Speed
1x Blink Enable
1x Blink Rate

The logic will be handled via Javascript including some of the properties and the INT value. The CSS will handle changing the colours, rotating and blinking.

Hi @eschwellinger I have noticed the web browsers are blocking the CSS for the elements due to security risk?

this is described here under heading Access to resources I think:
https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_security_notes_html5.html

did you place the .css file in the html5control element itself?

Hi @i-campbell I have read through that and mentions nothing about CSS. This error is showing up on the provided examples also. The browser is blocking the CSS. The CSS is external file, even in the examples it is being called in via the .html5control file.

Can I add the CSS in the .html5control file? Does this file get converted to HTML5? can I add HTML5 code into this file? Or will the HTML5 Editor tool overwrite it?

interested in the topic as well.

so many questions and so no answers

Hi @matthew, @ignat,

I'm from the visualization department and want to explain to you the functional principle of HTML5 controls.

First it is important to know that all of these example HTML5 controls are expecting certain data types. The concrete type depends on the implementation of the control, often described in ElementWrapper.js. In the ElementWrapper.js, the type of data can be retrieved by using functions from window.CDSWebVisuAccess (in PlcLogic/visu/webvisu-support.js).

Each property in the Property View of a HTML5 control corresponds to a JavaScript function with the same name in ElementWrapper.js. This is how values are received by the control. Values can be sent from the control to IEC by using send-functions like window.CDSWebVisuAccess.sendComplexValue(...).

To the questions:

The combo box is not displayed correctly, just an arrow.

The combobox needs an enum variable as input variable, e.g. defined in PLC_PRG: enVar : MyEnum;

The Table is not displayed at all.

The table should work with any two-dimensional array variables.
I just used the following in a test project:

arSingle : ARRAY[0..10] OF INT;
arTwoDimension : ARRAY[0..5, 0..10] OF INT;
arOfStruct : array[0..10] of myStruct;

documentation

The Visu version 4.2 was just the beginning of our new feature. There will be improvements witch 4.3 and 4.4.
I guess that this page wasn't available in July:
https://content.helpme-codesys.com/en/VisuHtml5ControlsApi/index.html

CSS files

Sadly, we made a mistake during the development. With Visu 4.2 and 4.3 only inline styles are allowed due to the CSP of the iFrame. We plan to fix this with Visu 4.4.

How would I integrate dynamic SVGs

There 2 ways to download SVG files or additional files to the PLC
1. Use an image pool. In the property view of the HTML5-control use the image id: ImgPool.img1
2. Use additional files in HTML5 Control Editor. These files will be downloaded to the PLC. They can be accessed using these helper functions:

• CDSWebVisuAccess.getAdditionalFile(additionalFile)
• CDSWebVisuAccess.getImagePoolFileName(imageId)
• From Visu 4.3 onwards theses accesses will change a little bit, the documentation will be updated

To manipulate the SVG files I would use CSS as you suggested (when 4.4. is available) or just plain JavaScript => getElementById('mySvg');

I hope I could clarify some things for you. I you have more questions, tell me.

Regards,
Julian

The SVG images does not scale smoothly in the editor

Yes, this is correct. This was just intended as a simple preview of the element.

Can I copy the complete SVG into the .html5control or access it externally?

All additional files that should be transferred to the PLC need to be added to the AdditionalFiles section in the HTML5 control editor.

Is the image selector in the HTML Editor just an Icon image and not and SVG available dynamically?

The image in the HTML Editor is just used as icon in the controls list and as preview in the visualization editor. To use the image you would need to add it again to the additional files or to an image pool in the project.

Can I add the CSS in the .html5control file?

You could use the ElementWrapper.js to dynamically create your html elements and add inline CSS to them.

In general, the ElementWrapper.js file is the entry point of your HTML5 control. Within this file html elements like divs can be dynamically created and added to the DOM tree of the iFrame.