If you have been following our smart home setup guide so far then you will already have a Home Assistant install on a Raspberry Pi, with Philips Hue connected to that install, and maybe even a few more if you have been looking through the Home Assistant components listings.
If you have done all of that then it is likely that your Home Assistant dashboard is getting a bit cluttered and unruly.
Thankfully, you are using Home Assistant and with that, you get a range of advantages. Home Assistant is extremely customisable and because of that, you can manage all of these components with your own set of views, groups and even some of your own UI additions.
And we are going to take you through just that with the following article, so let’s get right to it.
Sorting your components into groups
I have already gone ahead and customised my own Home Assistant install a bit, you can see that in the image above in which I have set up 3 of my own views (the icons along the top blue bar), one that will be my default home screen once I have finished organising (we will get to that later), another just for the lights and finally one for the settings, which includes all of my scripts, scenes, and automatons.
But before you can set up views, you are going to have to setup up some groups that can be shown within those views (the cards within the view above).
So let’s get to setting some of those groups up but first be sure to bear with us, this might get a bit complicated.
Let’s get the basics done first, to start off with you are going to need the basic code for setting up a group, here’s mine for that home card that you can see in the image above:
To start off with we need to give this group an id, that’s the first line, next up you need to hit return and then a double space (you’ll get used to doing that with yaml files), now type in “name:” and then the name that you want to give that group.
On the second line, we can get that an icon, however, you only really need that if you want to make it a view with an icon (I do it simply because I got into the habit of doing so), then you need to set up the entities that you want to show in this group, these are basically the sensors. You add one of these for each line after the “entities:” tag, as you can see I have a couple of input selects and a few sensors in this home group.
You can find your own to add to this really easily.
On this page, you will find the entities name for every one of the components that you have set up.
This may look like a confusing page of tags and text, however, it’s actually quite simple to get the hang of.
Each component has its own entities tag which start with the type of entity that the component is, such as “automation.”, “light.” or “sensor.”
After that tag you have the ID of the component that you are setting up, so if your automatons ID is “bedroom_adjustment”, then your entity will be “automation.bedroom_adjustment”.Simply copy that entity tag into your groups entity section and then it will show up on your group’s card on your Home Assistant home page.
And you can continue this on for every single group that you want to set up.
Giving those groups a home with a view
Sorry for the pun
Now that you have some groups set up you need to give them a home, of course, you can leave them on your default_view, however, that wouldn’t be very organised, would it?
So in order to make things a little more organised, you need to set up some views, which are accessible panels that are shown along the top bar and contain some of the groups that you have previously set up.
Here are the basics of setting up a view (hint: it’s pretty much the same as a group):
Basically, you write up a group in the same way as before, however, to make it a view you need to add the “view: true” to your group to turn it into a view and then add the groups and entities that you want to be shown in that view within the entities tag.
And you’re done.
Adding some of your own UI elements
As you can see in the image to the left, I have done just that with my Bedroom group, which as 3 custom UI elements within it that make things a little easier to control.
Each of these controls the light within the group, the first sets the scene, the second sets the brightness, and the third sets the temperature all for the Philips Hue light.
Normally, you would control this by tapping the light itself, however, with these UI elements things are a little easier with one less tap.
Setting up these UI elements is pretty simple, all you need is to add in an input_select or an input_slider. input_select shows a drop-down and input_slider shows a slider.
Here’s the code for those elements that you see in the image above:
These connect to a couple of elements that allows me to change the scene, brightness, and temperature of the Bedroom Ceiling Light. We aren’t going to get into automatons just yet, however, I am going to add the automatons code for those UI elements just so you can understand what they do and maybe add them for yourself.
Here it is:
The first half with the id “bedroom_adjuster” is for the input_slider, and the second half is for the scene selector, each scene has to be set up to be activated (I only included a couple to keep things smaller). I’ve done this with Philips Hue scene imports, however, you can do the same with the inbuilt scenes for Home Assistant.
And that’s it
Your Home Assistant is now all tidied up!
We hope that was helpful and helped you to manage your Home Assistant further but that’s not the end just yet.
In the next few days, we are also going to post an article for automatons in Home Assistant that are going to make your smart home so simple that you won’t have to click anything again, and then over the next few weeks are going to expand this series out further from Home Assistant with a look at some other smart home tech, so be sure to stay tuned.
In the meantime, check out the rest of our articles in this series below: