Smart Home Dashboard

Home Assistant – Dashboard

Part 5 in this guide explained the general setup of Home Assistant and plugins used. This part explains the entire dashboard itself and all the components in it.

The following image shows my dashboard and features a heading number for every component used, which is explained in more detail further down below. My entire lovelace config is uploaded here, so you may clone it.

the dashboard with every component
  1. Weather
  2. Battery status
  3. Changed indicator
  4. Waste collection
  5. Calendar events
  6. Temperature and humidity
  7. Server stats
  8. Power consumption
  9. Internet traffic and WLAN usage
  10. DDNS uptime
  11. Calorie tracker
  12. last updated

1. Weather

This just uses the default weather integration which is probably installed by default. The integration is called Meteorologisk institutt (Met.no). I did no further configuration except some CSS adjustments using the card mod explained in part 4.

  - type: weather-forecast
    entity: weather.home
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          font-weight: 700 !important;
        }
        .state {
          font-size: 1.5em !important;
        }
        ha-card > div > div > div > div.attribute {
          color: #555 !important;
        }
        ha-card > div > div > div.templow {
          color: #555 !important;
        }

2. Battery status

This is just a glance-type card with 4 entities. I’m getting the data from the smartphone and the tablet by using the official Home Assistant app. How to get the voltage of the Inkplate battery is described in part 3. For my laptop I thought a bit about my approach and then just settled on a small python script to get the reading and send it over MQTT to my broker which is then handled in the same way the Inkplate readings get handled. The python script can be found here. I’m using the windows task management (like a cronjob) to execute this script every 5 minutes. The data is then queried by an InfluxDB sensor, which is added into the configuration.yaml. I’ve written a blog post about this here. I’m using 7 days in my where clause to get the last known value in this time. If you just use a day and your device hasn’t been online for 2 days, it will show unknown. There’s probably some option to retain the last known value but I did not find a way in Home Assistant in a short search. If you know an easy way, please comment.

sensor:
  - platform: influxdb
    queries:
      - name: Zenbook-Battery
        field: battery
        where: 'time > now() - 7d'
        group_function: last
        database: sensors
        measurement: '"sensors"."autogen"."zenbook"'
...

3. Changed indicator

Because I always forget for how long my sheets and towels are in use I designed a small workflow to help me. I stuck a NFC tag beside my towels and sheets inside the closet and added these to Home Assistant. Then I’ve added two automations which are triggered by the scanning of these tags. They don’t do anything else though. In the configuration.yaml I’ve added 2 template sensors which query the last_triggered attribute of the automation and display the days. It’s not the most accurate thing and will only display 1 day ago, once it reached 24h after scanning – but it’s good enough for my use case.

sensor:
  - platform: template
    sensors:
      last_triggered_nfc_bettwaesche:
        friendly_name: "Last Trigger NFC Bettwaesche"
        entity_id: sensor.time
        value_template: "{{(as_timestamp(now()) - as_timestamp(strptime(state_attr('automation.nfc_tag_bettwaesche', 'last_triggered'), '%Y-%m-%d'))) | timestamp_custom('%d', false) | int - 1}} days ago"
...

4. Waste collection

This is a plugin I installed in HACS, the hacs_waste_collection_schedule by mampfes. If the plugin features your city you have almost no further work to do. If not, then there are ways documented to still get your schedule to show up. The images I have got from some Home Assistant forum thread, which I cannot find anymore, I hope it’s okay that I upload them into my repository here, as they were public on the forum as well. If the person who posted them is reading this: just message me the forum post and I will include you as the source in here.

The data is then made available as a sensor.

sensor:
  - platform: waste_collection_schedule
    name: Flach
    count: 4
    value_template: 'in {{value.daysTo}} days'
    types:
      - Flach
...

5. Calendar events

To display the events I’m using the atomic-calendar-revive plugin from HACS. Currently I’m experiencing some issues with it, but it looks quite nice. I hope the dev gets my issue fixed. My configuration of the atomic-calendar-revive plugin can be seen in the linked issue. You may connect your Google calendar with this plugin. I’ve switched from Google to a selfhosted Baïkal calendar. You need to use the official calendar integration to connect your calendar, so atomic-calendar-revive can use it, using the configuration.yaml like this:

calendar:
  - platform: caldav
    username: myuser
    password: mypass
    url: https://baikal.nuc.local/dav.php/calendars/myuser/default/
    verify_ssl: false

6. Temperature and humidity

For these graphs I’m using the mini-graph-card installed from HACS. The data is queried by Zigbee2Mqtt from the SONOFF sensors mentioned in part 2, Zigbee2Mqtt is explained in part 5 and part 7. My setup for one of these cards looks like this:

type: custom:mini-graph-card
name: Wohnzimmer
line_color: '#b37169'
font_size: 80
decimals: 1
align_state: center
line_width: 8
show:
  legend: false
  icon: false
entities:
  - entity: sensor.sonoff_temp_wohnzimmer_temperature
    name: Temperatur
    index: 0
    y_axis: secondary
  - entity: sensor.sonoff_temp_wohnzimmer_humidity
    name: Humidity
    show_state: true
    index: 1
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;      
    }
    ha-card > div > div > span {
      font-weight: 700 !important;  
    }
    ha-card > div {
      font-weight: 700 !important;  
    }
    ha-card > div > div.name > span.ellipsis {
      color: #000 !important;  
    }
...

7. Server stats

For these graphs I’m using the mini-graph-cards from the previous paragraph as well, but I adjusted the look a little to make them better readable. There is unfortunately no way to adjust the height without losing the graph – this way I would be able to preserve some space and maybe squeeze another component in there.

I thought about an integration of this data for quite a while. The NUC is the one Home Assistant runs on (so on premise). The Server and the Odroid are on different locations and I do not want to open ports on them or the NUC, to send data to any of those devices. Because I have a Datadog agent running on every one of those machines (free up to 5 machines btw.) I used Datadog as a intermediary, because Datadog already gets the necessary data. There is no easy way to retrieve the data in the way I want over the API, so I created a little tool to do this and published a blog post about it. The tool is executed every 10 minutes to gather the data for the 3 servers from the API and calculate an average (the last value would be too inaccurate) over those 10 minutes. The data is then sent to InfluxDB. An InfluxDB sensor retrieves the data for display in Home Assistant.

sensor:
  - platform: influxdb
    queries:
      - name: NUC-CPU
        field: cpu_used_percentage
        where: "time > now() - 1d and \"host\"='NUC'"
        group_function: last
        database: datadog_metrics
        measurement: '"datadog_metrics"."one_day_only"."metrics"'
...

8. Power consumption

As described in part 1 of this guide I’m using Kasa HS110 power plugs (only 2 of them at the moment). They have been reverse engineered and can be communicated with over TCP. I am using the tplink-plug-exporter from fffonion to get the data from the plugs. I have an instance of Prometheus running which scrapes the data from the tplink-plug-exporter. A Grafana dashboard then displays the data from Prometheus. The dashboard I used can be found here. However I made a new Grafana dashboard with only the panel I want and styled it in a way that it works for the embedding. In Home Assistant this is just an iframe card with a little styling as well. In Grafana just click the dropdown on the panel you want and hit share, then copy the link. You may want to append &theme=light to the URL to change the theme. The time frame can be adjusted with a few arguments as well, see my example below.

cards:
  - type: iframe
    url: >-
      https://grafana.nuc.local/d-solo/B6fqNcYGk/power-usage-eink?orgId=1&panelId=24&from=now-12h&to=now&theme=light
    aspect_ratio: 50%
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }

My first idea was to use the external Grafana renderer which just renders a panel as an image which can then be displayed in Home Assistant. However these images looked a bit blurry and the scaling was a little off, so I changed my approach to an iframe. If you’re interested in using the external renderer in a Docker environment, make sure to read my blog post about that.

