This webinar is a hands-on tutorial demonstrating the steps to construct a real-time smart city dashboard. Th objective is for developers to learn OGC SensorThings API from a coding perspective. The dashboard uses OGC SensorThings API as the data source. It has five examples. The first and second examples show how to develop a time-series chart for SensorThings API. The third example is using Leaflet.js to show the IoT locations with SensorThings API. The fourth example is to build two simple widgets to show the latest reading and previous reading of an IoT datastream. Finally we demonstrate how to put everything together. Recording available on youtub: https://www.youtube.com/watch?v=W-_FgpwscCo.

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

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

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

4. News - SensorThings API Press Release

5. News - We are setting up a
SensorThings for Taiwan’s LASS, a very
large air quality monitoring network.

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
Hailstorm
What’s going
on here?

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

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

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

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

11. Today we will use SensorUp’s air quality
monitoring system in Calgary as an example.
http://example.sensorup.com/v1.0

12. What do you need?
Any text editor
A modern browser
(Chrome in this webinar)
A JSON viewer plugin
(JSONView in this
webinar)

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.

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!

15. The data model
AirBox
The Air in My
Backyard
• Plant Tower G3
• DHT22
• Particulate Matter 2.5
• Relative Humidity
• Air Temperature
My Backyard

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

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

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

19. #1 Create a Chart for a Datastream
๏ Send the first request for Datastream
๏ Datastreams(id)/description

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

21. #1 Create a Chart for a Datastream
๏ Y-axis label - unitOfMeasurement - symbol and name
๏ Datastreams(id)/unitOfMeasurement

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

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

24. #3 Create a map showing the Thing/
Location
Prepare the map

25. #3 Create a map showing the Thing/
Location
๏ Datastreams(id)?
$expand=Observations,Thing/Locations

26. #4 Create a simple dashboard
๏ Display two widgets, one with the latest Observation and
the other one with the previous Observation

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

28. #4 Create a simple dashboard
๏ Display two widgets, one with the latest Observation and
the other one with the previous Observation

29. #5 Putting everything together

31. Many of you just want a Charting
API that works….
Available here, Free for non-commercial uses

32. Display a Thing’s Datastreams

33. Which dashboard widget you like?
One line of code to switch between chart, table, gauge
, speedometer, and NVD3 chart.

34. Data Table for SensorThings

35. Display a Datastream from t1 to t2

36. SensorThings HCDT
๏ Available before August 18th 2016.
๏ Library/SDK
๏ Developer Documentation
๏ Interactive Tutorials
๏ Examples

37. If you think it’s good….
We have something even better!!
To Be Announced soon!

38. GIST
https://github.com/SensorUp/Webinars/
tree/master/2016-08-11-Visualize-Your-
Smart-Cities

39. Next Week
Analyze Your Smart City: Build Sensor
Analytics with SensorThings API