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. Throughout this project, we have looked at dozens of different dashboards created by you and posted on our discussion boards. Let’s dive in each solution and learn how they work together to make your dashboards easier to customize and use! The new Sections view Over the past year, we ideated and identified a few solutions, namely: 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. As it turns out, “drag and drop” is not just an engineering problem it is also a design problem. 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. Masonry does not care about where exactly cards are placed when the screen size changes.įor 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.
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. 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 it’s a phone, a tablet, a large monitor, or other display devices. What’s more, unlike most other smart home apps, Home Assistant prides itself on Choice. 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. 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. 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. The three basic view layouts: Panel, Sidebar, and Masonry 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. Grace was the codename we used for the series of improvements to be built on top of Lovelace, the framework for our dashboards. 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! 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.įor 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. 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.Īfter 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. 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. Besides voice assistants, dashboards are also a great way to help users do just that! 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. Wow! At long last!! The stars have aligned, and our experimental drag-and-drop feature for dashboards is finally here! □