🦆

Navigation

🧑‍🦯 ⮟

Defining Your Home

Part 6 - The Automatically Generated Dashboard

says ⮞ I use 20x magnification when I code and debug. I use emoji to simplify logs for myself. If you can't handle my code style you can disable most of it on this website by toggling the button in the navbar. Shall duck continue?

Contribute

I'm not really an dashboard kind of guy, but I understand it can have great uses on phone when away.
If you feel like this dashboard is insufficient, feel free to contribute.

Automagi Dashboard

This is all automatically generated.
Connected to Mosquitto over WebSockets.
The gradient image for each scene is dynamically fetched from every device's color in the scene.
I think that's my favourite feature in this slimmed dashboard.

It also let's you control defined TV's through a remote page.

Gallery & Video

DuckDash 1

DuckDash 2

DuckDash 3

DuckDash 4

DuckDash 4

⮞ if any JS yoda wanna help out...

Today's Lesson

The dashboard only comes with one built-in status card, which displays the temperature from your sensors.

Today I am going to show you how easy it is to configure custom status cards for the home page of the dashboard.

For simplicity let's assume you have a energy price script - which data you'd like to publish and display as a status card.
Let's say it looks something like this:

⮞ View Message Processing Handler

                
mqtt_publish \
  -h 192.168.1.111 \ # 🦆says⮞ MQTT broker IP
  -u mqtt \ # 🦆says⮞ MQTT user
  -p "$(cat /run/secrets/mosquitto)" \ # 🦆says⮞ password file
  -t zigbee2mqtt/energy/price \ # 🦆says⮞ MQTT topic
  -m "{\"current_price\": \"$CURRENT_PRICE\"}" # 🦆says⮞ MQTT message with variable containing the price data

mqtt_publish \
  -h 192.168.1.111 \
  -u mqtt \
  -p "$(cat /run/secrets/mosquitto)" \
  -t zigbee2mqtt/energy/price \
  -m "{\"current_price\": \"$CURRENT_PRICE\"}"

            

Now the easiest way of getting that displayed on the dashboard is to use what we already have - Nix automations!
First let's create a mqtt_triggered automation:

⮞ View Message Processing Handler

                
{ # 🦆 says ⮞ my house - qwack 
  config,
  lib,
  pkgs,
  ...
} : let
in { # 🦆 duck say ⮞ qwack
  house = {
    zigbee = {
      automations = { 
        mqtt_triggered = {
          energy_price = {
            enable = true;
            description = "Writes energy data to file for dashboard";
            topic = "zigbee2mqtt/energy/price";
            actions = [
              {
                type = "shell";
                command = ''
                  touch /var/lib/zigduck/energy_price.json
                  echo "$MQTT_PAYLOAD" > /var/lib/zigduck/energy_price.json
                '';
              }
            ];
          };     
        };
      };
    };
  
  };}

{
  config,
  lib,
  pkgs,
  ...
} : let
in {
  house = {
    zigbee = {
      automations = { 
        mqtt_triggered = {
          energy_price = {
            enable = true;
            description = "Writes energy data to file for dashboard";
            topic = "zigbee2mqtt/energy/price";
            actions = [
              {
                type = "shell";
                command = ''
                  touch /var/lib/zigduck/energy_price.json
                  echo "$MQTT_PAYLOAD" > /var/lib/zigduck/energy_price.json
                '';
              }
            ];
          };     
        };
      };
    };
  
  };}

            

This simply creates a file containing the mqtt message and saves it as '/var/lib/zigduck/energy_price.json'.
Basic stuff huh? Let's move on to step two, which is the last and final step.
We're creating a Nix configured status card that reads the file content.

⮞ View Message Processing Handler

                
{ # 🦆 says ⮞ my house - qwack 
  config,
  lib,
  pkgs,
  ...
} : let
in { # 🦆 says ⮞ qwack
  house = {
    dashboard = {
      statusCards = {
        energy_price = { # 🦆says⮞ name of card
          enable = true;
          title = "Energy"; # 🦆says⮞ title that is displayed inside the card
          # 🦆says⮞ Font Awesome icon library https://fontawesome.com/icons
          icon = "fas fa-dollar";
          color = "#2196f3"; # 🦆says⮞ HEX color for the icon
          filePath = "/var/lib/zigduck/energy_price.json"; # 🦆says⮞ file path to read data from
          # 🦆says⮞ since our script had this json field - we read this specific field
          jsonField = "current_price"; 
          # 🦆says⮞ format output. {value} is the value of the field we specified above - and i want to display it in SEK/kWh
          format = "{value} SEK/kWh";
          details = "Current price"; # 🦆says⮞ footer of the card
        };
      };
    };
    
  };}

{
  config,
  lib,
  pkgs,
  ...
} : let
in {
  house = {
    dashboard = {
      statusCards = {
        energy_price = {
          enable = true;
          title = "Energy";
          icon = "fas fa-dollar"; # Font Awesome icon library https://fontawesome.com/icons
          color = "#2196f3";
          filePath = "/var/lib/zigduck/energy_price.json";
          jsonField = "current_price";
          format = "{value} SEK/kWh";
          details = "Current price";
        };
      };
    };
      
  };}

            

⮞ and dat iz it yo! no qwackin' way dat was hard??

Keep adding as many cards as you'd like.
That's the only configurable options for this dashboard, if you configured everything from earlier steps everything should just work.
Until the next one!

Source Code

View source code on GitHub

Keep Reading

Part 1. The module, the options and defining devices
Part 2. Configure your Mosquitto/Z2MQTT
Part 3. Nix Configured Automations
Part 4. Writing a Server Service - in Rust
Part 5. Writing a Client - With Voice Commands
Part 6. The Auto-Generated Dashboard⮜🦆here u are

Comments on this blog post