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

Share your Projects!
,
90

ok, thanks for your answer :+1:

91

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

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
4 Likes
92

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

93

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.

1 Like
94

Thank you Paul. I already had Mushroom installed through HACS. Chose Lovelace instead of Theme when adding your theme as a custom repo :man_facepalming:
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. :pray:

95

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

2 Likes
96

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
97

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

Home
Home1920×1203 182 KB

60 Likes
98

super cool stuff!

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

99

Do you mind sharing your yaml?

100

Ah I see, you add them twice. Clever! :wink: Thanks for sharing :+1:

101

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?

102

The hamburger menu button is part of the Chips card

2 Likes
103

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

1 Like
104

This is amazing. I’ve been playing with it for 24 hours and I keep changing things as I see other possibilities.

Also, the speed at which these guys are moving adding features based on requests is scary! :smiley:

Looking forward to see the future of this. As someone said, I see this one becoming a reference.

105

Thanks mate!

yes the graphs are mini graph cards, here is the config:

animate: true
decimals: 1
entities:
  - entity: sensor.lounge_humidity
    color: '#a1dcff'
    name: Lounge
  - entity: sensor.bedroom_humid_humidity
    color: '#316ade'
    name: Bedroom
  - entity: sensor.bathroom_humid_sensor_humidity
    color: '#19b6e6'
    name: Bathroom
name: House Humidity
hour24: false
hours_to_show: 24
line_width: 3
points: false
points_per_hour: 2
show:
  fill: fade
  icon_adaptive_color: false
4 Likes
106

sure can, here you go. FYI some of the cards like the tv remote are messy as I just used my old button card code from like a year ago and havnt cleaned it up, its on my todo list to redo that.

here is a link to my lovelace code as its to long to post here:

Google drive - lovelace

2 Likes
107

Hi there,

the TV remote is a bit of a mess tbh, im going to redo it with new stuff I have learnt and make it cooler. next on my project list. its made from custom button cards and vertical stacks with custom:layout-card as formatting for each row. I use this to set the columns:

layout_options:
      grid-template-columns: 35px 1fr 1fr 1fr 0px

here is the google drive file for my yaml code:
Google Drive YAML file

for the chips at the top I make a master card using condition chips with all the chips I want to show at different times/situations then I copy the code and paste it to every view. best to do this in yaml view to save time.

Hamburger view is a chip and the I use card mod to remove the home assistant menu, here is the card mod code for your themes mushroom yaml:

  card-mod-theme: "Mushroom"
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
3 Likes
108

This work is amazing, game changer! Completely redid my mobile dashboard thank you!

One question / request. I have some light dimmers but no color, the sliders are gold but my dashboard is blue and black. Any way to change to a custom color?

109

Does anyone know if it is possible to create line breaks in the template card?

2 Likes