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

[SmartNorman (Vetle)]

Yes! Sorry things went a bit fast. Here is the corrected code:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: null
        icon: mdi:battery
        icon_color: green
        content: Batteries
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
            }
  - type: custom:auto-entities
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding-top: 5px;
            padding-bottom: 0px;
            border-width: 0px;
            background: none;
            --ha-card-box-shadow: 0px;
          }
    filter:
      include:
        - entity_id: sensor.*battery
          options:
            type: custom:bar-card
            card_mod:
              style: |
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 12px !important;
                  height: 41px !important;
                  margin-top: -8px !important;
                  width: 101%;
                  right: 0.5%;
                }
                ha-icon {
                  position: relative;
                  padding: 11px;
                  border-radius: 50%;
                  --mdc-icon-size: 21px;
                  margin-top: -15px;
                  right: 4px;
                }
                bar-card-row, ha-icon {
                  color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                  background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                }
                bar-card-indicator {
                  color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                  top: -8px;
                } 
                bar-card-name {
                  margin-top: -27px !important;
                  left: 0px;
                  color: black;
                }
                bar-card-value {
                  margin-top: 8px !important;
                  font-size: 11px;
                  right: 96.9%;
                  width: 0px;
                  color: black;
                }
                ha-card {
                  margin: -4px 0px !important;
                  height: 60px;
                }
                bar-card-row bar-card-currentbar,
                ha-icon, bar-card-backgroundbar {
                  --bar-color:
                  {% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
                    blue !important;
                    --card-mod-icon: mdi:bug !important;
                  {% elif states(config.entity) | int <= 10 %}
                    #ff0026 !important;
                    --card-mod-icon: mdi:battery-10 !important;
                  {% elif states(config.entity) | int <= 20 %}
                    #ff4d00 !important;
                    --card-mod-icon: mdi:battery-20 !important;
                  {% elif states(config.entity) | int <= 30 %}
                    #ff9900 !important;
                    --card-mod-icon: mdi:battery-30 !important;
                  {% elif states(config.entity) | int <= 40 %}
                    #ffcc00 !important;
                    --card-mod-icon: mdi:battery-40 !important;
                  {% elif states(config.entity) | int <= 50 %}
                    #e7fc03 !important;
                    --card-mod-icon: mdi:battery-50 !important;
                  {% elif states(config.entity) | int <= 60 %}
                    #aaff00 !important;
                    --card-mod-icon: mdi:battery-60 !important;
                  {% elif states(config.entity) | int <= 70 %}
                    #aaff00 !important;
                    --card-mod-icon: mdi:battery-70 !important;
                  {% elif states(config.entity) | int <= 80 %}
                    #22c402 !important;
                    --card-mod-icon: mdi:battery-80 !important;
                  {% elif states(config.entity) | int <= 90 %}
                    #22c402 !important;
                    --card-mod-icon: mdi:battery-90 !important;
                  {% elif states(config.entity) | int <= 100 %}
                    #22c402 !important;
                    --card-mod-icon: mdi:battery !important;
                  {% endif %}
                }
                bar-card-row ha-icon {
                  color: color-mix(in srgb, var(--bar-color) 100%, transparent);
                  background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                }
                ha-card {
                  padding: 0px !important;
                  margin: -3px !important;
                  height: 60px;
                  border-width: 0px;
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
    sort:
      method: state
      numeric: true
      ip: false
      ignore_case: false
      reverse: false
    show_empty: true
    card_param: cards

[LiQuid_cOOled]

No worries, thanks for your additional context for @jkseamons

[Faecon (Jo)]

Has anyone a nice visual to manipulate the fan speed of a climate module?

I have the option to put the speed from 1-5, but I don’t know how to make it visual actractive for an mobile app…

[Halover99 (HAlover)]

Hi All,

Someone could help me?
Thanks in advance

[Intro_Verti]

@crazytok

Mushroom Inspiration

I believe @Mobiledude know more about this card.

[Intro_Verti]

And if you read a bit more further, you’ll see his Github page:

Mushroom Inspiration!

@Adec @mvanlijden full Dash raw yaml here: HA-Dashboard · GitHub Most of it work in progress… Would love to see this evolve and expanded by the community

[r_anand]

Can someone help with this please ?

[Faecon (Jo)]

How can I change the attribute on a tap action ?

[LiQuid_cOOled]

See if this gets you started in the right direction.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Utility
    enity: switch.washing_machine_plug
    icon: mdi:washing-machine
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
         background: rgba(var(--rgb-primary-background-color), 0.2);
          } 
        :host {
         background: rgba(var(--rgb-primary-text-color), 0.025);
         --mush-icon-size: 70px;
         --ha-card-border-width: 0px;          
         height: 66px;
         margin-left: -23px !important;
         margin-top: -3px !important;
           }                    
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: switch.washing_machine_plug
        tap_action:
          action: more-info
        icon: mdi:washing-machine
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.basement_sensor
            icon: mdi:stove
            icon_color: orange
            tap_action:
              action: more-info
            content_info: none
            card_mod:
              style: |
                ha-card {
                 --chip-icon-size:.5em;
                 --chip-spacing: -0.5em;
                 margin-top: 10px;
                   }
          - type: template
            entity: sensor.basement_sensor_battery
            icon: mdi:apple
            icon_color: red
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: .5em;
                  --chip-spacing: -0.5em;
                   margin-top: 10px;
                    }

[LiQuid_cOOled]

Are you looking to represent the fan spinning?

I use a button system where the color reflects the speed and direction. The fan’s spin speed is also based of the setting. I did this by creating separate SVGs (my early HA days), but an easier solution would be to use animate/keyframes.

cellphone pic

[Faecon (Jo)]

No I am not into moving icons. It is ok for some time but it gets annoying for me

No what I want is code to use the button system.
So to change the speed of the airco, i need to change the attribute of the climate entitiy

[LiQuid_cOOled]

Something like this layout or different? You have a tone of options.

[Faecon (Jo)]

No you don’t understand I already have the visuals made for the fan speed . I only need to know how I can use the tap action to change the fan speed. I see I have to change the attribute, but I don’t know how to do it

I made it with a conditional card to make it a little cleaner

[LiQuid_cOOled]

Sorry was over thinking it. Just create a script that changes the fan speed and use that in the tap action

tap_action:
              action: call-service
              service: script.fan_speed_2
              service_data:
                entity_id: script.fan_speed_2

[Faecon (Jo)]

hmm, thanks. I never made a script. I will do some research and maybe I’ll come back

[LiQuid_cOOled]

It’s a built in function and the UI will walk you through it. Very similar to creating a dashboard card.
Located under here…

[Apolitosz]

I do appreciate the response, didn’t even realise the template card can display sliders, I guess I have some more reading to do, thanks!

[LiQuid_cOOled]

I didn’t add a slider to a template card.

I combined a mushroom template card with the stock mushroom humidifier card to achieve the desired results. This method allows you to get the specific data you want in the template card (target humidity) and I simply hid the features in the standard card that were repetitive.

[Faecon (Jo)]

Do I have to make a script for each button i have to control the fan speed ?

[LiQuid_cOOled]

If you are going to go with individual 1 thru 5 speed buttons, yes. You could also go with a two button system and have just two scripts, one to increase the speed and one to decrease the speed.