Get MBLogic at SourceForge.net. Fast, secure and Free Open Source software downloads

Help Topics

HMI Client Libraries

Help - HMI Client Display Library

Overview:

The HMI system is based on open standards such as JSON, Javascript, SVG, and HTML. The HMI client display library is not required to build a web based HMI which can interact with the HMI server. However, the HMI client display library provides a number of useful functions which make creating web based HMI systems easier. These functions are documented below.

The client display library is implemented as a series of independent objects. Most of these objects are designed to be compatible with the HMI communications library "display list".

Libraries

The client display library consists of the following:

Current HMI Libraries

Obsolete HMI Libraries

Function Summary

The following is a short summary of SVG properties which can be controlled, and the functions provided to manipulate them. See the individual functions for details on how each one operates.

libmbhmicontrols2.js

Function SVG Property Used For
MB_PilotLight fill Two colour pilot lights.
MB_PLMultiColour fill Pilot lights with multiple colours.
MB_PilotLightStat fill Two colour pilot lights which need to be compared to a status variable.
MB_PilotLightFlashTransform animateTransform Pilot lights using an animated flash.
MB_2PosSSDisplay rotate Rotation angle display for 2 position selector switch.
MB_3PosSSDisplay rotate Rotation angle display for 3 position selector switch.
MB_NumericDisplay text value Display numeric values.
MB_NumericFloatDisplay text value Display numeric values with a specified number of decimal places.
MB_StringDisplay text value Display text strings.
MB_TextDisplay text value Display a text message selected from a list of messages.
MB_DialGauge rotate Rotate the pointer on a dial guage.
MB_ColumnGauge colour gradient stops Display the level in a column using colour gradients.
MB_Pipe2 fill Change the colour of a pipe (similar to a pilot light).
MB_PumpRotate rotate Rotate a pump.
MB_PumpRotateAnimated animateTransform Rotate a pump using animations.

libmbhmimisc.js

Function SVG Property Used For
MB_ScreenSelect Display style - block or none Select one HMI screen from several
MB_NumericPad N/A Enter numeric data
MB_SlideDisplay transform - translate Move an SVG graphic on the screen
MB_StripChart polyline values Update a strip chart line
MB_GraphicSelect Display style - block or none Select one SVG graphic from among several
MB_GraphicShowHide Display style - block or none Hide or show an SVG graphic

libmbhmiold.js

The following are briefly described to help understand existing HMI applications. They should not be used in new applications.

Function SVG Property Used For Replace With
MB_SVGPushButton colour gradient stops Provides a colour effect when a push button is pressed Push buttons using CSS styles to provide colour effects.
MB_Pipe stroke Changes the colours of the walls of a pipe MB_Pipe2
MB_PipeFlow colour gradient stops Provides the effect of "bubbles" moving along a pipe MB_Pipe2
MB_PipeFlow2 colour gradient stops Like MB_PipeFlow but implemented using a different method MB_Pipe2
MB_LEDDigit Display style - block or none Used to select one seven segment style digit from among all 10 possible digits Use a regular numeric display.

Pilot Lights

Pilot lights operate by changing the "fill" attribute of a graphic. Any SVG graphic which has a "fill" attribute can act as a pilot light.

MB_PilotLight(svgdoc, PLID, initcolour, offcolour, oncolour)

Pilot light control. This changes the "fill" property to indicate one of two states. 


	var PL1 = new MB_PilotLight(document, "PL1", "black", "green", "red");

MB_PLMultiColour(svgdoc, PLID, initcolour, colourlist)

Pilot light control with multiple colours. This selects between a list of colours, depending on the value of the integer at the tag address. The colours must be defined in an array of strings. This array determines what colour is displayed for each integer value. Unlike MB_TextDisplay, this function does not display the text string itself. 


	var ColourList = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
	var PL4 = new MB_PLMultiColour(document, "PL4", "black", ColourList);

MB_PilotLightStat(svgdoc, PLID, initcolour, offcolour, oncolour, okstat)

Pilot light control. If the present value is equal to the comparison value, the light will turn "off", otherwise, it will turn "on". Any value not equal to the comparison value is considered to be the result of a condition which must be indicated. 


	// This is for the server status display on the test error screen.
	var ServerStat2 = new MB_PilotLightStat(document, "ServerStat2", "black",
		"green", "red", "ok");
	MBHMIProtocol.AddToDisplayList(ServerStat2, "stat", "stat");

MB_PilotLightFlashTransform(svgdoc, PLID)

Flashing pilot light control. The flashing does not depend on the scan rate. This uses the SVG animateTransform property. 


	var PLAN1 = new MB_PilotLightFlashTransform(document, "PLAN1");

Selector Switches

Selector switches rotate according to the state or value of a tag. These functions provide an output indication. Data input is via the push button methods. Any object capable of being rotated can act as a selector switch (e.g. values, dampers, etc.).

