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

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:

2 Likes

Temperature/Humidity card is shared here:

1 Like

This is my room header. I use it to show the status and alerts for the room, such as motion, windows/doors open and smoke/water alerts. On my to-do is to add low battery notifications.

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: back
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_door_sensor_contact
            state: 'on'
        chip:
          type: template
          icon: mdi:garage-open
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.back_door_contact
            state: 'on'
        chip:
          type: template
          content: Back
          icon: mdi:door-open
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_hall_door_contact
            state: 'on'
        chip:
          type: template
          content: Hall
          icon: mdi:door-open
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_left_window_contact
            state: 'on'
        chip:
          type: template
          content: Left
          icon: mdi:window-open
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_right_window_contact
            state: 'on'
        chip:
          type: template
          content: Right
          icon: mdi:window-open
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.attic_ladder_contact
            state: 'on'
        chip:
          type: template
          icon: mdi:ladder
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_freezer_door_contact
            state: 'on'
        chip:
          type: template
          icon: mdi:fridge-industrial
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.sachas_crate_contact
            state: 'off'
        chip:
          type: template
          icon: mdi:dog-side
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_motion_occupancy
            state: 'on'
        chip:
          type: template
          icon: mdi:motion-sensor
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.workbench_motion_occupancy
            state: 'on'
        chip:
          type: template
          content: Workbench
          icon: mdi:motion-sensor
          icon_color: grey
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.laundry_leak_water_leak
            state: 'on'
        chip:
          type: template
          icon_color: light-blue
          icon: mdi:water-alert
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0.2;}
              }  
      - type: conditional
        conditions:
          - entity: binary_sensor.garage_smoke
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          icon: mdi:fire-alert
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0.2;}
              }  
    alignment: start
  - type: custom:mushroom-title-card
    title: Garage

5 Likes

Some are on but I also have the alarm chip, template chip, and entity chips and they are all the same white color. No matter what I do I can’t get them to change. It’s not the end of the world but I wish my dashboard had a splash of color.

1 Like

Liked the card. I have been trying to get a radial card to work for me. I have pretty much the same code. My issue is trying to get the circle to show the percentages of a value instead of the entire value. In my case I am using it to show CPU temperatures. It is showing the temp but it fills the whole circle not a percentage of the circle. Here is my code and what I am getting. Thanks for the good work.
image

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-title-card
    title: 'CPU Temperatures'
  - type: custom:stack-in-card
    cards:    
      - type: custom:apexcharts-card
        header:
          show: true
        series:
          - entity: sensor.glances_core_0_temperature
            name: Core 1
            color: rgb(7, 188, 211)
            show:
              legend_value: true
          - entity: sensor.glances_core_1_temperature
            name: Core 2
            color: rgb(252, 233, 64)
            show:
              legend_value: true
          - entity: sensor.glances_core_2_temperature
            name: Core 3
            color: rgb(157, 44, 176)
        chart_type: radialBar
        apex_config:
          legend:
            show: true
          chart:
            height: 265px
1 Like

Check out:

Thank you!

Looks great, thank you! I’ll try it.
Would be much elegant without one more add-on or plugin, just something like:
{% if is_state…} or muct better to have a build in condition in a conditional chips card.

You can specify the max value for each entity. It will show it as a %.

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-title-card
    title: 'CPU Temperatures'
  - type: custom:stack-in-card
    cards:    
      - type: custom:apexcharts-card
        header:
          show: true
        series:
          - entity: sensor.glances_core_0_temperature
            name: Core 1
            color: rgb(7, 188, 211)
            max: 150
            show:
              legend_value: true
          - entity: sensor.glances_core_1_temperature
            name: Core 2
            color: rgb(252, 233, 64)
            max: 150
            show:
              legend_value: true
          - entity: sensor.glances_core_2_temperature
            name: Core 3
            color: rgb(157, 44, 176)
            max: 150
        chart_type: radialBar
        apex_config:
          legend:
            show: true
          chart:
            height: 265px

Is there a way too see no decimals? Or should i create a new sensor?

Yep, with a template card:

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:stack-in-card
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-template-card
            entity: sensor.lounge_sensor_temperature
            primary: '{{ states(entity) | round(0) }} °C'
            secondary: Temperature
            icon: mdi:thermometer
            icon_color: red
          - type: custom:mushroom-template-card
            entity: sensor.lounge_sensor_humidity
            primary: '{{ states(entity) | round(0) }} %'
            secondary: Humidity
            icon: mdi:water-percent
            icon_color: blue
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.lounge_sensor_temperature
            name: Temperature
            color: rgb(244, 67, 54)
          - entity: sensor.lounge_sensor_humidity
            name: Humidity
            color: rgb(33, 150, 243)
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        group: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: true

Is there a way to turn image to grayscale if the state is “OFF”?

I thought I would share my Mushroom Gauge. I like how it turned out. This combo card requires in addition to the Mushroom cards, apexcharts-card, stack-in-card and card-mod.

square: false
columns: 2
type: grid
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:apexcharts-card
        chart_type: radialBar
        series:
          - entity: sensor.cpu_temperature
            color: rgb(255, 87, 34)
            max: 90
            show:
              legend_value: false
        apex_config:
          plotOptions:
            radialBar:
              offsetY: 0
              startAngle: -108
              endAngle: 108
              hollow:
                size: 70%
              dataLabels:
                name:
                  show: false
                value:
                  show: false
              track:
                strokeWidth: 80%
                margin: 0
          fill:
            type: gradient
            gradient:
              shade: light
              type: horizontal
              shadeIntensity: 0.3
              inverseColors: false
              opacityFrom: 1
              opacityTo: 1
              stops:
                - 0
                - 50
                - 55
                - 90
          legend:
            show: false
          chart:
            height: 240
      - type: custom:mushroom-entity-card
        entity: sensor.cpu_temperature
        primary_info: state
        secondary_info: name
        name: CPU Temp
        icon_color: deep-orange
        layout: vertical
        card_mod:
          style: |
            ha-card {
              margin-top: -90px;
              width: 140px;
              margin-left: auto;
              margin-right: auto;
            }
  - type: custom:stack-in-card
    cards:
      - type: custom:apexcharts-card
        chart_type: radialBar
        series:
          - entity: sensor.disk_free
            color: rgb(33, 150, 243)
            max: 240
            show:
              legend_value: false
        apex_config:
          plotOptions:
            radialBar:
              offsetY: 0
              startAngle: -108
              endAngle: 108
              hollow:
                size: 70%
              dataLabels:
                name:
                  show: false
                value:
                  show: false
              track:
                strokeWidth: 80%
                margin: 0
          fill:
            type: gradient
            gradient:
              shade: light
              type: horizontal
              shadeIntensity: 0.3
              inverseColors: false
              opacityFrom: 1
              opacityTo: 1
              stops:
                - 0
                - 50
                - 55
                - 90
          legend:
            show: false
          chart:
            height: 240
      - type: custom:mushroom-entity-card
        entity: sensor.disk_free
        primary_info: state
        secondary_info: name
        name: Disk Free Space
        icon_color: blue
        layout: vertical
        card_mod:
          style: |
            ha-card {
              margin-top: -90px;
              width: 140px;
              margin-left: auto;
              margin-right: auto;
            }
41 Likes

Yes you can do it like this:

type: custom:mushroom-template-card
icon: ''
primary: LS50
secondary: '{{ states(entity) | title }} '
entity: switch.lounge_amp_center
fill_container: false
multiline_secondary: false
picture: /local/ls50.png
card_mod:
  style: |
    mushroom-card {
      {{ 'filter: grayscale(100%);' if is_state('switch.lounge_amp_center', 'off') }}
    }
1 Like

Thank you that worked for me!

Thanks again!

hi @berkans
how does the code for your icon in room card looks? Trying but i cannot get it to work.

Is there any way I can get into edit mode on mobile when the topbar is hidden?

This is awesome, I just started working on this too. I have some huge HP Latex printers and there’s not really a lot of documentation about ID’s how are you figuring them out for your sensors?

4 Likes