SVG SCADA drawings are interactive. They are firstly
created using standard SVG shape elements. The resulting svg elements are then animated using a network for communication to/from field control devices and the SCADA operator's selections.
1.) Creating SVG Shape Elements
Each element includes its unique pane to set & edit its specific values. Click on the element's button to use its pane to create and place the element in the drawing.
After an element is created, it can be edited by moving the cursor over the element, then right-click the mouse button.
Paths - Both linear and curved paths can be created by clicking their points on the drawing. Drag any point to modify its shape.
Paths can also create 3d-like pipelines:
Symbols - This a list of thirty(30) polygons that can be created and placed in the drawing.
Icons - Over 500 icons created from groups of unicode text elements: DINGBATS, GEOMETRIC, ARROWS, MATHEMATICAL, TECHNICAL, and SYMBOLS.
Textures - Three(3) types of pre-built patterns are available: circles, lines, and paths. The pattern is placed in either an element's fill or stroke.
Gradients - Radial and linear gradients can be created to be placed in either an element's fill or stroke.
Shadows - Each element can be selected to include a drop-shadow.
Save/Edit SVG Drawing - You may save the drawing within an .svg drawing stored on your computer. It can then be edited in the future by placing the file in the textarea, under the 'Existing SVG' selection.
Libraries - Three(3) SVG image libraries are available:
ISA Symbol Library
Components Library
Process Equipment Library
HMI Symbols - These symbols can be customized and inserted into your drawing. Also they can be programmed as interactive at central monitoring (SCADA) via SVG + JavaScript.
These are examples of communication to/from an operator's interactive SVG SCADA drawings.
It takes field transmitter values, equipment status, and client requests; sending this data to interact with the SVG SCADA drawing. It also obtains SCADA operator selections and sends the request to the associated field devices.
JavaScript and SVG source are shown for each example.