CITI-SENSE widgets - Common visualisation widgets


Widgets for embedding sensors data

In order to embed the list of available sensors one needs to include the widget style

<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/sensors/common.css">
for visualization of map one needs to additionally load Google maps API library using the script
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
include widget script file
<script src="http://citisense.u-hopper.com/widgets/sensors/jquery.sensors.lookup.js"></script>
add the container for embedding the visualization, changing if needed the height and width of the container
<div id="YOUR_CONTAINER_ID" style="width: 300px; height: 500px;"></div>
and use the following code to actually load and configure the widget visualization in the container
<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        title: 'Widget title' // arbitrary
        ,subtitle: 'Widget sub title' // arbitrary
        ,type: 'list' // visualization type, map or list
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,filters: {
            sensorId: 'CITISENSE-NiluTest-855150'
            ,location: 'Barcelona'
            ,provider: 4
            ,status: 'Active'
            ,description: 'NO2'
            ,type: 'Mobile'
            ,limit: 1
        }
    });
  });
</script>
Note that the actual data visualized with the widget can be configured using the "filters" attribute. Any combination of allowed filters can be specified, and all filters will be applied to the CITI-SENSE data in conjuction. The filters include:
  • sensorId - ability to filter by the sensor identifier, e.g., Nilu test sensor CITISENSE-NiluTest-855150, etc.
  • location - ability to filter by the sensor location name, e.g., Barcelona, Oslo, etc.
  • provider - ability to filter by the sensor provider identifier, e.g., 2 - Alphasense, 4 - Ateknea, etc.
  • status - ability to filter by the sensor status, allowed values are "Active" or "Inactive"
  • type - ability to filter by the sensor type, allowed values are "Mobile" or "Static"
  • description - ability to filter by the sensor description, e.g., "NO2". The specified filter value will be checked for containment in the description of sensors
  • limit - ability to limit the number of found results, e.g., if 5 is specified then at most 5 filtered results will be extracted
Obviously that if sensorId is given there is no need to further narrow the search space with other filters. Contrary what can happen is that despite the correct sensor Id if one specifies wrong sensor location then widget won't be able to find the sensor beacause of trying to execute filters in conjunction.

Below you find some embedding of sensors list available in Barcelona using "location" filter set to "Barcelona" and widget "type" set to "list".

In order to build a map visualization of sensors available in Barcelona one needs to specify the widget type as "map" and set the filter "location" to be "Barcelona". Below you find the example of constructed visualization:

Click on the map icon in order to see sensor details.

In order to embed the list of latest measurements (or latest in a given interval of time defined by 'from' and 'to' widget attributes) obtained by sensors one needs to additionally configure the measurement attribute of the widget

<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        title: 'Widget title' // arbitrary
        ,subtitle: 'Widget sub title' // arbitrary
        ,type: 'map' // visualization type, map or list
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        layers: [ // arbitrary KML layers to be visualized
            {url: "http://neilk.net/projects/transit-heatmap/eastbayTransit.kml"}
            ,{url: "http://www.epa.gov/airnow/today/airnow.kml"}
        ],
        ,filters: {
            sensorId: 'CITISENSE-NiluTest-855150' // if one wants to display the data of a single sensor
            ,location: 'Barcelona'
            ,provider: 4
            ,status: 'Active'
            ,description: 'NO2'
            ,type: 'Mobile'
            ,limit: 1
        },
        measurement: {
            type: 'aqi', // 'caqi', or 'value' if one needs to obtain the latest measure value of the observedProperty
            observedProperty: 'NO2'
        }
    });
  });
</script>
Note that the value of measurement to be visualized can be specified using the measurement attribute of the widget. It's composed from two fields:
  • type - measurement type, either "value" if a raw value needs to be extracted, or "aqi", "caqi" if air quality index value needs to be extracted
  • observedProperty - actual measurement sensor, i.e., the gas or other type of measurement, e.g., NO2, O3, etc.

Below you find the widget visualizing the list of sensors and their latest readings of AQI in Barcelona for NO2.

<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        ,type: 'list'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment
        ,filters: {
            location: 'Barcelona'
        },
        measurement: {
            type: 'aqi'
            ,observedProperty: 'NO2'
        }
    });
  });
</script>

In order to build the map AQI in Barcelona one needs to specify the widget type as "map", while keeping other filters as above:

