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

[rhysb (Rhys)]

Colors are extracted from the album art using Node-Red. Have a look here:

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

A New Year and a new update to my Mushroom Media Player. This one uses Node-Red to extract the album art colors and apply them to the Media Player controls. I was already using this for some WLEDS behind my TV, so it was easy to adapt it for this. Mushroom Media Player - Compact: [Mushroom Media Player - Compact]

Mushroom Media Player - Compact YAML

type: custom:stack-in-card cards: - type: custom:mushroom-media-player-card entity: media_player.currently_playing icon: mdi:play us…

[schmierlappe]

Short question. How is the syntax when I just want to show the state of an attribute for this chip badge

i tried this but no luck

content: “{{ state_attr(’‘sensor.unifi_gateway_wlan’’, ‘‘num_user’’ }}”;

[rhysb (Rhys)]

Like this:

content: "{{ state_attr('sensor.unifi_gateway_wlan', 'num_user') }}";

[sheddc75 (Shedd)]

I’ve been following this thread to get my chips animated and making good progress. I do have one issue, when the “monitor” chip animation is used it is moving the chip lower on the card. Any ideas what could be causing this?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Master Bedroom
    secondary: >-
      {{ states("sensor.master_bedroom_temperature_2") | round(0) }} °F / {{
      states("sensor.master_bedroom_humidity") | round (0) }} %
    entity: group.master_bedroom_lights
    icon: >-
      {% if is_state('group.master_bedroom_lights', 'on') or
      is_state('input_boolean.probably_sleeping', 'on') %}
      mdi:bed
      {% else %}
      mdi:bed-empty
      {% endif %}
    icon_color: >-
      {% if is_state('group.master_bedroom_lights', 'on') or
      is_state('input_boolean.probably_sleeping', 'on') %}
      green
      {% else %}
      blue
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: master_bedroom
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dard-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        }
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: >-
          {% if is_state('media_player.master_bedroom_display', 'playing') %}
          mdi:speaker {% else %} mdi:speaker-off {% endif %}
        icon_color: >-
          {% if is_state('media_player.master_bedroom_display', 'playing') %}
          blue {% endif %}
        entity: media_player.master_bedroom_display
        tap_action:
          action: more-info
      - type: conditional
        conditions:
          - entity: media_player.master_bedroom
            state_not: playing
        chip:
          type: template
          icon: mdi:monitor-off
          entity: media_player.master_bedroom
          tap_action:
            action: more-info
      - type: conditional
        conditions:
          - entity: media_player.master_bedroom
            state: playing
        chip:
          type: template
          icon: mdi:monitor
          entity: media_player.master_bedroom
          tap_action:
            action: more-info
      - type: template
        icon: mdi:fan
        icon_color: >-
          {% if is_state('fan.master_bedroom_ceiling_fan', 'on') %} green {%
          endif %}
        entity: fan.master_bedroom_ceiling_fan
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: template
        icon: mdi:ceiling-light
        icon_color: >-
          {% if is_state('switch.master_bedroom_ceiling_light', 'on') %} yellow
          {% endif %}
        entity: switch.master_bedroom_ceiling_light
        tap_action:
          action: toggle
      - type: template
        icon: mdi:lamp
        icon_color: >-
          {% if
          is_state('light.in_wall_smart_toggle_dimmer_master_bedroom_lamp','on') %}
          yellow
          {% endif %}
        entity: light.in_wall_smart_toggle_dimmer_master_bedroom_lamp
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.ally_bedroom_speaker', 'playing') }}
            transform-origin: 50% 60%;
          }
          @keyframes beat {
            0% { transform: scale(1); }
            10% { transform: scale(1.1); }
            17% { transform: scale(1.05); }
            33% { transform: scale(1.25); }
            60% { transform: scale(1); }
          }
        mushroom-conditional-chip:nth-child(3):
          mushroom-template-chip$: |
            ha-icon:before {
              content: "";
              position: absolute;
              width: 40%;
              height: 30%;
              margin: 6%;
              animation: refresh 300ms linear infinite;
            }
            @keyframes refresh { 
              0% { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%); }
              25% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 25%, transparent 100%); }
              50% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); }
              75% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 75%, transparent 100%); }
              100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.3) 100%); }
            }     
        mushroom-template-chip:nth-child(4)$: |
          ha-icon {
            {{ 'animation: rotation 1.5s linear infinite;' if is_state('fan.master_bedroom_ceiling_fan', 'on') }}
          }
          @keyframes rotation {
            0% {transform: rotate(0deg);
            }
            100% {transform: rotate(360deg);
            }
          }

