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

Help Topics

Manual HMI Web Page Construction

Help - HMI Pipes and Pumps

Overview:

Pipes and pumps can be used to provide a graphical indication of the function of a process system. The possibilities include more than just pipes and pumps. Any continuous flow or motion can be indicated, including gases, conveyors, feeders, and other devices.

Pumps and Fans:

Pump

A "pump" (or fan) is a graphical element that is animated continuously by rotating a an SVG element. The pump can monitor an integer value which determines the direction of rotation. Any graphical element capable of being rotated can be used as a "pump".

SVG

The pump consists of a decorative background ("MB_PumpFrame") and rotating centre ("MB_PumpRotor"). The background can be any colour or gradient. The rotor can be any colour in combination with yellow. 


	<!-- This is a rotating pump. -->
	<defs>
		<!-- The outer case of the pump. -->
		<g id="MB_PumpFrame">
			<polygon points="-25,0 -40,40 40,40 25,0" />
			<circle cx="0" cy="0" r="25" fill="yellow"/>
			<circle cx="0" cy="0" r="25" fill="none" stroke-width="10" />
		</g>
	
		<!-- This is the rotor for the pump. -->
		<g id="MB_PumpRotor">
			<polygon points="-22,0 22,0 15,-15 0,-22 0,22 -15,15 -22,0" />
		</g>
	
	</defs>

This shows how to use the pump. 


	<g transform="translate(162,50)">
		<!-- This is the body of the pump. -->
		<!-- <g fill="purple"> -->
		<g  fill="url(#MB_IndigoGradient)" stroke="url(#MB_IndigoGradient)">
			<use xlink:href="#MB_PumpFrame"/>
		</g>
		<!-- This is the pump rotor. -->
		<g id="Pump1" fill="red">
			<use xlink:href="#MB_PumpRotor" />
		</g>
	</g>

Javascript


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

Javascript Library Functions:

The following Javascript library functions are useful for this feature:

How it works:

The pump works by monitoring an integer value. The pump object is initialised with a reference to the SVG element, and with a rotation increment (in degrees). If the monitored value is zero, the pump is stationary. If the monitored value is positive, the rotation increment is added to the existing angle. If the value is negative, the rotation increment is subtracted from the existing angle. A larger rotation increment will give the appearance of a faster rotation speed. The rotation increment may be positive or negative. Using a negative increment will cause reverse rotation relative to the monitored value.

Animated Pipes, Ducts, and Conveyors Using Gradients:

Animated pipes give the appearance of motion by moving a colour gradient along a line or rectangle. This can be used to indicate motion in pipes, ducts, conveyors, and other similar devices. These can be any shape or size.

SVG

Pipe

Pipes may be constructed using rectangles. These are animated by manipulating the "fill" property via a linear gradient. Adjusting the "x" and "y" parameters will change the direction of flow, as well as the separation between colour bands. The colours are changed by changing the "stop-colour" parameters. Multiple pipes can share the same gradient, and so be animated together. The 'spreadMethod="repeat"' parameters is what cases the colour gradient to be repeated. 


	<!-- This displays the flow in the piping. The X and
			Y parameters control the direction the gradient moves in.-->
	<linearGradient id="PipeFlowV" spreadMethod="repeat" 
			x1="0%" x2="0%" y1="0%" y2="50%">
		<stop id="PipeFlowVA" offset="10%" stop-color="white" />
		<stop id="PipeFlowVB" offset="20%" stop-color="blue" />
	</linearGradient>

	<linearGradient id="PipeFlowH" spreadMethod="repeat" 
			x1="0%" x2="40%" y1="0%" y2="0%">
		<stop id="PipeFlowHA" offset="10%" stop-color="white" />
		<stop id="PipeFlowHB" offset="20%" stop-color="blue" />
	</linearGradient>


	<g transform="translate(120,225)">
		<!-- Vertical pipe from tank 1 to first bend. -->
		<rect x="0" y="0" width="10" height="50" fill="url(#PipeFlowV)" />
		<!-- Horizontal pipe from bend below tank 1 to pump. -->
		<rect x="0" y="50" width="140" height="10" fill="url(#PipeFlowH)" />
	</g>

Javascript

Each gradient must be animated separately. This example is using separate gradients for vertical and horizontal flow to allow the appearance of the flow to travel along the pipe in each case. 


	// Pipe flow for vertical pipes.
	var PipeFlowV = new MB_PipeFlow2(document, "PipeFlowVA", "PipeFlowVB", 20);
	MBHMIProtocol.AddToDisplayList(PipeFlowV, "PumpSpeedActual", "read");

	// Pipe flow for horizontal pipes.
	var PipeFlowH = new MB_PipeFlow2(document, "PipeFlowHA", "PipeFlowHB", 20);
	MBHMIProtocol.AddToDisplayList(PipeFlowH, "PumpSpeedActual", "read");

Javascript Library Functions:

The following Javascript library functions are useful for this feature:

Note: An older version of this function called "MB_PipeFlow" is also provided for compatibility reasons. The older version required a more complex linear gradient definition. The new version "MB_PipeFlow2" should be used in all new applications.

How it works:

The animated pipe uses colour gradients in a manner similar to that of tanks and column gauges. However, the pipe adds an additional gradient stop and adjusts the gradient values continuously. This gives the appearance of a bubble of colour moving along a line. A rectangle, polyline, or other closed shape may be used.

The animated pipe operates in a manner similar to that of the pump, except it changes a gradient instead of applying a rotation. It monitors for zero, negative, and positive values, and uses this to determine whether to add or subtract a flow increment integer. This means a pipe can monitor the same tag as a pump and the animations will be coordinated between them.

Pipes, Ducts, and Conveyors Using Colour Change:

An alternative representation for pipes, ducts, conveyors, etc. is to change the colour of a rectangle or line. This has less overhead than continuous animation and so may be more suitable for very complex graphics or very slow client computers. It may also be used in applications where animation is not desired for style or appearance reasons.

SVG for Rectangles

Pipe

In this example we have grouped several rectangles so we can manipulate them together. 


	<!-- Group these pipes together so we can alter them using only one id. -->
	<g id="Tank2Pipe">
		<!-- Vertical pipe from tank 2 to first bend. -->
		<rect x="300" y="0" width="10" height="50" />
		<!-- Horizontal pipe from bend below tank 2 to pump. -->
		<rect x="190" y="50" width="120" height="10" />
	</g>

Javascript for Rectangles

The Javascript for rectangles manipulates the "fill" property. 


	// 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");
	MBHMIProtocol.AddToDisplayList(Tank2Pipe, "PumpSpeedActual", "read");

SVG for Polylines

Pipe

Polylines can also be used. 


	<!-- This pipe simply changes colour. -->
	<polyline id="Dial1Pipe" fill="none" stroke="black" stroke-width="10"
					points="175,255 250,255 250,240" />

Javascript for Polylines

The Javascript for polylines manipulates the "stroke" property. 


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

Javascript Library Functions:

The following Javascript library functions are useful for this feature:

How it works:

The coloured pipe object monitors a value. If the value is zero, the SVG "fill" or "stroke" property is set to the "off" colour. If the value is non-zero, the SVG "stroke" property is set to the "on" colour. MB_Pipe and MB_Pipe2 differ from a pilot light in that the data for a pilot light must be "0" or "1", while a pipe may be "0" for stopped, and any other numeric value for flowing ("on").