Show off your favourite dashboard creations!

[ReneSpit63 (Rene Spit)]

This is my dashboard. I created my own button-gauge-card.

Still a lot to do…

[d3vbs (2QMv.kqj)]

On the left
First row → status of the device (ready,drink ready etc), Main storage solenoid lock, Main storage door status
Second row → Status of the door where it gets delivered, its solenoid lock, WS2812B strip to show off the glass.
3rd and 4th rows are self explanatory.

Right side
some stats for my reference.

All compartments stays in apartment balcony, posing as big electrical appliances. the delivery box is at my desk, housing an old style 2 pole 2way switch as dummy.

Please let me know for more photos.

[beers218]

Any chance you can share your yaml for the room cards showing temps with buttons? Trying to do something similar for my dashboard.

[yravoul]

Sure!

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid-layout
    layout:
      grid-template-columns: 36% auto 10% 10% 10% 10% 10% 10%
      margin: 0
    cards:
      - color: teal
        type: tile
        entity: sensor.raumklima_wohnzimmer
        icon: mdi:sofa
        name: Wohnzimmer
        icon_tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {box-shadow: none !important; padding-top: 8}
      - type: button
        icon: none
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
      - type: button
        show_name: false
        entity: binary_sensor.rauchmelder_wohnzimmer_smoke
        icon_height: 24px
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
      - type: button
        icon: none
        icon_height: 18px
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
      - type: button
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
        icon: mdi:lightbulb-outline
        entity: light.leseecke_unten
        show_name: false
        icon_height: 18px
        tap_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.wohnzimmer_gemutlich
        hold_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.wohnzimmer_arbeiten
      - type: button
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
        icon: mdi:weather-night
        show_name: false
        icon_height: 18x
        tap_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.wohnzimmer_aus
      - type: button
        entity: media_player.wohnzimmer
        show_name: false
        icon_height: 18px
        card_mod:
          style: |
            ha-card {box-shadow: none !important;
                      --state-media_player-active-color: #009682;
                      --state-media_player-speaker-paused-color: #83949f;
                      --state-media_player-speaker-playing-color: #009682;
                        
            }          
      - show_name: false
        show_icon: true
        type: button
        entity: vacuum.maunzi
        icon_height: 18px
        card_mod:
          style: |
            ha-card {box-shadow: none !important;                       
            }      
  - type: conditional
    conditions:
      - condition: state
        entity: media_player.wohnzimmer
        state: playing
    card:
      type: custom:mini-media-player
      entity: media_player.wohnzimmer
      name: Chromecast
      artwork: cover
      hide:
        volume: true
        source: true
        power_state: false
        progress: true
      info: scroll
      sound_mode: icon
      toggle_power: true

[ptC7H12]

Is this PowerFlow Card custom Made? Do you mind sharing the code?

[dantist]

It’s the Powerflow Plus-Card with custom CSS. I changed it a bit more and removed the direction-arrows completely, since they are redundant. This allows for a slightly bigger font and gives an overall cleaner look.

card_mod:
  style: |
    ha-card div.circle {
      font-size: 13px;
    }
    ha-card [class^='battery-'] ha-icon {
      display: none;
    }
    ha-card .small {
      display: none;
    }

[ptC7H12]

Thank you very much!

[Armin_S (Armin Salchner)]

What do you think about my dashboard creation?
ideas and feedback more than welcome.

[jakubhruby (jakub)]

nice one!!

[Balucanb]

Started to re do a new weather dashboard.

All the icons are animated SVG’s.

Daily Forecast is webpage embed from Windy

Wind- info is from local Ambient weather station the icon will dynamically change as the wind speed increases/decreases.

Temp- current is local, forecast is from Pirate weather it uses a rest api and looks at the next hour every 45 min does the math and the icon will show the up/down arrow based on if the next hour is warmer or colder than the current, if there is no change it shows the icon with no arrow.

Current Forecast- pulls from NWS text is whatever the current forecast is, icon changes dynamically to match

Wind Gust/Max- pulls for local weather station

AQI- pulls from WAQI integration. Gages change based on readings

Radar- is webpage embed from Windy full clickable

Humidity/Rain data- all local data

Sun info- Sun Safety takes the states of the 3 sensors to it’s right and based on a predetermined scale the icon will go from Green/Yellow/Red so you know just how quick you are going to get burnt up in the TX sun, The next 3 with custom made SVG’s show the Lux/Irradiance/ UV are pulled from local sensors.

Big thanks to [https://github.com/basmilius](https://github.com/basmilius) for making his SVGs

Cards used- Webpage Card, grid, custom:button-card, Vertical stack Card, gauge,

Additional template sensors and a REST API used.

[jayjojayson]

HA_homedashboard

Homedashboard Cards and Layout Code for Home Assistant

Here I would like to introduce you my dashboard and provide you with a detailed overview. The dashboard is based on the new tile design in HA. The structure of the dashboard has grown a lot since then and an overview is good for me, too. The dashboard is adapted for tablet view. If possible, you shouldn’t have to scroll, but in some places it just can’t be avoided. In addition, the larger cards are broken up in the layout on the mobile phone and are therefore also displayed quite well. Development is continuing and I will try to maintain the current status of the dashboard at github. Also I will record current updates on github. English ReadMe is attached since today.

Folder Structure

Everything is clearly structured so that you can easily copy the elements you want. All YAML files are listed for each card and assigned to the corresponding pages or subpages. It’s best to look at the respective screenshot of the page in the folder/subfolder and you can quickly assign the corresponding card or find it in the folder structure. You will also find the YAML for all the pages there. It is all in German, but the folder structure and pictures should be enough to find everything.

Features

• Hide HA top menu/header (button action - optional)

• Home page with popups for heating, weather, camera and electricity

• Home page with dynamic content for (garbage, windows, light, multimedia, packages, holidays)

• Back button (to the start-page) permanently integrated at the bottom

• Main pages for heating, light, garden, weather and electricity plus start-page

• Subpages for settings, robots, security and multimedia

• detailed weather map (dwd weather service required)

• detailed electricity overview - current consumption values ​​for devices and total (watt/kWh) History

• Solar input also included in electricity overview map & home page

• adapted for Lenovo M10 3rd Gen tablet (but also other tablets with 10 or 11")

• mostly mobile phone compatible (tested with s24)

• many tabbed and popup cards

…coming soon

Mainpages

Subpages

EDIT: English ReadMe is available on github