Skip to content

Latest commit

 

History

History

ExampleControl

README.md

ExampleControl

This sample shows how to create a control with a simple attribute.

The project has a project ExampleControl with the implementation of the ColorChange control and a usage of this in ExampleHmi.

  • The control has an attribute named value which has a boolean datatype.
  • The attribute is defined in the Description.json at the property attributes.
  • The corresponding Setter (setValue) and Getter (getValue) are hosted in the file ExampleControl/ColorChange/ColorChange.ts.
  • The Setter calls on change the __processValue function which toggles a HTML class on a graphical HTMLDivElement __elementCircle.
  • This class is referenced in a CSS file which then changes the color.

See Beckhoff Information System for more information about controls: https://infosys.beckhoff.com/content/1033/te2000_tc3_hmi_engineering/8971583499.html?id=6326028457938979673

Controls with Typescript / Javascript Modules

We are able to create controls with Javascript modules. To demonstrate that we have a control done with Typescript and a control which is created with Javascript in the project ExampleControlEsModule. Both are used in the ExampleHmi project, too.

Controls unit tests

The Visual Studio solution contains another project with an example for creating unit tests with controls.