Page 1
#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
Page 2
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
Page 3
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
Page 4
News - SensorThings API Press Release
Page 5
News - We are setting up a SensorThings for Taiwan’s LASS, a very large air quality monitoring network.
Page 6
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?
Page 7
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
Page 8
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
Page 9
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
Page 10
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
Page 11
Today we will use SensorUp’s air quality monitoring system in Calgary as an example.
http://example.sensorup.com/v1.0
Page 12
What do you need?
Any text editor
A modern browser (Chrome in this webinar)
A JSON viewer plugin (JSONView in this webinar)
Page 13
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.
Page 14
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!
Page 15
The data model
AirBox
The Air in My Backyard
• Plant Tower G3 • DHT22
• Particulate Matter 2.5 • Relative Humidity • Air Temperature
My Backyard
Page 16
#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
Page 17
#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
Page 18
#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
Page 19
#1 Create a Chart for a Datastream
๏Send the first request for Datastream
๏ Datastreams(id)/description
Page 20
#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
Page 21
#1 Create a Chart for a Datastream๏Y-axis label - unitOfMeasurement - symbol and name
๏ Datastreams(id)/unitOfMeasurement
Page 22
#2 Create a Chart for a Datastream with a single request
๏Get all the required information with a single request
๏ Datastreams(id)?$expand=Observations
Page 23
#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
Page 24
#3 Create a map showing the Thing/Location
Prepare the map
Page 25
#3 Create a map showing the Thing/Location
๏ Datastreams(id)?$expand=Observations,Thing/Locations
Page 26
#4 Create a simple dashboard๏Display two widgets, one with the latest Observation and
the other one with the previous Observation
Page 27
#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
Page 28
#4 Create a simple dashboard
๏Display two widgets, one with the latest Observation and the other one with the previous Observation
Page 29
#5 Putting everything together
Page 31
Many of you just want a Charting API that works….
Available here, Free for non-commercial uses
Page 32
Display a Thing’s Datastreams
Page 33
Which dashboard widget you like?One line of code to switch between chart, table, gauge , speedometer, and NVD3 chart.
Page 34
Data Table for SensorThings
Page 35
Display a Datastream from t1 to t2
Page 36
SensorThings HCDT๏ Available before August 18th 2016.
๏ Library/SDK
๏ Developer Documentation
๏ Interactive Tutorials
๏ Examples
Page 37
If you think it’s good….
We have something even better!! To Be Announced soon!
Page 38
GIST
https://github.com/SensorUp/Webinars/tree/master/2016-08-11-Visualize-Your-
Smart-Cities
Page 39
Next Week
Analyze Your Smart City: Build Sensor Analytics with SensorThings API