Smart Home Dashboard

Home Assistant – General Setup

This part of my guide explains my general setup of Home Assistant and plugins used to create a useable lovelace view for rendering. Every component of the dashboard / lovelace view itself is explained in part 5 of this guide. The installation of Home Assistant and the services used is explained in part 6.

Grid setup

The Inkplate features a 1200×825 pixel resolution. For this reason I configured the screenshot tool mentioned in earlier parts of this guide to also create a screenshot in this resolution. For readability and aesthetics I found 3 vertical stacks in Home Assistant to be the best setup. This way I can control what element is displayed at which location and it’s quite easy to use. Inside the vertical stacks I sometimes have a horizontal stack to add elements next to each other, for example the temperate and humidity graphs in the middle stack. The entire vertical stack in the middle is composed of horizontal stacks which feature 2 or 3 elements.

Theme

When using an e-ink display the background should be quite bright (white would be best) so you get enough contrast when displaying content. I suppose you could use an inverted setup, but I do like the paperlike look with black text on white background more. For this reason I’ve searched for a nice light theme. The github_light_theme from einschmidt looked promising. However it’s background is colored and I wanted to have it solid white. So I cloned the theme and adjusted the background color. You can find the YAML file here. Just download the file, and save it to the themes folder in your Home Assistant configuration into a new subfolder. You may need to restart Home Assistant to get to choose the theme. When creating a new lovelace view you can choose this theme and have only this view in a light theme and do not influence your nice, handcrafted dark theme everywhere else.

HACS & Kiosk mode

To render the dashboard image without menu elements from Home Assistant it’s necessary to get a fullscreen mode. Kiosk mode allows you to append ?kiosk to your URL to show the lovelace view in fullscreen without the menu on the side and the bar on the top. The plugin can be found here. You may want to install HACS to manage your plugins so you don’t have to deal with every plugin for itself. Many other plugins explained in the next part of this guide are also installed over HACS.

InfluxDB

I’m using InfluxDB to persist all events from Home Assistant which can then be displayed in a Grafana dashboard. Some components explained in the next part of this guide rely on data from InfluxDB. To use the InfluxDB platform for sensors and get data from InfluxDB, you need to include this part in your configuration.yaml to make use of the integration. If you’re just interested in getting data but not persisting events from Home Assistant (so: not bidirectional) uncomment the 2 lines at the bottom. This will stop Home Assistant from reporting data to InfluxDB.

influxdb:
  host: influxdb.influxdb
  verify_ssl: false
  port: 8086
  #  exclude:
  #    entity_globs: "*"

Zigbee2Mqtt

Zigbee2Mqtt is used to communicate with Zigbee IoT devices, like a temperature sensor. In Home Assistant you need to install and configure the MQTT integration to receive events by MQTT. A MQTT broker is necessary for this to work. I’m using a selfhosted Mosquitto instance, but you may want to use the Mosquitto addon. In part 1 I described the hardware necessary for Zigbee. For instructions how to configure Zigbee2Mqtt see the official documentation.

Card mod

Because space on the Inkplate is quite limited and some elements need to be styled a bit differently (larger font-size, bold text, less padding of elements) you need to fiddle around with CSS. Home Assistant uses a shadow dom, so it’s not possible to style elements just by throwing in some CSS. A very comfortable way is the lovelace-card-mod by thomasloven. You just install this plugin and are able to style elements by appending a specific property in lovelace. However it only styles elements within the ha-card element, so you cannot style everything unfortunately. I show my usage as an example on the Weather widget in part 6 as well as link to my entire lovelace configuration.

Pages: 1 2 3 4 5 6 7