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

Another option is to use the template card and media card (whiteout icon, primary info and secondary info) and use the stack card. Than you don’t need to use card mod and are flexible where what info is presented.

for example:

type: custom:stack-in-card
keep:
  margin: true
cards:
  - square: false
    columns: 1
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: |-
          {% set s = state_attr(entity, 'source') %}
          {% if s %} Spotify - {{s}}
          {% else %} Spotify
          {% endif %}
        secondary: |-
          {% set a = state_attr(entity, 'media_artist') %}
          {% set t = state_attr(entity, 'media_title') %}
          {% if a %} {{a}} - {{t}}
          {% else %} Beschikbaar
          {% endif %}
        icon: mdi:spotify
        entity: media_player.spotify_secondary
        icon_color: |-
          {% set s = state_attr(entity, 'source') %}
          {% if s %} deep-orange
          {% else %} disabled
          {% endif %}
        fill_container: true
        tap_action:
          action: more-info
      - type: custom:mushroom-media-player-card
        entity: media_player.spotify_secondary
        fill_container: true
        media_controls:
          - shuffle
          - previous
          - play_pause_stop
          - next
          - repeat
        collapsible_controls: true
        icon_type: none
        primary_info: none
        secondary_info: none

image

1 Like

Hey I know your one of the coding experts on here . I’m trying to use the mushroom fan card slider to control my 6 speeds on fan . Currently I have 6 seperate buttons set as scripts for the RF BroadLink hub

I found entity-row-slider but my issue is I need it to look like a mushroom card and mushroom slider. Am this be done with fan or template card?

HA and Mushroom should automatically take care of it. I have a tuya based fan controller and I didn’t have to do anything special in Mushroom to get the slider on the fan card to work.

I feel like I still might have trouble because I had to manually program each speed button as a script for this fan. The fan itself is in a smart fan I had to use an RF hub. Good to know though for future fans I might set up. Thanks

Oh yes, for a RF controlled fan you won’t get the slider working correctly. A really hacky way would be to use an input helper from 0 to 100 and use that as the slider. Then you can create an automation to send the appropriate RF signal based on its value.

I have a mushroom slider pointing to a media_player for one of my TVs. This is my first attempt at using these cards as I like the look, especially of the slider. In the past I used Vol+, Vol- buttons but my wife hates the constant tapping. What I have in the YAML is:

        - type: conditional
          conditions:
            - entity: media_player.office_vizio
              state: 'on'
          card:
            type: custom:mushroom-media-player-card
            entity: media_player.office_vizio
            fill_container: true
            layout: horizontal
            primary_info: none
            secondary_info: none
            icon_type: none
            volume_controls:
              - volume_set
            collapsible_controls: false
            show_volume_level: true
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none

The overall card looks like this:

What I have observed is a fairly large lag between adjusting the slider and the TV volume control, perhaps one or two seconds or more. I have also noted that it appears I cannot slide more than like 12% at a time, while the slider will go the full length, when I let go it snaps back to about 12% more than the previous setting.

Both of these kinda make this unusable. Is there a better way or is my YAML wrong or?

It appears that a constant volume up is not sent, it merely sends only the end value. But then the end value is limited by 12%. Is this the way it works? Or possibly it sends 40 volume up commands too fast and ends up not at the real volume desired? And as a result, the slider and TV volume get out of sync for a bit.

If yes, would it just be better to create an input_number with some automation to send the final volume number to the media_player? NOTE: I do not even see how to do that as I see no “Mushroom Slider Card” or “Input Number Card” that would be a slider.

1 Like

Amazing, that’s brilliant. I spent ages looking through the mmp package yaml trying to pick out how they get an accent colour from the artwork and then blend it plus in chrome developer tools. (But I don’t know what im doing) :rofl:

1 Like

The entity-row-slider seems to work for me, but it looks nothing like the mushroom slider. And o don’t know how to fix that lol

hello I have a question how did you make the very direcTV card would you like to share the config of this wall this is very nicely made?

Of course (this is without the attempt to put in the mushroom card). You make have to hack things apart as this is DirecTV and also Vizio Smartcast all in one control for many TVs in my house.

I did post all this code here:

I think I am going to try this on some dimmable lights too, but I would suspect the same issue. Certainly folks that show volume control in their setup could respond as possibly I am wrong, but that is not user friendly whatsoever.

