And added some custom energy dashboard with a better view on the phases and inverters on every single phase with solar panels in different directions.
Looks amazing. How did you make the tile with the car and the surrounding information about being locked, home, connected, etc?
I created the following analog meter.
This looks at my power and translates that number into a number of digits and displays the appropriate digit image for each; The current grid usage is displayed as a spinning wheel (this uses css animation) and the speed is relevant to the amount of power used.
I used 3 images for this
-
a strip of numbers - this image is used for each digit
-
a horizontal spinner.
-
the meter (with transparent places for digits and spinner)
3 Likes
Jeez that looks nice. Any chance you might share some of your work or otherwise in text the used components? I’m busy building a tablet dashboard for my Samsung Tab A9 Plus.
1 Like
it is a mix up of all this beautiful community work. In general it is a 3 column section layout with the sidebar card from HACS.
I also used the bubble card
Some modificated cards of hacasa and also that theme from him. BTW thx for that.
and a lot card_mod for sure
1 Like
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?