Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visualize Your Smart City: Build a Real-Time Smart City Dashboard for SensorThings API

1,514 views

Published on

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.

Published in: Internet

Visualize Your Smart City: Build a Real-Time Smart City Dashboard for SensorThings API

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

×