Dashboards

In this chapter, we are going to import the data processing logic and dashboards for the Gbox420 automation. This chapter assumes you already installed Home Assistant OS and the required add-ons. You can download the latest dashboards from the HomeAssistant folder on GitHub.

There are three main parts:

Node-RED flow: This contains the data processing logic and a control interface for the Gbox420 sketch. Communicates with the ESP-link firmware over MQTT and is responsible for relaying sensor readings to Home Assistant.
Grafana dashboard: Displays the current status and a historical overview of sensor readings
Home Assistant Lovelace dashboard: The main dashboard that ties all the components together in Home Assistant, a "dashboard for other dashboards"

Table of contents

Node-RED Flow

Connecting to MQTT broker

Email authorization

Deploying the Gbox420 flow

Database cleanup

Grafana dashboard

Home Assistant Lovelace Dashboard

Interactive dashboard

Node-RED Flow

Node-RED is a visual programming interface for creating data processing logic called Flows. This is the "brain" of the automation that handles receiving and storing sensor readings in a database, checking alerts, and displaying interactive dashboards. ( The Gbox420 Arduino modules are still fully autonomous and do not need Node-RED to operate).
Node-RED is installed as an Add-on to Home Assistant.

Gbox420 Node-RED dashboard

Interface for controlling the Gbox420 sketch

Gbox420 Flow

Data processing logic, communicates with the Gbox420 sketch over MQTT

Node-RED has its own built-in Add-on store called Palette where you can install new Nodes. The Gbox420 flow requires the following nodes:

node-red-contrib-deglitch
node-red-contrib-ui-level
node-red-contrib-tableify

Install the nodes from Node-RED - Hamburger menu on the top right - Manage palette - Palette - Install tab:

Once you installed all required add-ons it is best to restart Node-RED from Supervisor - Dashboard - Node-RED - RESTART.

Import the Node-RED flow.json from Node-RED - Hamburger menu on the top right - Import menu, by clicking the select a file to import button and importing to a new flow.

Navigate to the new tab called Gbox420.

Connecting to MQTT broker

Double click the first node on the top left called Gbox420/ which is an mqtt in node that connects to the MQTT broker hosted by Home Assistant and subscribes to messages from the ESP-link on the Gbox420/ topic.

In the Edit menu modify the Local Mosquitto MQTT server settings:

On the Security tab enter your Home Assistant credentials and click Update:

Email authorization

Node-RED sends emails when a sensor reading is outside an acceptable range. You can use any SMTP server, in this example I'm going to use Google Gmail's SMTP function. For this you need to create an App password in your Google Account:

Find the email node (top right of the Gbox420 flow) and update the To, UserID and Password fields to match your Google email address + App password.

Deploying the Gbox420 flow

Enable the Debug output and Deploy the Flow:

After deploying the changes the Gbox420/ mqtt in node should get connected to the Mosquitto MQTT broker. To verify incoming messages open the Debug log using the Bug icon on the top right side. It should capture two messages with a JSON payload every five seconds:

EventLog: Text output of the last few events
Log: Sensor readings grouped by the sensor name

Database cleanup

Add to HA configuration.yaml:

recorder:

commit_interval: 300 # Save to database every 5 minutes

purge_keep_days: 7 # Keep 7 days of data

auto_purge: true # Purge old data automatically

include:

entity_globs:

- gbox420_* # Only include entities starting with gbox420_b

The Main module reports its status every 5 seconds by default, to the Dashboard. Storing each report in the database would cause slowdowns where the Dashboard graphs take a long time to load.s This page has been taken down for viewing. This is due to its violation of the terms of service or program policies. The content is blocked from being served to users. page has been taken down for viewing. This is due to its violation of the terms of service or program policies. The content is blocked from being served to users.

Grafana dashboard

Grafana is installed as an Add-on to Home Assistant, during the installation we already connected Grafana to the InfluxDB data source, and Grafana allows anonymous access on a local network on port 3000. In this section, we will import the dashboard to display the data fetched from the database.

Navigate to Grafana - Dashboards - New, and click the Import button:

Select the GrafanaDashboard.json file downloaded from GitHub and import it as Gbox420:

Once the dashboard is imported click the Share dashboard on panel icon:

Copy the Link URL:

We are going to make a few changes to the link:

Use the DuckDNS domain instead of an IP
Pass query parameters like Refresh frequency, preferred dashboard layout, and a dynamic to-from range

Original link:
https://192.168.9.100:8123/api/hassio_ingress/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/d/x84g-i9Gz/gbox420?orgId=1&refresh=5s&from=1621428739106&to=1622033539106

Updated link:

https://growboxguy.duckdns.org:8123/api/hassio_ingress/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/d/x84g-i9Gz/gbox420?orgId=1&refresh=5s&from=now-7d&to=now&kiosk=tv&theme=dark

For now, store the updated link, we will need it in the next step during the Lovelace Dashboard setup.

Home Assistant Lovelace Dashboard

Home Assistant manages the default Overview Lovelace dashboard that by default shows all entities grouped into types. Node-RED supports creating Sensor, Switch, and Binary sensor entity types, and as soon the Gbox420 Flow receives an MQTT message it will create/update entities starting with the Gbox420 prefix.

The Gbox420 has its own Lovelace dashboard , add it from Settings - Dashboards using the Add dashboard button:

Create a New dashboard:

Title: Gbox420

Icon: mdi:leaf-maple

URL: lovelace-gbox420

Switch to the new Gbox420 dashboard and select the ... menu - Edit Dashboard option. Check the Start with an empty dashboard option and take control of the dashboard:

On the now editable blank dashboard select the ... menu and Raw configuration editor:

Paste in the content of the Gbox420 Lovelace Dashboard, overwriting everything in the original configuration. Replace the following entries:

growboxguy.duckdns.org to <YOURDOMAIN>.duckdns.org
Enter your own spreadsheets ID (only if you are using the Google App Script logging along Home Assistant)

Save and exit the dashboard editor:

The Gbox420 dashboard should now display four tabs:

Grafana dashboard
Node-RED dashboard
Lovelace dashboard
Google Sheets Log (optional)

Interactive dashboard

You can make the dashboard interactive with the help of HACS and the following repositories:

card-mod : Allows you to apply CSS styles to various elements of the Home Assistant Dashboard
slider-entity-row: Add a slider to rows in lovelace entities cards.
multiple-entity-row: Show multiple entity states, attributes and icons on entity rows in Home Assistant's Dashboard
fold-entity-row: Fold away and hide rows in lovelace entities cards
stack-in-card: Allows to group multiple cards into one card
numberbox-card: NumberBox for input sliders and number entities

You'll also need to copy automation_main.yaml to Home Assistant's config folder, and include it in configuration.yaml using:
automation second: !include automations_main.yaml