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

pLeX · July 22, 2022, 3:24pm

Hi rhysb,

im little bit struggling with your code. Im trying to use your code and just changed the entities, but im always getting this result:

Do you have an idea whats wrong here?

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.docker_cpu
        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.docker_cpu
    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;
        }

berkans · July 22, 2022, 3:38pm

That works like a charm. Thank you very much.

I have a last question and I think that question could also interest others as well.

Can we change the color of the chip picture depending on the state ?

For example an air condition. I have a white picture of an air condition.

So can the color of this picture change depending on whether its on “cool” state or other. I would like it to be red when it’s on heat mode and blue when on cool.

      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: input_boolean.ana_sayfa_menu
                state: 'off'
            chip:
              type: template
              entity: climate.146235046506144_climate
              icon: mdi:home-thermometer
              tap_action:
                action: more-info
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='cool' %}
                blue
                {% elif state=='heat' %}
                red
                {% else %}
                grey
                {% endif %}
        card_mod:
          style: |
            ha-card {
              --chip-icon-size: 22px;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0px;
              --chip-padding: 15px;
              margin-left: 15px;
              margin-bottom: -auto;
              width: 400px;
            }
        alignment: start

I know I can easily change it with using conditional card but I guess card mode will be a shorter way.

berkans · July 22, 2022, 3:47pm

Nice one. I was achieving the same purpose with use conditional cards but I can also use this one too.

rolfokevin · July 22, 2022, 4:26pm

you probably need to adjust the max value, to the max of whatever youre trying to graph. So for disk space, youd put your total amount of space avaliable. and for cpu temp, set it to the highest it could get, depending on if its F or C

pLeX · July 22, 2022, 5:38pm

Hi Kevin,
im sorry… I mean not the values. This was just a quick test and I know ive to changes the values. My question was about the visualization. I dont understand why the entity part CPU temp is not inside of the apex circle like the pictures from rhysb post.

rolfokevin · July 22, 2022, 6:06pm

idk man maybe I’m still misunderstanding, but the code you provided, has the same MAX value as his does… Id image you both have entirely different hardware. Right under your sensor.docker_cpu theirs a MAX: value of 90. So the radial bar is showing you 2.71% out of 90… im pretty sure its working correct. You need to change that MAX value to whatever yours is, id image its different. Again if im misunderstanding you im sorry!

rolfokevin · July 22, 2022, 6:09pm

nevermind, lol I think I got what you meant. The icon inside the radial bar? That im not sure of tbh

pLeX · July 22, 2022, 6:12pm

Yes! I mean the position of the icon:

rolfokevin · July 22, 2022, 6:19pm

Just checked mine, heres my code. Mine looks exactly like his does.

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.glances_acpitz_1_temperature
        color: rgb(255, 87, 34)
        max: 130
        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.glances_core_0_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;
        }

Screenshot 2022-07-22 111856

pLeX · July 22, 2022, 6:33pm

same result

my code:

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.docker_cpu
        color: rgb(255, 87, 34)
        max: 130
        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.docker_cpu
    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;
        }

I dont understand it…

Step · July 22, 2022, 6:34pm

Did you install all the possible mods for this? Like card-mod, I think you are missing stack-in-card mod.

pLeX · July 22, 2022, 6:39pm

ah… I think Im missing the card-mod addon. thanks!

… sorry but there are so many posts here. I just found the mushroom stuff a few days ago. Really hard to find all informations.

Step · July 22, 2022, 6:50pm

Encountered the same thing a while ago. Would be nice to have a summary of needed mods and code for specific instances. You are welcome!

GuySie · July 22, 2022, 10:33pm

I’m looking into converting my Lovelace UI Minimalist setup into Mushroom, as it turns out to be much harder to keep a YAML-based dashboard up to date than I thought when I built it. For most stuff, this should be no problem at all, but the one big thing I’m missing is an equivalent for UI Minimalist’s Room Card (card_room), which the front page of my dashboard is based on (it lists all rooms with a room card, and each card clicks through to a room-specific view).

https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/

Did anyone else take the same route from UI Minimalist to Mushroom and have a good alternative for this card?

rolfokevin · July 22, 2022, 10:59pm

I highly recommend @rhysb work with his room card. Its been great for my use case.

rhysb · July 23, 2022, 12:03am

This should do what you need. It offsets the hue of the color elements in degrees:

Cool:
Aircon-Cool

Heat:
Aircon-Heat

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.office_air_conditioner
    picture: /local/aircon.png
    content: '{{ state_attr(entity, ''friendly_name'') }}'
    card_mod:
      style: |
        ha-card {
          {{ 'filter: hue-rotate(140deg);' if is_state('climate.office_air_conditioner', 'heat') }}
        }

rhysb · July 23, 2022, 12:16am

Glad you finally got this sorted. I have updated the original post to list the cards required.

rhysb · July 23, 2022, 12:28am

This is what I am seeing.

home:
home

not_home:
not-home

type: custom:mushroom-person-card
entity: person.rhys
primary_info: none
secondary_info: none
use_entity_picture: true
card_mod:
  style: |
    mushroom-shape-avatar {    
      {{ 'filter: grayscale(100%);' if is_state('person.rhys', 'not_home') }}
    }

cloudbr34k · July 23, 2022, 1:37am

no but i like yours!

Step · July 23, 2022, 8:13am

Thanks for sharing Rhys! So I used your code with my person, this doesn’t work on Safari (on Mac and iOS) but it does work in Firefox.

So I’ve narrowed it down to the culprit being CSS in Safari.

Currently messing around with

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Not sure if this syntax is correct, it doesn’t work yet:

 {{ '-webkit-transform: translateZ(0);-webkit-perspective: 1000;-webkit-backface-visibility: hidden;-webkit-filter: grayscale(100%);filter: grayscale(100%);' if is_state('person.step', 'not_home') }}  }