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

cosimop · January 26, 2023, 12:00pm

Hello to everyone.
Is there any way to have the secondary_info: last-changed displayed in a template card?
Right now this is what I have:

On the left, I use an entity card and I have as secondary info the last changed in the format “x minutes ago”. On the right, I use a template card because I customized the icon colour but cannot work out how to set the secondary info as the card on the left. I was only able to get the time but I need the format “x minutes ago”

This is the code of the card on the right:

type: custom:mushroom-template-card
primary: Bagno
secondary: >-
  {{(as_timestamp(states.binary_sensor.luce_bagno_ping.last_changed) |
  timestamp_custom('%I:%M %p'))}}
icon: mdi:toilet
icon_color: |2-
            {% if is_state('binary_sensor.luce_bagno_ping', 'off') %}
              green
            {% else %}
              red
            {% endif %}
layout: vertical
hold_action:
  action: none
double_tap_action:
  action: none
tap_action:
  action: none

Any help is appreciated, thank you!

BeastHouse · January 26, 2023, 1:33pm

Fantastic, thats great! Having some troubles with the icon colour though, using this template, it just sets the icon to a white/grey colour with no circle around the icon itself.

"{{ 'green' if is_state(entity, 'off') else 'red' }}"

jetolu · January 26, 2023, 2:30pm

Here’s two working samples I’m using to change icon colors based on something:

{% set temp = int(states('sensor.outside_temperature')) %}
{% set color = 'red' if temp >= 20 else 'green' if temp >= 10 else 'light-blue' %}
{{ color }}

Simpler one:

{% if (states('light.living_room') == 'on') %}orange{% endif %}

Robbi-Ho · January 26, 2023, 3:12pm

Maybe this can be a start:

secondary: >
          {% if states('binary_sensor.luce_bagno_ping.last_changed') == 'unavailable' %} 
            indisponibile
          {% elif (as_timestamp(states('binary_sensor.luce_bagno_ping.last_changed')))  > 0  %}
            {% set sec = as_timestamp(states('binary_sensor.luce_bagno_ping.last_changed')) as_timestamp(now()) %}
            {% set hr = (sec / 3600) | int %}
            {% set min = sec / 60 - hr * 60 %} 
            {% if hr > 0 and min > 1 %}
              {{"%d" % (hr)}} ora e {{"%2d" % (min)}} minuto
            {% elif hr > 0 %}
             {{"%d" % (hr)}} ora e {{"%2d" % (min)}} minuto
            {% elif min > 1 %}
             {{min | int}} minuto
            {% endif %}
          {% endif %}

cosimop · January 26, 2023, 4:28pm

Thank you @Robbi-Ho, but unfortunately it does not work.
In the dev tools I get this error:
TemplateSyntaxError: expected token 'end of statement block', got 'as_timestamp'

Is there any way to fix this? I think it’s precisely what I need

zombie24 · January 26, 2023, 5:31pm

Thank you for that.
This is possible to change the position of the primary or secondary text in the card?

tempus2016 · January 26, 2023, 5:44pm

Use auto entities and filter them

tempus2016 · January 26, 2023, 5:53pm

I have CSS styling issues with it. It removes the “3d” float look from cards

kbrown01 · January 26, 2023, 8:26pm

Thanks @Holdestmade, I thought I had tried that. Now onto some creating construction. Going to have to build my own media_player source selection card I guess. Getting there with your help!

sparkydave · January 26, 2023, 10:12pm

Thought I should post the final outcome. The last chip is showing the database file size.

HA Server card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: HA Server
    secondary: 'Uptime: {{ states(''sensor.ha_uptime_phrase'') }}'
    icon: mdi:server-network
    tap_action: none
    icon_color: |
      {% if states('sensor.cpu_temperature') | int > 80 %}
        red
      {% elif states('sensor.cpu_temperature') | int > 70 %}
        orange
      {% elif states('sensor.cpu_temperature') | int > 60 %}
        yellow
      {% else %}
        green
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.cpu_temperature
        content: '{{ states(entity) }} °C'
        icon: mdi:thermometer
        icon_color: |
          {% if states('sensor.cpu_temperature') | int > 80 %}
            red
          {% elif states('sensor.cpu_temperature') | int > 70 %}
            orange
          {% elif states('sensor.cpu_temperature') | int > 60 %}
            yellow
          {% else %}
            green
          {% endif %}
        tap_action: none
      - type: template
        entity: sensor.processor_use
        content: '{{ states(entity) }} %'
        icon_color: |
          {% if states('sensor.processor_use') | int > 80 %}
            red
          {% elif states('sensor.processor_use') | int > 70 %}
            orange
          {% elif states('sensor.processor_use') | int > 60 %}
            yellow
          {% else %}
            green
          {% endif %}
        tap_action: none
        icon: mdi:cpu-64-bit
      - type: template
        entity: sensor.memory_use_percent
        content: '{{ states(entity) }} %'
        icon: mdi:memory
        icon_color: |
          {% if states('sensor.memory_use_percent') | int > 80 %}
            red
          {% elif states('sensor.memory_use_percent') | int > 70 %}
            orange
          {% elif states('sensor.memory_use_percent') | int > 60 %}
            yellow
          {% else %}
            green
          {% endif %}
        tap_action: none
      - type: template
        entity: sensor.disk_use_percent
        content: '{{ states(entity) }} %'
        icon: mdi:harddisk
        icon_color: |
          {% if states('sensor.disk_use_percent') | int > 80 %}
            red
          {% elif states('sensor.disk_use_percent') | int > 70 %}
            orange
          {% elif states('sensor.disk_use_percent') | int > 60 %}
            yellow
          {% else %}
            green
          {% endif %}
        tap_action: none
      - type: entity
        entity: sensor.db_size
    alignment: end

Mrcuddles · January 26, 2023, 10:20pm

Schermafbeelding 2023-01-26 231536

I have created somewhat of a tabcontroller using mushroom cards. I use a input_select helper to change the active tab, but that changes the tabs for everyone. Does anyone have a idea on how to fix this to a per user base?

Would be nice if mushroom had something like this out-of-the-box btw.

ArenaCloser · January 26, 2023, 11:21pm

Would you mind sharing the code for this card?
You could do it on a user basis by having input helpers for each person, but that would take it quite far. There’s also a tab card in HACS, but it doesn’t really have the mushroom feel.

aarnaegg · January 27, 2023, 2:40am

Would love to see the code/requirements for this!

BeastHouse · January 27, 2023, 4:31am

Thanks, this ended up working for me

{{ 'green' if is_state('binary_sensor.home_assistant_versions_update_available', 'off') else 'red' }}

queerco · January 27, 2023, 6:03am

happy to share the code but it will be embarrassing, as I’m sure its not elegant and is a total mess! I will have a final look over it and post it up

queerco · January 27, 2023, 6:05am

Yes, I have HAcast linked, but I have an automation that basically ‘resets’ it every 12 hours by telling the cast device to disconnect then playing media > dashboard again (otherwise I found it can be a bit buggy, esp. when you leave the house)

queerco · January 27, 2023, 6:30am

Please be kind haha. Because I have no idea really how to use styles etc, I’ve essentially used stack in cards within stack in cards to bold headers

