Skip to main content

Basic procedure

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

You can integrate an HTML5 control which you have either developed yourself or taken from an external source into your CODESYS programming system. To do this, proceed as follows.

Procedure. Preparation

  1. Create a JavaScript file named ElementWrapper.js for your HTML5 control. Or copy an element wrapper file from the HTML5 API example (for example, the JS file of the HTML5DemoButton element).

  2. Rename the wrapper object in the JS file. The name is predefined and is made up of the element name with ElementWrapper added to it.

    Important

    The file name must always be ElementWrapper.js. And the wrapper object call up in it, which is generated by the framework at runtime, requires a name that is assigned to the element according to the following logic:

    <element name>ElementWrapper

    In the JS file for your element, the name of the wrapper object matches the new control.

    The following code fragment shows this for the HTML5DemoButton control:

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. Specify all files which are required to run the element. These can be stylesheet files (CSS), JavaScript files (JS), or image files (SVG).

  4. Create an element image (ElementImage.svg). After installation, the element is displayed in the Visualization Toolbox view.

Procedure. Integration into the programming system

  1. Create an XML file (.html5control.xml) with general information. The HTML5 Control Editor helps you with this.

    Tip

    The options of the HTML5 Control Editor are described in the chapter "HTML5 Control Editor".

  2. Create the mapping of the properties of the HTML5 control to the CODESYS visualization element properties.

  3. Localize the interface texts.

  4. Install the element.

  5. Sign the element.

Tip

Follow the step-by-step instructions Recommended development process with detailed recommendations for debugging.

: