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

Guizmos · October 23, 2023, 1:06pm

Hi,

I’m not sure I understand your question, but here is an example of a card that I use for my lights:

type: custom:local-conditional-card
default: hide
id: light
card:
  type: vertical-stack
  title: Lampes
  cards:
    - square: false
      type: grid
      cards:
        - type: custom:mushroom-template-card
          layout: vertical
          primary: Led
          secondary_info: none
          entity: switch.lampe_led
          icon: mdi:wall-sconce-round-variant
          icon_color: |-
            {% if is_state('switch.lampe_led', 'on') %}
              black
            {% else %}
              grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'on') %}
                  background-color: rgba(147,112,219, 1);
                {% else %} 
                  background-color: rgba(var(--rgb-card-background-color));
                {% endif %}
              }
        - type: custom:mushroom-template-card
          layout: vertical
          primary: Guirlande
          secondary_info: none
          entity: switch.lampe_guirlande
          icon: mdi:string-lights
          icon_color: |-
            {% if is_state('switch.lampe_guirlande', 'on') %}
              black
            {% else %}
              grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'on') %}
                  background-color: rgba(147,112,219, 1);
                {% else %} 
                  background-color: rgba(var(--rgb-card-background-color));
                {% endif %}
              }
        - type: custom:mushroom-template-card
          layout: vertical
          primary: Chevet
          secondary_info: none
          entity: switch.lampe_chevet
          icon: mdi:lamp
          icon_color: |-
            {% if is_state('switch.lampe_chevet', 'on') %}
              black
            {% else %}
              grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'on') %}
                  background-color: rgba(147,112,219, 1);
                {% else %} 
                  background-color: rgba(var(--rgb-card-background-color));
                {% endif %}
              }
      columns: 3
    - square: false
      type: grid
      cards:
        - features:
            - type: light-brightness
          type: tile
          entity: light.lampe_canape
          name: Canapé
          card_mod:
            style: |
              .background {
                {% if is_state(config.entity, 'on') %}
                  background: color-mix(in srgb, var(--tile-color) 50%, var(--card-background-color));
                {% endif %}
              }
      columns: 1

lights

You can add as many cards as you want, they just need to start with local-conditional-card with the same ID (in my example id: light)

type: custom:local-conditional-card
default: hide
id: light

When you press the button, it shows or hides the cards with the different IDs that you will have defined in the “tap_action” parameters of the button

            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: toggle
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - monitoring: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
                  - plan: hide
                  - search: hide
                  - temperature: hide
                  - humidite: hide

Faecon · October 23, 2023, 3:17pm

That’s the solution. Thanks

poudenes · October 23, 2023, 4:25pm

Hi There,

is there a mushroom card that can be used to load a image as icon?

Montreal666 · October 23, 2023, 5:26pm

Mushroom template card

poudenes · October 23, 2023, 6:05pm

Great I see the Picture option now… Not using the template card that much … thanks!!

FedeL16 · October 23, 2023, 8:07pm

thanks, im trynh to change the button on your card:

github.com

Guizmos123/Mushroom/blob/2f7ce39f13c445dbdc86864b8f4e2a8c36268ee5/Menu_bar.txt

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            secondary: ''
            icon: mdi:home
            layout: vertical
            icon_color: green
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: toggle
                  - light: hide
                  - portail: hide
                  - camera: hide

This file has been truncated. show original

and then i should add “local-condition-card” so i can press a button to show the menù… i have two problems:

1- i dont manage to change the entity in the first card
2- i dont understand how to set a button to touch to show the card (for example light card that you posted)

can you help me?

Montreal666 · October 23, 2023, 10:49pm

Edit: got it. added card_mod styling to my custom theme:

my-custom-theme:
  card-mod-theme: my-custom-theme 
  card-mod-card: |
    ha-card {
      text-shadow: 0px 5px 5px rgba(0,0,0,0.3);
      }

Lots of knowledgeable people on this thread and couldn’t get an answer elsewhere so trying here

Is it possible to style “text-shadow” globally via theme / some type of “anchor”; or can it only be done at the card level? ex with mushroom cards:

   style: |
            ha-card {
              text-shadow: 0px 5px 5px rgba(0,0,0,0.3);
            }

it obviously works at the card level but I’d like to make it “default” for all dashboard text.

Thanks!

Yannik · October 24, 2023, 4:54am

Hello everyone!

I would like to have this overview for my 3D printer (Bambulabs X1C):

Threedy 2.0

Unfortunately, I do not get any further than that:

2023-10-24_06h46_38

Code