type: custom:layout-card
mode: grid
cards:
  - type: custom:stack-in-card
    mode: horizontal
    view_layout:
      grid-area: top
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:simple-clock-card
            use_military: true
            hide_seconds: true
            font_size: 1.5rem
            padding_size: 33px
      - type: gauge
        name: ' '
        entity: sensor.the_breville_airactive_3dtm_temperature
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.den_table_strio_socket_4
        icon: mdi:fire-circle
        show_state: false
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: fan.the_breville_airactive_3dtm
        show_state: false
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        icon: mdi:air-filter
        show_state: false
        entity: switch.kitchen_strip_socket_1
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        name: Trade
        icon: mdi:clouds
        entity: scene.den_all_whiite
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        icon: mdi:dance-pole
        name: Work
        entity: scene.den_hard
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        icon: mdi:rocket-launch
        name: Work
        entity: scene.den_scene
  - type: vertical-stack
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: custom:mushroom-light-card
                entity: light.dresden_elektronik_conbee_ii_den_lights_zha_group_0x0002
                secondary_info: none
                primary_info: name
                use_light_color: true
                show_brightness_control: true
                icon: mdi:spotlight-beam
                name: The Den
                fill_container: false
                icon_type: icon
                layout: horizontal
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: custom:mushroom-light-card
                entity: light.ambient
                secondary_info: none
                primary_info: name
                use_light_color: true
                show_brightness_control: true
                icon: mdi:owl
                name: Ambient
                fill_container: false
                icon_type: icon
                layout: horizontal
          - square: true
            columns: 4
            type: grid
            cards:
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                icon: mdi:dog
                entity: switch.kitchen_strip_socket_2
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                icon: mdi:led-strip-variant
                entity: light.lobby_floor_group
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: light.table
                icon: mdi:table-furniture
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: light.couch
                icon: mdi:sofa-outline
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                icon: mdi:panorama-outline
                entity: switch.den_table_strio_socket_5
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                icon: mdi:pine-tree
                entity: light.xmqs
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.send_ramen_light_socket_1
                icon: mdi:noodles
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.kitchen_strip_socket_5
                icon: mdi:shoe-heel
    view_layout:
      grid-area: main1
  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: media-control
        entity: media_player.den
        view_layout:
          grid-area: SUB1
      - square: true
        columns: 1
        type: grid
        cards:
          - type: picture
            image: https://i.scdn.co/image/ab67706c0000da84ea3ed42af3b7a87d9cfda357
            tap_action:
              action: call-service
              service: media_player.play_media
              data:
                media_content_id: FV:2/9
                enqueue: replace
              target:
                entity_id: media_player.den
            hold_action:
              action: none
          - type: picture
            image: https://i.scdn.co/image/ab67706f00000003296dfaca9d08da66ad668073
            tap_action:
              action: call-service
              service: media_player.play_media
              data:
                media_content_id: FV:2/17
                enqueue: replace
              target:
                entity_id: media_player.den
            hold_action:
              action: none
          - type: picture
            image: https://i.scdn.co/image/ab67616d0000b2737a67ab6d2ae75ae2093447d1
            tap_action:
              action: call-service
              service: media_player.play_media
              data:
                media_content_id: FV:2/15
                enqueue: replace
              target:
                entity_id: media_player.den
            hold_action:
              action: none
    layout:
      grid-template-columns: 84% 16%
      grid-template-rows: auto
      grid-template-areas: |
        "SUB1 SUB2"
    view_layout:
      grid-area: main2
  - type: custom:stack-in-card
    mode: vertical
    view_layout:
      grid-area: foot2
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: light.bathroom_group
                layout: horizontal
                primary_info: none
                secondary_info: none
                icon: mdi:bathtub-outline
              - type: entities
                entities:
                  - type: custom:paper-buttons-row
                    buttons:
                      - entity: binary_sensor.bathroom_motion_6029abfe_ias_zone
                        layout: state
                        state_icons:
                          'off': mdi:lock-open
                          'on': mdi:lock
                        state_text:
                          'off': Vacant
                          'on': Occupied
                        styles:
                          button:
                            justify-content: flex-start
                            font-size: 15px
                        state_styles:
                          'off':
                            button:
                              color: green
                          'on':
                            button:
                              color: red
          - type: custom:mushroom-light-card
            entity: light.bathroom_group
            layout: horizontal
            primary_info: none
            secondary_info: none
            hide_icon: true
            icon: mdi:bathtub-outline
            show_brightness_control: true
            show_color_temp_control: false
            use_light_color: true
            show_color_control: false
      - square: true
        columns: 4
        type: grid
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bathroom_window
            icon: mdi:mirror
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bathroom
            icon: mdi:bathtub
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: switch.kawaii_switch_1
            icon: mdi:currency-gbp
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bathroom
            icon: mdi:exit-run
  - type: custom:stack-in-card
    mode: vertical
    view_layout:
      grid-area: foot3
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: binary_sensor.tuyatec_zn9wyqtr_rh3040_iaszone
                icon: mdi:bed
                name: Bedroom
                primary_info: none
                secondary_info: none
              - type: custom:mushroom-entity-card
                entity: switch.den_heater_socket
                icon: mdi:fire-circle
              - type: custom:mushroom-fan-card
                entity: fan.the_breville_airactive_3dtm
          - type: custom:mushroom-light-card
            entity: light.bedroom
            layout: horizontal
            primary_info: none
            secondary_info: none
            hide_icon: true
            show_brightness_control: true
            show_color_temp_control: false
            use_light_color: true
            show_color_control: false
      - square: true
        columns: 4
        type: grid
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: switch.wi_fi_power_strip_2_socket_5
            icon: mdi:gender-male
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bedwallgrp
            icon: mdi:panorama-outline
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.desksling
            icon: mdi:lamps
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bedlamps_groip
            icon: mdi:arm-flex
  - type: custom:stack-in-card
    mode: vertical
    view_layout:
      grid-area: foot1
    cards:
      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-light-card
            entity: light.greenhouse_group
            icon: mdi:blinds-vertical-closed
            layout: horizontal
            secondary_info: none
            show_brightness_control: true
            use_light_color: true
            name: Greenhouse
      - square: true
        columns: 4
        type: grid
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            icon: mdi:syllabary-hiragana
            entity: switch.greenhouse_power_socket_5
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.cage_lights
            icon: mdi:greenhouse
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.grindr_redux_socket
            icon: mdi:drama-masks
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            icon: mdi:spotlight-beam
            entity: light.trion
layout_type: custom:grid-layout
layout:
  grid-template-columns: 34% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    "top top top"
    "main1 main2 main2"
    "foot1 foot2 foot3"

MartinG · January 27, 2023, 9:04am

I have reaf this long topic and I am still not able to figure out such a simple thing.
I am using chip cards in horizontal stack and I need to make the second and fourth chip to occupy only as much space as is the size of icon, so the first and third can use more space.
But I am getting this instead

Is it possible to force size of a chip card?

jono · January 27, 2023, 9:59am

When animating (for example) a fan is it possible to speed up from start, and slow down when turning off like it does in Apple’s Home app?

ezgif-4-dde6fee7f1

Existing code that turns on and off ↓

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.fan_heater', 'on') }}
      }

LGO44 · January 27, 2023, 10:35am

Is it possible to use a mushroom_template_card in a custom:auto-entities?

I try this:

filter:
include:
- domain: sensor
entity_id: sensor.wiser_heatingsignal
- entity_id: sensor.wiserroomstat_signal
sort:
ignore_case: true
method: entity_id
numeric: false
reverse: false
type: custom:auto-entities
card:
type: custom:mushroom-template-card
primary: Qualite liaison = {{states(entity_id) }}
secondary: >-
Chemin box = {{state_attr(‘entity_id’,‘hub_route’)}}
…
Thanks