[Up]
3.1 A Graphical Designer of Web HMI
RexHMI Designer1 is tool for designing the custom visualizations using predefined components. The whole HMI is stored in the SVG (Scalable Vector Graphics) file with REX specific extensions.
When the visualization is ready the HTML page with all necessary libraries is generated. Such a webpage can be easily downloaded to the target device from ./hmi directory using Compile and Download function of the RexDraw development tool.
Each HMI scheme composes from several components which are connected to the signals from the control system. These components are organized in libraries. The example HMI on fig. 3.1 contain one Button, two LEDs and several GeneralComponents for pool and flower animations.
The HMI components are controlled via extensions (on fig. 3.2) which edit the RexHMi specific parameters and allow the export of the final HMI.
- Browse Elements Library (Ctrl + L) – Open the folder with all available components / elements. Each component is stored as a SVG file which can be drag&dropped to the current HMI
- Edit element (Ctrl + E) – Open edit window for the selected component or for the whole project if nothing is selected.
- Export HMI (Ctrl + H) – Exports the content of the SVG file to the HTML5 webpage with all necessary libraries. This extension is configured via parameters of the whole project.
- Group Animation (Ctrl + J) – Enable animation of the transformations (translation, rotation, scale), opacity or color of the selected object (SVG group) based on the values from the control system.
- Update Components – Extension for updating the schema to new version
- Version Info – Show current version of the RexHMI Designer and RexHMI tools.
Follow the tutorials on www.rexcontrols.com to know how to use the extensions for creating your custom HMIs.
[Back to top] [Up]