Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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

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

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.

image

2 Likes

Nice! Could you post code please?

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. :slight_smile:

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

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;
                }

3 Likes

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.

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 %}
1 Like

a yes, thats clever :wink:

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 :wink:

Feb-10-2023 12-32-40

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

found the solution:

- 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 :wink:

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ā€¦

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.

Hey,

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

Hello geniuses!! :slight_smile:

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:

image

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ā€¦

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

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

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.

Could you share the code?

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

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.

image