Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Nice work @RodgerDodger
Could you please share the whole code :grinning:

Thank you, but I’m only a fan :innocent:
Please have a look at xisio’s code: #675 by xisio

Thanks for getting me somewhere. Right now i have this as result;

 - type: custom:mushroom-template-card
    primary: light.kitchen
    name: Kitchen
    show_brightness_control: true
    use_light_color: true
    icon: mdi:spotlight-beam
    multiline_secondary: true
    layout: vertical
    secondary: >
      {{ states("sensor.philips_sml001_c6710202_temperature") }} °C -
      {{states("sensor.philips_sml001_fde90002_illuminance") }} lux

However, brightness control, color control and name ‘Kitchen’ wont get applied, am i missing something?

You are using a mushroom-template-card but values that is from the light card.
https://github.com/piitaya/lovelace-mushroom/blob/4a65c3946c1ce7422805784a60e7b72458a60ec7/docs/cards/template.md

Bummer, i can’t have the slider + the addition information(?) temp, lux etc etc?

Thank you and yes. It’s the first card and as I mentioned I’ve a room specific view behind every room and person card.

All uppercase words are based on my personal entities or gusto.

kiosk_mode:
  mobile_settings:
    hide_header: true
    ignore_entity_settings: true
    custom_width: 812
views:
  - theme: Google Theme
    title: Home
    icon: mdi:home
    visible:
      - user: PERSON_1
      - user: PERSON_!
    badges: []
    cards:
      - type: custom:swipe-card
        cards: []
      - type: custom:mushroom-chips-card
        chips:
          - type: weather
            entity: weather.home
            show_conditions: true
            show_temperature: true
          - type: entity
            entity: sensor.count_LIGHTS_ON
            icon: mdi:lightbulb-alert
            name: LIGHT
            icon_color: amber
            hold_action:
              action: call-service
              service: light.turn_off
              service_data: {}
              target:
                entity_id: light.WHOLE_HOUSE
        alignment: center
      - type: custom:mushroom-template-card
        primary: |-
          {% set time = now().hour %}
          {% if (time >= 18) %}
            EVENING_GREETING, {{user}}!
          {% elif (time >= 12) %}
            DAY_GREETING, {{user}}!
          {% elif (time >= 5) %}
            MORNING_GREETING, {{user}}!
          {% endif %}
        secondary: |-
          {% set time = now().hour %}
          {% if (time >= 18) %}
            MOTIVATIONAL_EVENING_QUESTION
          {% elif (time >= 12) %}
            MOTIVATIONAL_DAY_QUESTION
          {% elif (time >= 5) %}
            MOTIVATIONAL_MORNING_SAYING
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        layout: horizontal
        multiline_secondary: false
      - type: custom:state-switch
        entity: user
        default: default
        states:
          PERSON_!:
            type: conditional
            conditions:
              - entity: calendar.GOOGLE_BIRTHDAY_CALENDAR
                state: 'on'
            card:
              type: custom:mushroom-template-card
              layout: horizontal
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              icon: mdi:cake
              primary: '{{ state_attr(''calendar.GOOGLE_BIRTHDAY_CALENDAR'', ''message'') }}'
      - type: conditional
        conditions:
          - entity: sensor.ORGANIC_WASTE
            state: TOMORROW
        card:
          type: custom:mushroom-title-card
          subtitle: INFORMATIONS
      - type: horizontal-stack
        cards:
          - type: conditional
            conditions:
              - entity: sensor.ORGANIC_WASTE
                state: TOMORROW
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: sensor.ORGANIC_WASTE
                  icon_color: deep-orange
                  name: 'TRASH_WILL_BE_PICKED_UP_TOMORROW:'
                  content_info: name
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  icon: mdi:delete-circle-outline
              alignment: justify
          - type: horizontal-stack
            cards:
              - type: conditional
                conditions:
                  - entity: sensor.YELLOW_BAG
                    state: TOMORROW
                card:
                  type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.YELLOW_BAG
                      icon_color: yellow
                      name: YELLOW_BAG
                      icon: mdi:delete-empty
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                        target: {}
                      double_tap_action:
                        action: none
                      content_info: none
                  alignment: center
              - type: conditional
                conditions:
                  - entity: sensor.PAPER_WASTE
                    state: TOMORROW
                card:
                  type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.PAPER_WASTE
                      icon_color: blue
                      icon: mdi:delete-empty
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      content_info: none
                  alignment: center
              - type: conditional
                conditions:
                  - entity: sensor.ORGANIC_WASTE
                    state: TOMORROW
                card:
                  type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.ORGANIC_WASTE
                      icon_color: green
                      name: ORGANIC_WASTE
                      icon: mdi:delete-empty
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      content_info: none
                  alignment: center
              - type: conditional
                conditions:
                  - entity: sensor.RESIDUAL_WASTE
                    state: TOMORROW
                card:
                  type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.RESIDUAL_WASTE
                      icon_color: grey
                      name: RESIDUAL_WASTE
                      icon: mdi:delete-empty
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      content_info: none
                  alignment: center
      - type: custom:mushroom-title-card
        subtitle: FAMILY
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-person-card
            entity: person.PERSON_1
            name: PERSON_1
            use_entity_picture: true
            layout: vertical
            hold_action:
              action: navigate
              navigation_path: PERSON_1
          - type: custom:mushroom-person-card
            entity: person.PERSON_2
            name: PERSON_2
            use_entity_picture: true
            layout: vertical
            hold_action:
              action: navigate
              navigation_path: PERSON_2
            hide_name: false
          - type: custom:mushroom-person-card
            entity: device_tracker.MY_CAR
            name: MY_CAR
            use_entity_picture: true
            layout: vertical
            hold_action:
              action: navigate
              navigation_path: car
            hide_state: false
            hide_name: false
      - type: custom:mushroom-title-card
        subtitle: ROOMS
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: light.OFFICE
            tap_action:
              action: navigate
              navigation_path: OFFICE
            icon_color: amber
            layout: horizontal
            hold_action:
              action: toggle
            primary_info: name
            secondary_info: none
            icon: hue:room-office
            name: OFFICE
          - type: custom:mushroom-entity-card
            entity: light.BATHROOM
            name: BATHROOM
            icon_color: amber
            layout: horizontal
            tap_action:
              action: navigate
              navigation_path: BATHROOM
            icon: mdi:bathtub
            secondary_info: none
            hold_action:
              action: toggle
            primary_info: name
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: light.BEDROOM
            icon_color: amber
            tap_action:
              action: navigate
              navigation_path: BEDROOM
            hold_action:
              action: toggle
            layout: horizontal
            secondary_info: none
          - type: custom:mushroom-entity-card
            entity: light.NURSERY
            icon_color: amber
            layout: horizontal
            tap_action:
              action: navigate
              navigation_path: NURSERY
            secondary_info: none
            hold_action:
              action: toggle
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:sofa
            entity: light.LIVING_ROOM
            icon_color: |-
              {% if is_state('light.LIVING_ROOM', 'on') %}
                amber
              {% else %}
                 #646464
              {% endif %}
            primary: LIVING_ROOM
            secondary: |-
              {% if is_state('select.HARMONY_HUB_activities', 'PowerOff') %}
                          
                        {% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_1') %}
                          HARMONY_ACTIVITY_1
                        {% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_2') %}
                          HARMONY_ACTIVITY_2
                        {% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_3') %}
                          HARMONY_ACTIVITY_3
                        {% else %}
                          
                        {% endif %}
            hold_action:
              action: call-service
              service: light.toggle
              service_data: {}
              target:
                entity_id: light.LIVING_ROOM
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: LIVING_ROOM
          - type: custom:mushroom-entity-card
            entity: light.DINING_ROOM
            icon_color: amber
            layout: horizontal
            tap_action:
              action: navigate
              navigation_path: DINING_ROOM
            secondary_info: none
            icon: hue:room-dining
            hold_action:
              action: toggle
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: light.KITCHEN
            icon_color: amber
            layout: horizontal
            tap_action:
              action: navigate
              navigation_path: KITCHEN
            name: KITCHEN
            icon: ''
            secondary_info: none
            primary_info: name
            hold_action:
              action: toggle
          - type: custom:mushroom-template-card
            entity: light.decke_PANTRY
            secondary: " {% if is_state('vacuum.VACCUM_NAME', 'docked') %}

                                 {% elif is_state('vacuum.VACCUM_NAME', 'cleaning') %}
                                   VACUUM IS CLEANING
                                 {% elif is_state('vacuum.VACCUM_NAME', 'returning') %}
                                   VACUUM IS RETURNING
                                 {% elif is_state('vacuum.VACCUM_NAME', 'error') %}
                                    VACUUM ERROR
                                 {% elif is_state('vacuum.VACCUM_NAME', 'paused') %}
                                   VACUUM IS PAUSED
                                 {% else %}
                                 {% endif %}
            primary: PANTRY
            tap_action:
              action: navigate
              navigation_path: PANTRY
            hold_action:
              action: toggle
            double_tap_action:
              action: none
            icon_color: |-
              {% if is_state('light.PANTRY', 'on') %}
                amber
              {% else %}
                 #646464
              {% endif %}
            icon: mdi:food
            card_mod:
              style: |
                ha-card {
                  --secondary-text-color:  {{ 'red' if is_state('vacuum.VACUUM_NAME', 'error') else '' }};;
                }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            icon: hue:room-laundry
            entity: light.UTILITY_ROOM
            icon_color: >-
              {% if is_state('input_select.washing_machine_state', 'ready') and
              is_state('input_select.dryer_state', 'ready') %}
                          #646464
                        {% elif is_state('input_select.washing_machine_state', 'washing') and is_state('input_select.dryer_state', 'drying') %}
                          blue
                        {% elif is_state('input_select.dryer_state', 'ready') and is_state('input_select.washing_machine_state', 'washing') %}
                          green
                        {% elif is_state('input_select.washing_machine_state', 'ready') and is_state('input_select.dryer_state', 'drying') %}
                          purple
                        {% else %}
                          none
                        {% endif %}
            primary: UTILITY_ROOM
            secondary: >-
              {% if is_state('input_select.washing_machine_state', 'ready') and
              is_state('input_select.dryer_state', 'ready') %}
                          
                        {% elif is_state('input_select.washing_machine_state', 'washing') and is_state('input_select.dryer_state', 'drying') %}
                          WASHING & DRYING
                        {% elif is_state('input_select.dryer_state', 'ready') and is_state('input_select.washing_machine_state', 'washing') %}
                          WASHING
                        {% elif is_state('input_select.washing_machine_state', 'ready') and is_state('input_select.dryer_state', 'drying') %}
                          DRYING
                        {% else %}
                          none
                        {% endif %}
            hold_action:
              action: none
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: UTILITY_ROOM
          - type: custom:mushroom-template-card
            icon: |-
              {% if is_state('cover.GARAGE_DOOR', 'closed') %}
                mdi:garage-variant-lock
              {% elif is_state('cover.GARAGE_DOOR', 'open') %}
                mdi:garage-open-variant
              {% elif is_state('cover.GARAGE_DOOR', 'opening') %}
                mdi:garage-alert-variant
              {% elif is_state('cover.GARAGE_DOOR', 'closing') %}
                mdi:garage-alert-variant
              {% else %}

              {% endif %}
            entity: cover.GARAGE_DOOR
            icon_color: |-
              {% if is_state('cover.GARAGE_DOOR', 'closed') %}
                #646464
              {% elif is_state('cover.GARAGE_DOOR', 'open') %}
                red
              {% elif is_state('cover.GARAGE_DOOR', 'opening') %}
                yellow
              {% elif is_state('cover.GARAGE_DOOR', 'closing') %}
                yellow
              {% else %}

              {% endif %}
            primary: GARAGE
            secondary: |-
              {% if is_state('cover.GARAGE_DOOR', 'closed') %}
                
              {% elif is_state('cover.GARAGE_DOOR', 'open') %}
                OPEN
              {% elif is_state('cover.GARAGE_DOOR', 'opening') %}
                IS OPENING
              {% elif is_state('cover.GARAGE_DOOR', 'closing') %}
                IS CLOSING
              {% else %}

              {% endif %}
            tap_action:
              action: navigate
              navigation_path: GARAGE
            hold_action:
              action: none
            double_tap_action:
              action: none
5 Likes

Can you share your person card code please? It it just a stack-in card with no border? Looks great!

1 Like

@piitaya do any of the cards support the header/footer options like the lovelace cards to add buttons at the bottom? Didn’t seem to like it for me on the light card

Hi, I have a TADO binary sensor which is created by the integration and shows in HA as window open or closed but in developer tab it’s classed as on or off. In my mushroom card, it shows binary sensor as off.

How can I get it to show window as open or closed in the mushroom card as it should as device class is window ?

I tried adding a customization but it already knows it’s a window ? I don’t want to duplicate the entity



Thanks

Martyn

I use this for my door sensors to convert from on/off to open/close. There’s probably a better way to do it but this works in a mushroom template card. I use it as my secondary info line

{% set state=states(entity) %}
{% if state=='on' %}
open
{% elif state=='off' %}
closed
{% endif %}
2 Likes

Great work! Do you mind sharing your sidebar code?

what does fill_container do?

check my post history. im not at a pc to be able to share right now

You can check this if you want the card to take the full height (useful when you use it in a grid layout :slightly_smiling_face:)

It’s not supported. But you can combine card with vertical stack in card.

1 Like

Interesting thanks, any plans to support it?

There is plan to add custom buttons on entity card but no footer, header.

I prefer to keep mushroom card simple for now :sweat_smile: :

  • one icon
  • one name
  • one state
  • one line of control

Advanced things can be done with card_mod, vertical stack in card, etc…

4 Likes

Yeah but they don’t look as pretty as yours :smiley:

How did you create the buttons on the room cards?
screenshot-community.home-assistant.io-2022.05.02-22_22_35

1 Like

this is based on the example provided by @dunner
It is a combination of stack-in-card, horizontal stacks + chips (templates and lights) + no borders

Salon example:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            mdi:television-classic
          {% else %}
            mdi:television-classic-off
          {% endif %}
        icon_color: |
          {% if is_state('media_player.sony_bravia_tv', 'off') %}
            grey
          {% else %}
            indigo
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        icon: |
          {% if is_state('light.kitchen_led', 'on') %}
            mdi:lightbulb-spot
          {% else %}
            mdi:lightbulb-spot-off
          {% endif %}
        icon_color: |
          {% if is_state('light.kitchen_led', 'on') %}
            yellow
          {% else %}
            grey
          {% endif %}
        entity: light.kitchen_led
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        entity: climate.saswell_gtz03
        icon: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            mdi:radiator-off
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            mdi:radiator-disabled
          {% else %}
            mdi:radiator
          {% endif %}
        icon_color: |
          {% if is_state('climate.saswell_gtz03', 'off') %}
            grey
          {% elif is_state('climate.saswell_gtz03', 'auto') %}
            orange
          {% else %}
            red
          {% endif %}
        content: '{{ states(''climate.saswell_gtz03'',) }}  '
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
    alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Salon
        layout: vertical
        icon: mdi:sofa
        icon_color: '#a37208'
        tap_action:
          action: navigate
          navigation_path: salon
        hold_action:
          action: more-info
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:thermometer
            icon_color: yellow
            content: '{{ states(''sensor.ble_temperature_salon'',) }} °C '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
          - type: template
            entity: sensor.ble_temperature_salon
            icon: mdi:water-percent
            icon_color: teal
            content: '{{ states(''sensor.ble_humidity_salon'',) }} % '
            card_mod: null
            style: |
              ha-card {
                  box-shadow: 0px 0px;
              }
        alignment: center
~~
3 Likes