HTML5 API Examples

Product description

Some examples of simple HTML5 controls, including additional files, to make the controls usable as visualization elements in the CODESYS visualization. Just like all the other already existing visualization elements.

Installation

1. Install HTML5 Control to use it as visual element:
2. Open CODESYS: Tools - Visual Element Repository
3. Within "Profile or Extension Selection" choose "HTML5 Controls"
4. Press Button "Install..." and navigate to the downloaded and unzipped example.
5. Select the .html5control.xml file and press "Open".

Now the element will be installed into your repository, and you can use it like any other visual element from the Visualization Toolbox.

Note: If one element won't be downloaded because of an error in the message category 'Visualization', try to accept its signature after opening a project where this element is used.
Message View -> Build (warnings) -> 'An issue with the signature of the element ...' -> click '...' -> Yes, trust this element

Help page: https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_html5_dev.html

License information

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to https://unlicense.org

Release Notes

Demo elements and project

Project HTML5_DemoControls.project

A simple project, containing the so far existing HTML5 controls. The controls are configured, and their functionality can be seen online. Nevertheless, the controls are only for demonstration. Therefore, they use basic looks.

HTML5 Demo Button

This HTML5 demo button control is used to demonstrate how the input configuration can be used in a HTML5 control. When the input configuration is used in a HTML5 control than mouse events can be sent to IEC and the configured input actions OnMouseDown, OnMouseUp and OnMouseMove can be executed.

HTML5 Demo Combobox

This HTML5 demo combobox control is used to demonstrate how an IEC enumeration can be used in a combobox. This example demonstrates how to get a type information (getTypeDesc) from a variable. It demonstrates also how colors and fonts are transfered and how they can be used.

HTML5 Demo Image

This HTML5 demo image control is used to demonstrate how images can be used in a HTML5 control.

HTML5 Demo Table

This HTML5 demo table control is used to demonstrate how an IEC array can be displayed and used in a HTML5 control. The data is transfered in an optimized way. Only a specific range is transfered. This solution is possible also for bigger arrays with many rows. A cell in the table can be edited and the change can be transferred to IEC.

HTML5 Demo Table No Scroll Range

This HTML5 demo table control is used to demonstrate how an IEC array can be displayed and used in a HTML5 control. The complete array is transfered when a value in the array has changed. A cell in the table can be edited and the change can be transferred to IEC.

HTML5 Demo Textfield

This HTML5 demo textfield control is used to demonstrate how different types of IEC scalar values can be handled in both directions (read/write).

HTML5 Demo Donut Gauge

This HTML5 demonstrate how a htm5 element can be used with the d3 library. The changeable size of the frame area is passed directly by width and height. It consists of a display and a drag button.

HTML5 Demo Bar Gauge

This HTML5 demonstrate how a htm5 element can be used with the d3 library. The changeable size of the frame area is passed directly by width and height. It display an editable bar element.

Download other versions

System requirements and restrictions