Share your Home Assistant Lovelace Dashboard examples

[dwoosnam]

I thought it might be a good idea for people to share Home Assistant Lovelace Dashboards for new users of this project and HA to get some inspiration for their configurations as the project evolves.

I got some inspiration recently from this post on Reddit and came up with the following.

This requires the following custom cards to be installed:

• Mushroom-Cards
• Mushroom-Themes
• Mini-Graph-Card
• Vertical-Stack-In-Card
• Card-Mod
• Layout-Card

The icon to the left uses my sensor.layzspa_display code found over here

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mini-graph-card
    name: Hot Tub
    entities:
      - entity: sensor.layzspa_target_temperature
        name: Target
        color: '#34495e'
        hours_to_show: 12
      - entity: sensor.layzspa_temperature
        color: '#2c3e50'
        hours_to_show: 12
    show:
      icon: false
      state: false
      name: false
      labels: false
      legend: false
      points: false
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 1 / 7
      grid-row: 1 / 4
  - type: custom:mushroom-entity-card
    entity: sensor.layzspa_temperature
    name: Hot Tub
    icon: mdi:hot-tub
    fill_container: true
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 1 / 4
      grid-row: 1 / 2
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_heat_regulation
    primary_info: none
    secondary_info: none
    fill_container: true
    tap_action:
      action: toggle
    layout: horizontal
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 4 / 4
      grid-row: 1 / 2
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_pump
    primary_info: none
    secondary_info: none
    tap_action:
      action: toggle
    layout: vertical
    fill_container: true
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 5 / 5
      grid-row: 1 / 2
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_airbubbles
    primary_info: none
    secondary_info: none
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 6 / 6
      grid-row: 1 / 2
  - type: custom:mushroom-climate-card
    entity: climate.layzspa_temperature_control
    show_temperature_control: true
    fill_container: true
    tap_action:
      action: more-info
    primary_info: none
    secondary_info: none
    icon_type: none
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 4 / 7
      grid-row: 2 / 2
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.layzspa_display
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 1 / 4
      grid-row: 2 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if states('sensor.layzspa_chlorine_age') | int > 10 %} mdi:sync {%
      else %} mdi:test-tube {% endif %}
    entity: button.layzspa_reset_chlorine_timer
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: toggle
    icon_color: >-
      {%- if states('sensor.layzspa_chlorine_age') | int > 10 %} #e74c3c {% else
      %}
        disabled {% endif %}
    fill_container: true
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 4 / 4
      grid-row: 3 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if states('sensor.layzspa_filter_age') | int > 10 %} mdi:sync {% else
      %} mdi:air-filter {% endif %}
    layout: vertical
    entity: button.layzspa_reset_filter_timer
    hold_action:
      action: toggle
    tap_action:
      action: none
    fill_container: true
    icon_color: >-
      {%- if states('sensor.layzspa_filter_age') | int > 10 %} #e74c3c {% else
      %}
        disabled {% endif %}
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 5 / 5
      grid-row: 3 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if is_state('binary_sensor.layzspa_ready', 'off') %} mdi:thumb-down{%
      else %}mdi:thumb-up{% endif %}
    layout: horizontal
    entity: binary_sensor.layzspa_ready
    icon_color: >-
      {%- if is_state('binary_sensor.layzspa_ready', 'off') %} #e74c3c {% else
      %} #2ecc71 {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    fill_container: true
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 6 / 6
      grid-row: 3 / 3
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.layzspa_chlorine_age
      - type: entity
        entity: sensor.layzspa_filter_age
    style: |
      ha-card {
      border: none;
      --ha-card-background: none;
      }
    view_layout:
      grid-column: 1 / 4
      grid-row: 3 / 3
layout:
  grid-template-columns: auto 50px 50px 50px 50px 50px
  grid-template-rows: 50px 50px 50px

[GSzabados]

That looks really cool!

[collse]

that looks really cool - how did you get the squared icons?

[dwoosnam]

It's the Mushroom Square theme using Mushroom cards.

[collse]

interesting as I do have it installed - nevermind let me check that again

edit: installed but not actually enabled 🤦‍♂️

[collse]

I slight modification with color levels depending on temperature, blue for low, green for pool temperature and red for hot tub - dont look at the gradient yet had to fake the inputs to make it work so doesnt reflect the real increase yet

type: custom:mini-graph-card
name: Hot Tub
entities:
  - entity: sensor.layzspa_wifi_controller_layzspa_target_temp_c
    name: Target
    color: orange
    hours_to_show: 12
  - entity: sensor.layzspa_wifi_controller_layzspa_temp_c
    hours_to_show: 12
color_thresholds:
  - value: 25
    color: '#0657A7'
  - value: 30
    color: '#27AE60'
  - value: 36
    color: '#E74C3C'
show:
  icon: false
  state: false
  name: false
  labels: false
  legend: false
  points: false
card_mod:
  style: |
    ha-card {
    border: none;
    --ha-card-background: none;
    }
view_layout:
  grid-column: 1 / 7
  grid-row: 1 / 4

[GSzabados]

I tried to replicate this idea with the provided code, but came out this way.
Does any of you have any idea what could be the problem here?

[collse]

you are welcome to try my code - I had similar issues but dont remember what I did...

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mini-graph-card
    name: Hot Tub
    entities:
      - entity: sensor.layzspa_target_temp_c
        name: Target
        color: orange
        hours_to_show: 12
      - entity: sensor.layzspa_temp_c
        hours_to_show: 12
    color_thresholds:
      - value: 25
        color: '#0657A7'
      - value: 30
        color: '#27AE60'
      - value: 36
        color: '#E74C3C'
    show:
      icon: false
      state: false
      name: false
      labels: false
      legend: false
      points: false
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 1 / 7
      grid-row: 1 / 4
  - type: custom:mushroom-entity-card
    entity: sensor.layzspa_temp_c
    name: Hot Tub
    icon: mdi:hot-tub
    fill_container: true
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
          :host {
            --card-mod-icon-color:
            {% if is_state('binary_sensor.layzspa_heater', 'on') %}
               red
            {% else %}
              orange
            {% endif %}
          }
    view_layout:
      grid-column: 1 / 1
      grid-row: 1 / 1
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_heat_regulation
    primary_info: none
    secondary_info: none
    fill_container: true
    tap_action:
      action: toggle
    layout: vertical
    icon: mdi:radiator
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
          :host {
            --card-mod-icon-color:
            {% if is_state('binary_sensor.layzspa_heater', 'on') %}
               red
            {% else %}
            {% endif %}
          }
    view_layout:
      grid-column: 4 / 4
      grid-row: 1 / 1
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_pump
    primary_info: none
    secondary_info: none
    tap_action:
      action: toggle
    layout: vertical
    fill_container: true
    icon: mdi:pump
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 5 / 5
      grid-row: 1 / 2
  - type: custom:mushroom-entity-card
    entity: switch.layzspa_airbubbles
    primary_info: none
    secondary_info: none
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    icon: mdi:chart-bubble
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 6 / 6
      grid-row: 1 / 2
  - type: custom:mushroom-climate-card
    entity: climate.layzspa_temperature_control
    show_temperature_control: true
    fill_container: true
    tap_action:
      action: more-info
    primary_info: none
    secondary_info: none
    icon_type: none
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 4 / 7
      grid-row: 2 / 2
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.layzspa_temp_c
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 1 / 4
      grid-row: 2 / 3
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.layzspa_chlorine_age
      - type: entity
        entity: sensor.layzspa_filter_age
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 1 / 4
      grid-row: 3 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if states('sensor.layzspa_chlorine_age') | int > 10 %} mdi:sync {%
      else %} mdi:hand-coin-outline {% endif %}
    entity: button.layzspa_reset_chlorine_timer
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: toggle
    icon_color: >-
      {%- if states('sensor.layzspa_chlorine_age') | int > 10 %} #e74c3c {% else
      %}
        disabled {% endif %}
    fill_container: true
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 4 / 4
      grid-row: 3 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if states('sensor.layzspa_filter_age') | int > 10 %} mdi:sync {% else
      %} mdi:air-filter {% endif %}
    layout: vertical
    entity: button.layzspa_reset_filter_clean_timer
    hold_action:
      action: toggle
    tap_action:
      action: none
    fill_container: true
    icon_color: >-
      {%- if states('sensor.layzspa_filter_age') | int > 10 %} #e74c3c {% else
      %}
        disabled {% endif %}
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 5 / 5
      grid-row: 3 / 3
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {%- if is_state('binary_sensor.layzspa_ready', 'off') %} mdi:thumb-down{%
      else %}mdi:thumb-up{% endif %}
    entity: binary_sensor.layzspa_ready
    layout: vertical
    hold_action:
      action: toggle
    tap_action:
      action: none
    fill_container: true
    icon_color: >-
      {%- if is_state('binary_sensor.layzspa_ready', 'off') %} #e74c3c {% else
      %} #2ecc71 {% endif %}
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: none;
        }
    view_layout:
      grid-column: 6 / 6
      grid-row: 3 / 3
layout:
  grid-template-columns: auto 50px 50px 50px 50px 50px
  grid-template-rows: 50px 50px 50px

[GSzabados]

Thanks!

Now I know after some wasted time (to figure out), why your example displays correctly and why not the other.

The answer is:
layout: vertical

The first example has
layout: horizontal
for those weirdly shifted icons.

Your example was really helpful!

[n3xus1]

Thanks for the card,
I did notice some warnings in the logs for not setting a value for the "int" declared.
Was a easy fix by changing the 4 spots to "int(0)