#2: Visualize Your Smart City - Build a Real-Time Smart City Dashboard for SensorThings API
Dr. Steve Liang, Ph.D., P.Eng. Founder and CEO, SensorUp Inc. Associate Professor, University of Calgary
Click here for webinar recording Click here for source codes
About Dr. Steve Liang๏Associate Professor, Geomatics Engineering, Uni. Calgary
๏AITF-Microsoft Industry Research Chair on Open Sensor Web (2011~2014)
๏Chair OGC SensorThings API Standard Working Group
๏Rapporteur, ITU-T SG12/11 on Internet of Things Test Specifications
๏Founder and CEO, SensorUp Inc
About SensorUp๏We are a leader in Sensor Web
and IoT Platforms.
๏We offer innovative and comprehensive SensorThings solutions.
๏We are proud member of Eclipse and Open Geospatial Consortium
News - SensorThings API Press Release
News - We are setting up a SensorThings for Taiwan’s LASS, a very large air quality monitoring network.
News - Calgary air quality update
http://example.sensorup.com/display/v1.0/Datastreams(4207)/Observations?$expand=Datastream&$filter=phenomenonTime%20lt%202016-08-09T02:00:00Z
HailstormWhat’s going
on here?
What will be covered in this webinar series
Sense Your Smart City: Connect Environmental Sensors to SensorThings API
Visualize Your Smart City: Build a Real-Time Smart City Dashboard for SensorThings API
Analyze Your Smart City: Build Sensor Analytics with SensorThings API
Build Interoperable Smart City Applications Effortlessly
Today’s learning outcomes๏Review of SensorThings entities (ISO 19156 O&M)
๏Creating a Chart for a Datastream with multiple requests
๏Creating a Chart for a Datastream with a single request
๏Create a Map showing the Location of the Thing/Datastream
๏Create a simple dashboard
๏Putting them all together into a single page
Why build your IoT application with open standards?
IoT System #1
IoT System #2
IoT System #3
IoT System #N…
Write N times different but similar codes!!
Wait.. how about version updates?
Write N x M times, where M is the average
number of updatesWrite an application for proprietary IoT APIs
Why build your IoT application with open standards?
IoT System #1
IoT System #2
IoT System #3
IoT System #N…
Write 1 time and use N times.
Wait.. how about version updates?
OGC standards are stable and future proof.Write an application for
open standard IoT API
Today we will use SensorUp’s air quality monitoring system in Calgary as an example.
http://example.sensorup.com/v1.0
What do you need?
Any text editor
A modern browser (Chrome in this webinar)
A JSON viewer plugin (JSONView in this webinar)
IMPORTANT
We are using Highstock.js today. Highstock/Highchart is open source and free for non-commercial uses. But it is NOT free for commercial uses.
Acknowledgement
Thanks to James Badger for preparing today’s tutorials’ source codes.
James and I are writing a book on SensorThings API and IoT/Smart Cities. Please stay tuned!
The data model
AirBox
The Air in My Backyard
• Plant Tower G3 • DHT22
• Particulate Matter 2.5 • Relative Humidity • Air Temperature
My Backyard
#1 Create a Chart for a Datastream
๏What information do we need to create a chart?
time series (observations)
chart title
y-axis label
tooltip
#1 Create a Chart for a Datastream๏What do we need from SensorThings?
๏Chart title
๏ Datastream’s description
๏ Time series
๏ Observations’ result and phenomenonTime
๏Y-axis label
๏ unitOfMeasurement - symbol and name
#1 Create a Chart for a Datastream๏Chart title - Datastream’s description
๏ Datastreams(id)/description
๏Time series - Observations’ result and phenomenonTime
๏ Datastreams(id)/Observations
๏Y-axis label - unitOfMeasurement - symbol and name
๏ Datastreams(id)/unitOfMeasurement
#1 Create a Chart for a Datastream
๏Send the first request for Datastream
๏ Datastreams(id)/description
#1 Create a Chart for a Datastream๏Send the second request for the time series -
Observations’ result and phenomenonTime
๏ Datastreams(id)/Observations
๏ $orderby and $top
#1 Create a Chart for a Datastream๏Y-axis label - unitOfMeasurement - symbol and name
๏ Datastreams(id)/unitOfMeasurement
#2 Create a Chart for a Datastream with a single request
๏Get all the required information with a single request
๏ Datastreams(id)?$expand=Observations
#3 Create a map showing the Thing/Location
๏Get a Datastream’s Thing’s Location
๏ Datastreams(id)?$expand=Thing/Locations
๏Oh, we also need the Observations
๏ Datastreams(id)?$expand=Observations,Thing/Locations
#3 Create a map showing the Thing/Location
Prepare the map
#3 Create a map showing the Thing/Location
๏ Datastreams(id)?$expand=Observations,Thing/Locations
#4 Create a simple dashboard๏Display two widgets, one with the latest Observation and
the other one with the previous Observation
#4 Create a simple dashboard๏Display two widgets, one with the latest Observation and the other
one with the previous Observation
๏What information do we need in this case?
๏ result
๏ phenomenonTime
๏ and we only need the latest result!
๏ Datastreams(id)/Observations?$top=1&$select= result,phenomenonTime,id
#4 Create a simple dashboard
๏Display two widgets, one with the latest Observation and the other one with the previous Observation
#5 Putting everything together
Many of you just want a Charting API that works….
Available here, Free for non-commercial uses
Display a Thing’s Datastreams
Which dashboard widget you like?One line of code to switch between chart, table, gauge , speedometer, and NVD3 chart.
Data Table for SensorThings
Display a Datastream from t1 to t2
SensorThings HCDT๏ Available before August 18th 2016.
๏ Library/SDK
๏ Developer Documentation
๏ Interactive Tutorials
๏ Examples
If you think it’s good….
We have something even better!! To Be Announced soon!
GIST
https://github.com/SensorUp/Webinars/tree/master/2016-08-11-Visualize-Your-
Smart-Cities
Next Week
Analyze Your Smart City: Build Sensor Analytics with SensorThings API
