7) Create the Application Specific Javascript

This section discusses the steps required to add the application specific Javascript to drive the communications and display update. It does not however document the functions used. For information on these, see the on-line help that comes with the HMI or soft logic system.

7.1) Find the Browser Javascript

This will be the Javascript which animates your SVG output objects. Find the following in your web page:


		// DO THIS: Application specific code goes here.
		// ######################################################################
	
	
		// ######################################################################

This will be in the large Javascript block near the end of the file. Your application specific Javascript (display code objects) will go here.

7.2) Create the Display Code Objects

This creates the Javascript objects which animate each SVG display object. You will need a Javascript code object for each SVG display output object that you wish to control. Input devices such as push buttons or numeric inputs do not need display code and the input code is integrated with the SVG (see the documentation above on how to configure these inputs). However, pilot lights, numeric text displays, gauges, and other output display objects require a Javascript code object for each independent SVG object.

Selector switches are a special case as they combine both input and output functions together. The input functions are part of the display SVG and the support scripting is integrated with the SVG (the same as with a push button). The rotational position of the switch operator however is an *output* function and requires display code to rotate the switch (just like with dial gauges). The same applies to certain other combined input/output objects such as illuminated push buttons.

Each display code object requires two function calls - one to create the object, and one to add it to the "display list". The display list is the list of code objects that you are requesting to have updated on a regular cycle.

This examples shows creating a pair of pilot lights:


		// This defines a pilot light control.
		var PL1 = new MB_PilotLight(document, "PL1", "black", "green", "red");
		// Now, it to the list of things to update.
		MBHMIProtocol.AddToDisplayList(PL1, "PL1", "read");
	
		// This is another pilot light.
		MBHMIProtocol.AddToDisplayList(PL2, "PL2", "read");
		var PL2 = new MB_PilotLight(document, "PL2", "black", "green", "red");

This is for a numeric display:


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

And for a selector switch position:


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

See the HMI server documentation for a list of HMI display functions and their parameters.

Help Topics

Topic Details for HMI

Assembling Web Pages

7) Create the Application Specific Javascript

7.1) Find the Browser Javascript

7.2) Create the Display Code Objects