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

LaFed · April 10, 2022, 12:19pm

Hi, I’ve installed both mushroom and mushroom theme but when I can’t see to find any custom mushroom card when after creating a new dashboard. Tried clearing cache but still dont see any mushroom cards =(

Lunkobelix · April 10, 2022, 12:23pm

I had the same issue, problem was that there was no reference to Mushroom under Configuration > Control Panel (might be called Dashboards in English) > Resources.

Add a reference as a JavaScript module to: local/community/lovelace-mushroom/mushroom.js.

LaFed · April 10, 2022, 12:42pm

Thanks!!! finally got it working!

pjn77 · April 10, 2022, 1:26pm

For some reason im unable to use the mushroom vacuum card. I’ve got 1.4 installed. Ive tried redownloading, removing and readding, ive checked that there’s references to vacuums in the installed js file, but it doesnt show up as a card to add in lovelace, nor can i manually type in ‘custom:mushroom-vacuum-card’ as the card type. This persists after browser reloads/server restarts.

Not had a problem like this before - any ideas for how to fix it?

RaA11 · April 10, 2022, 1:31pm

There’s no Vacuum Card yet as I know…

pjn77 · April 10, 2022, 1:59pm

It’s listed as availabe in Github and there’s documentation for it

github.com

piitaya/lovelace-mushroom/blob/4edb164afd12195ce772f09f94f758c92b35e3b2/docs/cards/vacuum.md

# Vacuum card

![Vacuum light](../images/vacuum-light.png)
![Vacuum dark](../images/vacuum-dark.png)

## Description

A vacuum card allow you to control a vacuum entity.

## Configuration variables

All the options are available in the lovelace editor but you can use `yaml` if you want.

| Name                       | Type    | Default     | Description                                                               |
| :------------------------- | :------ | :---------- | :------------------------------------------------------------------------ |
| `entity`                   | string  | Required    | Vacuum entity                                                             |
| `icon`                     | string  | Optional    | Custom icon                                                               |
| `name`                     | string  | Optional    | Custom name                                                               |
| `layout`                   | string  | Optional    | Layout of the card. Vertical, horizontal and default layout are supported |
| `hide_state`               | boolean | `false`     | Hide the entity state                                                     |

This file has been truncated. show original

capandcamera · April 10, 2022, 2:16pm

That PR has only recently been approved, so it may become available in the next release.

piitaya · April 10, 2022, 3:30pm

Yep, the vacuum card is coming in the release (just few adjustments and fixes to do )

dicko · April 10, 2022, 6:20pm

Great stuff. Any news on when the temp/thermostat card will be available ?

Keep up the good work

KrX · April 10, 2022, 8:04pm

Hello,

i got a custom card which i show when a condition is 0 like this:

type: conditional
conditions:
  - entity: sensor.seventeentrack_packages_in_transit
    state_not: '0'
card:
  type: custom:seventeen-track-card
  entity: sensor.seventeentrack_packages_in_transit
  title: Unterwegs
  location: false`

but when i use the chip card with a condition the custom card is not shown:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.seventeentrack_packages_in_transit
        state_not: '0'
    chip:
      type: custom:seventeen-track-card
      entity: sensor.seventeentrack_packages_in_transit
      title: Unterwegs
      location: false

what am i doing wrong?

joshcrosby · April 10, 2022, 8:34pm

Anyone have any ideas on how to include MDI icons in the template field?

Surimisalade · April 10, 2022, 8:35pm

Can you tell me how you got 2/3 of the with for the ledstrip and 1/3 for the ‘Pokoj D’ light?
Or mind sharing the code? I cant seem to find how to divide the with in unequal pieces.
Thanks

Posreg · April 10, 2022, 8:47pm

Sure thing!
It is layout card with Grid view
please see the code below, it is bigger because I use conditional cards to hide brightness, color temp and temperature when lights are off or unavailable
hope this helps

grid-template-columns: 2fr 1fr
2fr represents 2/3 , 1fr 1/3

type: vertical-stack
cards:
  - type: custom:text-divider-row
    text: Lights
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 2fr 1fr
      grid-template-rows: auto
    cards:
      - type: conditional
        conditions:
          - entity: light.tasma_led_rgbww
            state_not: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.tasma_led_rgbww
          icon: mdi:led-strip-variant
          name: TV LED
          hide_state: true
      - type: conditional
        conditions:
          - entity: light.tasma_led_rgbww
            state: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.tasma_led_rgbww
          icon: mdi:led-strip-variant
          name: TV LED
          show_color_temp_control: true
          show_brightness_control: true
          hide_state: true
          use_light_color: true
          show_color_control: true
      - type: conditional
        conditions:
          - entity: light.yeelight_edison_style
            state_not: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.yeelight_edison_style
          name: Pokój D
          hide_state: true
          icon: mdi:lightbulb-variant-outline
      - type: conditional
        conditions:
          - entity: light.yeelight_edison_style
            state: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.yeelight_edison_style
          name: Pokój D
          show_brightness_control: true
          hide_state: true
          icon: mdi:lightbulb-variant-outline
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 1fr 1fr
      grid-template-rows: auto
    cards:
      - type: conditional
        conditions:
          - entity: light.xiaomi_mi_desk_lamp
            state_not: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.xiaomi_mi_desk_lamp
          hide_state: true
          name: Lampka Sypialnia
          icon: mdi:desk-lamp
      - type: conditional
        conditions:
          - entity: light.xiaomi_mi_desk_lamp
            state: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.xiaomi_mi_desk_lamp
          show_color_temp_control: true
          show_brightness_control: true
          hide_state: true
          name: Lampka Sypialnia
          icon: mdi:desk-lamp
      - type: conditional
        conditions:
          - entity: light.yeelight_white
            state_not: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.yeelight_white
          icon: mdi:floor-lamp
          name: Salon
          hide_state: true
      - type: conditional
        conditions:
          - entity: light.yeelight_white
            state: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.yeelight_white
          icon: mdi:led-strip-variant
          name: Salon
          show_color_temp_control: true
          show_brightness_control: true
          hide_state: true
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 1fr
      grid-template-rows: auto
    cards:
      - type: conditional
        conditions:
          - entity: light.kitchen_led
            state_not: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.kitchen_led
          hide_state: true
          name: LED Kuchnia
      - type: conditional
        conditions:
          - entity: light.kitchen_led
            state: 'on'
        card:
          type: custom:mushroom-light-card
          entity: light.kitchen_led
          show_color_temp_control: true
          show_brightness_control: true
          hide_state: true
          name: LED Kuchnia
          use_light_color: true
          show_color_control: true

ebolly · April 10, 2022, 8:57pm

Hello, am I the only having issue with colors using binary sensor in mushroom chip ?

Using this

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.annaelle_fenetre
    icon_color: purple
    icon: mdi:account
  - type: entity
    entity: person.eric
    icon_color: blue

binary sensor is always black, but entity sensor is using color.

Posreg · April 10, 2022, 9:16pm

I think that for the binary_sensor your sensor has to be On

ebolly · April 10, 2022, 9:23pm

indeed this is a z-wave fibaro window sensor, so it’s sending open/close.
but I’ve no idea how to change this to on/off ??

ebolly · April 10, 2022, 9:32pm

I’ve just tried this, but not working either…

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.annaelle_fenetre
    icon_color: '{{ is_state(entity, ''Closed'') | iif(''green'', ''red'') }}'
    icon: mdi:account

Guess I need a template, but I can’t see some chips-template-card

CZonin · April 10, 2022, 10:24pm

Does anyone know a way to center align the text in the Mushroom Title Card? I’d imagine it can be done with card-mod but I don’t really know how to set it up properly.

vandecook · April 11, 2022, 9:48am

I was thinking long time to redesign my dashboard and then I found mushroom - Thats really the design which I was looking for and its very easy to configure. @piitaya Thanks for the great JOB!!!

In my setup I use some WLED with SK6812 RGBW LEDs.

With using light card I found out that its not possible to choose a white color and also can´t control the color temperature. No control elements available.

Does anybody know a solution, or should a raise a ticket on github?

piitaya · April 11, 2022, 10:22am

You can search on GitHub. The problem is already known. We are focused on new cards for now. It’s hard to response on all issues on our free time
It’s not a tech issue but a UX issue. For now you can use the more info popup as a workaround