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

sparkydave · January 7, 2023, 9:40pm

I have made a template card with chips and I’d like the chips to change icon and value colour based on the value. ie: CPU temp to show green if below 65 degrees, then yellow, then orange and finally red if above say 80 degrees.

Is this possible?

Code

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
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.cpu_temperature
      - type: entity
        entity: sensor.processor_use
      - type: entity
        entity: sensor.memory_use_percent
      - type: entity
        entity: sensor.disk_use_percent
      - type: entity
        entity: sensor.db_size
    alignment: end

sparkydave · January 7, 2023, 9:45pm

Just use the standard HA condtional card with the state of the media player for your condition.

Example with mini media player but works with any card

  - card:
      entity: media_player.alfresco_sony
      group: true
      hide:
        icon_state: false
        power_state: false
      icon: mdi:speaker-wireless
      type: custom:mini-media-player
      volume_stateless: true
    conditions:
      - entity: media_player.alfresco_sony
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.shed_speakers
      group: true
      hide:
        icon_state: false
        power_state: false
      icon: mdi:speaker-wireless
      type: custom:mini-media-player
      volume_stateless: false
    conditions:
      - entity: media_player.shed_speakers
        state_not: 'off'
    type: conditional
mode: vertical
type: custom:stack-in-card

sparkydave · January 7, 2023, 10:11pm

It depends how you want it to look when they are playing. In my example I used the stack-in-card and have many media players all in the one stack (I didn’t show all of them in the code snip) and so they look grouped when on. You could use 5 separate conditional cards if you want them to appear individual. Either way any of the 5 media players will show when that particular media player is playing.

Stenbumling · January 7, 2023, 11:00pm

Hi!

Can anyone help me figure out where the black boxes come from?
want to remove them.

              - type: vertical-stack
                cards:
                  - square: false
                    columns: 3
                    type: grid
                    cards:
                      - type: custom:stack-in-card
                        cards:
                          - type: custom:apexcharts-card
                            chart_type: radialBar
                            series:
                              - entity: sensor.raspberrypi4_cpu_temperature
                                color: rgb(255, 87, 34)
                                max: 100
                                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: 140
                          - type: custom:mushroom-entity-card
                            entity: sensor.raspberrypi4_cpu_temperature
                            primary_info: state
                            secondary_info: name
                            name: CPU Temp
                            icon_color: deep-orange
                            layout: vertical
                            card_mod:
                              style: |
                                ha-card {
                                  margin-top: -60px;
                                  width: 140px;
                                  margin-left: 10px;
                                  margin-right: auto;
                                }

Br

dkmcgowan · January 7, 2023, 11:58pm

I’ve been using your examples for some overrides to everything but is there an easy way to override all “mushroom-template-card” but not other card types?

So if I wanted a theme to do this but only for “mushroom-template-card”

Mushroom Custom:
  card-mod-theme: "Mushroom Custom"

  card-mod-card: |
    ha-card:active {
      transform: scale(1.02);
      transition: 0s;
    }

Sddawson · January 8, 2023, 5:13am

I’ve tried exactly the same thing in my theme, but it affects too many other places negatively. Be great for it to only apply to mushroom cards, but no idea whether that’s possible.

Stevengerrard08 · January 8, 2023, 9:12am

Hi again!

Would it be possible to recreate this card?

fversteegen · January 8, 2023, 9:19am

Tried it, but still isn’t animating…

Full yaml:

type: custom:mushroom-template-card
primary: Droger
secondary: ''
icon: mdi:tumble-dryer
entity: sensor.droger_power
icon_color: |-
  {% if states('sensor.droger_power') | float <1 %}
      green
  {% elif states('sensor.droger_power') | float >1  %}
      amber
  {% endif %}
layout: vertical
tap_action:
  action: more-info
card_mod:
  style: |
    ha-icon {
      {% if states('sensor.droger_power')|float > 1 %}
      --icon-animation: spin 1s linear infinite;
      {% endif %}
    }

Also tried the suggestion of @Robbi-Ho, but that also didn’t provide any animation (yaml below)

card_mod:
  style: |
    ha-icon {
      {% ‘--icon-animation: spin 1s linear infinite;’ if states('sensor.droger_power')|float > 1 %}
    }

ArenaCloser · January 8, 2023, 10:46am

Try with layout: vertical instead, it moves the brightness slider below the light name and state. Or move one light card below the others (e.g. in a grid with 2 columns), so that all cards have more space.

Use template chips with if-statements.

Yes, with a template card.

I use this code to change the chip background color (you’ll have to find an appropriate color)

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

It looks like you’re using emoji’s, I’d recommend using mdi icons instead. Also you could play around with the chip height, border radius and background color.

card_mod:
  style: |
    ha-card {
      --chip-box-shadow: none;
      --chip-border-radius: var(--mush-control-border-radius);
      --chip-height: 38px;
    }

OBoudreaux · January 8, 2023, 1:08pm

Strange, that works on chrome but not fully kiosk browser. You led me down the right path though. Got it working with:

    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: ;
          --chip-spacing: 0;
          border-style: none;
        }

Thanks!

Tim_Knowlden · January 8, 2023, 1:50pm

Can somebody help, nudges @rhysb I have a mushroom bar card set up to show salt level in my softener.

I have two, one for cm and one for %. Id like to combine the two, primarily use the CM value but display the % value too in the same card.