MB_2PosSSDisplay(svgdoc, SSID, offangle, onangle)

Two Position Selector Switch Control. This rotates an element to one of two angles, depending on whether the monitored value is off ("0") or on (non-zero). 


	// Pick and place selector switch control for vertical axis.
	var PPSSVertDisplay = new MB_2PosSSDisplay(document, "SSPPVert", -60, 60);
	MBHMIProtocol.AddToDisplayList(PPSSVertDisplay, "SSPPVert", "read");

MB_3PosSSDisplay(svgdoc, SSID, negativeangle, zeroangle, positiveangle)

Three Position Selector Switch Display. This rotates an element to one of three angles, depending on the sign (-ve, +ve, or 0) of the monitored value. 


	// Pump control selector switch position.
	var PumpSSwitchDisplay = new MB_3PosSSDisplay(document, "PumpSSwitch", -60, 0, 60);
	MBHMIProtocol.AddToDisplayList(PumpSSwitchDisplay, "PumpSpeedActual", "read");

Numeric and Text Displays

Numeric and text displays display numbers and text.

MB_NumericDisplay(svgdoc, NumberID)

Update a display of a number. This operates by changing the text property of an SVG string. 


	// Pump speed numeric display.
	var PumpSpeedDisplay = new MB_NumericDisplay(document, "PumpSpeedText");

MB_NumericFloatDisplay(svgdoc, NumberID, Decimals)

Update a display of a floating point number with control of the number of decimals displayed. This operates by changing the text property of an SVG string. 


	// Tank 1 fill level numeric display.
	var Tank1Number = new MB_NumericFloatDisplay(document, "Tank1Text", 2);
	MBHMIProtocol.AddToDisplayList(Tank1Number, "Tank1Number", "read");

MB_StringDisplay(svgdoc, NumberID)

Update a display of a string. This operates by changing the text property of an SVG string. 


	// Text string display.
	var DemoStringDisplay = new MB_StringDisplay(document, "DemoString");

MB_TextDisplay(svgdoc, TextMsgID, MsgList)

Update a display of a text message. This operates by changing the text property of an SVG string. The text messages must be defined in an array of strings. This array determines what text message is displayed for each integer value. 


	// This is for text indicators.
	Msg_HMIDemoColours = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
	// This is for the text display of pilot light colours.
	var PLColourText = new MB_TextDisplay(document, "PL4-Colour", Msg_HMIDemoColours);

Gauges, Columns, Pipes, and Pumps

Gauges, columns, pipes and pumps operate on various attributes, including fill and rotate. These functions can operate on any SVG graphic which has the appropriate attribute. This includes conveyors, ducts, etc.

MB_DialGauge(svgdoc, DialID, DialMin, DialMax, DataMin, DataMax)

Dial Gauge Indicator Control. This changes the rotate property of an SVG element. All angles are in degrees. The dial display angle is calculated as follows: (((newdata - DataMin) / DataMax) + DialMin) * (DialMax - DialMin)

On start up, the function will search for a "g" SVG tag within the SVG widget and apply the rotation to that. This means that any geometric shape can be rotated, but it must be enclosed within a group (<g></g>). 


	// Dial gauge graphic display. This is tied to Tank 1 level
	var Dial1 = new MB_DialGauge(document, "Dial1", 30, 330, 0, 4095);

MB_ColumnGauge(svgdoc, GaugeID, GradientID, MinData, MaxData)

Column level (including tank cut-outs) control. This operates by adjusting the linear gradient that is used to fill a "column" (any closed SVG object). A total of four "gradient stops" are used. The first and last are fixed at 0% and 100% respectively. The second and third are set to the value in the update parameter (which must be between 0 and 100%). By setting two adjacent gradient stops to the same value, a sharp colour transition is created, instead of a gradual one. The data is automatically scaled to 0% to 100% based on the MinData and MaxData parameters.

On start up, the function will search for a geometric shape to apply the fill to. The order of search is as follows:

  1. polygon
  2. rect
  3. circle
  4. ellipse

It also looks for the specified colour gradient (from the GradientID parameter) and makes a new copy of it. It then gives it an new id consisting of the column id (from the GaugeID parameter), plus "_FillGradient". It also creates ids for the gradient stops also based on the column id, plus "_StopA" and "_StopB". This results in a new gradient used by this column only. 


	// Tank 2 fill level graphic display.
	var Tank2 = new MB_ColumnGauge(document, "Tank2ID", "MB_Column_BlueGradient", 0, 500);

MB_Pipe2(svgdoc, PipeID, initcolour, offcolour, oncolour)

Indicate conditions in pipes or ducts. This is similar to MB_Pipe, but operates by adjusting the fill colour instead of the stroke. 


	// Pipe flow using pipes which change colour instead of animating.
	// This is different from a pilot light in that any non-zero value
	// is considered to be 'on'.
	var Tank2Pipe = new MB_Pipe2(document, "Tank2Pipe", "black", "green", "red");

