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

[Posreg (Daros)]

sure, but the images you need to get locally

Network

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 10% 80%
      grid-template-rows: auto
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: back
      - type: custom:mushroom-template-card
        icon: a
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/images/ui/network.png' ) no-repeat center 0px;
            background-size: 220px 40px;
  - type: custom:layout-card
    layout_type: grid
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.speedtest_ping
            icon: mdi:upload-multiple
            icon_color: blue
            content: '{{ states(''sensor.gb_sent_monthly'') }} GB/month'
          - type: template
            entity: sensor.speedtest_ping
            icon: mdi:download-multiple
            icon_color: deep-orange
            content: '{{ states(''sensor.gb_received_monthly'') }} GB/monrh'
        alignment: center
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_download
                color: rgb(255, 87, 34)
                max: 400
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    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: 130
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_download
            primary_info: state
            secondary_info: name
            name: Download
            icon_color: deep-orange
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  width: 140px;
                  margin-left: -10px;
                  margin-right: auto;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_ping
            primary_info: state
            secondary_info: name
            name: Ping
            icon_color: light-green
            icon: mdi:wan
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: auto;
                  width: 140px;
                  margin-left: auto;
                  margin-right: auto;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_upload
                color: rgb(33, 150, 243)
                max: 400
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    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: 130
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_upload
            primary_info: state
            secondary_info: name
            name: Upload
            icon_color: blue
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  width: 140px;
                  margin-left: -10px;
                  margin-right: auto;
                }
  - type: custom:stack-in-card
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.speedtest_download
            line_color: deep-orange
          - entity: sensor.speedtest_upload
            show_adaptive_color: true
            y_axis: secondary
        hours_to_show: 24
        points_per_hour: 4
        line_width: 4
        font_size: 50
        animate: false
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade

RPI

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: a
    fill_container: false
    multiline_secondary: false
    layout: vertical
    tap_action:
      action: call-service
      service: script.start_radio1
    style: |
      mushroom-card {
        background: var(--card-background-color) url( '/local/images/ui/raspberry_logo.png' ) no-repeat center 0px;
        background-size: 140px 40px;
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.rpi_cpu_temp
                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.rpi_cpu_temp
            primary_info: state
            secondary_info: name
            name: CPU Temp
            icon_color: deep-orange
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: 140px;
                  margin-left: -8px;
                  margin-right: auto;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.memory_use_percent
                color: rgb(33, 150, 243)
                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.memory_use_percent
            primary_info: state
            secondary_info: name
            name: Memsory used %
            icon_color: blue
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: 140px;
                  margin-left: -8px;
                  margin-right: auto;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.disk_use_percent
                color: rgb(255, 233, 0)
                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.disk_use_percent
            primary_info: state
            secondary_info: name
            name: Disk used %
            icon_color: yellow
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: 140px;
                  margin-left: -8px;
                  margin-right: auto;
                }

[piitaya (Paul)]

Check out the long awaited climate card with hvac modes and temperature controls.

Release v2.1.1 · piitaya/lovelace-mushroom

[swifty]

Seems I misunderstood the template picture addition in the latest update - I was hoping it would allow to use the entity picture (as in the icon defined on the entity itself).

Anyone know if this is possible ? - I have a bunch of cards that are templated and it would be great if they could just follow the icon for the entity instead of having to re-specify the icon again.
(Similar to the icon_type: entity-picture for other cards)

[piitaya (Paul)]

picture: "{{ state_attr(entity, 'entity_picture') }}"

This should work to use the entity picture

[swifty]

thanks! - Don’t know why it didn’t dawn on me that the icon may be one of the attributes!
It works fine with;
{{ state_attr(entity, 'icon') }}

[berkans (Berkan Sezer)]

Can you share the code for this part ? It looks lovely.

[Turbo4door (Justin)]

I’m at work and can’t browse to Github thanks to our firewalls so can’t see release notes, does this support thermostats with high and low setpoints? I’ve struggled with anything but the standard thermostat card because of this with just about every other thermostat card. Hoping it does!

[KTibow (Kendell R)]

It does support heat/cool mode, from my testing with the demo climate platform.

[piitaya (Paul)]

Yes, low and high set points are supported.

[samgreco]

Is there a way for me to expose the source selector on a media card? I use a multizone matrix (Russound) with multiple sources to multiple zones.

This is with the mini-media-player card:

And this is where I would love to put a source select dropdown:

Can this be done?

BTW, I love this add-on.

[Turbo4door (Justin)]

This is really nice! Would you mind posting up your code for this?

[rolfokevin (Kevin Rolfo)]

tried recreating your alexa tts card. How are you removing the space between the two different cards?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: media_player.office_echo
  - type: custom:mini-media-player
    entity: media_player.office_echo
    tts:
      platform: alexa
      enity_id: media_player.office_echo
    hide:
      name: true
      source: true
      power: true
      volume: true
      next: true
      prev: true
      play_pause: true
      play_stop: true
      icon: true
card_mod:
  style: |
    mushroom-card {
      background: rgba(10,70,170,0.2);
      padding: 6px;
      border-radius: 12px
    }
    ha-card {
      box-shadow: none !important;
      padding-top: 0px !important;
      padding-bottom: 10px !important;
      --card-primary-font-size: 18px;
      --card-primary-font-weight: 300 !important;

    }

[Posreg (Daros)]

you can find it above

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

sure, but the images you need to get locally Network type: custom:stack-in-card cards: - type: custom:layout-card layout_type: grid layout: width: 100% grid-template-columns: 10% 80% grid-template-rows: auto cards: - type: custom:mushroom-chips-card chips: - type: back - type: custom:mushroom-template-card icon: a fill_container: false multiline_secondary: false layout: vertical style: …

[tmen79]

I use these cards for all of my dashboards and finally there is a climate card, thank you so much for these amazing work, just beautiful. There is just one small issue with eq3 thermostats. They have the HVAC mode ‘idle’
Now all my thermostats showing heating, but they are idle.
Can you please add this mode?

[berkans (Berkan Sezer)]

What do you mean idle ? What does it show in devoloper settings ?

[benchr]

I have same issue

Dev tools show

hvac_modes:
  - 'off'
  - heat
min_temp: 20
max_temp: 40
target_temp_step: 1
current_temperature: 35
temperature: 35
hvac_action: idle
friendly_name: Havana Spa
supported_features: 1

[damclarkd]

I believe idle is an action and not a mode.

[cowboysdude (John Wade)]

Happy to!

Go to HACS and search for:

Hourly Weather Card

by @decompil3d

Here’s the lovelace entry:

          - type: custom:hourly-weather
            entity: weather.openweathermap
            num_segments: 12 # optional, defaults to 12
            name: Next 12 hours # optional, defaults to "Hourly Weather"

That’s all there is to it!

[berkans (Berkan Sezer)]

Thank you very much. I have just realised it was an integration, not a code, right after I wrote to you. It has already been installed.

[tamirbunny]

Thanks a lot for this update!

How can I have the climate card also show the current set temp beside the state, as in your official screenshot?

Also, is it possible to change the icon’s colour (for the climate card, not as a template card)?