type: custom:vertical-stack-in-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Bambulab X1C
        secondary: |-
          {% if is_state('sensor.y1_print_status','running') %}
            {{ (states("sensor.y1_print_progress") |float ) | round(0) }}% |
            {% set ct = states('sensor.y1_remaining_time') | int %}
            {{ (ct | float // 60) | round(0) }}h {{ (ct | float % 60) | round(0) }}m
          {% else %} 
            {{states('sensor.y1_print_status') }}
          {% endif %} 
        icon: mdi:printer-3d-nozzle
        icon_color: |-
          {% if is_state('sensor.y1_print_status','running') %}
            blue
          {% endif %}
        badge_color: red
        badge_icon: null
        entity: light.y1_chamber_light
        tap_action:
          action: none
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: radial-gradient(var(--card-background-color) 60%, 
                transparent calc(60% + 1px)), 
                conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.y1_print_progress') }}% 0%, 
                var(--card-background-color) 0% 100%);
                z-index: 1;
              } 
              .shape:after {
                {% if is_state('sensor.geschirrspuler_operation_state', 'Run') %}
                  content: '';
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: var(--shape-color);
                {% endif %}
              }
            .: |
              mushroom-state-info {
                z-index: 1;
              }
              mushroom-badge-icon {
                z-index: 1;
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.y1_nozzle_temperature
        icon: mdi:printer-3d-nozzle-heat
      - type: entity
        entity: sensor.y1_bed_temperature
        icon: mdi:heating-coil
      - type: template
        content: |-
          {% set ct = states('sensor.y1_remaining_time') | int %}
                  {{ (ct | float // 60) | round(0) }}h {{ (ct | float % 60) | round(0) }}m
        icon: mdi:alarm

Can someone help me there? Thanks!

Montreal666 · October 24, 2023, 5:41am

using dimitri’s styling guide
this one was looking straightforward but doesn’t work.
using the same code as the example from the guide.
changing the indentation doesn’t work either
can you help pinpoint the issue?

filikun · October 24, 2023, 9:07am

Did you get it to mimic the tile card?

dimitri.landerloos · October 24, 2023, 9:43am

Chips do not have a .shape or even a mushroom-shape-icon.

Look in my chip section of my guide.

To get a border around a chip it is this simple:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
    card_mod:
      style: |
        ha-card {
          border: 2.5px outset green !important;
        }

mathieu-mp · October 24, 2023, 10:34am

Hi @tomg1970,
Could you share your code for this great display, please?

Montreal666 · October 24, 2023, 12:20pm

Thank you Dimitri,
I guess I’m looking at the wrong section but I found this under your “chips card” section:

For future reference, can you point me to the correct info?

Thx

dimitri.landerloos · October 24, 2023, 12:26pm

No, you are looking at the right section. That is just definitely wrong. Will get that fixed.

Thanks for pointing that out!

EDIT: now fixed

Montreal666 · October 24, 2023, 12:41pm

Phew.
Thought I was going mad
Thx again👍

Tsar · October 24, 2023, 2:20pm

Very nice, thank you !

I like to mop my floors 3 times, how could this been integrated in your script “Run Vacuum” ?

This is not working and I don’t know why :

      - service: vacuum.send_command
        data:
          command: app_segment_clean
          params:
            - segments: |
                {% set vacrooms = namespace(roomid=[]) %}
                {% for rooms in state_attr('sensor.roborock_rooms','rooms') -%}
                  {% if is_state(rooms.boolean,'on') %}
                    {% set room = rooms.id %}
                    {% set vacrooms.roomid = vacrooms.roomid + [room] %}
                  {% endif %}
                {%- endfor %}
                {{ vacrooms.roomid }}
              repeat: 3
        target:
          entity_id: vacuum.roborock_q8_max

tomg1970 · October 24, 2023, 5:38pm

Which one exactly do you mean?

FedeL16 · October 24, 2023, 5:45pm

Hi @Guizmos , finally Im finishing to configure my phone dashboard.
Anyway, my last question to finisce bottom bar, I don’t manage to configure ''The Search? in your bar. Im installing Open Ai and created input.text, anyway I don’t obtain answer.

Can you help me please?

kbrown01 · October 24, 2023, 7:08pm

@Tsar … I am adding you to the other thread. Scripts relative to vacuum have nothing to do with Mushroom, please ask there. You will get invite as it was created as a PM.

That said, I would try “repeats” and not “repeat”, if I use developer tools and set up mine which uses roborock.vacuum_clean_segment:

service: roborock.vacuum_clean_segment
data:
  segments:
    - 17
    - 2
  repeats: 2

mathieu-mp · October 24, 2023, 7:31pm

Your latest!