dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorDeveloping an HTML5 Control dl-breadcrumb-item__separatorBasic procedure
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Basic procedure

You can link an HTML5 control in the CODESYS development environment.

Preparation

  1. Create a JavaScript wrapper file ‎ElementWrapper.js‎ for the control.

  2. Specify any files which are required to run the element, such as style files (CSS), JavaScript files (JS), or image files (SVG).

  3. Create an element image ‎ElementImage.svg‎ which is displayed in the toolbox.

Integration into the programming system

  1. In CODESYS, create an XML file (‎.html5control.xml‎) with general information.

  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.