Use Custom mushroom template card, in Secondary use the following:

      type: custom:mushroom-template-card
        primary: |
          AC
        secondary: >
          {%if is_state('climate.ac_estar', 'off')%} Off {% else %} 
          {%if is_state_attr('climate.ac_estar','hvac_action','idle')%} Idle {% else %}
          {%if is_state_attr('climate.ac_estar','hvac_action','heating')%} Heating
          {% endif %} {% endif %} {% endif %}

It seams you are displaying the State, but you want the Atribute.

Show your code.

This is cool, although a bit sad that there isn’t a more “native” way.

1 Like

Can you share the code for this card, please?

Screen Shot 2022-08-30 at 9.25.49 PM

2 Likes

Is there any way to change the border radius of the img_cell? I am trying to not have a round circle but one with a similar radius to the card itself, a rounded square if you will!

Is this the look you are wanting?

You can apply it to your theme with mush-icon-border-radius: 12px

or to an individual card like this:

type: custom:mushroom-template-card
primary: Mushroom
secondary: ''
icon: mdi:mushroom
icon_color: red
card_mod:
  style: |
    :host {
      --mush-icon-border-radius: 12px;
    }
4 Likes

sure:

type: custom:stack-in-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: masonry
        layout: {}
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                icon: mdi:power-plug
                tap_action:
                  action: navigate
                  navigation_path: energia
                layout: vertical
                secondary: Energia
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card { 
                      background: rgba(var(--rgb-primary-text-color), 0.1);
                      width: 65px;
                      border-radius: 30px;
                      margin-left: auto;
                      margin-right: auto;
                      margin-top: 4px;
                      margin-bottom: -10px;
                    }
              - type: custom:mushroom-template-card
                secondary: Muzyka
                icon: mdi:radio
                icon_color: teal
                layout: vertical
                tap_action:
                  action: navigate
                  navigation_path: /mushroom-m/media
                card_mod:
                  style: |
                    ha-card { 
                      background: rgba(var(--rgb-primary-text-color), 0.1);
                      width: 65px;
                      border-radius: 30px;
                      margin-left: auto;
                      margin-right: auto;
                      margin-top: 4px;
                      margin-bottom: -10px;
                    }
              - type: custom:mushroom-template-card
                primary: ''
                secondary: HA
                icon: mdi:home-assistant
                icon_color: blue
                layout: vertical
                tap_action:
                  action: navigate
                  navigation_path: /mushroom-m/home-assistant/
                card_mod:
                  style: |
                    ha-card { 
                      background: rgba(var(--rgb-primary-text-color), 0.1);
                      width: 65px;
                      border-radius: 30px;
                      margin-left: auto;
                      margin-right: auto;
                      margin-top: 4px;
                      margin-bottom: -10px;
                    }
              - type: custom:mushroom-template-card
                primary: ''
                secondary: Siec
                icon: mdi:cogs
                icon_color: orange
                layout: vertical
                tap_action:
                  action: navigate
                  navigation_path: siec
                card_mod:
                  style: |
                    ha-card { 
                      background: rgba(var(--rgb-primary-text-color), 0.1);
                      width: 65px;
                      border-radius: 30px;
                      margin-left: auto;
                      margin-right: auto;
                      margin-top: 4px;
                      margin-bottom: -10px;
                    }
              - type: custom:mushroom-template-card
                primary: ''
                secondary: Kazek
                icon: mdi:robot-vacuum
                layout: vertical
                icon_color: indigo
                tap_action:
                  action: navigate
                  navigation_path: odkurzacz
                card_mod:
                  style: |
                    ha-card { 
                      background: rgba(var(--rgb-primary-text-color), 0.1);
                      width: 65px;
                      border-radius: 30px;
                      margin-left: auto;
                      margin-right: auto;
                      margin-top: 4px;
                      margin-bottom: -10px;
                    }
    card_mod:
      style: |
        ha-card {
          padding: 2px;
          height: 120px;
          margin-bottom: -15px;
        }
  - type: horizontal-stack
    cards:
      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:layout-card
                layout_type: grid
                layout:
                  width: 100%
                  grid-template-columns: 60% 40%
                  grid-template-rows: auto
                cards:
                  - type: custom:mushroom-person-card
                    entity: device_tracker.sg21
                    icon_type: entity-picture
                    primary_info: state
                    layout: vertical
                    secondary_info: last-changed
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        command: popup
                        deviceID: this
                        title: Test Popup
                        card:
                          type: map
                          entities:
                            - zone.brzozowka
                            - zone.zielona
                            - device_tracker.sg21
                    card_mod:
                      style: |
                        ha-card { 
                          background: none;
                          }
                  - type: vertical-stack
                    cards:
                      - type: custom:state-switch
                        entity: binary_sensor.sg21_is_charging
                        default: 'off'
                        states:
                          'on':
                            type: custom:mushroom-chips-card
                            chips:
                              - type: template
                                entity: sensor.sg21_battery_level
                                tap_action:
                                  action: more-info
                                icon: mdi:battery-charging-medium
                                icon_color: light-green
                                content: '{{ states(''sensor.sg21_battery_level'') }}%'
                                card_mod:
                                  style: |
                                    ha-card {
                                    --chip-background: none;
                                    margin-left: -10px;
                                    margin-top: 10px;
                                    animation: blink 1s linear infinite;
                                    }     
                                    @keyframes blink {
                                      50% {opacity: 0;}
                                      }
                            alignment: center
                          'off':
                            type: custom:mushroom-chips-card
                            chips:
                              - type: template
                                entity: sensor.sg21_battery_level
                                tap_action:
                                  action: more-info
                                icon: mdi:battery-arrow-down
                                icon_color: |2-
                                            {% set bl = states('sensor.sg21_battery_level') | int %}
                                            {% if bl < 10 %} #cc0c16
                                            {% elif bl < 20 %} #e61e28
                                            {% elif bl < 30 %} #e3464e
                                            {% elif bl < 40 %} orange
                                            {% elif bl < 50 %} #f0b93a
                                            {% elif bl < 60 %} #f3f56c
                                            {% elif bl < 70 %} #f2f536
                                            {% elif bl < 80 %} #69f095
                                            {% elif bl < 90 %} #2ee669
                                            {% elif bl < 100 %} #05ad3b
                                            {% elif bl == 100 %} #03872d
                                            {% else %} grey
                                            {% endif %}
                                content: '{{ states(''sensor.sg21_battery_level'') }}% '
                            alignment: center
                            card_mod:
                              style: |
                                ha-card { 
                                  margin-left: -10px;
                                  --chip-background: none;
                                  }
                      - type: custom:state-switch
                        entity: binary_sensor.ticwatch_pro_3_is_charging
                        default: 'off'
                        states:
                          'on':
                            type: custom:mushroom-chips-card
                            chips:
                              - type: template
                                entity: sensor.ticwatch_pro_3_battery_level
                                tap_action:
                                  action: more-info
                                icon: mdi:watch-import
                                icon_color: light-green
                                content: >-
                                  {{
                                  states('sensor.ticwatch_pro_3_battery_level')
                                  }} %
                                card_mod:
                                  style: |
                                    ha-card {
                                    --chip-background: none;
                                    margin-left: -10px;
                                    margin-top: 10px;
                                    animation: blink 1s linear infinite;
                                    }     
                                    @keyframes blink {
                                      50% {opacity: 0;}
                                      }
                            alignment: center
                          'off':
                            type: custom:mushroom-chips-card
                            chips:
                              - type: template
                                entity: sensor.ticwatch_pro_3_battery_level
                                tap_action:
                                  action: more-info
                                icon: mdi:watch
                                icon_color: |2-
                                            {% set bl = states('sensor.ticwatch_pro_3_battery_level') | int %}
                                            {% if bl < 10 %} #cc0c16
                                            {% elif bl < 20 %} #e61e28
                                            {% elif bl < 30 %} #e3464e
                                            {% elif bl < 40 %} orange
                                            {% elif bl < 50 %} #f0b93a
                                            {% elif bl < 60 %} #f3f56c
                                            {% elif bl < 70 %} #f2f536
                                            {% elif bl < 80 %} #69f095
                                            {% elif bl < 90 %} #2ee669
                                            {% elif bl < 100 %} #05ad3b
                                            {% elif bl == 100 %} #03872d
                                            {% else %} grey
                                            {% endif %}
                                content: >-
                                  {{
                                  states('sensor.ticwatch_pro_3_battery_level')
                                  }}%
                                card_mod:
                                  style: |
                                    ha-card { 
                                       margin-left: -10px;
                                       --chip-background: none;
                                      }
                            alignment: center
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.1);
                  width: 160px;
                  border-radius: 30px;
                  margin-left: 10px;
                  margin-right: auto;
                  margin-top: 10px;
                  margin-bottom: -5px;
                }
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 10px;
                  }
          - type: custom:mushroom-template-card
            secondary: >-
              {{ state_attr('sensor.darek','street') }}, {{
              state_attr('sensor.darek','city') }}, {{
              state_attr('sensor.darek','postal_code') }}, {{
              state_attr('sensor.darek','place_name') }}
            multiline_secondary: true
            tap_action: none
        card_mod:
          style: |
            ha-card { 
              height: 200px;
              }
      - type: custom:stack-in-card
        cards:
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: custom:layout-card
                layout_type: grid
                layout:
                  width: 100%
                  grid-template-columns: 60% 40%
                  grid-template-rows: auto
                cards:
                  - type: custom:mushroom-person-card
                    entity: device_tracker.mi_9_lite
                    use_entity_picture: true
                    hide_name: true
                    primary_info: state
                    layout: vertical
                    secondary_info: last-changed
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        command: popup
                        deviceID: this
                        title: Mapa
                        card:
                          type: map
                          entities:
                            - zone.home
                            - zone.etisoft
                            - zone.brzozowka
                            - zone.zielona
                            - device_tracker.mi_9_lite
                    card_mod:
                      style: |
                        ha-card { 
                          background: none;
                          }
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.mi_9_lite_is_charging
                        state: 'on'
                    card:
                      type: custom:mushroom-template-card
                      entity: sensor.mi_9_lite_battery_level
                      layout: vertical
                      fill_container: true
                      hide_name: true
                      icon: mdi:battery-charging-medium
                      icon_color: light-green
                      tap_action:
                        action: more-info
                      secondary: '{{ states(''sensor.mi_9_lite_battery_level'') }} %'
                      card_mod:
                        style: |
                          mushroom-shape-icon {
                            animation: blink 1s linear infinite;
                          }          
                          @keyframes blink {
                            50% {opacity: 0;}
                          }
                          ha-card { 
                            background: none;
                            }
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.mi_9_lite_is_charging
                        state: 'off'
                    card:
                      type: custom:mushroom-template-card
                      entity: sensor.mi_9_lite_battery_level
                      layout: vertical
                      icon_color: |2-
                                  {% set bl = states('sensor.mi_9_lite_battery_level') | int %}
                                  {% if bl < 10 %} #cc0c16
                                  {% elif bl < 20 %} #e61e28
                                  {% elif bl < 30 %} #e3464e
                                  {% elif bl < 40 %} orange
                                  {% elif bl < 50 %} #f0b93a
                                  {% elif bl < 60 %} #f3f56c
                                  {% elif bl < 70 %} #f2f536
                                  {% elif bl < 80 %} #69f095
                                  {% elif bl < 90 %} #2ee669
                                  {% elif bl < 100 %} #05ad3b
                                  {% elif bl == 100 %} #03872d
                                  {% else %} grey
                                  {% endif %}
                      secondary: '{{ states(''sensor.mi_9_lite_battery_level'') }} %'
                      tap_action:
                        action: more-info
                      fill_container: true
                      icon: mdi:battery-arrow-down
                      card_mod:
                        style: |
                          ha-card { 
                            background: none;
                            }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.1);
                  width: 160px;
                  border-radius: 30px;
                  margin-left: 10px;
                  margin-right: auto;
                  margin-top: 10px;
                  margin-bottom: -5px;
                }
                :host {
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 10px;
                  }
          - type: custom:mushroom-template-card
            secondary: >-
              {{ state_attr('sensor.kasia','street') }}, {{
              state_attr('sensor.kasia','city') }}, {{
              state_attr('sensor.kasia','postal_code') }}, {{
              state_attr('sensor.kasia','place_name') }}
            multiline_secondary: true
            tap_action: none
        card_mod:
          style: |
            ha-card { 
              height: 200px;
              }
3 Likes

There are two settings you could have a play with:

mush-slider-threshold
mush-input-number-debounce

Perhaps @piitaya could shed some light on what they do.

For an alternate slider/input_number card, have a look here:

1 Like

For a Mushroom styled slider card have a look at my post above.

If you need a horizontal layout version let me know.

I’m using Universal Media Player to provide currently playing controls on my dashboard. I also use Universal Media Player to combine the Windows HTPC volume control with Plex media controls.