Visualize Your Smart City: Build a Real-Time Smart City Dashboard for SensorThings API
4 likes2,704 views
The document presents a webinar led by Dr. Steve Liang on building a real-time smart city dashboard using the SensorThings API. It covers various outcomes such as creating charts and maps for environmental sensors data, emphasizing the advantages of using open standards in IoT applications. Additionally, it highlights resources provided by SensorUp, including accessible source code and a GitHub link for further exploration.
Visualize Your Smart City: Build a Real-Time Smart City Dashboard for SensorThings API
- 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!
- 39. Next Week Analyze Your Smart City: Build Sensor Analytics with SensorThings API