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

Kabala · February 12, 2022, 6:25pm

Hi,
is it possible to display an entity and when you press it, call up another entity?
as in the example

type: custom:button-card
tap_action:
  action: more-info
  entity: group.schalter
show_icon: false
show_label: true
show_name: false
show_state: false
variables:
  ulm_chip_icon_state_icon: 💡
  ulm_chip_icon_state_entity: sensor.schalter_template
triggers_update: all

or multiple entities?

type: custom:button-card
tap_action:
  action: more-info
  entity: weather.dark_sky
show_icon: false
show_label: true
show_name: false
show_state: false
variables:
  ulm_chip_temperature_inside: sensor.0x00158d00025f014e_temperature
  ulm_chip_temperature_outside: luxtronik.id_web_temperatur_ta
  ulm_chip_temperature_weather: weather.dark_sky
triggers_update: all

piitaya · February 12, 2022, 10:21pm

It don’t think it’s possible with Mushroom because we want to keep it simple to use. For custom usage, I think minimalist is better or maybe you can use browser_mod.

jsdphilly · February 13, 2022, 12:12am

I absolutely love this. Switched my whole mobile dashboard to it today. Would it be possible to have the chips create equal space between them and center the group (instead of being locked to the left edge)?

Posreg · February 13, 2022, 4:41am

I’m doing this with COnditional card, works like a charm

MISEV · February 13, 2022, 8:16am

That would hide the whole card right, not only the sliders. Or do I miss something?

I have 10+ lights in my living room, this would consume a lot of space.

piitaya · February 13, 2022, 9:17am

You can just use the grid card to display multiple entities per line. There is no option for now to hide the slider when off. Doing this would result a height change when the state entity change and I don’t thing it’s a good idea to do this.
We plan to add inline controls to add the control on the left instead of bottom.

MISEV · February 13, 2022, 9:24am

ok, thanks for your answer

Posreg · February 13, 2022, 5:37pm

You can do exactly what you want. For me whole card consits of 5 lights :

All the lights have sliders, as you can see the ones which are off or unavailable have the sliders hidden

Please see the example code :

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

euromem · February 13, 2022, 7:36pm

Hey @piitaya I keep getting the following error when I try to add the repo as Lovelace: "Repository structure for v0.0.2 is not compliant"
Any idea what may be causing this?
I already had the following in my config file so I did not change it since it seemed the same as your instructions:

frontend:
  extra_module_url:
    - /hacsfiles/hass-hue-icons/hass-hue-icons.js
  themes: !include_dir_merge_named themes

Would love to get this beautiful frontend working.
Sorry for being a noob.
Thank you

piitaya · February 13, 2022, 9:05pm

There is 2 projects :

Mushroom : contain all the cards available in HACS
Mushroom Themes : contains themes to improve Mushroom experience (rounded border radius). It’s not available on HACS. I just wait the approval.

I think you tried to install the theme avec a lovelace component. Just search for Mushroom in HACS. After that, you can add Mushroom Theme as custom repository (category theme) if you want but it’s optional.

euromem · February 13, 2022, 10:52pm

Thank you Paul. I already had Mushroom installed through HACS. Chose Lovelace instead of Theme when adding your theme as a custom repo
Since you are so responsive, lol, how do I get the chips card to display the current weather with the temperature? I have a chip that only shows a sun. I would like to see the temp, for example, and I couldn’t find examples of what it should be. I have tried using https://ui-lovelace-minimalist.netlify.app/codegen/example but I cannot get it to show the weather properly.
Any idea how I get the weather chip to show other parameters?
thank you so much for replying so quickly.

piitaya · February 14, 2022, 8:08am

With the weather chip, you can select ‘show_conditions’ et ‘show_tempeature’ options for that.

hyboi1 · February 15, 2022, 4:57am

This is prob the issue ( see code), it’s only looking for 60%.

office_fan_set_speed:
  alias: office_fan_set_speed
  sequence:
  - service: input_number.set_value
    target:
      entity_id: input_number.office_fan_percentage
    data:
      value: '{{ percentage }}'
  - delay:
      hours: 0
      minutes: 0
      seconds: 0
      milliseconds: 500
  - choose:
    - conditions:
      - condition: state
        entity_id: input_number.office_fan_percentage
        state: '60.0'
      sequence:
      - service: script.fan_office_60

HelL5toKe · February 15, 2022, 6:38am

Thought I would post my current UI built on Mushroom, Im so impressed with these cards as a simple and fast way to make a beautiful UI for HA. I had been using custom button cards for a long time and find the yaml tedious and slow and I never really got what I wanted. In a day I made this interface for my phone and Im very happy with it. My only requests would be a Climate card and to be able to set the state to a different entity from the entity the card is using.

Gogle Drive - Lovelace YAML download

Posreg · February 15, 2022, 7:23am

super cool stuff!

may I ask how did you manage to include graphs ?
SOmehow mini-graph-card inside ?

Kabala · February 15, 2022, 7:29am

Do you mind sharing your yaml?

MISEV · February 15, 2022, 7:49am

Ah I see, you add them twice. Clever! Thanks for sharing

FPro · February 15, 2022, 8:44am

Hi @HelL5toKe.
I’m working on a similar setup and have 3 questions I’m currently facing:
How do you resize and position the buttons in your TV remote view?
What do you do, so you don’t have to re-do the header with the chips in every view?
How did you make the hamburger menu button in the home view?

MISEV · February 15, 2022, 9:07am

The hamburger menu button is part of the Chips card

Posreg · February 15, 2022, 4:27pm

I think we are all waiting for your dashboards code
at least I see bunch of ideas I could use!