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

[benchr]

You should be able to find it in the card editor. Look for tap action

[maniac365]

Hi, the seek bar only appears when music is paused, it disappears when music is playing, and the color is grey always.

[Banditt]

The way I have it is to use chips for the effect, color palette, intensity and speed. If you click them it opens to the more-info for each to change. If you don’t like having the history of the more-info dialog, you could also use browser-mod to have it open a popup to change each one when you click the chip, or put all four in the same popup and have every chip open the same popup for all four items.

I also hide the chips depending on what is chose (effect=solid means no palette, speed, intesity) etc.

It would be great to be able to have the select list in the card, but I haven’t figure out a good way yet because of what you were saying with it getting cut off. This is the best I have come up with.

[Tyfoon]

Nice! Could you post code please?

[sexelevatormusik]

That looks great! Could you please share the code? I’m still not that well versed in lovelace yet as most of my devices are controlled by automations or voice if necessary so I wouldn’t know how to recreate it.

[Banditt]

Here is the post on how to do the second light color on the WLED and has the example card code.

Controlling WLED Secondary Color

Since most of the effects of WLED involve a secondary color and I couldn’t seem to figure out through the WLED integration how to control I tried and make a way to do and it works. You can use the built in color picker. Example card using Mushroom: [image] Disclaimer: There is probably already a great way to do this, but I couldn’t find one by searching I am still learning Home Assistant so there is probably a way better way to code this than what I did. If you have any suggestions or edits…

To add in the chips for the effect, palette, speed and intensity:

Light Effect Chips

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
    chip:
      type: entity
      entity: select.example_select_wled_effect
      icon: mdi:led-on
      content_info: state
      name: Effect
      icon_color: grey
      card_mod:
        style: |
          ha-card {
            top: 2px;   
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
          }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Solid
        target:
          entity_id: select.example_select_wled_effect
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: select.example_select_wled_effect
        state_not: Flow Stripe
      - entity: select.example_select_wled_effect
        state_not: Solid Glitter
      - entity: select.example_select_wled_effect
        state_not: Solid Pattern Tri
      - entity: select.example_select_wled_effect
        state_not: Stream 2
    chip:
      type: entity
      entity: select.wled_color_palette
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Default
        target:
          entity_id: select.wled_color_palette
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_intensity
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_intensity') | int /255 *100) | round(0)  }}%
      icon: mdi:chart-line-variant
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_speed
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
      icon: mdi:speedometer
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
alignment: start
card_mod:
  style: |
    ha-card {
      margin: 0px 8px 8px;
      --chip-height: 32px;
      --chip-padding: 12px;
      --chip-spacing: 12px;
    }

Here is the complete card:

