Hi, after years of tinkering with Home Assistant, I’ve perfected my Home Assistant Dashboard, and I believe this is the best layout that everyone should use. I will show you how I created this Dashboard on the new Shelly Wall Display XL and will give the code away for free! Let’s do this!
🔗 Download the free dashboard code here: https://ko-fi.com/s/9939e07c0d
🔗 Order the Shelly Wall Display XL here: https://tinyurl.com/57urk8ws
⭐⭐⭐ NOTE: ⭐⭐⭐
This article is the script for a YouTube video. I wrote it before recording the video. You can help me continue doing this by checking out the video, commenting on it, giving it a thumbs up, and subscribing to my YouTube channel. This will ensure that the video is offered more frequently to new visitors, allowing them to stay informed about the latest Home Assistant tutorials and smart home-related product reviews.
I appreciate your support!
Ed
Introduction
This is so exciting! Today, I will finally show you how I created my dashboard. It took me years to build the perfect dashboard. I’ve been using my layout for a couple of years now and I’m very happy with it. And now Shelly has released their Wall Display XL, on which my Home Assistant Dashboard runs perfectly and fast, so I also want to show that to you.
The Shelly Wall Display XL
The Shelly Wall Display XL is a 10-inch display featuring four physical buttons that enable you to toggle switches or perform Smart Home actions. You can use it to control all your Shelly devices, but even better, you can display your Home Assistant Dashboard on it out of the box with very little effort. And what’s great is that it comes with a wall mount that you can install in place of a regular wall switch.
You do need a neutral (blue) wire behind your wall switch to use the buttons on the wall display as switches for your physical lights. I don’t have a neutral wire behind my wall switch yet, so I wasn’t able to mount it properly. However, I will add that blue wire in the future, allowing me to use the Shelly Wall Display XL to its full potential.
That said, you can also configure the buttons to control other Shelly devices in your home. Unfortunately, I haven’t figured out yet how to link the physical buttons to Home Assistant devices—that would make it even better!
If you have Shelly devices at home, like I do, you can, for example, set up your display to control those devices. I can turn my switches on and off and adjust the brightness of my lights. You can also control radio stations or your Sonos speakers. Adding those buttons is super easy, so you don’t need to be technical at all. And… you can mount the display either horizontally or vertically!
But the killer feature of the Shelly Wall Display XL is that it natively supports Home Assistant! You can have it automatically search for your Home Assistant server at home, and from that moment on, your dashboard will be displayed on the Shelly Wall Display XL.
I did encounter a minor issue that’s easy to resolve. If your Home Assistant Dashboard doesn’t appear on the screen, you just need to re-download the Device Images, and then it will work again. I’m sure Shelly will fix this quickly.
The display responds really fast, almost as fast as when I load my Home Assistant Dashboard on my PC. It’s such a relief compared to my Fire HD tablet, where I used to display my Home Assistant Dashboard. That one is sometimes quite slow.
The Home Assistant dashboard
But enough about the hardware. I promised I’d show you how I built my Home Assistant Dashboard, so here we go. I used the standard sections in Home Assistant and added a few custom components here and there, such as Mushroom Cards.
What I found important was to have the most crucial information on my homepage, and from there, always be able to navigate to all other sections and also return to the homepage. As you can see, my dashboard is in Kiosk Mode. If you want to do that too, check out this video, where I explain exactly how to set it up.
General layout
At the top of the screen, I’ve placed my badges, which also serve as the main navigation to jump back to a previous page or the homepage. For example, if I navigate to the music page, I can return to the homepage by clicking the home badge.
If you also want a music player for your Sonos speakers, check out this video where I explain how to build it.
The badge on the far right toggles kiosk mode on and off, allowing me to quickly access the standard menu in Home Assistant whenever needed.
At the top, I also have weather information, the status of my smart lock (with the ability to lock/unlock), how many lights are on in my house, and stats on my YouTube subscribers and views. Next to that is the Bitcoin price, plus travel times to and from my girlfriend’s house using the Waze Travel Time integration. Watch this video if you want to create a comprehensive overview of your cryptocurrencies.
The Homepage
The homepage is divided into three sections:
- The left section is for notifications and main navigation
- The middle section is for calendar information
- And the right section is for energy usage information
Left side of the Homepage
At the top left, I’ve reserved a space for important notifications. For example, I get a notification when the garbage needs to be taken out, when a mouse is caught in my mousetrap, or when my girlfriend and I are celebrating an anniversary. This way I never forget to congratulate her…
Below that, you’ll find shortcuts to category pages. In my case, those are Music, Lights, Security, Stats, and House pages. The music page I’ve already shown. The Lights page displays the number of lights on and which ones are active. For this, I use the custom Auto-Entities card, which allows you to filter by values, in this case, lights that are on. To learn how I calculate the number of lights on, watch this video.
Under Security, I have an overview of my cameras, allowing me to quickly check if everything is safe in and around my house. On the Stats page, I’ve placed some information about energy usage, but honestly, I never really use this page. I need to consider another purpose for this.
Subpages
Under the House category, I’ve placed several subcategories. On the left-hand side, you’ll find links to various subpages. On each subpage, I created a new badge to return to the overview of subpages, making navigation back easy. You can choose to return to the overview or the homepage.
On the TV page, I can control my Logitech Harmony Hub and Dreamscreen.
On the Sprinkler page, I have an overview of my irrigation system. That’s actually the most valuable automation I have in my house. In this video, I explain how it works—it’s an older video, but it remains relevant.
The Washing Machine page shows the status of my washing machine. I also made a detailed video explaining how to monitor a “dumb” washing machine.
The Crypto page shows the status of Bitcoin and other coins in my portfolio. Very useful if you have cryptocurrency. Yes, I also have a separate video explaining how to set this up.
The Energy page gives me insight into the status of my home battery. The Travel page shows the driving time to my girlfriend’s house and vice versa.
There’s also a Shopping List page showing what’s on my grocery list. I linked this to the OurGroceries app so that Home Assistant can sync the data from it. Not strictly necessary, but I found it convenient.
The Games page displays the weekly free games available on the Epic Store. And, of course, I have a video explaining how to build this.
The Air Quality page shows the air quality in my office. The News page shows the latest headlines. To learn how I built that, watch this video.
Lastly, I have an overview of plant sensors that track the amount of water my plants have.
In the middle, there’s a block of information about when garbage collection is scheduled and which movies, series, and music were most recently downloaded to my NAS.
On the right, I added quick buttons that allow me to manually toggle crucial automations. For example, in winter, I manually turn the Sprinkler automation off.
Wow, this video includes quite a lot of references to other videos. I’ve listed them all in the description for you.
Let’s go back to the Homepage.
The Room Pages
Below the category buttons, I’ve created an indicator bar showing who is at home. Below that is an overview of buttons for all the rooms in my house. Each button shows the current temperature in that room. If I click on a button, the corresponding room page opens.
All room pages have the same layout:
- On the left, there are lighting controls
- In the middle you find the heating controls
- And on the right, an overview of other devices is shown
Sometimes I’ve added badges to certain rooms, such as on the Office page, where I can quickly toggle the power and set the air conditioner to either hot or cold.
The Middle of the Homepage
We’ve now covered the left side of the homepage. The rest is quite simple. In the middle, you’ll see a clock and the current date. Below that is my calendar, which is synced with Google Calendar. For this, I use the custom Calendar Card Pro, which I think is the best calendar card available at the moment.
The Right Side of the Homepage
On the right side, I can see all my energy data at a glance. The most important information for me is whether my solar panels are producing enough energy, and when the electricity price is lowest today. Together with the graph of dynamic energy prices, this helps me save a significant amount of money by only running large appliances, such as the washing machine and dryer, when the price is low.
Download the Code
You can download the code of my dashboard for FREE via the link in the description. Not everything will work immediately on your setup since you’ll have different devices and entities, but it will definitely help you set up the foundation for your own dashboard and customise it with your devices.
The dashboard is also designed to automatically scale on your phone, so it looks good on all devices.
And everything looks super sleek on the Shelly Wall Display XL, as you can see. In my opinion, the Shelly Wall Display XL is currently the best choice for running your Home Assistant Dashboard.
Price – Shelly Wall Display XL
The Shelly Wall Display XL costs around €290 including VAT, which is much cheaper than, for example, a 10-inch Samsung tablet. You can order it via the links in the description.
I hope this video was helpful. I’m convinced that this layout is the best you can build with Home Assistant at the moment. Download the code for free via the link in the description and create your own dashboard, just as flexible! If you have better ideas, let me know in the comments. I’d love to hear them!
Thank you for watching, and a special thank you to the people who sponsor me monthly, allowing me to continue making these videos for so long. Thank you so much. Without you, I couldn’t continue. If you also want to support me, you’ll find links to Patreon, Ko-Fi, and how to become a paid member of this channel in the description.
Oh, and don’t forget to like this video and subscribe to my channel if you haven’t already!
See you soon in my next video!
Bye-bye.
🔗 Download the free dashboard code here: https://ko-fi.com/s/9939e07c0d
🔗 Order the Shelly Wall Display XL here: https://tinyurl.com/57urk8ws