I have it set up in a decluttering card at the moment.

          entity: '[[entity]]'
          height: 42px
          min: '[[min]]'
          max: '[[max]]'
          entity_row: true
          severity:
            - color: rgb(var(--mush-rgb-[[high]]))
              to: '[[high_max]]'
              from: '[[high_min]]'
            - color: rgb(var(--mush-rgb-[[medium]]))
              to: '[[medium_max]]'
              from: '[[medium_min]]'
            - color: rgb(var(--mush-rgb-[[low]]))
              to: '[[low_max]]'
              from: '[[low_min]]'
          positions:
            icon: 'off'
            indicator: 'off'
          card_mod: null
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
              --mush-rgb-red: 244, 67, 54;
              --mush-rgb-pink: 233, 30, 99;
              --mush-rgb-purple: 156, 39, 176;
              --mush-rgb-deep-purple: 103, 58, 183;
              --mush-rgb-indigo: 63, 81, 181;
              --mush-rgb-blue: 33, 150, 243;
              --mush-rgb-light-blue: 3, 169, 244;
              --mush-rgb-cyan: 0, 188, 212;
              --mush-rgb-teal: 0, 150, 136;
              --mush-rgb-green: 76, 175, 80;
              --mush-rgb-light-green: 139, 195, 74;
              --mush-rgb-lime: 205, 220, 57;
              --mush-rgb-yellow: 255, 235, 59;
              --mush-rgb-amber: 255, 193, 7;
              --mush-rgb-orange: 255, 152, 0;
              --mush-rgb-deep-orange: 255, 87, 34;
              --mush-rgb-brown: 121, 85, 72;
              --mush-rgb-grey: 158, 158, 158;
              --mush-rgb-blue-grey: 96, 125, 139;
              --mush-rgb-black: 0, 0, 0;
              --mush-rgb-white: 255, 255, 255;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

Card

              - type: custom:decluttering-card
                template: bar_gauge
                variables:
                  - entity: sensor.saltlevel_in_percent
                  - icon: cube-outline
                  - low_max: 10
                  - medium_min: 11
                  - medium_max: 20
                  - high_min: 21
              - type: custom:decluttering-card
                template: bar_gauge
                variables:
                  - entity: sensor.saltlevel_in_cm
                  - icon: cube-outline
                  - low_max: 2.9
                  - medium_min: 3
                  - medium_max: 6.9
                  - high_min: 7.0
                  - max: 35

Current look with two entities:

Look I would like to achieve:

dunxd · January 8, 2023, 6:06pm

I am setting up a sky card indicating the time of sunrise and sunset, moon phase and current zodiac sign.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Sky
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.moon_phase
      - type: entity
        entity: sensor.zodiac

The only problem I am having is that the text used in the chips is not formatted nicely - spaces are replaced with underscores, and there is no capitalisation.

What I have:

Text formatting I am looking for:

I know I could do that with Template chips rather than Entities, but then I would not get the relevant icons without a long template. I know how to do that, but is there a better way. The standard Entities card in HA works fine - the second image above is how it presents the text by default.

Boostin4HP · January 8, 2023, 6:51pm

Yeah something changed recently, I just used a mapper to fix it.

      moon_state:
        friendly_name: "Moon State"
        unit_of_measurement: "State"
        entity_id: sensor.moon
        value_template: >-
          {% set mapper = {
            'new_moon':'New Moon',
            'waxing_crescent':'Waxing Crescent',
            'first_quarter':'First Quarter',
            'waxing_gibbous':'Waxing Gibbous',
            'full_moon':'Full Moon',
            'waning_gibbous':'Waning Gibbous',
            'last_quarter':'Last Quarter',
            'waning_crescent':'Waning Crescent' } %}
          {% set sensor_state = states('sensor.moon') %}
          {{ mapper[sensor_state] }}

exx · January 8, 2023, 8:33pm

Hi all! New to Mushroom. I just downloaded and installed it this morning. I was looking to change the color of the icons & slider bars on the light card, and see there was a change added to the git 2 days ago to incorporate this, but I can’t figure out how to get that change into my HA install.

Can anyone point me in the right direction?

Thanks!!

Stevengerrard08 · January 8, 2023, 8:44pm

Could you help me get started?

dunxd · January 8, 2023, 8:53pm

Thanks - I wasn’t aware of mapper. I can use this similarly for Zodiac too.

Are you suggesting Mushroom used to format the display text automatically until recently?

rak · January 8, 2023, 9:17pm

Showing a chip with mdi:none logo?

Stenbumling · January 8, 2023, 10:41pm

Any ide why its not showing?

            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  icon: "mdi:arrow-up-down"
                  primary: 'Download'
                  secondary: |
                    '{{ state_attr('sensor.unifi_status_www', 'tx_bytes-r') }} '

sparkydave · January 9, 2023, 12:17am

I’ve tried that but I am obviously doing something wrong… The icon is not coloured at all.

Code

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
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.cpu_temperature
        content: '{{ states(entity) }}'
        icon: mdi:thermometer
        icon_color: |
          {% if ('sensor.cpu_temperature') > 80 %}
            red
          {% else %}
            green
          {% endif %}
      - type: entity
        entity: sensor.processor_use
      - type: entity
        entity: sensor.memory_use_percent
      - type: entity
        entity: sensor.disk_use_percent
      - type: entity
        entity: sensor.db_size
    alignment: end

The temp is also now missing the unit of measurement.

rhysb · January 9, 2023, 2:06am

You need to get the value of sensor.cpu_temperature with states() like this:

        icon_color: |
          {% if states('sensor.cpu_temperature') | int > 80 %}
            red
          {% else %}
            green
          {% endif %}