1. Home
  2. TC1.22a: Create and configure a Snap4City SVG Custom Widget for real-time interaction

TC1.22a: Create and configure a Snap4City SVG Custom Widget for real-time interaction

×

Warning message

  • You can't delete this newsletter because it has not been sent to all its subscribers.
  • You can't delete this newsletter because it has not been sent to all its subscribers.

Test Case Title

 TC1.22a: Create and configure a Snap4City SVG Custom Widget for real-time interaction

Goal

Create a Snap4City SVG custom widget and configure it to be embedded in a Snap4city dashboard.

Prerequisites
  • To know how to create SVG grphics file using an editor;
  • To be logged in the Snap4city platform;
  • To know how to create dashboards.

Expected successful result

A Snap4City SVG custom widget is correctly shown in a dashboard and interact in realt time with the system.

Steps

See details below

This tutorial aims at training you in creating Snap4City SVG Custom Widgets.

The second part of this tutorial aims to training in the instantiation of the Synoptic and in the creation of a dashboard with the instantiated synoptic: TC1.22b: Create and configure a Snap4City SVG Custom Widget for real-time interaction

The full process explained in this tutorial is simplified in the following image.

Please note that Custom Widget can be created by using: (i) the newly procedure presented in this technical case as well as (ii) in PHP JavaScript HTML5 by programmers as described in TC3.11 - New graphics widget can be easily created, Dashboard Widget Creation.

Please note that Custom Widgets can be directly controlled from IOT Applications to create event driven solutions: TC9.19: Custom Widgets / Synoptics controlled by IOT Applications

Snap4City SVG Custom Widgets can be used to create a synoptic panel in widget of a dashboard as well as a single graphic widget also embedded in a Snap4City dashboard.

see for example: https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU0NA==

In the following we have two phases:

  • How to create the Snap4City SVG Custom widget (part a);
  • How to use one Snap4City SVG Custom widget (part b).

SVG files are vector graphical representations that can be embedded into a Snap4City widget dashboards and that can show data and interact with the platform, for example showing the data from different devices deployed in an industrial plant or interacting with physical devices to send command and/or data. Synoptic panels are extensively used in Industry plants but are flexible enough and can be profitably used also in different contexts. Examples of different custom synoptics and widgets based on SVG are available in this page: Custom Synoptics and Widgets for Dashboards.

In this example we will create and configure a SVG file representing 5 different coloured faces that could be used to collect the feedback from users of a service. The 5 faces represent the rating of the services and will have the following values: very angry, angry, neutral, happy, very happy. Each faces represent the following numeric values respectively: -2, -1, 0, +1, +2.

Once the SVG file is correctly configured and finalised, it has to be saved in Snap4City as a template to be used in different dashboards and contexts (instances).

In this example the idea is to create a SVG template where each time a user clicks on a face to rate the service, the information is send to the Snap4City platform that save the corresponding value data as MyKPI. In the SVG also the total number of clicks and the mean of the values collected are shown in real time.

This SVG custom widget is an example that has the scope to demonstrate the potentiality and flexibility of using SVG custom widget interaction.

How to create a Snap4City SVG Custom Widget

To design and configure the SVG file, the InkScape open source software is used (https://inkscape.org). The following image is the SVG file used as example. The Custom Synoptics/Widgets are created by using SVG standard. To this end we suggest to use the freely available open-source tool, namely the SAGE - SCADA Animation Graphic Editor, is the recommended tool for the development of SVG documents. https://sourceforge.net/projects/sage-scada/

In the following examples, Inkscape v0.48 is used. Some differences with respect to newer versions could be present in the user interface.

In this example, the five coloured faces is a single PNG image file that has been imported in the InkScape canvas and that will remains in the background of the SVG file.

By using the SVG editor, five circle have been added above each face so that each face has a vector circle designed above (that in the image is not visible) and that will be the interactive element to be used to activate the different rates.

To add a circle, in the Tool Box on the left, select the “Eclipse, Circle, and Arcs” tool and design five different circles above the different faces. The circles have to overlap the 5 faces and have to fit perfectly.

It now necessary to manually edit the XML of the SVG file since we have to add attributes to the different elements of the SVG image that have to send or retrieve data to/from the Snap4City platform. In this manner the SVG template is correctly configured by defining the new attributes describing the read/write operations to be executed on the new variables that will be defined.

To instruct the system to read a variable and use the value read to modify some aspect (textual content, attribute value, style property value) of an element in the SVG custom widget, it is necessary to add to that element a data-siow attribute, whose value will be a JSON array (with appropriate escapes of the double quotes and so on), whose elements are JSON objects each describing a set of operations to be performed on the basis of the variable read.

In our case we will add attributes for:
- the five coloured faces, that have to send to the platform the corresponding value (from -2 to 2, according to the different value associated to the faces);
- the total number of clicks;
- the mean value calculated on the basis of the different values collected by the system.

Please note that we have to consider as output data a message that is sent from the client (the user device) to the server (snap4city platform), and as input data a message that is retrieved from the server and are shown by the client. So that in our case, the five faces values have to be provided as output and the total number of click and the mean values, that are recovered from the server, are input values.

We add now an attribute to the red face representing the value “-2” that is the output value that will be sent to the Snap4City platform each time a user click on it:

  1. Enter in XML edit mode by selecting Edit --> XML Editor in the main menu (or by clicking SHIFT-CTRL-P). The XML Editor is opened on the right. It displays the entire XML tree of the document. By using the XML Editor it is possible to edit any text, element, or attribute nodes and see the result on your canvas.

  1. Click on the circle above the red face. The circle is selected and the XML Editor shows the code corresponding to the element selected.
  2. In the XML editor column, also the yet existing attributes for the selected element are shown in another box on the right of the XML code, as in the image below;

 

  1. To edit an attribute, click on it, for example click on the attribute name Id. The attribute value is shown, as in the following image;

 

  1. You can change the Attribute Value by editing the corresponding text in the box. For example delete the Id value and write “very-bad”. Click the Set button to confirm the change (or press CTRL+Enter). The new value is shown in the attribute box.

 

  1. Every time a change is performed, it is necessary to commit all changes by pressing Ctrl + Enter when doing editing, or by pressing the Set button.

 

  1. Change all remaining IDs of all the other faces in “bad”, “so-and-so”,  “quite-good”, “good” respectively. Press the Set button to confirm each changes or press Ctrl-Enter to commit the changes. The final result will be as in the following image;

 

  1. Now we add a new attribute called “data-siow” that allows the SVG file to send the corresponding value to the platform. Click on the red face and select the hidden circle above it.
  2. In the empty field below the attributes of the selected element, write a new attribute name: data-siow;
  3. As attribute value, below the new data-siow attribute name, copy the following text:

[  {   "event": "click",   "originator": "client",   "actions": [    {     "input": "attribute data-value",     "target": "write", "format": "{ \"attr\": \"set\", \"tag\": \"s4csvg_userFeedback\", \"src\": \"{0}\" }"    }   ]  } ]

  1. Click Set to confirm;

Please note that to be automatically recognised by the system, the new added variables have to have the prefix “s4csvg_” as placeholder.

  1. Write another new attribute name: data-value;
  2. As attribute value, below the new data-value attribute name, write “-2”. The final result will be as in the following image.