📱 A minimalist and user-friendly dashboard with an mobile first approach, now on GitHub!

Cloos · February 15, 2023, 2:39pm

Hi!

About 3 years ago, a friend introduced me to Home Assistant. I was drawn to the idea and its open-source nature, so I purchased a Raspberry Pi 4 and quickly became enamored with the platform. I’m sharing this project to inspire the community.

There is no installation process, as this is my personal setup uploaded as is. It’s meant for you to learn from, copy, and experiment with. If you have specific questions or comments, feel free to ask and I will try to answer as soon as possible.

Thank you all for your support and motivation!

Home Assistant - Mobile First Dashboard | GitHub

Animated widgets

CM000n · February 15, 2023, 6:47pm

Realy nice work! Congratulations. I will definetly have a closer look into it.

Cloos · February 16, 2023, 6:52am

Thanks! If you have questions I’m here!

CM000n · February 16, 2023, 7:46am

I played around with it a bit yesterday and I really like your dashboard. So much so, in fact, that I think I’m going to adapt it just a little bit to make it my default dashboard .

One thing I noticed while trying it out yesterday, and it bothered me a bit, was that I often activated the light slider by mistake when scrolling down. How do you deal with this? Or is it just a matter of getting used to it?

I’ll also have a look at whether I can replace your code here and there with templates. Unfortunately, the code of your lovelace.yaml is repetitive in many places and this makes the file with over 6000 lines of config code very confusing .

In any case, many thanks and best regards to Belgium (if I have taken the location from the code correctly )

NdR · February 16, 2023, 10:02am

Really cool ideas in this setup. Thanks for sharing!

Cloos · February 16, 2023, 1:15pm

Thanks again, glad to see someone trying to figure out my code. For the sliders it’s weird that you have this issue, I’ve never triggered my lights by mistake with those.

And I agree that my code really need a big clean up, I’m using the UI but mostly in YAML mode, it’s easier to maintain for me. I’ve just copied and pasted all the YAML in that lovelace.yaml for GitHub but I don’t use it (for now).

And yes I’m from Belgium, I thought I had cleaned my code from all that kind of informations

Cloos · February 16, 2023, 1:16pm

Thanks and you’re welcome, glad to share!

CM000n · February 17, 2023, 10:31am

I played around a bit with .yaml anchors. Especially for the completely repetitive header areas:
homeassistant/lovelace.yaml at main · CM000n/homeassistant (github.com)

This seems to work wonderfully and makes the whole thing a bit clearer.
Again: Thanks for your great work and inspiration!

ArenaCloser · February 17, 2023, 7:54pm

This looks like how you define decluttering templates, but it’s not the same is it? Does it require a download from HACS?

@Cloos there are some really nice ideas in this setup, thanks for sharing! I’m currently thinking about how to build a dedicated good-looking tablet layout, like with a side menu and stuff, but I find it much harder than a phone layout; are you planning on building one (in this style) as well?

CM000n · February 17, 2023, 8:12pm

No, these are just .yaml anchors and aliases that have nothing to do with Home Assistant itself, but are simply part of the .yaml specification:

Cloos · February 17, 2023, 9:53pm

Thanks! I’m using this dashboard for my tablet as well, take a look at this post, it’s an old layout but my new one is even better on it (more info with less scrolling), so I’m not planning to do a landscape view of it.

Cloos · February 17, 2023, 10:00pm

I will take a closer look at this, thanks! I will probably re-wright a bunch of it when I got more time, but I want to focus on re-wrighting my automations first then publish them on GitHub as well.

maicon.marchi · February 22, 2023, 2:58pm

Nice work indeed!
Dumb question what is the !important doing in the css config? Like in here “margin: -16px !important;”

Cloos · February 22, 2023, 5:22pm

They are here to override the initial CSS and make sure this line is used instead.

Milou020789 · February 22, 2023, 8:42pm

Hey Cloos,

Nice mobile dashboard. I copied your code for trying to have the same person card with picture like you Quentin card but it don’t look like yours.

Cloos · February 23, 2023, 4:02am

You also need to install the Noctis theme from my repo, it’s a modified one, then tell me if it’s working for you.

farao780 · February 23, 2023, 9:32am

Nice work.
How you added QR code ?

ald112 · February 23, 2023, 7:23pm

amazing!

how can I create this addition to the current dashboards I have?
you have to customize it to tablet ui (;

BeastHouse · February 24, 2023, 11:35am

Try https://qifi.org/

BeastHouse · February 24, 2023, 1:11pm

Loving it. Keen to know how you have used your photo in the person card on the home page? I referenced icon:/local/image.jpg and it is not working