Home

mschwarz

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.

More information

Install HTML5 Control to use it as visual element:
Open CODESYS: Tools - Visual Element Repository
Within "Profile or Extension Selection" choose "HTML5 Controls"
Press Button "Install.." and navigate to the downloaded and unziped example.
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.

System requirements and restrictions

System requirements and restrictions Info
Programming System CODESYS Development System Version 3.5.17.30 or higher
Runtime System CODESYS Control Version 3.5.17.30
Required Accessories CODESYS Visualization 4.2.0.0

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

Download HTML5DemoButton

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.

Download HTML5DemoCombobox

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.

Download HTML5DemoImage

HTML5 Demo Image

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

Download HTML5DemoTable

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.

Download HTML5DemoTableNoScrollRange

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.

Download HTML5DemoTextfield

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).

Download DemoProject

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.