N-l1
December 25, 2019, 2:16am
60
Hello!
I’m really inspired by all the ideas that’s been shared within this thread I recently decided to redo my UI and went for a cleaner look. Here is how it looks on our wall mounted tablet:
Different devices are divided into different views
Thanks again to everyone for sharing all the awesome UIs
10 Likes
postlund
(Pierre Ståhl)
December 25, 2019, 1:47pm
61
I’ve done something simple (mobile only) like this:
7 Likes
jimz011
(Jim)
December 25, 2019, 2:53pm
62
Nice @postlund . Simple can be nice you know
Any eta on the atv component btw?
Merry Christmas
@aFFekopp your UI looks absolutely awesome. Would you share some more details on how you adjusted the theme and styles for buttons / cards?
Currently I am using another Dark theme but would love to change
N-l1
December 25, 2019, 7:13pm
64
@postlund That’s really nice!
Out of curiosity, is the house custom or is it just a generic image Also what are you using for the search bar?
Thanks!
postlund
(Pierre Ståhl)
December 25, 2019, 8:56pm
65
I’ve aimed for simplicity
The house is sort-of dynamic. Garage port is “open” in the image when it’s open and those sort of things. It’s a custom card I’ve made myself. The search card is also a custom card I’ve made myself.
I have created a simple search card that makes it easy to search for entities and display them in the frontend. I thought that maybe someone else might find it useful, so I decided to publish it. Here’s a small demo:
[image]
It’s very basic and I will add new stuff over time. If you have any feature requests feel free to ask (or preferably write an issue on github).
Enjoy!
Home Card
I wanted a way to get a quick glance of the current state of my home, so I started hacking on a custom card which resulted in the Home Card:
[image]
It’s very early in the development phase, so it’s not very pretty and lacks a lot of feature but I wanted to get it out there for feedback. Feel free to give it a spin if you like!
Instructions can be found here: https://github.com/postlund/home-card
The search card is in HACS (but you need to install cardtools for it).
1 Like
postlund
(Pierre Ståhl)
December 25, 2019, 8:57pm
66
Yes, I prefer simple
No real ETA, soon-ish I hope. I’m exploring some workaround for the scanning issues since a bunch of people have problems finding their devices. It becomes a bigger problem with tvOS than before.
N-l1
December 25, 2019, 9:08pm
67
Wow
Those are awesome cards Really surprised that I haven’t stumbled across those cards before, the search card is especially useful, I will definitely implement it into my UI.
Huge thanks!
1 Like
You can take a look at my configuration on GitHub.
3 Likes
hi @N-l1 , really digging your design. Would you mind sharing how you got your setup?
Just started with HA and looking at everyone’s else’ setups for inspiration and yours stands out to me.
Thanks
2 Likes
N-l1
December 27, 2019, 7:43pm
71
Thank you @NotYourAverageAl @Vasco !
That just made my day I’m planning on sharing my Home Assistant setup on GitHub very soon (themes, cards…) as I’m also working on a dark themed version. Hopefully I will be able to finish up quite soon, but as soon as I post my config on GitHub I will definitely notify you two.
Thanks again!
1 Like
big thanks to @aFFekopp , now my UI looks way more intuitive.
Before:
After:
4 Likes
nice! took you a month
how do you show multiple values in a row? (internet card, and the 3 radiator lines) would you be willing to share the configs for these?
could be a nice replacement for the extra badges I have been missing from custom-ui since ages…
This is the multiple-entity-row card: https://github.com/benct/lovelace-multiple-entity-row
Attached the config (the style applied is for the three dots that match the graph colors):
- type: entities
style:
.: |
ha-card {
border: solid 1px var(--border-color);
font-family: Raleway;
}
"#states div":
"multiple-entity-row":
$: |
div:nth-of-type(2) span::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #57a0ee;
margin-right: 5px;
}
div:nth-of-type(3) span::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #00b59d;
margin-right: 5px;
}
div:nth-of-type(4) span::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #ffa700;
margin-right: 5px;
}
entities:
- entity: sensor.speedtest_ping_int
name: 1&1
icon: mdi:speedometer
hide_state: true
type: custom:multiple-entity-row
primary:
entity: sensor.speedtest_download_int
name: 'Download'
unit: 'm/s'
secondary:
entity: sensor.speedtest_upload_int
name: 'Upload'
unit: 'm/s'
tertiary:
entity: sensor.speedtest_ping_int
name: 'Ping'
2 Likes
thanks, very welcome card indeed! nice config also
1 Like
jimz011
(Jim)
December 28, 2019, 4:30pm
76
Do you mean the badges that were at the top? If yes this is still possible with lovelace.
no, I meant the extra_badge setup made possible by custom-ui, and of which I had a full setup…like here: Lights: no more color_temp and rgb_color together? or Multiple extra_badges in custom_ui?
Andrey added that in the mentioned future release and it gave us great options, which Lovelace has taken out again…
this multiple-entity-row re-instates that to some degree, so happy here!
jimz011
(Jim)
December 28, 2019, 5:02pm
78
Ah I see yeah kinda looks cool haha. Wouldn’t it be possible to create one with a lovelace template card? (There are quite a few on HACS). Never tried one though.