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

rhysb · July 10, 2022, 7:41am

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

Roy75 · July 10, 2022, 9:12am

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

rhysb · July 10, 2022, 9:20am

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

Mosher · July 10, 2022, 9:59am

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

rhysb · July 10, 2022, 10:28am

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;
            }

rhysb · July 10, 2022, 10:37am

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') }}
    }

Mosher · July 10, 2022, 11:57am

Thank you that worked for me!

Roy75 · July 10, 2022, 1:28pm

Thanks again!

jompa68 · July 10, 2022, 4:59pm

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

Noah · July 10, 2022, 7:49pm

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

Boostin4HP · July 10, 2022, 8:14pm

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?

berkans · July 10, 2022, 9:28pm

You have to be more specific like which part ?

rhysb · July 10, 2022, 10:24pm

A little bit OT for this thread, but I use MIB Browser to do an SNMP Walk. Make sure you load the appropriate MIBs for printers, usually RFC1213 and Printer-MIB. Most of the OIDs are standardized with minor differences, such as the number of toner/ink supplies and the order of them, while the base OID remains the same.

Boostin4HP · July 11, 2022, 2:02am

Yeah I was using a different program and there was thousands of OID’s. Still trying to find a few but got the card looking very nice! Thanks for saving me some time and making a great looking card!

jompa68 · July 11, 2022, 4:44am

Sorry
I mean the icons on this room card, i struggling to find the right code to get it to work for me.

pbohannon · July 11, 2022, 5:12am

Thanks for posting these and for being so willing to help the community throughout this thread. These examples are great and get the creativity flowing for sure. Couple of quick questions:

in the first two side-by-side examples, it appears we’re looking at the base ‘welcome screen’ as it has the overall dashboard indicators e.g. presence, door, alarm, weather. However, the stuff underneath is different in each example (now playing is first in one, rooms is first in the other). Can I infer from this the top pane is ‘locked’ such that you can scroll vertically below the header and see the rest of the content? I fiddled briefly with trying to do this in CSS with contentContainer and such but never quite made it work. Or, does the top scroll off as you scroll down?
generally, what strategy would you consider if you were to adapt the mobile-friendly layout you have here to a wider screen e.g. a wall-mounted tablet? The room cards should be easy - they could be popups or just navigate to a new page. But for the ‘front page’, I think it’d be basically creating a grid and carving out the sections of the primary layout into cards that made sense in my own implementation, is that right?

Thanks again, still fighting through getting mine to even somewhat look like yours and others here, but the sharing and collaboration is so very helpful.

rhysb · July 11, 2022, 11:02am

No, the top pane is not locked, it scrolls off the top. The ‘Currently Playing’ uses Universal Media Player to show any playing media and is hidden if there is nothing playing. I wanted a quick way to pause, skip or adjust volume without having to go into a room card. This way the media player doesn’t take up space when it is not needed. I also use Universal Media Players in rooms that have more than one media source, ie TV, Squeezebox & Plex, to reduce clutter.

I haven’t started on a tablet layout yet, but would probably have a side card with room navigation down the left and expand content out to the right.

swifty · July 11, 2022, 5:52pm

This is probably a simple one, but I can’t for the life of me work it out… can anyone tell me what the magic code is to make a template chip follow the icon of the entity rather than having to specify it manually as part of the yaml ?

I’m thinking there must be a template way to get the entities icon ??

berkans · July 11, 2022, 7:11pm

Post your code here.

robcov · July 11, 2022, 8:33pm

Adding some more information…

I inspected the elements of my chip cards and found that there are two color styles being defined for my icons. Its unfortunately defaulting to the rgb(225,225,225) making all of my chip icons white. I have no idea why or where this value is coming from.

This was seen by inspecting an existing chip, but I created a new light chip with a color light and saw the same issue. This is also only being applied to the chip cards. All other cards, even other mushroom cards (from the ones I tested), are working as expected.

I feel like i’m closer to figuring out what’s wrong but I have no idea what I need to do to fix it.

Thanks!