Visualizing Data with HTML5 Dashboards for Real-Time Action

Slide 1

Slide 1 text

Visualizing Data with HTML5 Dashboards for Real-Time Action Dan Gallo Sencha, Inc. @DanielJGallo

Slide 2

Slide 2 text

Dan Gallo • Technical Sales Engineer at Sencha • Background in web app development speakerdeck.com/danielgallo @DanielJGallo

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Internet of Things – uses • Smart homes – lighting, door locks, security systems, moisture sensor for leaks, smart fridges • Monitoring environment – temperature, light, humidity • Smart cities – street lighting, traffic, rail • Healthcare • Wearables

Slide 7

Slide 7 text

Internet of Things – communication • Various communication methods may be used: Technology Distance Speed Bluetooth 50-150 m / 54-164 yards 1Mbps Cellular 35-200 km / 21-124 miles 600kbps-10Mbps LoRaWAN 2-15 km / 1-9 miles 0.3-50kbps Neul 10 km / 6 miles 100kbps NFC 10 cm / 4 in 100-420kbps Sigfox 3-50 km / 2-31 miles 10-1000bps WiFi 50 m / 54 yards 150-600Mbps Z-Wave 30 m / 32 yards 9-100kbps Zigbee 10-100 m / 11-110 yards 250kbps

Slide 8

Slide 8 text

Internet of Things – devices • iotlist.co contains a good selection of available devices • Some examples:

Slide 9

Slide 9 text

Internet of Things – devices • iotlist.co contains a good selection of available devices • Some examples:

Slide 10

Slide 10 text

Internet of Things – kits • More IoT kits available now, enabling greater interest • E.g. Intel Edison and Grove IoT Starter Kit Powered by AWS • Enables various sensors to be connected and programmed • Integrates with AWS IoT • Apps can be programmed with Node.js

Slide 11

Slide 11 text

Internet of Things – growth • Cisco estimates the IoT will consist of 50 billion devices connected to the Internet by 2020 • Will require the ability to handle and analyze data from many different sources • Also hearing about the IoT much more in the news Source: http://www.cisco.com/c/en/us/solutions/internet-of-things/overview.html

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Data

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Example – publish messages with Node.js 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); } });

Slide 19

Slide 19 text

Example – subscribe to messages in a web app PUBNUB.init({ ssl: true, subscribe_key: 'subscribe-key-here' }).subscribe({ channel: 'mychannel', message: function(message) { console.log(message); } }); { sensor: 'temperature', value: 32.2 } Console output:

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

PubNub real-time data stream examples { "photosensor":"809.09", "ambient_temperature":"23.10", "radiation_level":"203", "humidity":"87.8553", "timestamp":1469761686, "sensor_uuid":"probe-019eda76" }

Slide 23

Slide 23 text

Sample IoT devices Devices I will focus on today

Slide 24

Slide 24 text

Sample IoT devices • LIFX smart bulb • Amazon Dash button

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Amazon Dash button • Internet connected button • Designed to order a pre-selected item from Amazon • Stick or hang the buttons around your house, e.g. next to the washing machine, ready to press when you run low on washing powder • Amazon offers a programmable IoT button to use with its AWS IoT service, but for this demo I’m using a normal Dash button, and using a Node script to listen for when it establishes a network request • Button is always in an “off” state, until the button is pressed

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

The next day…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Building an application

Slide 35

Slide 35 text

Sencha Ext JS JavaScript application framework

Slide 36

Slide 36 text

Sencha Ext JS • JavaScript framework for mobile, tablet and desktop apps • Huge selection of UI components and widgets • UI can be configured to adapt based on the device type or screen size, enabling an app to run on all platforms from one common codebase

Slide 37

Slide 37 text

Getting started • Download and install Sencha Cmd and Sencha Ext JS from sencha.com • Create a new project from the command line: • Open the project folder in an IDE of your choice sencha -sdk /downloads/ext generate app --name Dash --path /apps/Dash --modern

Slide 38

Slide 38 text

Getting started – important files • app.json contains application settings, such as theme name, version, required packages, caching configuration etc. • app.js initializes the application, and defines the initial view to create on load Ext.application({ name: 'Dash', extend: 'Dash.Application', requires: [ 'Dash.view.main.Main' ], mainView: 'Dash.view.main.Main' });

Slide 39

Slide 39 text

Getting started – concepts • Applications are structured using an MVVM architecture • Each class (view, model, controller etc.) resides within its own .js file, and normally extends from a base class • JSON syntax • A new class is defined by using Ext.define Ext.define('Dash.model.Alert', { extend: 'Ext.data.Model', fields: [{ name: 'text' }, { name: 'value', type: 'number' }, { name: 'sensorType' }] });

Slide 40

Slide 40 text

A dashboard app Server room monitoring application

Slide 41

Slide 41 text

The app – Server room monitoring app • A dashboard app for monitoring and visualizing the conditions of a Server Room • Use sample PubNub stream of data to mimic real-world sensor data, such as temperature, humidity, light • 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 • Smart bulb will also provide a way to visualize these alerts

Slide 42

Slide 42 text

The app Amazon Dash button acts as a panic button Node.js script listens for Dash button ARP request PubNub sample data stream acts as sensor data Dashboard app subscribes to PubNub messages and visualizes data Alarm message published to PubNub service If panic alarm message is received, flash the bulb red If data stream values exceed a threshold, flash the bulb orange

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Using Node.js to detect the Dash button var dash_button = require('node-dash-button'), dash = dash_button(['74:c2:46:90:b8:e6']), pubnub = require('pubnub')({ ssl: true, publish_key: 'publish-key-here' }); dash.on('detected', function (dash_id){ console.log('Dash button ' + dash_id + ' was clicked, sending alarm message!'); var message = { alarmOn: true }; pubnub.publish({ channel: 'alarm', message: message, callback: function(e) { console.log('Alarm message sent', e); } }); });

Slide 46

Slide 46 text

How to flash the LIFX bulb from the app PUBNUB.init({ ssl: true, subscribe_key: 'subscribe-key-here' }).subscribe({ channel: 'alarm', message: function(message) { if (message.alarmOn) { Dash.ux.data.Lifx.pulse({ color: 'red', period: 0.5, cycles: 120 }); } } });

Slide 47

Slide 47 text

Ext.define('Dash.ux.data.Lifx', { singleton: true, url: 'https://api.lifx.com/v1/lights/all', token: 'lifx-oAuth-token-here', pulse: function(config) { var me = this, data = { power_on: true, from_color: 'white', color: config.color, period: config.period, cycles: config.cycles, persist: false }; Ext.Ajax.request({ url: me.url + '/effects/pulse', method: 'POST', jsonData: data, headers: { 'Authorization': 'Bearer ' + me.token } }); } });

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

How do we build this app?

Slide 50

Slide 50 text

Creating a dashboard interface • Define a container with dashboard items, for example: Ext.define('Dash.view.dashboard.Dashboard', { extend: 'Ext.Panel', xtype: 'dashboard', cls: 'dashboard', items: [{ xtype: 'valuepanel', title: 'Temperature Chart', backgroundColor: '#3F51B5', userCls: 'big-50 medium-50 small-100 dashboard-item shadow' }, { xtype: 'valuepanel', title: 'Humidity', backgroundColorLeft: '#7CB13B', backgroundColorRight: '#89C540', userCls: 'big-25 medium-50 small-100 dashboard-item shadow' }] });

Slide 51

Slide 51 text

Varying panel heights • Each dashboard item can have varying platform-specific fixed heights defined, by using platformConfig Ext.define('Dash.view.valuepanel.ValuePanel', { extend: 'Ext.Panel', ... platformConfig: { phone: { height: 100 }, tablet: { height: 120 }, desktop: { height: 180 } } });

Slide 52

Slide 52 text

Varying panel widths • Use CSS to set the position of dashboard items on screen • Also add padding between the dashboard items • Ext JS uses Sass, meaning we can make use of variables: $dashboard-item-spacing: 20px; .dashboard > * > .x-inner { padding: $dashboard-item-spacing 0 0 $dashboard-item-spacing; } .dashboard-item { margin: 0 $dashboard-item-spacing $dashboard-item-spacing 0; float: left; }

Slide 53

Slide 53 text

Varying panel widths • Use CSS to set the widths of each dashboard panel • Use screen size media queries to define which CSS variables are used for controlling width $dashboard-item-spacing: 20px; @media (min-width: 720px) { .medium-50 { width: calc(50% - #{$dashboard-item-spacing}); } .medium-25 { width: calc(25% - #{$dashboard-item-spacing}); } } @media (min-width: 1048px) { .big-50 { width: calc(50% - #{$dashboard-item-spacing}); } .big-25 { width: calc(25% - #{$dashboard-item-spacing}); } }

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Demo and code walkthrough

Slide 58

Slide 58 text

In summary

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

In summary • This requires a UI that can visualize information to the user in multiple ways, on a variety of form factors (from mobile to desktop), using Ext JS components such as grids, pivot grids, charts, and D3.js integration • Using a framework like 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