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

[tvds (Tim)]

Many thanks. That was the trick Appreciated

[jmad]

Toying with Mushroom cards this evening (which are excellent, by the way), and I’m wondering if there’s an easy way to set up some lighting cards similar to the native “entities” card - basically, I’d like a similar “toggle all on/off” for all mushroom lights grid. I suppose I could add a toggle to the top as a separate entity but wondered how others were doing this.

[benchr]

I am just using a chip on some pages or an entity card on other pages, and using the action to initiate the lights_off service. Basically just creating a button where you want it to be the all off button. You can pick rooms , specific lights to turn off, or in my case, after some advice above, I created a script that I can turn all off, and exclude a few if needed.
Thinking something like a vertical stack, put a chip at the top as an all off, then a grid for your light buttons below.

[Surfingjelly]

I finally have a working solution - no idea if it’s optimal, but working is good enough for me. Hopefully this helps you, or other people trying to achieve the same thing. If anyone can improve how this is done, I’d be keen to know!

Firstly I defined a new template sensor in my config:

  - platform: template
    sensors:          
        kitchen_temperature:
          friendly_name: Kitchen Temperature
          unit_of_measurement: 'degrees'
          value_template: "Kitchen ({{ state_attr('climate.wiser_kitchen', 'current_temperature') }} °C)"

Note that I added the room name and °C here as it was easier than figuring out how I’d add it into the JavaScript below.

I then used the Config Template Card to use this template sensor in the Mushroom Light Card name field. The below code shows the relevant parts of my switch state code (which is the card I was using to test this) but the critical part is ${states[‘sensor.kitchen_temperature’].state}

type: custom:config-template-card
entities:
  - sensor.kitchen_temperature
  - light.kitchen_lights
card:
  type: custom:state-switch
  entity: input_select.light_menu_select
  states:
    Downstairs:
      type: grid
      columns: 2
      square: false
      cards:
        - type: custom:mushroom-light-card
          entity: light.kitchen_lights
          name: ${states['sensor.kitchen_temperature'].state}
          icon: mdi:knife
          fill_container: false
          hide_state: true
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: false
          collapsible_controls: true
          hold_action:
            action: navigate
            navigation_path: kitchen
          layout: vertical

That gives me exactly what I wanted, and I just need to replicate this for other rooms.

[bverkron]

Can you explain what you mean by a “template chip”? A template card setup to show a chip? I’m familiar with template cards and chip cards but I can’t seem to get the actual chip cards to show different icon colours based on a template and the template card shows much larger than the chips.

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.front_door_lock_contact
        name: Front
        use_entity_picture: false
        content_info: name
      - type: entity
        entity: binary_sensor.garage_interior_door_lock_contact
        use_entity_picture: false
        name: Garage
        content_info: name
        icon_color: |
          {% set state=states('binary_sensor.garage_interior_door_lock_contact')%}
          {% if state=='on' %}green
          {% elif state=='off' %}red
          {% endif %}
    alignment: center

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Front
    secondary: ''
    icon: |-
      {% set state=states('binary_sensor.front_door_lock_contact') %}
      {% if state=='on' %}mdi:lock-open
      {% elif state=='off' %}mdi:lock
      {% endif %}
    icon_color: |-
      {% set state=states('binary_sensor.front_door_lock_contact') %}
      {% if state=='on' %}green
      {% elif state=='off' %}red
      {% endif %}
    fill_container: false
    entity: binary_sensor.front_door_lock_contact
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: ''
    icon: |-
      {% set state=states('binary_sensor.garage_interior_door_lock_contact') %}
      {% if state=='on' %}mdi:lock-open
      {% elif state=='off' %}mdi:lock
      {% endif %}
    icon_color: |-
      {% set state=states('binary_sensor.garage_interior_door_lock_contact') %}
      {% if state=='on' %}green
      {% elif state=='off' %}red
      {% endif %}
    fill_container: false
    entity: binary_sensor.garage_interior_door_lock_contact

[bverkron]

Never mind, stupid mistake on my part I now see the different sub-types of chip cards in the UI editor. Not used to having that level of control in the UI

[fastender]

This would be really cool, I’m looking forward to it, thanks for your great work.

[midego]

Where did you find this? Looking to integrate some parts on my own dashboard.

[midego]

Are you willing to share your setup?

[ral66 (Andrew Rohl)]

I can’t see the media card. I have:

• Home Assistant Core 2022.5.3
• Home Assistant Supervisor 2022.05.0
• Home Assistant OS 7.6
• Mushroom v1.8.0

The cards I can see are:

• Alarm Control Panel
• Chips
• Cover
• Entity
• Fan
• Light
• Person
• Template
• Title
• Update

Any ideas?

[ral66 (Andrew Rohl)]

Tried Chrome instead of Safari and all good - I have refreshed the browser in Safari etc

[benchr]

I was hoping this was it feat(theme): add theme variables option by piitaya · Pull Request #423 · piitaya/lovelace-mushroom · GitHub

[bjm (Brent (the Other Other Kiwi))]

hey all, I cannot find out how to do this anywhere unless I use custom:button-card but prefer mushroom cards, I want to change the size of the icons but it just eludes me, I’ve tried card_mod with styles but am just lost the size is fine on mobiles but on the tablets it’s just a bit tool small especially if you need reading glasses with me

[kapusticka]

Hi. How can I add to custom my location= zone?

[swifty]

Does anyone know if it’s possible to use card mod to change the font colour of the template chip? - I’ve been playing around for the last hour or so with no luck at all!

I’d like to apply a color based on the sensor value which I have the logic for, but can’t figure out the right card mod styling to apply.

[Turbo4door (Justin)]

Looking to change font colors as well and haven’t been able to do so yet, so I’ll be following this…

[dang12 (Dan)]

Here’s how I did it with the Chips template:

card_mod: null  
style: |
  ha-card {
    background: rgb(33, 150, 243);
  }
  :host { 
    --primary-text-color: white;
  }

[swifty]

Thanks works perfectly

@Turbo4door - If it helps this is how I’ve just done it based on what mode my heating system is in, using Dans tip from above:

:host { 
  --primary-text-color: {% if is_state_attr("climate.wiser_living_room", "is_boosted", true) -%} red 
                       {% elif is_state_attr("climate.wiser_living_room", "is_heating", true) -%} #FF9800
                       {% endif %};
}

[Dibbler (Thomas Bail)]

Thanks for that great work. I really love these cards. With the light cards i have a small problem.

If i try to control one of my Philips Hue lights it works in general. But i am missing the saturation level. I am able to control the bightness, the color, the temprature, but not the saturation level. Ich i use the standard lovelace light card in the color wheels the saturation level is there.

Do i miss something or is saturation really not available?

[Vlad_August]

How disable vibro feedback on mobile?