An Ext JS Dashboard for Visualizing and Interacting with IoT Data

Presented at SenchaCon 2016.

"Big data and Internet of Things (IoT) connectivity is increasingly forcing enterprises to find solutions to organize and visualize large amounts of incoming data. To allow rapid decision-making for everything from immediate actions in tactical situations to strategic analysis and reporting, developers need the ability to provide a flexible dashboard that allows users to visualize critical insights from all that data, on any screen and device. This session will demonstrate a dashboard app that provides big data analysis capabilities and interacts with IoT devices via Ext JS constructed components including Grids, Charts, and Widgets."

Transcript

1. An Ext JS Dashboard for Visualizing and Interacting with IoT Data @DanielJGallo Daniel Gallo
2. Big data and Internet of Things (IoT) • How do we handle data from different devices and sources? • How do we visualize this data to make it meaningful, and to aid us in a decision making process?
3. Internet of Things?
4. Internet of Things? • Linking of smart objects to the Internet • Physical objects that have an IP address • Exchanging of data between these things, and other Internet connected systems
5. Internet of Things – in the news https://www.technologyreview.com/s/601899/europe-builds-a-network-for-the-internet-of-things-will-the-devices-follow/ http://www.techradar.com/news/networking/netherlands-becomes-first-country-with-nationwide-internet-of-things-1324228
6. Internet of Things – in the news http://www.campaignlive.co.uk/article/vodafones-internet-things-swimsuit-detects-harmful-uv-levels/1403667
7. Internet of Things – when things go wrong http://motherboard.vice.com/read/your-dog-could-starve-if-youre-too-dependent-on-the-internet-of-things- http://www.dailydot.com/debug/smart-pet-offline-hungry-home-automation/ • Petnet - Internet connected automatic pet feeder
8. Internet of Things – when things go wrong http://www.telegraph.co.uk/technology/2016/10/12/man-spends-11-hours-trying-to-make-cup-of-tea-with-wi-fi-kettle/ https://twitter.com/markrittman/status/785905327967498240 • WiFi enabled kettle not working – a very British problem!
9. Data
10. Data • Various services available to help with integration of IoT devices and applications: - PubNub - AWS IoT - Azure IoT • These services make it easier to enable devices to communicate with each other and with applications
11. PubNub
12. PubNub • Provides a real-time messaging service • 70+ different platform SDKs • Enables devices to communicate with each other regardless of platform
13. var pubnub = require('pubnub')({ ssl: true, publish_key: 'publish-key-here' }); pubnub.publish({ channel: 'mychannel', message: { sensor: 'temperature', value: 32.2 }, callback: function(e) { console.log('Message sent', e); } }); PubNub example – publish messages from a Node.js app • Require the PubNub Node.js SDK • Specify your Publish key • Publish a message object over a specific named channel
14. PUBNUB.init({ ssl: true, subscribe_key: 'subscribe-key-here' }).subscribe({ channel: 'mychannel', message: function(message) { console.log(message); } }); PubNub example – subscribe to messages from a web app • Include the PubNub JavaScript SDK • Specify your Subscribe key • New messages are delivered straight to the browser
15. PubNub real-time data stream examples https://www.pubnub.com/developers/realtime-data-streams/
16. PubNub real-time data stream examples https://www.pubnub.com/developers/realtime-data-streams/
17. { "photosensor":"809.09", "ambient_temperature":"23.10", "radiation_level":"203", "humidity":"87.8553", "timestamp":1469761686, "sensor_uuid":"probe-019eda76" } PubNub simulated sensors • Enables apps to consume sample sensor data
18. PubNub Blocks – microservices • PubNub Blocks run as microservices • JavaScript based functions that run in the cloud • Can execute certain actions when messages are published, for example: - Use the SendGrid API to send the contents of a message as an email - Use IBM Watson to translate text
19. My IoT devices
20. Intel Edison and Grove kit • IoT kit • Integrated WiFi • Can run custom Node.js apps • Multiple sensors and inputs: Temperature, Humidity, PIR Motion, Air Quality, Moisture, Light, UV, Button • Programmable LCD backlit display for visual output • USB webcam connected
21. Intel Edison and Grove kit
22. Sensors – Air Quality
23. Sensors - Moisture
24. Sensors - UV
25. Sensors - Light
26. Sensors – Temperature and Humidity
27. Sensors – PIR Motion
28. Input - Button
29. Input – USB HD webcam
30. Output – LCD Backlit Display
31. LIFX smart bulb • Internet connected LED bulb • Millions of colors • Mobile app for control • REST-based API for third party apps
32. Packages
33. Johnny-Five – Robotics and IoT Platform • Node.js package that provides an out of the box way to easily interact with sensors on a wide range of IoT devices, including Intel Edison • Many APIs and examples • http://johnny-five.io
34. My app
35. My app – server room monitoring system • A dashboard app for monitoring and visualizing the conditions of a Server Room • Uses real sensor data provided by the Intel Edison device • Dashboard must act on this data, e.g. if values exceed a defined threshold, issue an on- screen alert • Incorporate a panic alarm button, that displays an alert in the app when activated • Motion sensor will also issue an alert and capture a photo using the USB webcam • LCD display will show these alerts • Smart bulb will also provide a way to visualize the alerts
36. My app – server room monitoring system • Doesn’t require a database or any web services • PubNub provides the ability to store messages for a set period, meaning we can easily retrieve recent sensor data when the application loads
37. Air quality sensor Temp & Humidity sensor Moisture sensor Light sensor Button UV sensor PIR Motion sensor USB webcam Edison publishes sensor data Edison subscribes to reset messages Captured photos published to S3 Dashboard app subscribes to sensor data Dashboard app resets motion/panic alarm PubNubBlock sends photo via email If app receives panic or motion sensor alarm, flash the LIFX bulb red LCD display shows status and flashes red when alarms activated
42. Demo and code walkthrough
43. In summary
44. In summary • The Internet of Things is getting bigger • This means more data, from more sources • In order to do anything meaningful with that data, we need a way to analyze and summarize it
45. In summary • This type of app requires a UI that can visualize information to the user in multiple ways, on a variety of form factors (from mobile to desktop), leveraging Ext JS components such as grids, charts, and D3.js integration • Using Ext JS provides a mechanism to build a powerful web application to summarize this type of data • Using a real-time service like PubNub makes it easier to exchange data between devices and apps
46. In summary • Source code: https://github.com/DanielGallo/IoTServerRoom • Above repository contains the code for both the Node.js and Ext JS app
47. Questions?
48. Please Take the Survey in the Mobile App • Navigate to this session in the mobile app • Click on “Evaluate Session” • Respondents will be entered into a drawing to win one of five $50 Amazon gift cards