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

Help Topics

Topic Details for HMI

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 ("libmbhmi.js") is implemented as a series of independent objects. Most of these objects are designed to be compatible with the HMI communications library "display list".

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.

SVG Property Function
fill MB_PilotLight
fill MB_PLMultiColour
fill MB_PilotLightStat
fill MB_Pipe2
stroke MB_Pipe
colour gradient stops MB_TankLevel
colour gradient stops MB_PipeFlow2
rotate MB_2PosSSDisplay
rotate MB_3PosSSDisplay
rotate MB_DialGauge
rotate MB_PumpRotate
translate MB_SlideDisplay
text value MB_NumericDisplay
text value MB_StringDisplay
text value MB_TextDisplay
polyline data MB_StripChart
hide/show MB_GraphicSelect
hide/show MB_LEDDigit
hide/show MB_ScreenSelect

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, onstat)

Pilot light control. If the present value is equal to the comparison value, the light will turn "on", otherwise, it will turn "off". 


	// 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");

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. Also see "MB_LEDDigit" for displaying numbers which give the appearance of 7 segment LED displays.

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, Tanks, Pipes, and Pumps

Gauges, tanks, 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, dialoffset, offset, gain)

Dial Gauge Indicator Control. This changes the rotate property of an SVG element. 


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

MB_TankLevel(svgdoc, TankID1, TankID2)

Tank level control. This operates by adjusting the linear gradient that is used to fill a "tank" (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. 


	// Tank 2 fill level graphic display.
	var Tank2 = new MB_TankLevel(document, "TFill2A", "TFill2B");

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

Indicate conditions in pipes or ducts. This operates by adjusting the stroke colour according to whether the value being monitored is zero or not. 


	// Connect the dial gauge to the tank.
	var Dial1Pipe = new MB_Pipe(document, "Dial1Pipe", "black", "green", "red");

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_PipeFlow2(svgdoc, PipeID1, PipeID2, flowinc)

Flow of liquids or gases in pipes or ducts. This operates by adjusting the linear gradient along a stroke (line) or fill (rectangle). A totale of 2 gradient stops are required. The SVG "spreadmethod" is used to cause the resulting colour bands to repeat. At each update, the stops are incremented by the amount specified in the parameter "flowinc". The incremented value wraps around to ensure it remains between 0% and 100%. This produces the effect of a series of coloured "bubbles" which moves through the "pipes".

Note: This version replaces the older "MB_PipeFlow" and should be used in new applications. 


	// 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_PipeFlow(svgdoc, PipeID1, PipeID2, PipeID3, flowinc)

Flow of liquids or gases in pipes or ducts. This operates by adjusting the linear gradient for the stroke property along a polyline (SVG object). A total of five "gradient stops" are used. The first and last are fixed at 0% and 100% respectively. The second is set to a value which is incremented each update. The third is set to the second value plus 5%, and the fourth is set to the second value plus 10%. At each update, the second value is incremented by the amount specified in the parameter "flowinc". The incremented value wraps around to ensure it remains between 0% and 100%. This produces the effect of a coloured "bubble" which moves through the "pipe".

Note: This has been replaced by MB_PipeFlow2. This obsolete version is present only for compatibility with older applications. 


	// Pipe flow.
	var PipeFlow = new MB_PipeFlow(document, "PipeFlowA", "PipeFlowB", "PipeFlowC", 10);

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);

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_LEDDigit(pagedoc, ledtable, leddigit)

Display a single digit of an integer as an LED 7 segment style graphic. This selects an SVG image from among the 10 possible images to display according to the value of an integer. 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. 


	// Seven segment display demo.
	var SevenSegA1 = new MB_LEDDigit(document, 
			["LEDA10", "LEDA11", "LEDA12", "LEDA13", "LEDA14", "LEDA15", 
			"LEDA16", "LEDA17", "LEDA18", "LEDA19"], 1);
	MBHMIProtocol.AddToDisplayList(SevenSegA1, "LED7Segment", "read");

MB_SVGPushButton(svgdoc, GradStop1, GradStop2)

This is intended to provide visible feedback when a user clicks on an SVG push button. This operates by adjusting the linear gradient. The function reverses the gradient colours to reverse the gradient colour pattern. This to be is used with the onmousedown, onmouseup, onmouseout events.

Note: CSS styling is the recommended way to animate SVG push buttons. This is an alternative method if there is some reason why CSS can't be used. 


	// This demonstrates using Javascript to give operator feedback when
	// pressing a push button. This is an alternative to using CSS.
	var PB3svg = new MB_SVGPushButton(document, "PB3Gradient1", "PB3Gradient2");

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 NumberPad = new MB_NumericPad(document, "numberpaddisplay", 12);



	<!-- Provide a text display area. -->			
	<rect x="20" y="20" width="150" height="50" rx="15" fill="white"/>
	<text id="numberpaddisplay" x="22" y="50" font-size="20" 
			stroke-width="2px">????????????</text> 



	<!-- Each digit must be associated with a button and called
		with an integer parameter corresponding to the desired value
		(3 in this example). -->
	<g  transform="translate(90, 90)" id="svgbuttondef"
			onclick="NumberPad.AppendDigit(3);">
		<rect x="0" y="0" width="35" height="35" rx="5"
				fill="url(#NumericEntryButtonGradient)"/>
		<text x="8" y="25" font-size="24" stroke-width="2px">3</text> 
	</g>


	<!-- The current value can be cleared by calling "ClearDisplay". -->
	<g  transform="translate(70, 180)" id="svgbuttondef"
			onclick="NumberPad.ClearDisplay();">
		<rect x="0" y="0" width="55" height="35" rx="5"
				fill="url(#NumericEntryButtonGradient)"/>
		<text x="8" y="25" font-size="20" stroke-width="2px">CLR</text> 
	</g>


	<!-- The current value can be retrieved as an integer by
		calling "GetValueInt". -->
	<g  transform="translate(0, 180)" id="svgbuttondef"
			onclick="MBHMIProtocol.WriteImmediate('Testholdingreg32', 
				NumberPad.GetValueInt());">
		<rect x="0" y="0" width="60" height="35" rx="5"
				fill="url(#NumericEntryButtonGradient)"/>
		<text x="8" y="25" font-size="20" stroke-width="2px">STR</text> 
	</g>

	<!-- Or as a float by calling "GetValueFloat". -->
	<g  transform="translate(0, 180)" id="svgbuttondef"
			onclick="MBHMIProtocol.WriteImmediate('Testholdingregfloat', 
				NumberPad.GetValueFloat());">
		<rect x="0" y="0" width="60" height="35" rx="5"
				fill="url(#NumericEntryButtonGradient)"/>
		<text x="8" y="25" font-size="20" stroke-width="2px">STR</text> 
	</g>

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. 


	// 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>