I would offer you Money for the code. 
This is the most beautiful dashboard I have ever seen. world class work! Since I could never do it like this, can you please share the code? I need a dashboard like that too! very cool work! keep it up
this is one of the cleanest dashboards I have seen so far!
well done!
can you share the code of that laundry card, I trying to setup that too, but can’t seem to fix the two laundry entities in one card.
love those bins!
can you share how you have done that?
Following… I’m interested too!
Hey! He used the Garbage Collection Integration.
I used the same integration. I went one step further and created GIFs to make the bins flash the day before garbage and then red on garbage day. You can remove that from my yaml though.
Once you have the integration installed and configured for your collections days, here’s my dashboard yaml.
And attaching bin images for you here. My images aren’t as nice as his but if you are able to get a copy of them, you can easily swap mine out for his by simply renaming his to the filenames I have on mine and saving them over top of mine in your images folder.
1 Like
Here’s my dashboard on the tablet in kiosk mode:
Here’s my mobile dashboard (some sensors are under review):
Energy:
Security:
Car and Wallbox:
Other:
1 Like
it is a bubble card
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.sensor_laundry_temperature
name: Laundry
show_attribute: false
show_state: false
card_layout: large
sub_button:
- entity: sensor.washing_machine_status
show_state: false
- show_state: false
icon: mdi:tumble-dryer
show_arrow: false
entity: sensor.dryer_machine_status
- entity: sensor.sensor_laundry_temperature
show_attribute: false
show_state: true
show_icon: false
styles: |-
* {
font-size: 12px !important;
}
ha-card {
box-shadow: var(--box-shadow) !important;
}
.bubble-button-card-container {
color: var(--contrast-100) !important;
background-color: var(--card-background-color) !important;
border-radius: 16px !important;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
@keyframes dryer-shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes dryer-drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.bubble-sub-button-1 {
background: none !important;
}
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['sensor.washing_machine_status'].state === 'working' ? 'var(--color-red)' : 'var(--color-dark-gray)'} !important;
animation: ${hass.states['sensor.washing_machine_status'].state === 'working' ? 'shake 400ms ease-in-out infinite, drum 2s ease infinite' : ''};
transform-origin: 50% 110%;
}
.bubble-sub-button-2 {
background: none !important;
}
.bubble-sub-button-2 > ha-icon {
color: ${hass.states['input_select.dryer_machine_status'].state === 'working' ? 'var(--color-red)' : 'var(--color-dark-gray)'} !important;
animation: ${hass.states['input_select.dryer_machine_status'].state === 'working' ? 'dryer-shake 400ms ease-in-out infinite, dryer-drum 1s infinite' : ''};
transform-origin: 50% 65%;
}
.bubble-sub-button-3 {
height: 40px !important;
width: 40px !important;
background-color: var(--color-blue);
color: var(--color-white);
}
.bubble-icon-container {
background: var(--color-light-gray-card);
border-radius: 16px !important;
}
.bubble-icon {
border-radius: 16px !important;
--mdc-icon-size: 20px !important;
color: var(--color-black) !important;
}
show_last_changed: true
1 Like
I just finished redoing my transportation card:
Now on one card I have driving info, fuel price, live tram and bus service from 3 tram/bus stops, 2 interchange stops and 3 rail stations.
2 Likes
Can you please share your code?
The rooms looks realy great and minimal.
Hi everyone, this is my dashboard on the tablet. It was made thanks to the fantastic HA community, and the many guides, codes and ideas that I found online.
7 Likes
Just did some updated on my dashboard, especially some experimentation with card mod. Sorry for all the nice people sending me messages in the past months but i kinda lost this thread out of sight… i will do better now!
2 Likes
What Card ist Vodafone with multiple Icons in one line?
It’s a custom layout-card from hacs (grid mode). Left side is a tile card, the icons on the right are buttons.
1 Like
This one GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. ?
Does this Work also with sections?
Yes, thats’s the one. I never tested that, but can’t imagine it making any problems in sections
Wow love your dashboard, thanks for sharing. Definitely got some inspirations from yours!
This looks exactly like something I am trying to achieve as well. I would be very much interested in getting the yaml files or instructions.
I really like your dashboard.
Since I’m quite new here, any chance you could share some piece of code or give me some guidance on how you built the dashboard and the statistics ?