[alsFC (Alex)]

Hi,
I’m using the Lock card for my SwitchBot Lock. How can I get the door state into the card like it is shown in the reference screens:

I can’t find a configuration setting for that. The SwitchBot Lock has a binary sensor for indicating the open- or closed-state of the door.

[Mariusthvdb (Marius)]

mushroom/ui newbie here…

trying to use some Hue scenes on a chip, are we supposed to mention the scene twice? Once in the entity (also to have it show its entity_picture), and once under the action?

  - type: custom:mushroom-chips-card
    chips:
      - entity: scene.marte_gedimd
        <<: &chip_scene
          type: entity
          use_entity_picture: true
          content_info: none
          tap_action:
            action: call-service
            service: scene.turn_on
            target:
              entity_id: scene.marte_gedimd

      - entity: scene.marte_nachtlampje
        <<: *chip_scene
      - entity: scene.marte_helder
        <<: *chip_scene
      - entity: scene.marte_herfstgoud
        <<: *chip_scene

with the latter under target, I get an error in the config when clicking … unfortunately this would also mean I can not use the yaml anchor, but thats a minor issue

they are displayed alright (still need to fix the ugly border margin), and the scene is activated.

Seems odd we need to use the entity twice though, please help me out?

[piitaya (Paul)]

Hello !

A new Mushroom version is released.
It adds a new card for select and input_select entity and actions for title card to easily navigate between your views.

Happy update and thank you to contributors and supporters

Release v2.5.1 · piitaya/lovelace-mushroom

[Tsuna]

I have tried several css intigrations to change the colour of the whole button when the light is active but so far no succes. Is there a way to change the colour of the compleet light button when the light is on?

[Holdestmade]

I’ve installed 2.5.1 but can’t use the select card in yaml. I’ve done a refresh, cache clear and restart.

Am I missing something ?

Custom element doesn’t exist: mushroom-select-card

type: custom:mushroom-select-card
entity: select.workshop_uplights_preset
name: Preset

[dexstar]

@davidnestico

Dumb question but I am using Music Assistant to import radio stations in via TuneIn Radio, but idk how to find the name or URI of the radio stations to select them as a source to be played. Please help, thanks.

Not sure if this is what you are looking for ?

Better to post there ?

[ArenaCloser]

Change card background is what you mean?

card_mod:
  style: |
    ha-card {
      background: rgba(var(--mush-rgb-amber), 0.2);
    }

[Tsuna]

@ArenaCloser

card_mod:
  style: |
    ha-card {
      background: rgba(var(--mush-rgb-amber), 0.2);
    }

I want the whole card to change colour when the light is on and back to default when its off

[Boostin4HP]

FYI there’s more iOS issues with this one haha.

[Boostin4HP]

You could use my lock card.

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2412?u=boostin4hp

[rhysb (Rhys)]

One of my first posts . Have a look here:

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

This tweak adds color to the card background. The color light version will adjust with the light color. It looks great in dark mode, but not so much in light mode. Does anyone know how to detect the dark/light mode of lovelace? [Lights - Dark] Normal light version: - type: custom:mushroom-light-card entity: light.elijahs_light name: Light fill_container: false hide_state: false use_light_color: false show_brightness_control: true …

[Sylwester (Sylwester Olik)]

What door looks are you using? Can you recommend some?

[Roelofk85 (Roelof Kooijman)]

Very very nice card! But i don’t use node red.
The card stay’s grey and don’t show a picture of what’s playing.
I can see with text what is playing but that’s all.

How do i fix this?

[rhysb (Rhys)]

Do you have card_mod installed?

[Roelofk85 (Roelof Kooijman)]

Yes, installed and it’s working with other cards.

This is what i see:

[rhysb (Rhys)]

What does the entity state show in Dev Tools?