Skip to main content

Linking and Using an HTML5 Control

You can install an HTML5 control directly into your visualization element repository.

HTML5 controls can be added to a repository so that it is possible to distribute a project with all of the necessary contents.

Tip

HTML5 controls are often delivered as a package. The initial installation is then performed in the Package Manager.

Procedure. First installation of an HTML5 control

  1. Click Tools → Visualization Element Repository.

    The Visual Element Repository dialog opens.

  2. Select the HTML5 Controls option.

    The Installed Elements list provides information about HTML5 controls which are already installed.

  3. Click the Install command.

  4. In the file selection dialog which opens, select the desired description file of the HTML5 control (*.html5control.xml).

    • If the description file is valid, then the element is automatically installed into the repository. In the visualization, the control is listed in Installed Elements. You can use it.

    • If the description file is invalid, then an error is issued. Then you need to contact the author of the element.

For more information, see: Command: Visualization Element Repository

Procedure. Creating an HTML5 control

  1. The _visu_icon_html5controls.png HTML5 Control Editor is located in the installation folder of CODESYS in the Windows Start Menu.

    Open the editor.

  2. The file selection dialog opens first. Select the desired description file of the HTML5 control there (*.html5control.xml).

    The data of the element is displayed in the _visu_icon_html5controls.png HTML5 Control Editor.

  3. Edit the element so that a valid description file is created:

    1. Configure the General tab:

      1. Company: Test GmbH

      2. Name: FirstControl

        Important

        The name must not contain spaces.

      3. Toolbox Category: Special Controls

      4. Optionally, specify an image file.

        Note

        If an image is not specified, then a default icon is used.

      5. Specify a JavaScript file (JS) as the element wrapper. This is unconditionally required. This file wraps the calls from the CODESYS framework with the calls to the control itself.

        If more files are required for the control, then these must also be specified here. These can be CSS files or JS files.

        Important

        You need to provide the wrapper file.

        Make sure that the ElementWrapper.js file is at the top and that the other files required for execution are below it.

        Example

        _vis_configuration_html5_control_files.png

    2. Optionally, on the Control Properties tab, configure the element interface.

    3. Optionally, on the Localization tab, configure the translations for the user interface texts of the control.

  4. Click _visu_icon_save_install.png Save and Install.

    Your settings are applied and their validity checked. Then the description file is saved and the control is installed in the repository.

In the visualization element repository, the control is listed in Installed Elements.

Procedure. Using a control

  1. Open your CODESYS project.

  2. Open a visualization object.

    The recently installed control is available in the Visualization Toolbox view in the category which was specified in the description file.

  3. Drag the control to the visualization editor and select it.

    The element interface is available in the Properties view as defined in the _visu_icon_html5controls.png HTML5 Control Editor.

Example

Example 35. Control: HTML5DemoDonutGauge
_visu_example_html5_donutgauge.png


: