Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Ext JS Dashboard for Visualizing and Interac...

Daniel Gallo
November 09, 2016

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

Daniel Gallo

November 09, 2016
Tweet

More Decks by Daniel Gallo

Other Decks in Technology

Transcript

  1. 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?
  2. 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
  3. 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
  4. PubNub • Provides a real-time messaging service • 70+ different

    platform SDKs • Enables devices to communicate with each other regardless of platform
  5. 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
  6. 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
  7. 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
  8. 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
  9. LIFX smart bulb • Internet connected LED bulb • Millions

    of colors • Mobile app for control • REST-based API for third party apps
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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