IoT Devices on Sofia2. Integration and Management (IV. Data Visualization)

This is the 4th post of the series “IoT Devices on Sofia2. Integration and Management”:



Part I. Overview

Part II. User and Ontology creation

Part III. Connecting to the Device



As a recap of the series, we have already covered design & configuration for the involved Ontology, together with the integration of our selected sensing IoT devices (TI’s SensorTag + Android Smartphone) with Sofia2 IoT Platform. At this point we should have valuable sensor data on the platform, but data still remain unused. In this post we are going to display this data in real time and in a usable way. To achieve this we are going to use 2 different representation tools within Sofia2 Platform:


  • Dashboard
  • Synoptic view




Dashboard composition

Sofia2 provides a powerful yet easy to configure set of gadgets and dashboards with the aim of giving a proper sense to data. To gain access to these features, you must navigate to the Visualization menu and then to the My Gadgets submenu.





After clicking on the New Gadget button, you will navigate to the wide set of Gadgets you may use as a user.



In our scenario, we will create a pair of Simple Value gadgets in order to show temperature data from SensorTag. We will also create a pair of Column gadgets to visualize the X,Y and Z axis from the accelerometer and the gyroscope on SensorTag.


First of all you will need to give any gadget a name. Then you have to select the associated ThinKP in order to give the gadget access to the previously configured Ontology.




Once the proper ThinKP is selected, you may select two different ways to obtain data from the Ontology:


  • Live data: In this setup, the gadget is subscribed to the Ontology and will represent any change on the mapped value.


  • Periodic on-demand query: In this setup you will need to define a data query and a time interval. Upon interval expiration, the defined query will be executed on the selected DB (BDTR – Real-Time DB or BDH – Historic DB) and the gadget will be refreshed with the obtained values.



For the Simple Value gadgets, we are using the second option. Every 20 seconds the following query is executed on the RTDB (it extracts the last value from the ontology):





Once the dataset is chosen, you will need to select the Ontology field you want to display, give it a name, and, as an option, you may define a transformation on the raw data to be applied prior displaying the values.




Now there is only one more thing left. Just select a security token from the involved ThinKP and then click Save to finish your gadget.




Once the gadgets are  up & running, you may compose a Dashboard to allocate them on the same page. To create a Dashboard you must navigate to the Visualization menu and then to the Dashboards submenu.




First of all we need to configure the general style, the icon and the menu layout. Then you may create a new page.




Navigating to the page you have just created, you will be able to add some of your gadgets. To do so just drag & drop the gadget on your preferred location. Next image shows how our final dashboard for this scenario looks like.




Synoptic view composition

Sofia2 features a powerful Scada module allowing creation and full configuration of synoptic view. For this scenario we are going to create a simple synoptic showing real time sensor data.

First of all you must navigate to the submenú Sofia2’s Synoptics under the Visualization menu.




Then you will create Tags paired with the Ontology’s attributes to display:

  • Under My Tags, select Tag Create
  • Give the Tag a name or identifier
  • Select the data type for the Tag. For this scenario all attributes will be set to Number.





When defined, your Tags should look like the ones on the picture:




After the Tags creation, navigate back to the Sofia2’s Synoptics and select Synoptic create within the My Synoptics box.

It is possible to add images or svg files to your Synoptics. To do this, select Import svg.



In order to add text fields and value tags for the attributes, you should click on the Insert Text command on the left-sided command bar and click again wherever you like to set your text field.





Next step will be to add visualization tags for the attributes within the Ontology. For each attribute we created a text field with a star. Afterwards you may select the class of tag you want to show. The list is located on top of the window command bar. For our scenario all elements will be declared as labels.





After choosing the class, if you click on Tag Properties, you will be able to asign the desired Tag to that precise element.




Every text field with label class will need to select the associated Tag, for instance temperature, accelX, … At this point our Synoptic view looks like this:



The Scada module features an Ontology (TagMeasures_demoDispositivos), a ThinKP (KpScada_demoDispositivos) and a script (ScadaScript_demoDispositivos). These elements are associated to the Synoptic view and are the ones to provide real time response to the Synoptic.





To achieve this we defined a Groovy script in charge of mapping any incoming value from the demoDispositivos_RTFrame with the corresponding Ontology TagMeasures_demoDispositivos. When building the script keep in mind you only need to take into account the TagId fields (identifiers), and the measures fields (actual values to represent) from the Ontology TagMeasures_demoDispositivos.

Please find this image showing a piece of our script for this matter.





If you want to dig deeper and master Synoptic view’s composition on Sofia2, you may find extended documentation on these links (Spanish language version only):


After presenting these two ways to represent your data on Sofia2, we will write the next post on the series where we will focus on business rules definition from incoming raw SensorTag data.


Keep wired!

IoT Devices on Sofia2. Integration and Management (IV. Data Visualization)


Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s