DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for showdev: Serverless IoT Dashboard
Michael Salaverry
Michael Salaverry

Posted on

showdev: Serverless IoT Dashboard

I want to showdev how I built a serverless IoT (internet-of-things) dashboard for a Tasmota / BME680 air quality sensor.

Preview of the real-time dashboard:
Dashboard Graph and data table

Live Demo / Repository:

GitHub logo barakplasma / Browser-MQTT-Dashboard

receives and stores MQTT messages relayed from a Tasmota ESP8266 and displays them on a realtime graph and table dashboard




The hardware:
Prototype:
ESP8266 + BME680 on a breadboard
ESP8266 + BME680 air quality sensor soldered together in a cardboard case
(I made the case out of corrugated cardboard I had lying around, and sealed it up with a few more sheets of cardboard glued together. I did leave vents so that it can detect the actual air too)

The architecture:
UML diagram of architecture

The data is collected using Tasmota on an ESP8266. I soldered a BME680 directly to the ESP8266 pins and mapped the pins accordingly using the web config. I configured Tasmota to send the data to a free public MQTT broker provided by emqx. It would be ok to self host broker, but that wouldn't be as serverless. The Tasmota/ESP8266 is connected to my home wifi, and since it's only sending messages out, no special NAT changes or Port Forwarding was required.

The serverless static site architecture is based on MQTT.js reading from an MQTT broker, and displaying the data using Chart.js with chartjs-plugin-streaming for real-time chart updates.
I decided to use vanilla javascript DOM updates to keep it simple. The static site stores the messages within the browser for historical purposes, and to enable the first load to happen with live data. Static site hosting and CI/CD is done through Github (Pages and Actions).

GitHub logo mqttjs / MQTT.js

The MQTT client for Node.js and the browser

mqtt.js

Github Test Status codecov

MQTT.js is a client library for the MQTT protocol, written in JavaScript for node.js and the browser.

MQTT.js is an OPEN Open Source Project, see the Contributing section to find out what this means.

JavaScript Style Guide

Important notes for existing users

v4.0.0 (Released 04/2020) removes support for all end of life node versions, and now supports node v12 and v14. It also adds improvements to debug logging, along with some feature additions.

As a breaking change, by default a error handler is built into the MQTT.js client, so if any errors are emitted and the user has not created an event handler on the client for errors, the client will not break as a result of unhandled errors. Additionally, typical TLS errors like ECONNREFUSED, ECONNRESET have been added to a list of TLS errors that…


GitHub logo chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag


Simple yet flexible JavaScript charting for designers & developers

Downloads GitHub Workflow Status Coverage Awesome Slack

Documentation

All the links point to the new version 3 of the lib.

In case you are looking for the docs of version 2, you will have to specify the specific version in the url like this: https://www.chartjs.org/docs/2.9.4/

Contributing

Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.

License

Chart.js is available under the MIT license.







GitHub logo nagix / chartjs-plugin-streaming

Chart.js plugin for live streaming data

chartjs-plugin-streaming

npm GitHub Workflow Status Code Climate Awesome

Chart.js plugin for live streaming data

chartjs-plugin-streaming 2.x requires Chart.js 3.0.0 or later. If you need Chart.js 2.x support, use the following versions.

Documentation

Development

You first need to install node dependencies (requires Node.js):

npm install
Enter fullscreen mode Exit fullscreen mode

The following commands will then be available from the repository root:

npm run build      # build dist files
npm run build:dev  # build and watch for changes
npm run lint       # perform code linting
npm run package    # create an archive with dist files
npm run docs       # generate documentation (`dist/docs`)
npm run docs:dev   # generate documentation and watch for changes
Enter fullscreen mode Exit fullscreen mode

License

chartjs-plugin-streaming is available under the MIT license.

Top comments (1)

Collapse
adam_cyclones profile image
Adam Crockett

Genius I have a project to copy now πŸ˜ƒ

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.