<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        ,type: 'map'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment
        ,filters: {
            location: 'Barcelona'
        },
        measurement: {
            type: 'aqi'
            ,observedProperty: 'NO2'
        }
    });
  });
</script>
Note that if one needs to visualize some third party KML file this can be done with the "layers" attribute of the widget, which accepts an array of objects with attribute "url" pointing to actual kml file.

In order to build the map of latest sensor measurements in Oslo, use the following settings:

<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        ,type: 'map'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,filters: {
            location: 'Oslo'
        },
        measurement: {
            type: 'value',
            observedProperty: 'O3'
        }
    });
  });
</script>
Click on the map icons in order to see the details of the measurements.

In order to build the map of just a single sensor and visualize latest (or latest in a given interval of time defined by 'from' and 'to' widget attributes) AQI reading of it, use the following settings:

<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorslookup({
        ,type: 'map'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,filters: {
            sensorId: 'CITISENSE-NiluTest-855150'
        },
        measurement: {
            type: 'aqi',
            observedProperty: 'NO2'
        }
    });
  });
</script>
Click on the map icon in order to see the details of the measurements.

In order to embed the real-time visualization of the sensor include the widget script

<script src="http://citisense.u-hopper.com/widgets/sensors/jquery.sensor.statistics.js"></script>
widget style
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/sensors/common.css">
Highcharts visualization library scripts
<link rel="stylesheet" href="http://citisense.u-hopper.com/js/vendor/highcharts/highcharts.js">
<link rel="stylesheet" href="http://citisense.u-hopper.com/js/vendor/highcharts/highcharts-more.js">
add the container for embedding the visualization, changing if needed the height and width of the container
<div id="YOUR_CONTAINER_ID" style="width: 300px; height: 500px;"></div>
and use the following code to actually load the widget visualization in the container
<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorstatistics({
        type: 'realtime'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,filters: {
            sensorId: 'LEO-666BA0AE'
        }
        ,measurement: {
            type: 'aqi', // 'caqi', or 'value' if one needs to obtain the latest measure value of the observedProperty
            observedProperty: 'NO'
        }
        ,title: "NO Sensor"
        ,subtitle: "Measured inside of the school"
        ,min: 0
        ,max: 30
        ,bands: [{
                from: 0,
                to: 18,
                color: '#DF5353' // red
            }, {
                from: 18,
                to: 23,
                color: '#55BF3B' // green
            }, {
                from: 23,
                to: 30,
                color: '#DDDF0D' // yellow
            }
        ]
        ,refresh: 3000
    });
  });
</script>

Below you find some embedding of real-time visualizations of sensors using as example PSP sensors.

  • NO

  • O3

  • NO2

In order to embed the historical visualization of the sensor include the widget script

<script src="http://citisense.u-hopper.com/widgets/sensors/jquery.sensor.statistics.js"></script>
widget style
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/sensors/common.css">
Highcharts visualization library scripts
<link rel="stylesheet" href="http://citisense.u-hopper.com/js/vendor/highcharts/highcharts.js">
<link rel="stylesheet" href="http://citisense.u-hopper.com/js/vendor/highcharts/highcharts-more.js">
add the container for embedding the visualization, changing if needed the height and width of the container
<div id="YOUR_CONTAINER_ID" style="width: 300px; height: 500px;"></div>
and use the following code to actually load the widget visualization in the container
<script>
  $(function() {
    $("#YOUR_CONTAINER_ID").sensorstatistics({
        type: 'historic'
        ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod')
        ,filters: {
            sensorId: 'LEO-666BA0AE'
        }
        ,measurement: {
            type: 'value',
            observedProperty: 'NO2'
        }
        ,title: "NO2 Sensor"
        ,subtitle: "Measured inside of the school"
        ,min: 0
        ,max: 30
        ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01
        ,bands: [{
                from: 0,
                to: 18,
                color: '#DF5353' // red
            }, {
                from: 18,
                to: 23,
                color: '#55BF3B' // green
            }, {
                from: 23,
                to: 30,
                color: '#DDDF0D' // yellow
            }
        ]
        ,refresh: 3000
    });
  });
</script>

Below you find some embedding of historical visualizations of sensors using as example PSP sensor.

  • NO

  • O3

  • NO2