phyunsj / iot-dashboard-design-with-dash

Sample example to use Dash python framework for IoT Dashboard Design

IoT Dashboard Design with Dash

📌 The intention of this excericse is to undersatand communications between the front-end generated by Dash framewotk and the back-end. The heavy lifting is done by Dash framework. Any web application serving GET/POST methods can utilize Dash front-end implementaion.

"Dash is a Python framework for building analytical web applications. No JavaScript required. Build on top of Plotly.js, React, and Flask, Dash ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical python code." ...from Dash by plotly

Additional Info on Dash

• Introducing Dash
• Dash App Gallery

Example 1. Chart Display

Started with the first example from Dash User Guide, set interval=3000 (3 secs) and defined callbacks.

index.html, _dash-layout, _dash-dependencies are generated by Dash framework. Use it directly on Node-RED template node. For live-update, the back-end responds _dash-update-component request every 3 secs (interval=3000).

Example 2. Wind Speed Monitoring

The original work is done in here(Dash Wind Streaming App). The sample data wind-data.db is also provided.

UPDATE Dash Wind Streaming App : new location & new look.

Install node-red-node-sqlite to access wind-data.db. Manually create DATA for { response: {props: {figure: { data : [DATA], layout : ...}. Node-RED (or any web application) serves two types of POST requests (wind-speed and wind-direction) for this example. The original work has one additional POST request (wind-histogram).

plotly.js-dist can be used instead in function node. See how to use require in Node-RED function node.

Other Consideration

shinydashboard makes it easy to use Shiny to create dashboards