9. Internet traffic and WLAN usage

The internet traffic and WLAN usage is composed of 4 more iframes which display panels from Grafana, exactly as mentioned in the previous paragraph. Because I’m stuck with a Fritzbox without SNMP (as described in part 2) I had to look for alternatives to get some data. Someone by the name Schmidsfeld created TelegrafFritzBox which uses Telegraf to query data from the Fritzbox. Unfortunately this only worked well for DSL internet contracts and since I’m using a cable one, I relied on a fork by Lexiv. I then made my own fork for a dockerized cable setup.

I also included my Grafana dashboard in that repository, which I got from a fork and customized it a bit to adjust it to my connection. Telegraf is scraping the data from the Fritzbox router and pushing the data to InfluxDB. Grafana then uses the InfluxDB to display the data. I simply created a new Grafana dashboard with the 4 panels I needed, customized them a bit and used an iframe in Home Assistant for display. To calculate the traffic I needed to play around with subqueries, which I posted a blog article on. Unfortunately it seems that the data is not very accurate from the Fritzbox and cannot be used to monitor a metered connection efficiently – but for a general overview it’s neat.

10. DDNS uptime

For monitoring my DDNS services I’m using the uptime-card by dylandoamaral, installed over HACS. The configuration is fairly simple, just put this in your configuration.yaml and edit the host to match the one you’re monitoring for uptime.

binary_sensor:
  - platform: ping
    name: ddns1
    host: example1.com
    count: 10
  - platform: ping
    name: ddns2
    host: example2.com
    count: 10

In Home Assistant my configuration for this card looks like this. This is a bit work in progress, as I’m not sure if I will keep the colors this way, as I’m thinking about how I can distinguish it better in grayscale and what colors can be displayed by the Inkplate.

  - type: custom:uptime-card
    entity: binary_sensor.ddns1
    name: DDNS 1
    hours_to_show: 24
    title_adaptive_color: true
    average_template: '[[[ return variables.uptime.toFixed(2); ]]]% uptime'
    bar:
      height: 20
      round: 5
      spacing: 10
      amount: 10
    color:
      none: '#eee'
      ko: '#eee'
      ok: '#333'
      half: '#aaa'
    show:
      status: false
      icon: false
    alignment:
      status: spaced
      header: center
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
          background: #fff;
          font-weight: 700;
        }
        ha-card > .footer > div {
          color: #333 !important;
        }

11. Calorie tracker

This is a based on a little tool I developed in march. A python script retrieves my user data from fddb.info, makes some calculations and persists the daily calories consumed to a Postgres database. This database is then used in Grafana as a datasource to display the data. I plan on adding the retrieval of macronutrients in the future, as this would be a metric I’m more interested in. In Home Assistant it’s just another iframe, like the ones already discussed.

12. last updated

This is my own plugin I created for this use case. It amazed me, that this didn’t exist (or at least I couldn’t find it) because I have seen some dashboards which feature something like that. You can get it from my Github, or install it over HACS. Just search for Update Time Card in the Frontend category. The basis of this plugin is the simple-clock-card plugin by fufar, which I customized to get a non-obtrusive time display.

  - type: custom:update-time-card
    hide_seconds: true
    font_size: 1rem
    card_mod:
      style: |
        ha-card {
          font-weight: 700;
        }

Well, this is it, my configuration and all the components on my dashboard. If you’re interested in having a deeper dive have a look at the entire lovelace yaml which I uploaded here.

The next and last part of this guide will show my NUC setup featuring services used in this dashboard, like the CalDAV Baikal, Zigbee2Mqtt and of course my hass screenshotter fork to render the dashboard as an image.

2 Comments

  1. Anonymous

    Thank you for sharing this excellent write up of creating an e-ink smart home kiosk. I particularly enjoyed the architecture diagram.

Leave a Reply

Your email address will not be published. Required fields are marked *