How To Show Values in a Scada Widget

This How To explains the use of a SVG graphics in a SCADA widget displaying measurement values and use boolean flags for displaying image content only when certain conditions based on measurements are true.

1. As introduction please read the actual SCADA widget documentation.

2. For this How To a decent SVG editor is required. In this How To the Inkscape editor is used. Please download the software and install it.

3. Download the SVG graphics pump.svg, which represents a pump application with a motor, and open it in Inkscape.

   

   The following steps will show how to extend the SVG image to

   • display the current flow value of the pump and
   • a boolean state representing if the motor is on or off
   
   

4. In Inkscape add a text field and enter the text {{flow}}. Then make the text bold.

   

   The double curly brackets are important, they will signal the SCADA widget that the name, here flow, is to be replaced with an actual value of a measurement.

5. For the SCADA widget to correctly recognize the flow placeholder with a value one needs to add an additional XML entry:

   1. For this open the XML editor within Inkscape Edit → XML Editor, or use Ctrl+Shift+X.
   2. Then double click on the {{flow}} text. The correct XML entry, which represents the text field, is now selected.
   3. In the right property bar add a new XML attribute by clicking on the plus symbol +.
   4. Add in the new attribute’s Name column the value data-placeholder and in the Value column {{flow}}.
   
   

   

6. Due to adding the flow text field the page is now a bit too small. To adjust the page size

   1. de-select any elements, by clicking within Inkscape somewhere where no element is locate and then
   2. use the short cut Ctrl+Shift+R to resize the page.
   
   

   

7. Now it is time to visualize the motor’s on/off state. The idea is that a green circle is shown when the motor is running and a red circle when the motor is off. You can draw your own images within Inkscape or use the prepared SVG image Download this SVG image on_off.svg and open in another Inkscape window. Then copy the circles from the second Inkscape window into the window where the pump/motor image is and position the motor on/off state objects next to the motor.

   

8. Add necessary XML attributes such that the green motor-on circle is only shown when motorOn placeholder’s value is true:

   1. Select the motor-on green cycle.
   2. In the XML editor add a new attribute with Name data-placeholder and Value {{motorOn}}.
   3. And add another XML attribute with Name ng-show and Value motorOn.
   
   

   

   The ng-show attribute is an AngularJS directive which basically says when an object shall be shown. For more information see AngularJS documentation on ngShow directive. The configuration here means that if the value of motorOn placeholder is true, then show the object, i.e. the green circle. Otherwise when motorOn is false don’t show the object.

9. Behind the green motor-on cycle is a similar cycle which is gray. The gray circle should be shown when the motor is off. Select the gray circle behind the green one, either directly in the XML editor or e.g. by moving temporarily the green circle behind the gray one using either Object → Lower or Page Down short cut. Then the gray circle is selected create the following XML attributes:

   • with Name data-placeholder and Value {{motorOn}} and
   • with Name ng-show and Value !motorOn
   
   

10. The on-state part is done now. Repeat the same for the red off-state and the gray circle behind the red one, but invert the boolean expression for the motorOn placeholder to reflect that the red circle shall be shown when the motor is off and the gray one when the motor is on.

11. Save the SVG file with filename pump_value.svg. If for instance something went wrong, here is the finished SVG file pump_value.svg

    

12. Go to dashboard tenant and prepare a device and assign the device to the group in which you want to create the SCADA widget. Make sure to send flow and motor on/off state information as measurement to this device. In the following the name pump_app will be used to refer to this device.

13. In the dashboard application go to the group and dashboard and add a new SCADA widget:

    1. Select the image file pump_value.svg
    2. Select the pump_app device

    
    

    The SCADA widget configuration shows now that there are two placeholders in the SVG image flow and motorOn:

    

14. When moving the mouse over the first place holder flow, three icons appear:

    

    The icons are used to configure a placeholder and define from where values are assigned to a placeholder:

    1. Select the third icon Assign device property.
    2. In the opened dialog select Last measurement (the third item from the bottom) and click on Select
    3. In the next dialog one connects the placeholder with an actual measurement. Click on Add data point and select the value which represent the flow reading. Then click on Add.
    4. As return type select Value and unit.
    5. Turn on the selected flow data point and click on Save.
    
    

15. Repeat the same procedure, as done in the last step, also for the motorOn placeholder. But this time use the data point which represents the motor on/off boolean information. In the lastMeasurement dialog use as return type Only value.

16. After all placeholders have been properly assigned to data points, the SCADA widget configuration shows a preview which already correctly interprets the measurements:

    Click on Save to store the widget configuration.

17. Change now measurement values for the flow measurement and the motor’s on and off state and you can see that the SCADA widget represents the changes information correctly: