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

[weemaba999 (Bart Weemaels)]

Thanks Dimitri,

The only problem is, as far as I think it’s a problem, is that the script is needed to fill up a queue. With other words, more buttons can be pushed at the same time that fill the queue. Don’t know if ‘a script per button’ will result in the same.

I’ll show you the script below:

jarvis_room_cleaner:
  alias: Jarvis Room Cleaner
  max: 20
  mode: queued
  fields:
    room:
      name: room
      required: true
      selector:
        select:
          options:
          - bathroom
          - bedroom
          - hallway
          - kitchen
          - living_room
          - joosarne
          - bentjesse
          - berging
  sequence:
  - choose:
    - conditions:
      - condition: or
        conditions:
        - condition: state
          entity_id: vacuum.jarvis
          state: cleaning
        - condition: state
          entity_id: vacuum.jarvis
          state: error
      sequence:
      - wait_for_trigger:
        - platform: state
          entity_id: vacuum.jarvis
          to: returning
        - platform: state
          entity_id: vacuum.jarvis
          to: docked
        continue_on_timeout: false
        timeout: 01:30:00
      - service: vacuum.send_command
        target:
          device_id: xxxxxxxxxxxxxxxxxxx
        data_template:
          command: app_segment_clean
          params: >
           {% set room_id = states("input_number.roborock_room_enum_" + room)
            | int(0) %} {{ room_id }}
      - wait_for_trigger:
        - platform: state
          entity_id: vacuum.jarvis
          to: returning
        - platform: state
          entity_id: vacuum.jarvis
          to: docked
        continue_on_timeout: false
        timeout: 01:30:00
    - conditions:
      - condition: or
        conditions:
        - condition: state
          entity_id: vacuum.jarvis
          state: returning
        - condition: state
          entity_id: vacuum.jarvis
          state: docked
        - condition: state
          entity_id: vacuum.jarvis
          state: idle
      sequence:
      - service: vacuum.send_command
        target:
          device_id: xxxxxxxxxxxxxxxxxxxx
        data_template:
          command: app_segment_clean
          params: >
            {% set room_id = states("input_number.roborock_room_enum_" + room)
             | int(0) %} {{ room_id }}

      - wait_for_trigger:
        - platform: state
          entity_id: vacuum.jarvis
          to: returning
        - platform: state
          entity_id: vacuum.jarvis
          to: docked
        continue_on_timeout: false
        timeout: 01:30:00
    default: []

Kr,

Bart

[dimitri.landerloos]

This may not be good advice, but a script can run a script. so again maybe make a script per button, but each just calls your main script?

[weemaba999 (Bart Weemaels)]

sounds like plan ! I’ll give it a try and report back with feedback

thx again !

[Montreal666]

still related to the same overlay card:
not a big deal but wondering if this is also customizable;
once a selection is made, the mushroom select card stays “selected” (greyed out) unless you click elsewhere.
Any way to hide / make this transparent as well? Thanks!

[dimitri.landerloos]

this should do it. but then your hover is also gone.

                .mdc-select__ripple::before {
                  background: none !important;
                }

you could add a new hover back like this:

                .mdc-select__anchor:hover {
                  background-color: rgba(var(--rgb-grey), 0.05) !important;
                }

[Montreal666]

Perfect. Thank you!

[muenze96 (Sebastian Meinke)]

Unfortunately, the HA-alerts do not work in the template-card:
e.g.

<ha-alert alert-type="error"> Your alert text </ha-alert>

Can I integrate them by other code or is it possible to integrate them?

[weemaba999 (Bart Weemaels)]

I’ve made a button-specific script to call the main script after push of the button, but all buttons are still activated, probably because of the fact that the script calls the same entity.

jarvis_bathroom:
  alias: Jarvis Bathroom
  sequence:
  - service: script.jarvis_room_cleaner
    data:
      room: bathroom

And the script behind my bathroom button:

                  - type: custom:mushroom-entity-card
                    tap_action:
                      action: call-service
                      service: script.jarvis_bathroom
                    entity: script.jarvis_bathroom
type or paste code here

So, this doesn’t work and I can’t figure out why not

Kr,

Bart

[dimitri.landerloos]

Can you show me the yaml for the entire card please?

[berkans (Berkan Sezer)]

Spotify Card V3 with Room Presence

Page Properties:

• White and Dark Theme Ready.
• 2 different card styles for white and dark template in one single card!!
• Design changes on white theme.
• Switch between white and dark modes with one click
• Beatiful artwork design for every song.
• Room Presence. Start the music in your last entered room (More effective on single occupancy)
• Media Player controls
• Music Follow. Let the music follow you around the house automatically.
• Hidden playlist. Activate your favorite songs with a single click.
• Exclusively designed for Spotify control.
• Ambilight animations. Glowing light in all over the card.
• Browser Mode integration.
• Minimalistic design. You can hide spotify playlist.
• The playing media player is highlighted in a circle.
• Rewind - Forward your music.
• Developed on the basis of Amazon Echo devices but you can also use it with any other media player type.
• Can easily be installed with the given manual

You can find the page code and ultra-detailed user manual in the link below.:

[kbrown01]

Why not use simple input boolean for each area and then one script that builds the list of rooms based on the input boolean state?

alias: Run Vacuum
sequence:
  - service: roborock.vacuum_clean_segment
    data_template:
      segments: |
        {% set vacrooms = namespace(roomid=[]) %}
        {% for rooms in state_attr('sensor.roborock_rooms','rooms') -%}
          {% if is_state(rooms.boolean,'on') %}
            {% set room = rooms.id %}
            {% set vacrooms.roomid = vacrooms.roomid + [room] %}
          {% endif %}
        {%- endfor %}
        {{ vacrooms.roomid }}
    target:
      entity_id: vacuum.roborock_s7
mode: single
icon: mdi:robot-vacuum

With a series of input booleans created from a REST sensor and a local JSON file (probably a better way):

{
    "rooms": [
        {
            "name": "kitchen",
            "boolean": "input_boolean.vac_kitchen",
            "id": "17"
            },
        {
            "name": "dining_room",
            "boolean": "input_boolean.vac_dining_room",
            "id": "16"
            },
        {
            "name": "foyer",
            "boolean": "input_boolean.vac_foyer",
            "id": "18"
            },
        {
            "name": "laundry",
            "boolean": "input_boolean.vac_laundry",
            "id": "20"
            },
        {
            "name": "living_room",
            "boolean": "input_boolean.vac_living_room",
            "id": "19"
            },
        {
            "name": "master_bedroom",
            "boolean": "input_boolean.vac_master_bedroom",
            "id": "21"
            },
        {
            "name": "master_bathroom",
            "boolean": "input_boolean.vac_master_bathroom",
            "id": "22"
            },
        {
            "name": "guest_bathroom",
            "boolean": "input_boolean.vac_guest_bathroom",
            "id": "23"
            }
    ],
    "points": [
        {
            "name": "sink",
            "x": 17989,
            "y": 25491
         }
    ]
}

And

##
## Roborock Rooms 
##
- platform: rest
  name: roborock_rooms
  resource: http://192.168.1.245:8123/local/Roborock/roborock.json
  value_template: "{{ now() }}"
  json_attributes:
    - rooms
    - points

I select one or more rooms and push “Clean” which runs the “Run Vacuum” script. One additional script turns off the buttons when the vacuum returns to the dock.

[mlanglois55 (Matt)]

Hello all,

Not sure if this is the right spot for this…so please kindly correct me if I’m wrong!
After recent updates to HA, Mushroom Card, Card Mod, etc. I’ve noticed that my chip-card automations no longer work.
Apparently there is some language adjustments but I have not had success finding documentation on these changes.

Hoping someone has a good idea on how to resolve this.
Please see below my setup:

And the below code that powers it:
I know it’s a lot, so please focus on the last lines for the card mod, just wanted to show it all in case it’s helpful at all (a lot of tap-actions have been removed as there is a character limit here!)

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.m
        use_entity_picture: true
      - type: entity
        entity: person.r
        use_entity_picture: true
      - type: template
        icon: |-
          {% if is_state('input_boolean.alarm_switch', 'on') %}
            mdi:home-alert
          {% else %} 
            mdi:security
          {% endif %}
        entity: alarm_control_panel.blink_cameras
        icon_color: >-
          {% if is_state('input_boolean.alarm_switch', 'on') %}
            red
          {% elif is_state('alarm_control_panel.blink_cameras', 'armed_away')
          %} 
            green
          {% elif is_state('alarm_control_panel.blink_cameras', 'disarmed') %}
            blue
          {% endif %}  
        content: >-
          {% if is_state('input_boolean.alarm_switch', 'on') %}
            INTRUDER!
          {% elif is_state('alarm_control_panel.blink_cameras', 'armed_away')
          %} 
            Armed
          {% elif is_state('alarm_control_panel.blink_cameras', 'disarmed') %}
            Disarmed
          {% endif %}       
      - type: entity
        entity: counter.chore_counter
        name: Chores Completed!
        icon: mdi:vacuum
        use_entity_picture: false
      - type: weather
        entity: weather.home
        show_conditions: false
        show_temperature: true
      - type: entity
        entity: sensor.processor_use
      - type: template
        icon: >-
          {% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone',

          'unavailable') or
          is_state('binary_sensor.closet_motion_sensor_iaszone','unavailable')
          or is_state('binary_sensor.foyer_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.hallway_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.office_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.kitchen_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.living_room_motion_sensor_iaszone','unavailable')
          %}
            mdi:emoticon-confused-outline
          {% elif is_state('binary_sensor.motion_sensors', 'on') %}
            mdi:motion-sensor
          {% else %} 
            mdi:motion-sensor-off
          {% endif %}
        entity: binary_sensor.motion_sensors
        icon_color: >-
          {% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone',

          'unavailable') or
          is_state('binary_sensor.closet_motion_sensor_iaszone','unavailable')
          or is_state('binary_sensor.foyer_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.hallway_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.office_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.kitchen_motion_sensor_iaszone','unavailable')
          or
          is_state('binary_sensor.living_room_motion_sensor_iaszone','unavailable')
          %}
            red
          {% elif is_state('binary_sensor.motion_sensors', 'on') %}
            yellow
          {% else %} 
            grey
          {% endif %}
      - type: conditional
        conditions:
          - entity: timer.laundry_tts_second_reminder
            state: active
        chip:
          type: template
          entity: timer.laundry_tts_second_reminder
          icon: mdi:washing-machine-alert
          icon_color: red
          content: Laundry!?
          tap_action: null
      - type: conditional
        conditions:
          - entity: timer.laundry_tts_first_reminder
            state: active
        chip:
          type: template
          entity: timer.laundry_tts_first_reminder
          icon: mdi:washing-machine
          icon_color: yellow
          content: null
          tap_action: null
      - type: template
        icon: |-
          {% if is_state('media_player.speakers', 'on') %}
            mdi:speaker-wireless        
          {% elif is_state('media_player.speakers', 'playing') %}
            mdi:speaker-wireless               
          {% else %} 
            mdi:speaker
          {% endif %}
        entity: media_player.speakers
        icon_color: |-
          {% if is_state('media_player.speakers', 'on') %}
            blue
          {% elif is_state('media_player.speakers', 'playing') %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: entity
        entity: button.tab_a8_load_start_url
        name: Reload
        content_info: name
        tap_action:
          action: toggle
      - type: template
        entity: sensor.days_since_fed_leo
        icon: mdi:snake
        content: |
          {{states('sensor.days_since_fed_leo')}} days ago
        icon_color: |-
          {% if states('sensor.days_since_fed_leo') |int >13 %}
            red
          {% elif states('sensor.days_since_fed_leo') |int >7 %}
            yellow
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Did you feed Leo?
              content:
                type: grid
                columns: 1
                square: false
                cards:
                  - type: custom:button-card
                    entity: input_boolean.fed_leo_switch
                    name: Tap here if you fed Leo!
                    size: 40px
                    style: |
                      ha-card {
                        background: radial-gradient(rgb(0,0,0, 0%) 45%, rgb(0,0,0, 50%));
                        border: none;
                       }                
                  - type: entities
                    style: |
                      ha-card {
                        background: radial-gradient(rgb(0,0,0, 0%) 45%, rgb(0,0,0, 50%));
                        border: none;
                       }
                    entities:
                      - entity: input_datetime.tank_heater_on_time
                        name: Tanks On
                      - entity: input_datetime.tank_heater_off_time
                        name: Tanks Off
                      - entity: switch.tank_lights
                    title: 'Tank Heaters '
                    show_header_toggle: false
      - type: template
        entity: binary_sensor.garage_door_sensor_opening
        icon: >-
          {% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
            mdi:garage-alert
          {% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
          %}
            mdi:garage
          {% endif %} 
        icon_color: >-
          {% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
            red
          {% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
          %}
            green
          {% endif %} 
        content: >-
          {% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
            Garage Open! 
          {% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
          %}
            
          {% endif %} 
        tap_action:
          action: more-info
    alignment: center
    card_mod:
      style:
        mushroom-template-chip:nth-child(3)$: |
          ha-icon {
            {{ 'animation: rotation 3s linear infinite;' if is_state('alarm_control_panel.blink_cameras', 'armed_away') }}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }    
          ha-icon {
            {{ 'animation: pulse 0.7s  infinite; transform-origin: 50% 90%' if is_state('input_boolean.alarm_switch', 'on')}}
          }
          @keyframes pulse {
            0% { transform: scale(1); }
            10% { transform: scale(2); }
            17% { transform: scale(2.5); }
            25% { transform: scale(3.5); }        
            33% { transform: scale(1.5); }
            60% { transform: scale(1); } 
          }      
        mushroom-template-chip:nth-child(10)$: |
          ha-icon {
            {{ 'animation: boing 2s  infinite; transform-origin: 50% 90%' if is_state('media_player.speakers', 'on') or is_state('media_player.speakers', 'playing') }}
          }
          @keyframes boing {
            0% {transform: scale3d(1, 1, 1); }
            10% {transform: scale3d(1.5, 0.75, 1); }
            15% {transform: scale3d(0.75, 1.5, 1); }
            20% {transform: scale3d(1.25, 0.85, 1); }        
            30% {transform: scale3d(0.95, 1.15, 1); }
            40% {transform: scale3d(1.5, 0.95, 1); }   
            60% {transform: scale3d(1, 1, 1; }
          }                 
        mushroom-template-chip:nth-child(7)$: |
          ha-icon {
            {{ 'animation: pulse 3s linear infinite; transform-origin: 50% 60%;' if is_state('binary_sensor.motion_sensors', 'on') }}
          }
          @keyframes pulse {
            0% { transform: scale(1); }
            10% { transform: scale(1.1); }
            17% { transform: scale(1.05); }
            33% { transform: scale(1.25); }
            60% { transform: scale(1); } 
          }        
        mushroom-template-chip:nth-child(12)$: |
          ha-icon {
            {{ 'animation: pulse 0.7s  infinite; transform-origin: 50% 90%' if states('sensor.days_since_fed_leo') |int >13}}
          }
          @keyframes pulse {
            0% { transform: scale(1); }
            10% { transform: scale(1.5); }
            17% { transform: scale(1.75); }
            25% { transform: scale(2); }        
            33% { transform: scale(1.5); }
            60% { transform: scale(1); } 
          }          
view_layout:
  grid-area: header
  show:
    mediaquery: '(min-width: 800px)'

[dimitri.landerloos]

In your scenario try and just change all that say ha-icon to ha-state-icon then clear your app/browser cache.

[mlanglois55 (Matt)]

I cannot believe it was that simple!

I can’t thank you enough. Thank you so much @dimitri.landerloos

[OvalZyre]

Can’t for the life of me get some of the animations working. Tried the spin example, but all I get is a static icon. Oddly, if I do something like St. Nick, I get only half of the animation … no clue why. Is it something to do with my config or am I missing something somwhere?

[laurens362]

Any way to replicate this with mushroom? This is from minimalist.

[weemaba999 (Bart Weemaels)]

Hi Dimitri,

I think it will work, I needed to add these additional scripts for all buttons instead of just one I will keep you posted, but for know, I think it might work.

Thanks a lot !

Kr,

Bart

[weemaba999 (Bart Weemaels)]

Hi @kbrown01,

Looks very interesting, and eager to try it out. Could you also share a glimps of you buttons page and the script to ‘reset’ the buttons ?

Thanks a lot in advance !

Kr,

Bart

[BMWAddict (Jasper)]

Hi All,

First of all thanks for these great cards and the input from the community. See below for my dashboard.

I have an easy questions (i hope) which I need some help with:

I use a honeywell evohome heating system. I can control heating etc. I have a heat page link called temp (see dashboard), this brings you to a subpage with all the heat controls per room. These are mushtroom climate cards.

How do I get the TEMP icon on the main dashboard to be GREY (off) when all the rooms are set to 15c ? The issue is that the HVAC mode always says HEAT, so I can’t use that trigger. I need it to look at the temp and if it’s below 15 → then grey icon, if above 15 → (it’s on and icon should be red).

Note: I can only get the temps from the heating system with the command below. There is no entity sensor available for current temp. So I would need to make something with the code below but change icon color based on output < > 15c

{{ state_attr(‘climate.keuken’, ‘current_temperature’) }}°C

type: horizontal-stack
cards:
  - type: custom:mushroom-lock-card
    entity: lock.bosch_bijkeuken_deur
    icon: mdi:door
    secondary_info: none
    name: Bijkeuken
    fill_container: false
    primary_info: none
  - type: custom:mushroom-lock-card
    entity: lock.garage
    name: Garage
    icon: mdi:garage
    secondary_info: none
    primary_info: none
    fill_container: false
  - type: custom:mushroom-climate-card
    entity: climate.home
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/verwarming
    show_temperature_control: false
    primary_info: name
    secondary_info: none
    fill_container: true
    name: Temp

Same as the first question, but then for each individual room show red/grey icon. See code below.

- title: Verwarming
    path: verwarming
    icon: mdi:heating-coil
    subview: true
    badges: []
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.keuken
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.woonkamer
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.hoofdslaapk
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.kamer_fleur
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.kamer_sanne
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.speelkamer
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.werkkamer
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false
      - type: custom:mushroom-climate-card
        entity: climate.zolder
        show_temperature_control: true
        layout: horizontal
        hvac_modes: []
        fill_container: false

[Trilis29]

@rhysb Hi, I am trying your animation examples and something is not working right, for example Pouring animation is not working. Seems like ha-icon variable does not respond at all.
Another radiator animation is working halfway:

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
        }
        
        70% {
          box-shadow: 0 0 0 10px transparent;
        }
        
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }

Only .shape PING animation is working and ha-icon is not working, any ideas?