Welcome to our new forum
All users of the legacy CODESYS Forums, please create a new account at account.codesys.com. But make sure to use the same E-Mail address as in the old Forum. Then your posts will be matched. Close

HTML5 Control Editor

matthew
2022-04-07
2022-11-17
  • eschwellinger

    eschwellinger - 2022-04-08

    Hi Matthew,
    this will come with the Visu Addon release 4.2.0.0 which is scheduled for end of May.
    Sorry, this seems to be a bug in this pdf not to mention this.
    BR
    Edwin

     
    • matthew - 2022-06-07

      Hi @eschwellinger would you know where I can find documentation and examples on the new HTML5 editor? Thanks

       
      • eschwellinger

        eschwellinger - 2022-06-07

        ..will come to forge during the nest two weeks

         
  • matthew - 2022-04-08

    Okay thanks for the update, that's a shame it's so far away from release as it would have been great for a couple of jobs I have coming up

     
  • matthew - 2022-07-05

    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.

     
  • matthew - 2022-07-07

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

     
  • matthew - 2022-07-07

    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?

     
  • ignat - 2022-11-15

    interested in the topic as well.

    so many questions and so no answers

     
  • j-zauner - 2022-11-17

    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

     
  • j-zauner - 2022-11-17

    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.

     

Log in to post a comment.