Skip to main content

Recommended development process

Demo control as a template

Download the HTML5 API example to your computer. Then the demo controls with element wrappers JavaScript are available to you.

We recommend using the copy of an ElementWrapper.js from the HTML5 examples as a template and adapting the name and functionality to your HTML5 control.

For more information, see Example: HTML5-API

Testing the functionality of the HTML5 control

We recommend that you first test your HTML5 control on an HTML demo page. The HTML5 control can be displayed in the browser without an ElementWrapper script and the functionality can be tested. You start creating the JavaScript file (ElementWrapper.js) only after the functionality has been successfully tested.

Note

For CODESYS Visualization V4.8.0.0 and higher, the JS file ElementWrapper is automatically created when a new HTML5 control is created. It contains only the framework. The element-specific functionality must be added in the next step.

  1. Create the HTML page TestControl.html to test the script without additional installation in CODESYS.

    Structure of the HTML page

    <!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

  2. Include additional files (JavaScript files or stylesheet files) for the HTML5 control in this test page. These are files which are responsible for the layout or provide additional functionality.

    This corresponds to a script import to make the sources available.

    Code example

    <link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>

    This can be inserted above the following line:

    <script type="text/javascript" src="ElementWrapper.js"> 
 </script>

  3. Display the element (without ElementWrapper) in the browser and test the functionality.

    After the test has been successfully completed, you can start creating the JavaScript file (ElementWrapper.js).

Creating the ElementWrapper

  1. Program the ElementWrapper script.

    The sample code creates a button with a text and a color. The size is set to 100% because the HTML5 control can completely fill the space created by the framework. In addition, an IFrame is created for each HTML5 control. Therefore, the HTML5 control can be added directly in document.body.

    Sample code

    var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

  2. You can instantiate and display the HTML5 control using the HTML page Test.html and the ElementWrapper script.

  3. You can also test the individual methods in the ElementWrapper using a loop function which is started via a timer.

    The ElementWrapper script provides the functionality.

Creating an HTML5 control

  • You can now create the HTML5 control. The HTML5 control editor helps you with this.

    1. On the General tab, configure the new element.

    2. On the Control Properties tab, specify the desired properties.

    3. Create a new property of type Variable. In the Method call column, specify the desired method name.

      This is how variables are transferred to methods of the control.

      Tip

      To familiarize yourself with the capabilities, it is helpful to open the examples in the HTML5 Control Editor.

      For more information, see: Reference: HTML5 Control Editor

    4. On the Localization tab, localize the interface texts of the control for the various languages.

      The texts are localized. The element can be localized in different languages.

    5. Save your configuration under the control name and install it in the CODESYS Visualization Element Repository.

      To do this, use the _visu_icon_save_install.png command icon.

      For more information, see: First installation of an HTML5 control

    You can now use the HTML5 control in a visualization.

Using an HTML5 control

  1. Create a CODESYS project with a visualization and drag the new element into the visualization editor.

    Configure the element properties and assign the variable which the new control should display.

  2. Compile and start the application. And start the visualization on a WebVisu.

    They can monitor your visualization in online mode.

Debugging the HTML5 control

The following section describes how to check your HTML5 control for errors in the browser.

To enable the functionality, you need to call the URL with the debug parameter DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

Procedure. Debugging in the browser

  1. Right-click the page in the browser. Select the "Inspect" option in the context menu which opens.

    The "DevTools" browser page opens.

  2. Click the Sources tab.

    On the "Sources" tab, you will find a tree structure where the file elementwrapper<index>.js is located. The index is automatically appended to the file name to ensure uniqueness on the controller.

    The file is saved in the runtime system in the "PlcLogic/visu" folder.

  3. The quickest way to implement and test bug fixes is to make the necessary changes to the file stored in the runtime system.

    1. Change the ElementWrapper file for debugging.

    2. Select the "Reload" option in the browser.

      The element is updated and can be tested.

    3. Tip

      It is recommended to start the local CODESYS Control as runtime. The runtime runs locally on your own computer. This allows you to open the runtime system folder in Explorer and open and edit the JavaScript with an external text editor.

      elementwrapper<index>.js

    4. Set a breakpoint in the constructor or in the methods in order to debug the functionality in the browser. You should be familiar with the debugging options for this.

    The errors have been identified and corrected. The test element now behaves correctly.

  4. Transfer the changes in the test JavaScript elementwrapper<index>.js to the original ElementWrapper.js file.

  5. Install the HTML5 control again.

    The changes are in effect. The element behaves accordingly.

Example

The page linked below provides examples of the various functions and features relating to the HTML5 controls.

Note

_example_icon.png Sample project: HTML5 API

The used API calls are described in the following developer reference:

Reference: HTML5 Control Development

: