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

Are they in the on state?

How snappy does the dropdown feel? I would expect it to be a bit laggy, but I suppose I could be surprised by how fast HA and LAN communication are.

I can say there is no lag. Menus quickly responds to open and close actions. As for the lights, I use local tuya and various other brands but there is no lag as well while turning on the lights.

Sure, here are some:

44 Likes

Hey,
could you please share your code for printer ink levels tab?
thanks

Here you go:

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-title-card
    title: ''
    subtitle: Printers
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 33px
          margin: '-4px -4px -8px -4px'
        cards:
          - type: custom:mushroom-template-card
            primary: Colour Printer
            entity: binary_sensor.sarahs_printer_online
            secondary: '{{ ''Online'' if is_state(entity, ''on'') else ''Offline'' }}'
            icon: >-
              {{ 'mdi:printer' if is_state(entity, 'on') else 'mdi:printer-off'
              }}
            icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
            tap_action:
              action: none
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
          - type: custom:mushroom-template-card
            entity: input_boolean.sarahs_printer_dropdown
            primary: ''
            secondary: ''
            icon: >-
              {{ 'mdi:chevron-down' if is_state(entity, 'off') else
              'mdi:chevron-up' }}
            icon_color: disabled
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }  
      - type: conditional
        conditions:
          - entity: input_boolean.sarahs_printer_dropdown
            state: 'on'
        card:
          type: custom:stack-in-card
          cards:
            - square: false
              columns: 2
              type: grid
              cards:
                - type: custom:mushroom-template-card
                  entity: sensor.sarahs_printer_status
                  primary: Status
                  secondary: >-
                    {% set status = states(entity) | int %} {% if status == 3
                    %}  
                      Idle
                    {% elif status == 4 %}   
                      Printing    
                    {% elif status == 5 %}
                      Warmup
                    {% else %}  
                      Unknown
                    {% endif %}
                  icon: mdi:printer
                  icon_color: >-
                    {% set status = states(entity) | int %} {% if status == 3
                    %}  
                      disabled
                    {% elif status == 4 %}   
                      light-blue    
                    {% elif status == 5 %}
                      red
                    {% else %}  
                      disabled
                    {% endif %}
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                - type: custom:mushroom-template-card
                  secondary: |-
                    {% set tray = states(entity) | int %}
                    {% if tray == -3 %}  
                      Full
                    {% else %}  
                      Empty
                    {% endif %}
                  primary: Tray 1
                  icon: >-
                    {{ 'mdi:tray-full' if states(entity) | int == -3 else
                    'mdi:tray' }}
                  entity: sensor.sarahs_printer_paper_tray
                  icon_color: >-
                    {{ 'light-blue' if states(entity) | int == -3 else
                    'disabled' }}
                  tap_action:
                    action: none
                  hold_action:
                    action: none
            - type: custom:layout-card
              layout_type: custom:grid-layout
              layout:
                grid-template-columns: 130px auto
                margin: '-4px -4px -8px -4px'
              cards:
                - type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-entity-card
                      entity: sensor.sarahs_printer_cyan_toner
                      icon_color: cyan
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      primary_info: name
                      secondary_info: state
                      name: Cyan
                      card_mod:
                        style: |
                          ha-card {
                            margin-right: -8px;
                          }
                    - type: custom:mushroom-entity-card
                      entity: sensor.sarahs_printer_yellow_toner
                      icon_color: yellow
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      primary_info: name
                      secondary_info: state
                      name: Yellow
                      card_mod:
                        style: |
                          ha-card {
                            margin-top: -8px;
                            margin-right: -8px;
                          }
                    - type: custom:mushroom-entity-card
                      entity: sensor.sarahs_printer_magenta_toner
                      icon_color: purple
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      primary_info: name
                      secondary_info: state
                      name: Magenta
                      card_mod:
                        style: |
                          ha-card {
                            margin-top: -8px;
                            margin-right: -15px;
                          }
                    - type: custom:mushroom-entity-card
                      entity: sensor.sarahs_printer_black_toner
                      icon_color: black
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      primary_info: name
                      secondary_info: state
                      name: Black
                      card_mod:
                        style: |
                          ha-card {
                            margin-top: -8px;
                            margin-right: -8px;
                          }
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        --ha-card-box-shadow: 0px;
                      }
                - type: custom:apexcharts-card
                  header:
                    show: false
                  series:
                    - entity: sensor.sarahs_printer_cyan_toner
                      name: Cyan
                      color: rgb(7, 188, 211)
                      show:
                        legend_value: false
                    - entity: sensor.sarahs_printer_yellow_toner
                      name: Yellow
                      color: rgb(252, 233, 64)
                      show:
                        legend_value: false
                    - entity: sensor.sarahs_printer_magenta_toner
                      name: Magenta
                      color: rgb(157, 44, 176)
                    - entity: sensor.sarahs_printer_black_toner
                      name: Black
                      color: rgb(7, 7, 7)
                  chart_type: radialBar
                  apex_config:
                    legend:
                      show: false
                    chart:
                      height: 265px
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        --ha-card-box-shadow: 0px;
                      }
          card_mod:
            style: |
              ha-card {
                height: 306px;
              }

Printer info is obtained via SNMP. This is for a HP LaserJet, but other brands should be similar.

binary_sensor:
  - platform: ping
    host: 192.168.10.77
    name: Sarahs Printer Online
    count: 1
    scan_interval: 60

sensor:
  - platform: snmp
    name: "Sarahs Printer Cyan Max"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.2
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Magenta Max"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.3
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Yellow Max"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.4
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Black Max"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.1
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Cyan Level"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.2
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Magenta Level"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.3
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Yellow Level"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.4
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Black Level"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.1
    accept_errors: true
    scan_interval: 86400

  - platform: snmp
    name: "Sarahs Printer Status"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.25.3.5.1.1.1
    accept_errors: true
    scan_interval: 10
    icon: mdi:printer

  - platform: snmp
    name: "Sarahs Printer Paper Tray"
    host: 192.168.10.77
    baseoid: 1.3.6.1.2.1.43.8.2.1.10.1.2
    accept_errors: true
    scan_interval: 60
    icon: mdi:tray-full

  - platform: template
    sensors:
      sarahs_printer_cyan_toner:
        friendly_name: "Sarah's Printer Cyan Toner"
        value_template: >-
            {{ ( states("sensor.sarahs_printer_cyan_level") | int / states("sensor.sarahs_printer_cyan_max") | int * 100 ) | round (0) }}
        unit_of_measurement: '%'
        icon_template: mdi:grain

  - platform: template
    sensors:
      sarahs_printer_yellow_toner:
        friendly_name: "Sarah's Printer Yellow Toner"
        value_template: >-
            {{ ( states("sensor.sarahs_printer_yellow_level") | int / states("sensor.sarahs_printer_yellow_max") | int * 100 ) | round (0) }}
        unit_of_measurement: '%'
        icon_template: mdi:grain

  - platform: template
    sensors:
      sarahs_printer_magenta_toner:
        friendly_name: "Sarah's Printer Magenta Toner"
        value_template: >-
            {{ ( states("sensor.sarahs_printer_magenta_level") | int / states("sensor.sarahs_printer_magenta_max") | int * 100 ) | round (0) }}
        unit_of_measurement: '%'
        icon_template: mdi:grain

  - platform: template
    sensors:
      sarahs_printer_black_toner:
        friendly_name: "Sarah's Printer Black Toner"
        value_template: >-
            {{ ( states("sensor.sarahs_printer_black_level") | int / states("sensor.sarahs_printer_black_max") | int * 100 ) | round (0) }}
        unit_of_measurement: '%'
        icon_template: mdi:grain
19 Likes

You could try setting the border radius like this:

        :host {
          --mush-icon-size: 100px;
          height: 66px;
          margin-left: -22px !important;
          margin-top: -4px !important;
          border-radius: var(--ha-card-border-radius);
        }

You can set the --icon-symbol-size like this:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: Scenes
    icon: phu:scene-relax
    layout: vertical
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: scenes
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
          --shape-color-disabled: none !important;}
        ha-card { 
          background: transparent;
          width: 66px;
          border-radius: 30px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 2px;
          --icon-symbol-size: 55px;
        }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(var(--rgb-primary-text-color), 0.01);
      --ha-card-background: transparent;
    }
2 Likes

That worked, thank you.

Do you know if it’s possible to do 2 actions in a mushroom card like this? I’m trying to use navigate inside of a pop-up card but the only way for it to work seamlessly is for the pop-up to be closed automatically otherwise the user has to do it. The way I did this didn’t work.

- type: custom:mushroom-template-card
  primary: ''
  secondary: Secure
  icon: phu:reolink-842
  layout: vertical
  icon_color: red
  tap_action:
    - action: navigate
      navigation_path: cameras
    - action: fire-dom-event
      browser_mod:
        command: close_popup
        deviceID:
          - this
  picture: local/icons/custom_icons/camera.svg

You can’t with entity card, use template card instead.

You could try using a script…

It’s possible to do navigate in a script? How does it know the device requesting that?

Hey John, try this:

type: custom:mushroom-template-card
layout: vertical
secondary: 'Battery: {{ state_attr(entity, "battery") }}%'
entity: lock.front_door_lock_2
primary: |
  {% if is_state(entity, 'unlocked') %}
  Door is Unlocked
  {% else %}
  Door is Locked
  {% endif %}
icon_color: |
  {% if is_state(entity, 'unlocked') %}
  red
  {% else %}
  green
  {% endif %}
icon: |
  {% if is_state(entity, 'unlocked') %}
  mdi:lock-open
  {% else %}
  mdi:lock
  {% endif %}
card_mod:
  style: |
    ha-card {                     
      background-color: {{ 'rgba(255, 255, 255, 0.1)' if is_state('lock.front_door_lock_2', 'unlocked') else 'rgba(147, 227, 215, 0.5)' }};
      height:125px !important;
    }
    mushroom-shape-icon {
      {{ 'animation: blink 1.3s ease-in-out infinite;' if is_state('lock.front_door_lock_2', 'unlocked') }}
    }
    @keyframes blink {
      50% {opacity: 0.1;}
    }
1 Like

Yes that’s perfect!!! Thank you!!!

I love this mushroom card!!

1 Like

Wow that looks beautiful! Do you have the full yaml shared anywhere? Particularly interest in the scenes bar, room card and detailed room view as those look spot on!

nice work!
Can you share your code from the temperature card?
Thanks

Spotify dropdown

1 Like

Is it possible to show conditional chips card for just given users? I have some conditional chips cards which shows if there is any HACS or HA update available, but I want to show it if a user with admin privilege is opened the HA front page, or if a given user opens it, but hide these chips when rest of my family open HA dashboard.

Scenes bar is part of my Welcome card, previously shared here:

Room card is shared here:

1 Like

Temperature/Humidity card is shared here:

1 Like