Complete Card

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.wled
    show_brightness_control: true
    show_color_control: false
    use_light_color: true
    layout: horizontal
    name: WLED Strip
    show_color_temp_control: false
    fill_container: true
    primary_info: name
    collapsible_controls: true
    icon: mdi:led-strip-variant
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
            chip:
              type: entity
              entity: select.example_select_wled_effect
              icon: mdi:led-on
              content_info: state
              name: Effect
              icon_color: grey
              card_mod:
                style: |
                  ha-card {
                    top: 2px;   
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                  }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Solid
                target:
                  entity_id: select.example_select_wled_effect
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: select.example_select_wled_effect
                state_not: Flow Stripe
              - entity: select.example_select_wled_effect
                state_not: Solid Glitter
              - entity: select.example_select_wled_effect
                state_not: Solid Pattern Tri
              - entity: select.example_select_wled_effect
                state_not: Stream 2
            chip:
              type: entity
              entity: select.wled_color_palette
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Default
                target:
                  entity_id: select.wled_color_palette
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_intensity
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: >
                {{ (states('number.wled_intensity') | int /255 *100) | round(0) 
                }}%
              icon: mdi:chart-line-variant
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_speed
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: |
                {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
              icon: mdi:speedometer
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
        alignment: start
        card_mod:
          style: |
            ha-card {
              margin: 0px 8px 8px;
              --chip-height: 32px;
              --chip-padding: 12px;
              --chip-spacing: 12px;
            }
    card_mod:
      style: |
        ha-card {
          border: 0px;
        }
  - type: conditional
    conditions:
      - entity: light.wled
        state: 'on'
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-light-card
          entity: light.wled
          show_color_control: true
          primary_info: none
          secondary_info: none
          icon_type: none
          card_mod:
            style: |
              ha-card {
                border: 0px;
                box-shadow: none;
              }
        - type: conditional
          conditions:
            - entity: select.example_select_wled_effect
              state_not: Solid
          card:
            type: custom:mushroom-light-card
            entity: light.testlight_colortwo
            primary_info: none
            secondary_info: none
            icon_type: none
            show_color_control: true
            card_mod:
              style: |
                ha-card {
                  border: 0px;
                  box-shadow: none;
                }

[sexelevatormusik]

Thank you! That’s great but I’m not controlling LED’s. Just ordinary hue lights for which I have templated scenes as effects so I won’t be needing anything more than the standard light color picker. I am just even more unfamiliar with lovelace than you so needed to see a functioning example to modify for my purpose. That said, if, in the highly unlikely circumstance that I find a way to improve upon your code I will gladly share but you probably shouldn’t hold your breath.

[0tto0o]

I think dodgerblue is not supported, but using HEX codes it works for me:

        {% if temp < -20 %} #000000
        {% elif temp < -15 %} #000080
        {% elif temp < -10 %} #00008B
        {% elif temp < -5 %} #0000CD
        {% elif temp < 0 %} #0000FF
        {% elif temp < 5 %} #1E90FF
        {% elif temp < 10 %} #ADD8E6
        {% elif temp < 15 %} #40E0D0
        {% elif temp < 20 %} #90EE90
        {% elif temp < 25 %} #006400
        {% elif temp < 30 %} #FFA500
        {% elif temp < 35 %} #DC143C
        {% else %} #B22222
        {% endif %}

[Mariusthvdb (Marius)]

a yes, thats clever

thing is, I always want to use the universal 140 html color names, to make my themes easily editable. Why have these universal supported names, and not support them… a pity really because it would make life so much easier on us tinkerers.

but, given that limitation, your solution fits the bill!

btw, as some extra inspiration for that left button, I’ve been using this for ages now, as in, far before the conception of Mushroom

type: custom:button-card
template:
  - styles_name
  - styles_cf_notification
show_entity_picture: true
size: 100%
aspect_ratio: 1/1
show_icon: false
entity: sensor.weather_animated_icon
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer
custom_fields:
  notification: >
    [[[ return Math.round(states['sensor.temp_current'].state); ]]]

styles:
  name:
    - color: var(--primary-color)
#  card:
#    - background-color: var(--card-background-color)
  custom_fields:
    notification:
      - background-color: >
          [[[ return states['sensor.temperature_color_name'].state; ]]]
      - color: ivory

[Mariusthvdb (Marius)]

found the solution:

Card-mod - Add css styles to any lovelace card

simple challenge, no easy fix? have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card. There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile: - type: h…

- type: custom:stack-in-card
      mode: horizontal
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity
          card_mod:
            style:
              hui-image:
                $: |
                  #image {
                    aspect-ratio: 1/1;
                  }
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

as main body structure.

or use core cards, with a little card_mod tweaking:

    - type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            --grid-card-gap: 0px;
            --ha-card-box-shadow: none;
          }
      card:
#         type: horizontal-stack
        type: grid
        columns: 2
        cards:
          - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
          - type: picture-entity
            card_mod:
              style:
                hui-image:
                  $: |
                    #image {
                      aspect-ratio: 1/1;
                    }
            entity: camera.buienradar
            show_state: false
            show_name: false
            # camera_view: auto

you can also use the horizontal-stack, and then use

card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }

the gap mods are essentially what custom stack-in-card does.

both cards now have aspect_ratio: 1/1, so perfect fit assured. (or plain aspect_ratio: 1 of course

[johntdyer (John Dyer)]

Has anyone been able to make use of the keypad features along w/ the restriction card? Basically I want a touch screen pin pad, just like the alarm mushroom card, to restrict a card action from my children…

[AwesomeGuyNamedMatt (Matt)]

Is there a card that allows you to have a slider control an input_number entity? I tried using the light card with the dimmer settings, but it would not take that entity type. I found the my-slider card mentioned in this thread, but that card seems to be dead now.

[reesion (Reesion Tee)]

@Fabian_V

popup window

Hey,

I copied your code but i couldn’t get the popup window working. Any idea why?

[pppaulie_s (Paul)]

Hello geniuses!!

I can’t really find a way of adding a stop-watch so that when an entity has been turned on, I can see how long it has been in that state and have it displayed “live” in a Mushroom card, Secondary information area. For example:

Is there a way to perhaps use a template and the last changed status?
Or history_stats?

For example, I can get the time of last_changed. could this be used “somehow” and subtracted from current time which in theory would show “time running”?

Scratching my head…

[StefanHabel]

Is there a way to add additional information to the title card? Like the average temperature in that floor e.g.?

[StefanHabel]

And is there a way to change the default action for all cards?

[MRobi (Mike)]

You can use
secondary_info: last-updated

It will round to the nearest minute/hour/day though so may not be as accurate as you’re looking for.

[ettom]

Could you share the code?

[finalbillybong]

Looks great. I love the yaml for this if possible?

[HA_n00b]

Is there any way to create “entities card”? As you can see below, I created 4 entity cards.
But, I want to get rid the space in between. Something like multiple entities in 1 card.
I tried by adding all into 1 yaml code, but that didn’t work.