An Ext JS Dashboard for Visualizing and Interacting with IoT Data @DanielJGallo Daniel Gallo 

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? 

Internet of Things? 

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 

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 

Internet of Things – in the news http://www.campaignlive.co.uk/article/vodafones-internet-things-swimsuit-detects-harmful-uv-levels/1403667 

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 

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! 

Data 

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 

PubNub 

PubNub • Provides a real-time messaging service • 70+ different platform SDKs • Enables devices to communicate with each other regardless of platform 

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 

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 

PubNub real-time data stream examples https://www.pubnub.com/developers/realtime-data-streams/ 

PubNub real-time data stream examples https://www.pubnub.com/developers/realtime-data-streams/ 

{ "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 

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 

My IoT devices 

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 

Intel Edison and Grove kit 

Sensors – Air Quality 

Sensors - Moisture 

Sensors - UV 

Sensors - Light 

Sensors – Temperature and Humidity 

Sensors – PIR Motion 

Input - Button 

Input – USB HD webcam 

Output – LCD Backlit Display 

LIFX smart bulb • Internet connected LED bulb • Millions of colors • Mobile app for control • REST-based API for third party apps 

Packages 

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 

My app 

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 

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 

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 

No content

No content

No content

No content

Demo and code walkthrough 

In summary 

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 

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 

In summary • Source code: https://github.com/DanielGallo/IoTServerRoom • Above repository contains the code for both the Node.js and Ext JS app 

Questions? 

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 

No content