Hello! First at all, sorry for my English! And cheers from Argentina!
So, im writing this really tired because tonight I didn’t sleep (Its 10am already), BUT I managed (finally) to feel confortable with the UI of my dashboard. Thanks to the community! From the devs of HA to the devs who add functionality on top of it. Im happy because of it
Here is a quick look.
And here you can see a video to see how it handles.
Im not a guy who codes, so Im sharing this because this is in my opinion super easy and anyone who is looking for something easy but aesthetic can take inspiration out of it.
What I wanted? :
-UI easy to find what I need quickly (Besides that I want to use the app only when its really needed, house should run by itself).
-Aesthetically pleasant to look.
-Get rid of the header (I don’t believe its needed if you have good UI, and saves space)
-Get to far places inside the app with the least amount of effort.
First things first.
CARDS:
Mushroom Cards are the answer, they are easy to setup due to the UI configuration that they provides. Besides, the project its super alive. Thanks!
In my case I did a mix of Template Cards with a little of HA templating inside them (to change icons based on states), also I used the media card and the lights cards.
ADD-ONS:
Kiosk-Mode: As you may know because its pretty popular I think, I used it to get rid of the header.
The problem was thet I didn’t want it all the time becouse sometime I do some repairs from the phone, so, the option to be apply all the time on mobile was not an option. Instead I created a switch on the Helpers of HA to toggle it (hold pressing the first card of each view of the dashboard toggles it). Thanks to the devs who made a fork to maintain it alive!
Lovelace Swipe Navigation: This is great, with it I can swipe to my differents views and makes it super smooth and easy to navigate between them. Also I added redundancy so my gf can choose which way is more confortable to her. And thanks to the devs, amazing work!!!
Mushroom Themes: This is from the same devs as the cards, and it lets me solve finer details, which for me are super important. Without them I would not like the result. It solves the issue where my android status bar was on a different color than the background of the HA app. You just have to pick with any tool the background color of the app and add it to the code of the theme (app-header-background-color: “#111111”). The second win was that it lets me adjust the size of the mushroom cards, giving me the possibility to get rid of the cards going a little too deep and having a little scrolling on the app (which to make things fluid and easy I needed to get rid of).
And I think that’s pretty much it. If you see something else, let me know, and if you are interested on the code, let me know too. Cheers!!
