High-Performance HMI Operator Screen
A modern high-performance HMI (HPHMI) operator screen built entirely with GoJS, inspired by the ISA-101 design philosophy used in control rooms. The HPHMI screen is deliberately gray and color, motion, and blinking are reserved for abnormal situations. A gray screen signifies a healthy process.
The mimic shows a beverage mix & transfer skid: a jacketed mix tank (TK-101) fed by a water and a concentrate stream, with a transfer pump (P-102) to storage. Process values update live with first-order lag and noise. Click the feed valves or the pump to toggle them (white = open/running, dark = closed/stopped) and watch the level, flow, and pressure respond.
The alarm banner shows a priority square (1 = urgent red, 2 = warning amber, 3 = advisory cyan) for each alarm that blinks at 1 Hz while unacknowledged. Click ACK on a row or ACK ALL to acknowledge; an alarm clears on its own once the value returns to normal. The skid runs as a continuous flow-through: stop the pump to watch the level climb toward a high alarm, or close the feed valves to drain it toward a low alarm.
This sample demonstrates a Diagram used as a non-editable but clickable application screen that scales with Diagram.autoScale set to AutoScale.Uniform. It uses item arrays to build the alarm banner. A model-data binding (Binding.ofModel) updates the synchronized blink from a single source-of-truth object holding the process data.
GoJS Features in this sample
SCADA Diagrams
SCADA (supervisory control and data acquisition) diagrams are used to display, control, and supervise machines and processes. GoJS is used worldwide to build human-machine interface diagrams in monitoring and control software. GoJS SCADA applications include power plant and refinery monitoring, heavy industry management, building security monitoring, and more.
Item Arrays
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS learn pages.
Geometry Path Strings
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS learn pages.