Show off your favourite dashboard creations!

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.

meter-sc

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

  1. a strip of numbers - this image is used for each digit

  2. a horizontal spinner.

  3. the meter (with transparent places for digits and spinner)
    meter-ts

3 Likes

My home view so far


17 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. :smiley: 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

My actually Smartphone Dashboard:


3 Likes

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 use a lot of popup cards, but here’s some of dashboards.

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?