MBLogic
for an open world in automation
Widget Basics
Overview
An SVG HMI widget is an XML data file that contains an SVG graphic that depicts an HMI display element. The graphic is a "vector" drawing like a CAD drawing, not bit map image like a photograph. This means there is no fixed resolution or size. The drawing can be scaled up or down infinitely without losing resolution. It also means that the drawing can be changed dynamically by manipulating the data defining the lines, circles, elipses, etc.
Passive Widgets
Passive widgets will contain just the SVG XML drawing data. Passive widgets are typically background decorative art and do not change state.
Active Widgets
In addition to passive widgets there are active widgets such as push buttons, pilot lights, text displays, gauges, etc. These either act as input devices (e.g. push buttons), or as output devices (e.g. pilot lights). In the rest of this section, "widgets" will be taken to mean active widgets unless otherwise specified.
Active widgets require some sort of scripting (using Javascript) to perform their actions. This scripting will take one of two forms. Input devices use the web browser event system. The event system responds to user input (usually mouse clicks or touch screen touches) via handlers, which are a small piece of Javascript code attached to an attribute (a piece of data embedded directly in the SVG element). The attribute names will be "onclick", "onmousedown", "onmouseup", etc. The handler will be executed when the associated event (e.g. a mouse click) occurs on the SVG element which the hander is attached to.
Output devices require a different approach. They also require a piece of Javascript code, but this function must be called cyclically (like a PLC scan) and updated with new data from the HMI server (the HMI system libraries poll for data in the background). Each output widget must be associated with a copy of the correct type of HMI display code via a unique "id" (a name or label). The Javascript code will then search out the SVG widget in the web page and update it by changing its colour, shape, data, or some other characteristic.
HMIBuilder and Widgets
You can create the required scripting to control the widgets manually if you wish (there is another section in this documentation which will show you how to do this. It is more convenient however to use the HMIBuilder program to let you just select the parameters you want from menus and have it automatically generate the scripting for you.
To be able to do this, active widgets must have some additional data within themselves which define the parameters and scripting code required, and also how to assemble them and insert them into the web page.
If you follow these instructions you can create your own widgets which will work with HMIBuilder. Since the parameter menus for each widget are defined within the widgets themselves, HMIBuilder will automatically adapt itself to your menus, including widget names and menu titles.