SensMap Visualization Framework – Quick Start Guide

Visualization of sensors and interpretation of their data has a crucial importance, without it the data has basically no meaning. At least three parameters should be visualized: What was measured, when it was measured and where the origin of the data is located. The main objective of the SensMap Visualization Framework is to achieve these tasks in the most intuitive and straightforward way.

Cosm addressing

Wislab, the Czech wireless laboratory, has recently developed the framework for visualization of sensor devices and their data stored in the Xively cloud. Xively is a great web platform for storing, querying and sharing sensor data. Xively provides free access to the data (see developer account) and it has robust and well documented API. We believe that Xively is the most promising infrastructure for so-called Internet of Things technology. The SensMap Visualization Framework is built on the top of Xively and offers exploration of nodes in Outdoor perspective (using Google maps), Indoor perspective (visualizaton of nodes placed inside of building) and Topology perspective (showing radio links and its quality between  nodes in one wireless network). This starting guide briefly describes how to get sensor data to the Xively and subsequently how to  visualize them in SensMap Visualization Framework.

SensMap Visualization Framework

Main Features

  • Visualizes of status (health) of sensor devices
  • Visualizes sensor devices and their data in real-time or within defined interval in the history
  • Visualizes sensor devices geographically and also inside of the buildings
  • Allows to manage the sensor devices and buidlings
  • Shows graphs & allows to compare values from different sensor devices
  • Exports data
  • Searches the sensor devices in fulltext mode and also within the defined geographical region
  • Shows topology of wireless sensor networks and link quality between nodes

The SensMap Framework offers three visualization perspectives. Each perspective is implemented as the stand-alone web application and can run in separate browser tab. Visualization is optimized for browsing in Google Chrome and thus it is highly recommended to the Chrome browser.


  • OutdoorView - it shows physical deployment of sensor nodes in the geographical view (using Google maps)
  • IndoorView - it shows physical deployment of sensor nodes inside of the building
  • TopologyView - it shows logical topology of particular wireless sensor network based on link quality indicator (LQI)


Data Upload

Xively’s data exchange (Xively REST API)  is based on REST architecture, where data transfer is realized over the HTTP protocol. The data access is driven by CRUD operations like GET, POST, UPDATE and DELETE. Sensor device can feed its data in various formats like JSONXML or CSV. The data are visualized to the users via SensMap Visualization Framework. Many Xively libraries for most common programming languages such as C, Java, C# Python together with available tutorials for popular platforms such as Arduino and Rasberry Pi can be found at Xively website.


Xively Terminology

To start with Xively it is necessary to understand some terms:

  • Feed - it is basically a representation of physical communication device which contains sensors. It has attributes such as: title, location, status etc. and it can include one or many datastreams.
  • Datastreams (also called channels)- represents one discrete sensor or input connected to the device such as thermometer, analog input, digital input etc. It involves the following attributes: unit type, unit symbol, min value, max value, current value and datapoints
  • Datapoint - represents the value of datastream in given time. It uses just two attributes: value and timestamp.


Step-by-Step Example – Monitor Humidity and Temperature in Your Building 

If you are not signed already at Xively, please sign up here . Go to your account and click at MASTER KEY. Next, click at “+ Add Master Key” and create one Master key with the Permissions: Read, Create, Update, Delete and set Access private feeds. This key will be used in the visualization app.

Start Oudoorview perspective of SensMap Visualization Framework.

Step 1) Set Xively MASTER Key

Set your MASTER KEY in the text field below (do not forget to click on SET KEY button). The application remembers your key, so next time it will be auto filled for you.


Step 2) Create New Node

Note: To create a node you need to have master key with full right (Read/Create/Update/Delete) and also activated the checkbox Access private feeds

Select Create node tab. Now we need to fill up some data fields such as title name and datastreams. We use device referred to as MyNode-No.1 which virtually has temperature and humidity sensors attached (sensors are represented as datastreams). Finally the node is created after the click on Create button. It should be noted that the node can be created and placed automatically via Xively REST interface. This might be very useful when many sensors need to be deployed. Moreover Xively provides an extensive product management, learn more about it here.


Step 3) Place the Node

Go back to the Search tab. Find your node in a “no location” list and click on “Place Selected Feed” in popup menu. Then you need to click on particular place in the map.


After that, you may need to approve a new position by click on “Save Position(s)” button in the top menu. Notice that each created device has unique ID for future referring. In our case this ID is 44975009.


Stap 4) Update the Data

Now, you may wish to update temperature and humidity values of your node in the Xively cloud. This is basically done via HTTP request with  XML body defined. Please notice that URL destination has ID (44975009) of your node. You can try to send the request through a web service called Hurl or you can try Curl (command line tool). If you are fan of Firefox try this plugin.

So, in a body of  the request you put minimalistic XML code depicted below, we hope that the code is quite self-explanatory. There is a required XML header, name of the feed and list of names of datastreams (your sensors). Perhaps you are wondering why there is no timestamp? Well, Xively is quite user-friendly so if you do not set the timestamp it assigns the time of data arrival to Xively. Similar rule is applied for most of the attributes. So if you do not want to set some attribute just skip it. For example, if you would like to change the feed title, you just add <title>New name</title> statement, otherwise the title will be unchanged. You may find complete list of attributes here.

Click here to get predefined hurl query and send it to Xively. Don’t forget to put your master API key.


Now point the cursor over the MyNode-No.1 node, you see all the datastreams and their latest value in the tooltip.


By right clicking on the node marker, you may choose what value will be displayed and automatically refreshed next to the marker. Now, try to send another values through the predefined Hurl request.

10_select_datastream 11_temperature

Ok, so now you are at the point where you are able to add new sensor device, place sensor marker on google maps, update and visualize its data. Let’s learn how to visualize sensor devices inside of the buildings.

Step 5) At first, we need to create a building marker. To accomplish this task you need to click on the Create Building tab and fill some data such as building name, floor number and URL of its ground plan in SWF vector format. Each building’s floor has to have its own SWF plan. If you need help with Autocad / SWF conversion please follow this tutorial.  As a starting point, you can use our demo floor plan .


Click back to the Search tab and in the Location menu find your building as the node having no location. Now place the building marker somewhere on the map. This step is the same as in step 3.


If you click at the building marker and then click on the go button, you will be forwarded to the IndoorView perspective tab. The control of this application is similar to the Outdoor one.


In the right panel you find the list of nodes with undefined position. Place the nodes by simply drag&drop them into the map.


You are at the end of this starting guide. We guided you through the basics of Visualization Framework. We have used only the Now mode in the top menu. However data often need to be analyzed for longer period of time. Visualization of historical data might reveal some pattern or trend in the data. The application provides interactive history mode that displays values for time interval in past (check History box in top menu). Moreover history mode might be helpful for data comparison among several nodes. To further detailed reading, you may continue here.

Questions or Doubts?

We would be grateful for your feedback.

Comment: *
Word Verification:

See also

OutdoorView manual
IndoorView manual
TopologyView manual
Xively Syntax Extension manual

Posted in Manual