MBLogic
for an open world in automation
SVG Widget Library
Overview
The SVG object library provides a set of ready to use SVG HMI objects for use in web based HMI systems. This document lists these SVG HMI objects and provides additional information on how to make use of them.
Library Categories
- Push Buttons - Push buttons including menu push buttons and illuminated push buttons.
- Push Button Masks - Enable/disable masks for push buttons and selector switches.
- Selector Switches - Two and three position selector switches, including selector switch labels (push buttons used to activate the switch).
- Pilot Lights - Pilot lights (for illuminated push buttons, see push buttons).
- Text and Numbers - Text and numbers.
- Gauges, Tanks, and Hoppers - Dial and column gauges, tanks, and hoppers.
- Process Indicators - Process indicators, including pumps and pipes.
- Charts - Data charts.
- Data Entry - Numeric data entry.
- Miscellaneous - Miscellaneous objects.
- Function Summary - Summary of the Javascript library functions and the SVG widgets they are each compatible with.
Colours
Most SVG HMI widgets are provided in a number of pre-defined colours. You select the colour you wish the object to be by selecting the correct file. Each file will end in the name of the main colour of the object.
For example, the file defining an oblong rectangular push button will be described as "pb_oblong_toggle_<colour>". For the orange version of this the actual file name will be "pb_oblong_toggle_orange.svg"
Some objects are only available in a single colour, or in some cases (e.g. pilot lights) the colour changes at run time. In these case the file name does not end with the name of a colour.
If you wish to use a colour which is not defined, you can copy any of the files and edit the contents with a text editor to use whatever colour you wish.