MB_PumpRotate(svgdoc, PumpID, rotation)

Pump or fan control. This operates by adjusting the rotate property of the SVG element. Each update, the rotation amount is incremented by the amount specified in the "rotation" parameter. 


	// Pump rotation.
	var PumpRotation = new MB_PumpRotate(document, "Pump1", 19);

MB_PumpRotateAnimated(svgdoc, PumpID)

Animated pump rotation control. This provides a smooth continuous animation that does not depend on the scan rate. The rotation is on or off, and in one direction only. This uses the SVG animateTransform property. 


	// Animated pump.
	var PumpAni1 = new MB_PumpRotateAnimated(document, "PumpAni1");
	MBHMIProtocol.AddToDisplayList(PumpAni1, "PumpAni1", "read");

Miscellaneous

MB_SlideDisplay(svgdoc, SlideID, offposx, offposy, onposx, onposy)

Two Position Slide Control. This translates (slides) an element to one of two positions, depending on whether the monitored value is off ("0") or on (non-zero). 


	// Pick and place vertical axis.
	var PPVertDisplay = new MB_SlideDisplay(document, "PPVert", 0, 0, 0, 100);
 	MBHMIProtocol.AddToDisplayList(PPVertDisplay, "PPVert", "read");

MB_GraphicSelect(pagedoc, graphictable, tableoffset)

Select an SVG image from a list (array) of images. Each image must have a unique "id" string. This function hides or displays different parts to display only one at a time. This is compatible with the display list. 


	// Select a shape for display.
	var ShapeDemoDisplay = new MB_GraphicSelect(document, 
			["ShapeDemoCir", "ShapeDemoRect", "ShapeDemoOct"], 1);
	MBHMIProtocol.AddToDisplayList(ShapeDemoDisplay, "ShapeDemo", "read");

MB_GraphicShowHide(svgdoc, GraphicId)

Display or hide an SVG image. 0 = hide the image. 1 = Show the image. A typical application is to use it to control an enable/disable "mask" over a push button. Hiding the mask will "enable" the push button (uncover it, while showing the mask will "disable" the push button (cover it so it cannot be activated). This is compatible with the display list. 


	var PB1Mask = new MB_GraphicShowHide(document, "PB1Mask");
	MBHMIProtocol.AddToDisplayList(PB1Mask, "PB1Mask", "read");

Strip Charts

MB_StripChart(svgdoc, ChartID, MaxPoints, XInc, YScale, TimeInterval)

Update a strip chart. This operates by changing the points property of an SVG polyline. 


	// Strip charts.
	var DemoChart1 = new MB_StripChart(document, "demochart1", 50, 10, 1, 1.0);
	MBHMIProtocol.AddToDisplayList(DemoChart1, "StripChart1", "read");

Data Entry:

Data entry is also possible using normal push button increment/decrement operations. See the section on push buttons for more information.

MB_NumericPad(svgdoc, NumberID, MaxDigits)

Implement a numeric entry pad. This does not use the display list. 


	// Numeric display. This does not get added to the display list.
	var MBT_NumberPad = new MB_NumericPad(document, "MBT_NumberPaddisplay", 12);

The numeric pad expects the Javascript object to be named "MBT_NumberPad". You use a separate numeric "STR" (store) button to write the accumulated value of the numeric pad to the server. You do not add the "MBT_NumberPad" object to the display list.

Screen Select Control:

MB_ScreenSelect(pagedoc, screentable)

Select which HMI "screens" are visible. The "screens" are all parts of the same xhtml document. This function hides or displays different parts to give the illusion of different screens being selected. This operates by changing the "display" property of the style between "none" and "block". When activated, all screens in the "screentable" list are set to "none", then the selected screen is set to "block".

MB_ScreenSelect does not work with the display list. It is operated directly by calling the SelectScreen propery with a string parameter containing the id of the desired screen.

The following example shows how MB_ScreenSelect interacts with "onclick" to create HTML menus. If you use the provided page templates these menus are already created for you. See the documentation on adding menu buttons to select SVG graphical screens to see how to use this with drag and drop editing using Inkscape. 


	// Make a list of all the screens that can be selected.
	var ScreenTable = ["mainscreen", "eventscreen", "alarmscreen"];
	// This creates an object that controls display of the screens.
	var ScreenSelect = new MB_ScreenSelect(document, ScreenTable);

	<!-- This creates the HTML menu. -->
	<div id="nav">
	<ul>
	<li><a onclick = "ScreenSelect.SelectScreen('mainscreen')"> Main</a></li>
	<li><a onclick = "ScreenSelect.SelectScreen('eventscreen')"> Events</a></li>
	<li><a onclick = "ScreenSelect.SelectScreen('alarmscreen')"> Alarms</a></li>
	</ul>
	</div>