I am new to HA and spent a week setting up my system and after seeing this. I know nothing and understand even less. That’s incredible work 
. I have so many questions but don’t even know where to start. Well done again.
5 Likes
To be honest: Thats is by far the best Lovelace-Ui that I’ve seen ! Good work! Will try to copy something here 
2 Likes
Very nice work!! I looking to copy some of the ideas… How did you get rid of the Home Assistant UI sidebar and title bar? I searched your ui-lovelace.yaml and didn’t see anything obvious, mind you it’s over 3000 lines.
Anyway, thanks for sharing your work!
1 Like
He @gwww you need this: https://github.com/maykar/custom-header
To get tid of the sidebar and header/title-bar
3 Likes
Hey Mattias. I’ve had a deep dive into your code and it’s given me lots of ideas on how I want to approach my UI.
One question though, if you’re running HA on RPI, how do you then get the command line sensors for your iMac to show up? Or, is this only when you view the UI on your iMac?
Thanks, I’ll see if I can work it out.
What is the hui-vertical-stack-card - I can’t find it anywhere…
It’s simply the built in vertical-stack card.
Calling it custom:hui-vertical-stack-card allows you to make is an element in picture elements or a row in entities cards.
Same trick can be used to nest other cards.
1 Like
Great ui!
i would like to create a light button like yours with toggle on/off and hold that pop up a window with dimmslider, temperature och color, could you post the code for that?
i have all the plugins that you have but i cant seem to get i to work 
i don´t know what i´m missing
Did you place the javascript url’s in the ui-lovelace.yaml?
resources:
- type: js
url: /local/community/bar-card/bar-card.js
- type: module
url: /local/community/button-entity-row/button-entity-row.js
- type: module
url: /local/community/circle-sensor-card/circle-sensor-card.js
- type: js
url: /local/community/light-entity-card/light-entity-card.js
- type: module
url: /local/community/lovelace-card-mod/card-mod.js
- type: module
url: /local/community/lovelace-layout-card/layout-card.js
- type: module
url: /local/community/mini-graph-card/mini-graph-card-bundle.js
- type: module
url: /local/community/mini-media-player/mini-media-player-bundle.js
- type: js
url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js
- type: css
url: 'https://sf.abarba.me/font.css'
- url: /local/community/compact-custom-header.js
type: module
- type: js
url: /local/community/light-slider-card.js
- type: module
url: /local/community/popup-backdrop-filter.js
- type: js
url: /local/community/upcoming-media-card.js
title: Huis
I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish
3 Likes
Yes. As per Custom Component: HACS
I’m also implementing this wonderfull design and the components work like a charm, and i’m learning basic swedish
1 Like
The dimmer unfortunately doesn’t work on mobile if thats what you mean.
You have inspired me to (again) redesign my control panel, this time using the browser control popup and notifications. Still got some polishing to do to make it shine like yours, but thank you for providing config for others to learn from
8 Likes
Not very well.
Interesting thanks. Do you plan to make your Lovelace UI responsive to different screen sizes?
This…is…the most beautiful UI i’ve ever seen. Great work. Do you plan to add additional “pages” for cameras or further sensors?
And like the question before: Any chance to get something like this visible on a vertical screen?
2 Likes
My I ask how you got the pop-up with the three sections side by side by side?
My I ask how you got the pop-up with the three sections side by side by side?