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

Maybe you did or I overinterpreted it. :wink:

But…why switching on a lamp that has wifi lamps that could be toggled by themselves?
Keep that lamp on, put those bulps in a light group and enjoy yourself with one entity. 🤷🏼

1 Like

the problem is that i dont live alone in my house! and the rest of the family doesnt deal well with technology, thats why i need the “regular” switch´s to turn on/off the lights and the rest i can handle on my mobile or others.

I feel you, buddy. :slight_smile:

Just to mess with my wife cause she is physically switching of the motion fired lights in the pantry U put up an automations that ttses the google speaker in the kitchen if the state of the light in the pantry becomes unavailable that reminds her to put it back on.

Okay, just to get you right:
You have a physical light switch that is zigbee/wifi/whatever that toggles the whole lamp AND this lamp has to bulbs with wifi? You want to switch on that light and then be able to mess brightness/temperature.

What about:

type: custom:mushroom-light-card
entity: light.GROUPOFBOTHWIFIBULBS
tap_action:
  action: more-info
hold_action:
  action: call-service
  service: switch.toggle
  service_data: {}
  target:
    entity_id: switch.THATPHYSICALSWITCH
use_light_color: true
show_brightness_control: true

I’m slowly building my new dashboard using the Mushroom cards and have run into a conundrum.

I’m building up a horizontal stack with my lights on them, but I can’t figure out how to get the exact functionality I want. That is:

  • The brightness/temp slider from the Mushroom Light Card on the left
  • The ability to show the temperature in the room from the Mushroom Template Card on the right, instead of the brightness

HA Lights

Is this at all possible?

Shout out to Everything Smart Home for helping me discover these cards - they’re upping my wife’s happiness with managing our smart home!

2 Likes

thank you @pedolsky that worked perfectly. every day I am learning something new about HA. now I know how scripts work. I guess I should have read the manual, so thanks for the tips.

any ideas on how to achieve the colours of the cards as shown in Ahang’s design? like the blue background lamp in the shots here.

@piitaya is this a feature for the future?

or should I start using card_mod?

UPDATE: just found a pull request, i think that means its coming. thank you! looking forward to it.

2 Likes

Hi.

I am trying to change the color of an icon depending on another one, but, it seems it is not supported or I am doing something wrong.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Acuario
    subtitle: >-
      Weekly Clean:  {% if states.input_datetime.aquarium_weekly_clean %}
      {{(((as_timestamp(now())-states.input_datetime.aquarium_weekly_clean.attributes.timestamp))
      | int(0) /60/1440-1) | round(0) }} day(s) ago 

      Monthly Clean: {{
      (((as_timestamp(now())-states.input_datetime.aquarium_monthly_clean.attributes.timestamp))
      | int(0) /60/1440) | round(0) }} day(s) ago  {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: Acuario
        icon: mdi:fish
      - type: entity
        entity: input_datetime.aquarium_weekly_clean
        icon: mdi:fishbowl-outline
      - type: entity
        entity: input_datetime.aquarium_monthly_clean
        icon: mdi:fishbowl
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: switch.luces_acuario_socket_1
        primary_info: state
        secondary_info: name
        icon_color: amber
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        entity: sensor.luces_acuario_power
        primary_info: state
        secondary_info: none
        icon_color: |-
          {% if is_state('switch.luces_acuario_socket_1', 'on') %} amber
          {% else %} cyan
          {% endif %}
        tap_action:
          action: more-info

image

I would like to have the icon with the power consumption (65,2 W) in amber when the aquarium light is on, while it is in blue (or white, or whatever) if the light is off.

Is it possible? How would I do it?

Thanks!

1 Like

You have to use the mushroom template card.

Hi,
Many thanks for your example!
This gives me the actual temperature like “17.5”. However I want it to show as “17,5 °C” as it’s mentioned in the climate card actual temperature. Any idea how to change the state_attr?

Thank you for pointing me out the solution :slight_smile:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Acuario
    subtitle: >-
      Weekly Clean:  {% if states.input_datetime.aquarium_weekly_clean %}
      {{(((as_timestamp(now())-states.input_datetime.aquarium_weekly_clean.attributes.timestamp))
      | int(0) /60/1440-1) | round(0) }} day(s) ago 

      Monthly Clean: {{
      (((as_timestamp(now())-states.input_datetime.aquarium_monthly_clean.attributes.timestamp))
      | int(0) /60/1440) | round(0) }} day(s) ago  {% endif %}
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: switch.luces_acuario_socket_1
        primary: Lights
        secondary: '{{states (entity)}}'
        icon: >-
          {% if is_state('switch.luces_acuario_socket_1', 'on') %}
          mdi:lightbulb-fluorescent-tube

          {% else %} mdi:lightbulb-fluorescent-tube-outline

          {% endif %}
        icon_color: |-
          {% if is_state('switch.luces_acuario_socket_1', 'on') %} amber
          {% else %} white
          {% endif %}
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        entity: sensor.luces_acuario_power
        primary: '{{states (entity)}} W'
        icon: >-
          {% if is_state('switch.luces_acuario_socket_1', 'on') %}
          mdi:lightning-bolt

          {% else %} mdi:lightning-bolt-outline

          {% endif %}
        icon_color: |-
          {% if is_state('switch.luces_acuario_socket_1', 'on') %} amber
          {% else %} white
          {% endif %}
        tap_action:
          action: more-info

image

2 Likes

just add " °C " behind your template, like this:

secondary: '{{states(entity) | int }}°C'

Example:

primary: Stue
icon: hue:room-living
entity: sensor.stuen_motion_temperatur
secondary: '{{states(entity) | int }}°C'
tap_action:
  action: navigate
  navigation_path: /lovelace-rom/stuen
hold_action:
  action: call-service
  service: light.turn_off
  service_data: {}
  target:
    area_id: edf1dcbcb84edea610787c91cbfb5a57
icon_color: |-
  {% if is_state("light.group_stuelys", "on") %}
  orange
  {%else%}
  disabled
  {%endif%}
layout: vertical

image

1 Like

Smart switches are great for a lot of things, but there are several in my house that I’ve intentionally left as the ‘old school’ timer switches. Pantry. Back Hall. Garage. Each of these is just a 2-5 minute timer switch w/ a built-in motion detector. Honestly more affordable than a motion sensor + ZWave wall switch…

I sure hope so. I’d love some more color in the cards. I’ve been using card mod to adjust the color of my thermostat card when it’s on/running, but would be great to have some built-in options from the UI

I had the same flagged as an issue on hass-hue-icons. The solution was to edit the release and click ‘update’.

2 Likes

Does anyone know if a “colour pallete” list is available anywhere for acceptable options to use for the icon colour?
A few that I tried didn’t work so would be nice to know what is supported.

As the last release added the color ‘disabled’ I would assume that you can choose between the offered colors in the icon color picker in every card else than the template card where you should be able to use every color HA understands.

1 Like

I would like exactly the same! Would be amazing is this was possible :))

And to further elaborate on @RodgerDodger you can use Trending Color Palettes - Coolors for the hexcodes if you would like something more exotic :wink:

4 Likes

Can you please comment on how to arrange the room cards to be in that table (two columns/two rows)?

of course
those are combinations of popular vertical and horizontal stacks

basically it looks like:

type: vertical-stack
cards:
  - type: horizontal- stack
    cards:
      - type: xyz
        Room - row 1 column 1
      - type: xyz
        Room - row 1 column 2
  - type: horizontal- stack
    cards:
      - type: xyz
        Room - row 2 column 1
      - type: xyz
        Room - row 2 column 2
2 Likes