Tutorial Building a Custom Home Automation Dashboard
Dashboards
Home Assistant dashboards allow you to display information about your smart home. Dashboards are customizable and provide a powerful way to manage your home from your mobile or desktop.
You can customize your dashboard using various options:
- Different card types to visualize your data and control your smart home devices.
- Themes (even at a per card basis).
- Override names and icons of entities.
- Use custom cards from our amazing community.
Screencast showing how to edit a dashboard and customize a vertical stack card.
Explore the interactive demo dashboard
Try it yourself with the interactive demo.
Get started with your own dashboard
To create your own dashboard, follow the steps on creating a new dashboard.
Discuss dashboard
Related topics
Cards
Suggest an edit to this page, or provide/view feedback for this page.
How to create a Smart Home Dashboard with a Tablet
A Smart Home Dashboard is a great way to quickly interact with your smart home. It allows you to check the status of your smart home at a glance and easily interact with your devices. Combine this with a wall-mounted tablet and you have the ultimate smart home dashboard.
There are different options for the Smart Home Dashboard itself, you can use Home Assistant, Node-Red, or Sharp Tools for example. In this article, I am not really focussing on the different dashboard systems, but more on how you can use a tablet to run a Smart Home Dashboard and how to mount it to the wall.
This is the first article in a small series:
Best Smart Home Tablet
So the first step is to get a tablet that we can use for our smart home dashboard. Basically, you can use any tablet if you want. But for the best result, you probably want a tablet with a small bezel and wireless charging.
The tablet obviously needs to have a constant power source. Now you can of course just plug in a charger, but for a nice clean installation, a Qi-compatible tablet is really the best option. This allows you to mount a Qi charger in the wall and the tablet in front of it.
A smart home tablet doesnt have to be powerful as well, it only needs to run one app or website and thats it. So in my opinion the Amazon Fire HD Plus tablets are perfect to use as a Smart home tablet, here is why:
- Available in 8 or 10inch
- Supports wireless charging
- Relative small equaly sized bezel
- Really cheap
- 8" HD display, 2X the storage (32 or 64 GB of internal storage and up to 1 TB with microSD card) + 3 GB RAM.
- All-day battery life & wireless charging - Up to 12 hours of reading, browsing the web, watching videos, and listening to music.
- Now with USB-C for easier charging. Fully charges in under 4 hours (with included cable and adapter).
- 30% faster thanks to the new 2.0 GHz quad-core processor.
- Enjoy your favorite apps like Netflix, Facebook, Hulu, Instagram, TikTok, and more through Amazons Appstore (Google Play not supported).
Make sure you buy the version without Lockscreens ads (we can remove them, but you may lose your warranty then). Also, a good idea is to add an anti-glare screen protector. Not that you really need to protect your screen, but the reflection of lighting (sun, lamps) can really be annoying.
Now as you will see in the pictures, I have bought a white Fire HD, without wireless charging. The reason is simple, I have placed the tablet on a white wall, and this way it blends in really nicely. (black would just stand out too much).
With the help of a Qi Charging Receiver, you can turn any tablet into a wireless charging tablet. I will explain more about that later.
If you are not using a Fire tablet, then you can skip to the next part where I explain how I have mounted the tablet to the wall and used a full-screen browser on Android.
So the Amazon Fire HD tablets are a great option when it comes to technical specifications, but the Amazon bloatware (software) is a bit annoying. To make the Fire HD more useful we will need to remove most of the Amazon apps and install Google Play Store on the Fire tablet.
For this, we are going to use Fire Toolbox which you can download here.
1. Enable USB Debugging on Fire Tablet
First, we need to enable USB Debugging on the Fire Tablet.
- On the tablet, go to Settings > Device > Options > About and tap 7 times on the Serial number until you unlock Developer Options
- Press back and open Developer Options
- Turn Developer Options on
- Scroll down and enable USB debugging
2. Connect the Fire HD tablet to your computer
The next step is to connect the Fire HD tablet to your computer using a USB cable. On the tablet, you will get a notification to allow USB debugging and trust the computer. Thick the box Always allow from the computer and tap ok.
3. Using Fire Toolbox
Open Fire Toolbox and choose a color scheme to continue. With Fire Toolbox we are going to install Google Play Store, remove Amazon Apps, change the launcher and change the lock screen.
Follow the setup tour to quickly set the most common settings.
- Modify System Setting to disable OTA and Automatic updates.
- Privacy Controls Toggle off all options and click Randomize ID
- Manage Amazon Apps Complete Debloat. This will remove all the Amazon Apps.
- Custom Launcher I have replaced it with the Microsoft Launcher
- Custom Keyboard You can change if you like
- Google Services Installs Google Play Store. This steps sometimes crashes, just run it again. Or reboot the tablet and run it again.
If you have gone through all the steps you will have a clean Amazon Fire HD tablet with Google Play Store installed on it. This way you can install the browser and apps that you want to use.
4. Installing Full Screen Browser
With the Fire Toolbox still open, we are going to install the Fully Kiosk Browser. This app not only allows you to open a browser full screen on your Android device but also gives you a lot of controls when it comes to sleep modes, lock screen, scheduled wake-up, etc.
The most important feature, the full-screen browser, is free to use. If you want to use scheduled wake up you will need to buy a license for the app.
There is a specific version for the Fire OS that runs on the Fire HD tablet. You can download the correct APK file on this page on the right side.
With the APK downloaded, go back to the Fire Toolbox:
- Go to the second page (the small radio button in the lower right corner
- Click Sideload Apps
- Browse to open the APK file
- Click Sideload to install the app
Mounting the Smart Home Tablet to the Wall
I wanted to mount the tablet as flat as possible to the wall without the use of any brackets or visible clamps. The tablet is in my case mounted over an unused wall socket, which allows me to place the Qi charger inside the socket.
On the German Amazon site, I found a really small Qi Charger that fitted perfectly in my socket box. Its only 6cm in diameter and 0,6cm thick.
To mount the tablet against the wall I have used small N35 neodymium magnets. I have glued one magnet on the back of the tablet and another on the wall. 6 magnets on each side will hold the tablet perfectly.
As mentioned, the white Fire HD tablet doesnt have a built-in Qi receiver. So I added a type c Qi Receiver to the back of the tablet. Make sure you pick the receiver with the long cable, and not the short one. Otherwise, you wont be able to position the receiver over the Qi Charger.
The magnets are glued with super glue. This works perfectly on plastic, drywall, metal, etc.
Using a Full Screen Browser on Android
Most smart home dashboard systems are basically a webpage that you need to open. For the best experience, you probably dont want the status bar or navigation buttons. So we need to run the browser full screen on Android.
As mentioned in step 4, we have installed the Full Kiosk Browser with the Fire Toolbox. If you are not using a Fire HD Tablet, then you can also download the Full Kiosk Browser from the play store.
The free version of Full Kiosk Browser will do for most. You can set an URL that will open automatically. The browser will also position itself above your lock screen, so you can keep your tablet secure for the other apps, but dont need to unlock it to use your smart home dashboard.
If you buy a license for Full Kiosk Browser, you will get access to much more useful settings:
- Turn on screen based on motion detection of the camera
- Automatic wake up / sleep timer
- MQTT integration
- Kiosk mode (lock down device with pin)
Wrapping Up
Smart home tablets are a great way to extend your smart home. The tablet allows guests and other family members to easily interact with your smart home devices. The Amazon Fire HD Plus tablets are the best smart home tablets after you have stripped them from the Amazon software.
When mounting your tablet with magnets against the wall, make sure you add enough magnets. Also, when you need to remove the tablet, make sure you slide it sides of the wall. Dont pull it straight towards you, because you risk pulling the magnets of the wall as well.
The next article in this series is online: Install Home Assistant on a Raspberry Pi
If you have any questions, just drop a comment below.
A Home-Approved Dashboard chapter 1: Drag-and-drop, Sections view, and a new grid system design!
A Home-Approved Dashboard chapter 1: Drag-and-drop, Sections view, and a new grid system design!
Wow! At long last!! The stars have aligned, and our experimental drag-and-drop feature for dashboards is finally here!
Home Assistant strives to be the best smart home platform, and a smart home allows its residents to automate, control, observe, and anticipate the comfort, security, and various conveniences of their home. Besides voice assistants, dashboards are also a great way to help users do just that!
Therefore, we have been working hard to make customization and organization of dashboards as easy and intuitive as possible, and to create a default dashboard that will be more useful, user-friendly, and relevant right out of the box. Matthias and I teamed up in April last year to tackle this problem together, and we called this series of improvements over our current dashboard Project Grace, named after the influential and brilliant late Admiral Grace Hopper.
After months of user research and ideation to ensure that our design is home-approved - to be easy and intuitive to use for you, your family, your guests, your roommates, and more - we are happy to share the first fruit of our success in the upcoming release 2024.3, with the help of Paul and of course the wonderful frontend team. We hope that these features will help you take the dream dashboard for you and your home from idea to reality much faster and much more easily.
For those of you who are curious about the features and the design thinking behind them, read on and check out our special livestream last week. You can also try out our updated demo and get involved by joining the Home Assistant User Testing Group! And last of all, thank you for supporting our efforts by subscribing to Home Assistant Cloud!
Enjoy!
~ Madelena
What is Project Grace?
Grace was the codename we used for the series of improvements to be built on top of Lovelace, the framework for our dashboards. We aim to preserve the strengths of Lovelace, such as its flexibility and extensibility, and to mitigate its weaknesses, such as its steep learning curve, its lack of scalability, as well as the poor responsiveness of its layouts.
The three-layout problem
The three basic view layouts: Panel, Sidebar, and Masonry
Our dashboard came with 3 default view layout types by default: Panel, which is simply one card covering the entire view; Sidebar, which is a two-column layout for cards; and Masonry, which is the most robust of them all.
While it is excellent at creating a tightly-packed screen space-saving dashboard, Masonry lays out cards in a logic that may not be immediately clear and predictable to many users, which leads to a frustrating user experience to create and customize the layout of the cards. And as the layout logic depends on the height of each card, the varying heights of the cards available for our dashboards become a blessing and a curse: Even a difference in height of 1 pixel would mean a card one would guess to be displayed on the leftmost column getting shifted all the way to the right.
Masonry arranges cards based on size.
Whats more, unlike most other smart home apps, Home Assistant prides itself on Choice. In terms of dashboard view layouts, Choice means that dashboards should be able to be displayed on any screens that are the most convenient to our users - whether its a phone, a tablet, a large monitor, or other display devices. While the Masonry layout is great at making neat walls of cards, as its name also implies, it is a wall of cards which does not care whether the bricks are laid, thus the muscle memory of where users remember the cards will be lost every time the dashboard is displayed on another screen.
Masonry does not care about where exactly cards are placed when the screen size changes.
For the past few years, we tried to create a more intuitive solution to rearrange the cards laid out by Masonry but ultimately the solutions did not work well for multiple screen sizes. Meanwhile, our users come up with solutions of their own, with many avoiding our default view layouts so that they can create a more predictable and memorable dashboard. As it turns out, drag and drop is not just an engineering problem; it is also a design problem.
To solve these problems with our layout, we realized that the Masonry layout, compatibility with multiple screen sizes, and easy drag and drop rearrangement of cards cannot co-exist. Over the past year, we ideated and identified a few solutions, namely:
- a new Sections view layout
- a design grid system, and
- a Z-Grid auto-rearranging pattern.
Lets dive in each solution and learn how they work together to make your dashboards easier to customize and use!
The new Sections view
Case studies of our users' dashboards
Throughout this project, we have looked at dozens of different dashboards created by you and posted on our discussion boards. One thing we notice is that our more advanced users are all naturally drawn to creating sections, groups of different cards delineated by a group title, manually with grids and markdown cards.
Home Assistant dashboards are robust and packed with information, and our users often place dozens of cards for all sorts of buttons, switches, graphs, indicators, and more. By grouping cards into sections, our users can reduce the number of items they need to scan through when they are looking for a certain card, as they will be able to look for the relevant group title first and then reduce the scope to scan that particular group for the information. And by packing cards in a section into a grid card, the relative positions of the cards within a section are not affected by changes in screen sizes, and so the spatial memory of the cards are retained, leading to a faster and less cumbersome experience.
Example of a dashboard section
For our new Sections view, we are making these sections as the base unit of the view and we are streamlining its creation and editing procedures. Users will not need to fiddle around with grid cards and markdown cards to assemble a section manually, and instead a section now comes with all those amenities and much more.
Getting started with Sections
The new Sections view is experimental! Please do not build your daily dashboard on top of it yet!
The Create New View configuration screen
To get started with the new Sections view, create a new view on your dashboard and choose Sections (experimental) as the view type. We currently do not have the option to migrate your current dashboard over yet.
A new dashboard view laid out in Sections
You will be greeted by a clean new dashboard view, with one section already created for you.
To add a new section, select the Create Section button.
To edit the name of a section, select the
Edit button on the top right of the section. (Tip: You can add any descriptive text for your section, including emojis!) When the section does not have a name, the section header will be hidden.To delete a section, select the
Delete button on the top right of the section. You will be asked to confirm the deletion.
Filling it up
A fully populated dashboard in Sections view layout
There are multiple ways to add cards into a section and populate your dashboard:
The easiest way to add cards is to select Add Card [Button icon] button inside the section.
The Add Card dialog will appear, and there are two options:
By Card
Add Card by Card type dialog
If you have a good idea of what card you want to use for an entity, browse the list of available cards on this screen. For the Sections view, we recommend the Tile card, which is now pinned to the top in a Suggested Cards section.
By Entity
Add Card by Entity dialogIf you want to add a bunch of entities in one go, select one or multiple entities on this list.
Home Assistant will show a preview of the cards to be added, which will be displayed in Tile cards as the default of the Sections view. Tap the Add to Dashboard button to complete the process.
Card suggestions
Add to Dashboard feature on the device page
Another handy method for adding a bunch of sensors or controls belonging to the same device is to add them from the devices page.
Navigate to the page of the device through Settings.
Tap the Add to Dashboard button on the screen.
You will be prompted to choose which dashboard view you want to add them to. If you choose a view using the Sections view layout, the sensors or controls will be added as tile cards placed inside a new section.
Responsive design
One major benefit of the new Sections view is that it is now much easier to build dashboards that work with multiple screen sizes.
Sections view adapt nicely to different screen sizes.
The view will rearrange the sections according to the amount of space available horizontally, while the number of columns of cards within each section stays the same, thus preserving your muscle memory of where the cards are located.
The grid system
Our current dashboard views are organized in columns with cards of varying heights, and with masonry layout by default. As cards can vary in height in small amounts, it becomes hard to predict where cards will land when one moves a card to another column, or when screen size changes and moves all the cards, such as when viewing a dashboard on tablet vs on mobile. This creates friction in the customization experience of the dashboards.
Enter the grid system, a bastion of graphic design principles.
Examples of grid systems in use
Typographic grid systems have a long history in modern graphic design and print publishing, starting from its rise in the early 20th Century during the Constructivist and Geometrical art movements in Europe, which concerns the hidden rhythm behind a visual image. They are easily repeatable and, therefore, practical for generating an infinite amount of pages, yet also ensure aesthetic proportions and consistency for printable matter. They also bring order to a page. It helps users understand the relationship between each element on the page and whether one element belongs to another.
The Home Assistant dashboard grid system
When a UI is designed with a structured layout, that feeling of structure and organization comes through to the user in their first impression.
By introducing a grid system with cards of regular row height and column width multiples, we can help users rearrange cards more easily in a predictable manner, make Home Assistant adapt the dashboards to different screen sizes more easily, and, of course, make dashboards look tidier and more aesthetically pleasing.
Cards currently optimized for the grid system: Sensor card, Tile card, and Button card
To implement the grid system, we are now in the process of standardizing the widths and heights of our cards, starting with the Tile card, Button card, and Sensor card. These cards will occupy the right amount of space in the grid, while other cards will occupy the full width of a section by default at the moment.
For card developers, we will have more information on how to adapt your custom cards to the grid system soon.
Drag-and-drop rearrangement of cards and sections
With sections and a grid system in place, we can finally implement a way to arrange cards and sections that is intuitive with drag-and-drop, predictable with how the cards will rearrange, while creating a dashboard that is easy to navigate and remember by visualizing the information hierarchy and not disturbing the spatial relationship between cards. Users will not need to pray and guess where the cards will land when they change their orders anymore!
Comparison of four card arrangement methods
Throughout the design process, we looked at a few different ways of how cards should be arranged. Ultimately, we chose the Z-Grid due to its simplicity, predictability, and memorability as the default, despite it may take up more space than other solutions. The Z-Grid works simply by laying out sections from left to right, and starting a new row when the row is full. The heights of the rows are determined by the tallest section on the row, while the width of the columns remain constant for responsive design.
How to drag and drop
While your dashboard is in Edit Mode:
Rearranging sections with drag-and-drop
- To rearrange sections, simply tap and hold the Move handle and then move your cursor or finger towards your desired location. Other sections will move out of the way for where the selected section will drop.
Rearranging sections with drag-and-drop
- To rearrange cards, tap and hold anywhere on the card and then move your cursor or finger towards your desired location.
(Dont you love when instructions are so short? Yay to simplicity! )
Whats next? Get involved!
The new Sections view with drag-and-drop is just the first step of Project Grace, a Home-Approved Dashboard. We have a good idea of where we want to head next in our design and development process, but we want to hear from you first before we proceed so that we can prioritize and build a product that will help you the most.
To get feedback from all of you and your household members, we decided to release this early in its incomplete form as an experiment for you to try out the new Sections view. For those who are curious, feel free to check out our updated demo to play around and have fun!
We want to make sure that the new default dashboard will not only work for you, but also everyone who lives in your home. We would love to hear what they think as well. Please do not hesitate to leave your comments below!
Join the Home Assistant User Testing Group!
From time to time, we will send out user tests to help us make the harder product and design decisions we identify. By joining our user testing group, you will help steer the direction of our product and will also get a sneak peak of potential designs that are work in progress.
Please fill out this form to join the Home Assistant User Testing Group!
Big thanks to all the folks who joined us for user interviews, Lewis from Everything Smart Home for sharing his treasure trove of dashboards for our case studies, and of course, the fabulous Nabu Casa team.
Thats all for now! Thank you for reading. Cant wait to show you whats next!
~ Madelena
