Diagrams
Drawings can be used to display IoT values stored in topics and values can also be modified by clicking on elements in the drawing. In this example we show how this can be used to display the current state of an irrigation system and how the user can control it by clicking on valves and pump in the drawing.
Special topics
The link between the SVG drawings and topics are implemented by special topics. These topics can be created manually or with an import connector.
| topic | Description |
|---|---|
| geometry | Name of SVG file or drawing with parameters. |
| translation | Comma separate list of x,y values for positioning the drawing. |
| rotation | Comma separate list of angle and x,y values for the rotation center point. |
| scale | Comma separated list of x,y values for scaling the drawing. |
Topics
The example below shows how to link IoT values stored in topics to the drawing. The topics are connected to the drawing with the geometry attribute. This includes the name of the drawing and a single parameter, in this case the name of the topic 'irrigation_0'.
irrigation_0.geometry = Irrigation(irrigation_0)
irrigation_0.pump = 0
irrigation_0.valve1 = 1
irrigation_0.valve2 = 0
irrigation_0.valve3 = 1
irrigation_0.scale = 0.5, 0.5
When a name of a topic is specified, the parameter is converted to a JSON object that contains the fields and values of the sub topics. So in this case the irrigation_0 topic is converted to the following object:
let irrigation_0 = {
"pump": 0,
"valve1": 1,
"valve2": 0,
"valve3": 0,
"scale": 0.5, 0.5
}
A second drawing with different values is shown below. The settings for the pumps and valves are different. The drawing is positioned 400 pixels to the right of the first drawing.
irrigation_1.geometry = Irrigation(irrigation_1)
irrigation_1.pump = 1
irrigation_1.valve1 = 0
irrigation_1.valve2 = 1
irrigation_1.valve3 = 1
irrigation_1.scale = 0.5, 0.5
irrigation_1.translation = 400,0
Diagram
From the navigation menu select the option Diagrams. Then click the button Add to create a new diagram. In the diagram click on the + button to add topics to display in the diagram. When you click on the pumps or valves in the diagram, the values of the related topics are updated. The diagram functions as a custom user interface component such as a date picker of slider.
