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

Dude! Who knows what you wantā€¦

type: vertical-stack
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Test Card
        secondary: Good Evening, {{user}}
        layout: horizontal
        tap_action: none
        entity: input_boolean.YOUR_TOGGLE_BOOLEAN
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: end
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data: {}
                  target:
                    entity_id: input_boolean.YOUR_TOGGLE_BOOLEAN
                icon: >
                  {% if is_state('input_boolean.YOUR_TOGGLE_BOOLEAN', 'off')
                  %}
                    mdi:chevron-down
                  {% elif is_state('input_boolean.YOUR_TOGGLE_BOOLEAN',
                  'on') %}
                    mdi:chevron-up   
                  {% endif %}
            alignment: end
  - type: conditional
    conditions:
      - entity: input_boolean.YOUR_TOGGLE_BOOLEAN
        state: 'on'
    card:
      type: calendar
      entities:
        - calendar.ASANEXAMPLE


chip ā€˜onā€™
image

chip to ā€˜offā€™

The calendar card shows when the template chip is pushed. Iā€™d advise to start in visual editor and use ā€˜horizontal stackā€™ before you change to ā€˜custom:stack-in-cardā€™ so you could use everything in visual editor.

Edith says:
I overhauled the code and now even the icon changes from ā€˜downā€™ to ā€˜upā€™ with the chip is pressed.

3 Likes

hi, fancy card - is there the possibility to share your ā€œgarbageā€ cards code?

Itā€™s already there and thank you :blush:

Works for me, put these lines in your template file.

mush-rgb-lime: 205, 220, 57
mush-rgb-state-entity: var(--mush-rgb-lime)
1 Like

I guess I misunderstood that it only works for mushroom cards. I tried to set the color on other tabs and the entity name and it doesnā€™t work.
Thank you

Very nice work, really love it.

Unfortunately I have ONE Question :slight_smile: Iā€™m trying to display current water usage, with icon colors based on value

Please have a look at picture, code + outcome. It seems that when current usage = 0.0 (which is actual state currently), it doesnā€™t show the content
The colors donā€™t change either by using, while for example the power usage does work

Any ideas ?

Kr,

Bart

What is the output if you copy your code into Developer Tools?

Ow manā€¦Lime with black colorā€¦Nice!
The Mushrooms are growing (and glowing). itā€™s an unbelievable addition to Home Assissant

Is it possible if I have an input select with only 2 options (on and off) to use one of these cards to tap to turn on if off and tap to turn off if on rather than having to do a tap for on and a double tap for off for example? Would the card also be able to show the state of the input select so the user knows when they tap it will turn off/on rather than tapping but not knowing what it did.

Have a look at what Iā€™ve posted above.

ā€˜Toggleā€™ is the magic word.

Of course you can template the icon so it correspondents youā€™re needs and show the state of you input boolean.

But why would you use an input.select rather than a input.boolean as you only what to states?

I used input select as I didnā€™t like the default look of the input boolean for my use case.

I tried your code and the icon is not rendering.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: >
        {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down
        {% elif is_state('input_boolean.left_dockpro_mode','on') %}
        mdi:chevron-up   
        {% endif %}

Bad indentation in the mdi rows. Both should be indented by two spaces.

Hey guys
is there a way to change the size of a single chip?
tried it like this

- type: custom:mushroom-chips-card
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: test
        icon: mdi:home
        icon_color: green
        mush-chip-height: 60px
        card_mod:
        style: |
          ha-card {
              mush-chip-height: 50px;
          }

But it doesnt work?
Appreciate your help
Thank you :smiley:

Still doesnā€™t work.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: >
      {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down 
      {% elif is_state('input_bo olean.left_dockpro_mode','on') %}   
        mdi:chevron-up    
      {% endif %}

This time you have a space between the oā€™s in the elif-row.

Have you looked in the Developers Tools ā†’ Template section?

Alright I fixed that.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: |
      {% if is_state('input_boolean.left_dockpro_mode','off') %}
        mdi:chevron-down 
      {% elif is_state('input_boolean.left_dockpro_mode','on') %}   
        mdi:chevron-up    
      {% endif %}

It evaluates properly in the template editor. When I get rid of the template and choose a specific icon it shows the icon, once I add a template it shows nothing.

Results:
mdi:chevron-up

1 Like

You canā€™t use templates in chips with type: action. You need to use type: template.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |-
      {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down 
      {% elif is_state('input_boolean.left_dockpro_mode', 'on') %}   
        mdi:chevron-up    
      {% endif %}
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode

Works now thank you.

Try with --chip-height

1 Like

Worked! Thank you!