Home Assistant Area Card using template mushroom cards

readme.md

Below is a backup and example of how I created room cards using template mushroom cards. If you copy and paste this into a manual card in the UI, you can then switch to the UI editor to make it easier to edit the invidual parts of the area cards.

The YAML code defines a vertical stack of cards in Home Assistant's Lovelace UI. Here's a breakdown of what each part does:

1. Type: Vertical-stack: Defines a vertical stack layout for arranging cards one on top of the other.

2. Cards: This is a list of cards that will be displayed in the vertical stack.

   • Custom Mushroom Title Card: This is a custom card titled "ROOMS" with an optional subtitle. It appears to be used for grouping and labeling the subsequent cards.

   • Grid Card: This card organizes its child cards into a grid layout with two columns.

   • Custom Mushroom Template Cards: These are custom cards designed for displaying various information and controlling entities. Each card represents a different room or area within the home. They display primary text (room name), secondary text (temperature or motion detection status), an icon, and possibly control options like toggling the associated entity's state or navigating to a different page within the dashboard. The cards are structured to provide information about the state of lights, temperature sensors, and motion sensors in each area.

3. Explanation of Individual Cards:

   • The cards provide information about different areas of the home such as the kitchen, living room, bedroom, ensuite, bathroom, laundry, hallway, garage, and outside.
   • Each card displays the temperature in Celsius and whether motion is detected in that area (if applicable).
   • Icons are used to represent each area (e.g., a chef's hat for the kitchen, a bed for the bedroom).
   • The icon color may change based on the state of associated lights.
   • Tapping on the card may toggle the associated entity's state or navigate to a different page within the dashboard.
   • The information displayed on each card is dynamically generated using template sensors/entities.

area_cards.yaml

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: ''
    alignment: center
    subtitle: ROOMS
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: 'Kitchen '
        secondary: |-
          {{states('sensor.kitchen_temp_and_rh_temperature')}} °C
          {% if is_state('binary_sensor.mmwave_sensor_presence', 'on') %} 
          Motion detected
          {% endif %} 
        icon: mdi:chef-hat
        entity: light.kitchen_lights
        layout: horizontal
        icon_color: |-
          {% if is_state('light.kitchen_lights', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/kitchen
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Living Room
        secondary: |
          {{states('sensor.lounge_room_aircon_temperature_feels_like')}} °C
        icon: mdi:television
        layout: horizontal
        icon_color: |-
          {% if is_state('light.movie_lamp', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/living-room
        entity: light.movie_lamp
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: 'Bedroom '
        secondary: >-
          {{states('sensor.bedroom_temperature')}} °C

          {% if is_state('binary_sensor.bedroom_pir_motion_sensor_occupancy',
          'on') %} 

          Motion detected

          {% endif %} 
        icon: mdi:bed
        layout: horizontal
        icon_color: |-
          {% if is_state('light.bedroom_lights', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/bedroom
        multiline_secondary: false
        entity: light.bedroom_lights
      - type: custom:mushroom-template-card
        primary: Wardrobe
        secondary: '{{states(''sensor.bedroom_temperature'')}} °C'
        icon: mdi:tshirt-v
        layout: horizontal
        icon_color: |-
          {% if is_state('light.shellyplus1_08b61fd7ef50_switch_0', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/wardrobe
        entity: light.shellyplus1_08b61fd7ef50_switch_0
      - type: custom:mushroom-template-card
        primary: 'Ensuite '
        secondary: >-
          {{states('sensor.ensuite_temp_and_rh_temperature')}} °C

          {% if is_state('binary_sensor.ensuite_pir_motion_sensor_occupancy',
          'on') %} 

          Motion detected

          {% endif %} 
        icon: mdi:shower-head
        entity: light.ensuite_lights
        layout: horizontal
        icon_color: |-
          {% if is_state('light.ensuite_lights', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/ensuite
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: 'Bathroom '
        secondary: >-
          {{states('sensor.bathroom_temp_and_rh_temperature')}} °C

          {% if is_state('binary_sensor.pir_motion_sensor_2_occupancy', 'on')
          %} 

          Motion detected

          {% endif %} 
        icon: mdi:bathtub
        layout: horizontal
        icon_color: >-
          {% if is_state('light.shellyswitch25_c8c9a3759e8b_channel_1', 'on')
          %} 

          amber

          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/bathroom
        entity: light.shellyswitch25_c8c9a3759e8b_channel_1
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Laundry
        secondary: >-
          {{states('sensor.laundry_temp_and_rh_temperature')}} °C

          {% if is_state('binary_sensor.laundry_pir_motion_sensor_occupancy',
          'on') %} 

          Motion detected

          {% endif %} 
        icon: mdi:washing-machine
        layout: horizontal
        icon_color: >-
          {% if is_state('light.shellyswitch25_c8c9a375a45f_channel_1', 'on')
          %} 

          amber

          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/laundry
        entity: light.shellyswitch25_c8c9a375a45f_channel_1
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: 'Hallway '
        secondary: >-
          {{states('sensor.hallway_temp_and_rh_temperature')}} °C

          {% if is_state('binary_sensor.hallway_pir_motion_sensor_occupancy',
          'on') %} 

          Motion detected

          {% endif %} 
        icon: mdi:image-frame
        layout: horizontal
        icon_color: |-
          {% if is_state('light.shellyplus1_08b61fd85cb0_switch_0', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/hallway
        entity: light.shellyplus1_08b61fd85cb0_switch_0
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Garage
        secondary: >-
          {{states('sensor.garage_temp_and_rh_temperature')}} °C

          {% if is_state('binary_sensor.garage_mmwave_sensor_presence', 'on')
          %} 

          Motion detected

          {% endif %} 
        icon: mdi:garage
        layout: horizontal
        icon_color: |-
          {% if is_state('light.garage_lights', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/garage
        entity: light.garage_lights
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Outside
        secondary: '{{states(''sensor.ecowitt_tempc'')}} °C'
        icon: mdi:leaf
        layout: horizontal
        icon_color: |-
          {% if is_state('light.shellyplus1_4855199c939c_switch_0', 'on') %} 
          amber
          {% endif %} 
        double_tap_action:
          action: toggle
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/outside
        entity: light.shellyplus1_4855199c939c_switch_0