Watch the Video here
As soon as I saw an example of someone’s HA Dashboard I was smitten. I knew I had to have it! Unfortunately, when I started looking into how to set it up I was very intimidated and kept putting it off. Well, now with Hass.io, and a great Add-on maintained by @frenck It’s a lot easier to get started.
As always there is more than one way to do this. As of right now, the only way I know how is by using the Hass.io add-on, so that’s what I’ll show you. There are good written instructions out there for using other methods, with other set-ups.
First thing we have to do is install AppDaemon. AppDaemon is a way to run python based automation apps for Home Assistant. If you think that sounds complicated, you should read what the official description says; “AppDaemon is a loosely coupled, multithreaded, sandboxed python execution environment for writing automation apps for Home Assistant”. AppDaemon makes a lot of things possible that aren’t possible, or at least are really hard to do with HA automations. The most important thing for us, right now, is that AppDaemon makes it possible to create a sweet looking dashboard, that’s meant to be viewed on a tablet and mounted on the wall. It brings a bunch of HA info into one place, that can be touch activated, and is dang purdy!
Getting AppDaemon running is simple with Hassio. There are a few different ways to get the AppDaemon Addon. The one I had success with was the one maintained by @frenck. To get it click the Hassio button, then the shopping cart, then paste this URL in the box for Add-on Repositories:
https://github.com/hassio-addons/repository
Now scroll down and click AppDaemon3. AD3 is technically beta right now I think, but it won’t be for long. I’m trying to future proof our setup as much as possible. The most useful written instructions are available if you click the website button, then click where it says “Please read the instructions”. They tried to hide the instructions, but I found’em!
You don’t need to change anything in the Options section. Just click install.
There are some files and folders that are required, but thanks to our buddy frenck, the folders and starting files are created when we start the add-on! Thanks frenck!
Next thing we need to do is edit the appdaemon.yaml. You can use your configurator-inator or connect through samba and edit it with VScode. In the lines where it says ha_url and dash_url, put the IP address of the pi (or other computer) that runs Hassio. Leave the ports as 8123 for HA and 5050 for dash. If you have a password for HA use the line ha_key, or the secrets entry.
After you add those lines save and then restart AppDaemon.
Thanks again to frenck we already have some expample files created to check out our AppDaemon and HADashboard install. To see the sample dashboard you can type your pi’s IP address and port 5050 in your browser, or just click where it says Open Web UI. There’s a welcome page and it will list your dashboards. For now the only one there is Hello. Click that and you should see your first, most basic dashboard.
Now for the fun part! Let’s create our own dashboard using entities from Home Assistant.
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html
You can use the configure-inator (or some lesser species of text editor) create a file called something.dash in the appdaemon – dashboards folder. Paste in these lines. You can change “test” to whatever you want to call it.
##
## Main arguments, all optional
##
title: Main Panel
widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 8
global_parameters:
use_comma: 0
precision: 1
use_hass_icon: 1
layout:
–
Now, under layout, we can start putting in entities from Home Assistant. So, open your home assistant states page, that’s the easiest place to find the names of all your entities. Decide which entities you want on your dashboard, and copy the name. Now under layout, type 4 spaces then a dash. Don’t use tab! I lost 3 hrs of my life researching an error I was getting and it turned out it was because I hit tab instead of 4 spaces. Paste your first entity, then put a comma, one space, and the next entity. Each entity is becoming a widget. We set 8 columns, so you can have 8 widgets in each row. If you want some entities to be larger, you can add (x, y), where x is the number of columns and y is the number of rows that widget will occupy. If you want to skip a row, just put the dash and enter to go to the next line down. This is meant to be a pseudo-graphic layout. If you use a lot of imagination, and squint a little you can see that you’re making rows and columns.
That’s the basics of HA Dashboard. But there’s a lot of customization you can still do. You can define specifics about a widget by declaring it above the layout. With the declaration “widget-style” you can use CSS properties to modify the widget.
https://www.w3schools.com/cssref/default.asp
I don’t know much about using CSS, but a few easy and useful properties are:
- font-size
- Color
- Background
You can add custom icons using Material Design Icons, or Font Awesome, but Font Awesome wasn’t working for me for some reason.
Icon_on: mdi-
Icon_off: mdi-
Or you can set it to use the same icon you’ve already attached to that entity in home assistant with “use_hass_icon: 1”
Here’s a couple dashboard examples: https://github.com/home-assistant/appdaemon/tree/dev/conf/example_dashboards
Finally, skin. There are 5 pre-built skins to choose from. Zen, obsidian, glassic, simplyred, and default. But for the really ambitious you can also create your own skins! Don’t expect it to be easy! Nothing worth doing is ever easy.
Let’s see what awesomeness you all can create!
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development