Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Hey Paul,

first of all huge respect for the project.
Very nice, Iā€™m curious about future changes and updates.
At the moment Iā€™ve also built my complete dashboard according to the Ui Lovelace Minimalist, but everything in the foreground.
As it looks like Iā€™ll switch to Mushroom Cards.

HI,

Thereā€™s an option to change the light icon and/or the brightness bar color to match the light color?
(light card)

Thanks

Hi,

can you bring a few examples of the respective cards in the instructions.
Especially for the template card.

for example:

type: custom:mushroom-template-card
icon: mdi:desk-lamp
entity: switch.burolampe
name: BĆ¼rolampe
icon_color: '{{ is_state("switch.burolampe", "on") | iif("red", "green") }}'
primary: BĆ¼rolampe
secondary: '{{ state_attr(''switch.burolampe'', ''current_consumption'') }} W'

type: custom:mushroom-template-card
primary: Number of entities
secondary: |
  {{ states | count }} entities
icon: mdi:format-list-bulleted
icon_color: |
  {{ "green" if states | count > 50 else "red" }} 


image

is it possible to display name, state and label and custom_field in the card?
for example:

image

Thanks again for the great work.

2 Likes

You might want to blur out your external IP address

See

v1.0.0

Pre-release

@piitaya piitaya released this 15 hours ago

Ā· 2 commits to main since this release

v1.0.0

882ef3e

First Mushroom release :rocket:

Whatā€™s Changed

  • feat(entity): use relative time for entity card by @DurgNomis-drol in #60
  • feat(template): optional multiline secondary text in template card by @DurgNomis-drol in #59
  • feat(person): allow user to hide name by @pierrecle in #63
  • fix(chip): vertically center weather icon and make icon-only chips round by @pierrecle in #66
  • feat(person): use zone icon when available by @pierrecle in #65
  • feat(person): add info color when person in zone by @piitaya in #68
  • feat(theme): add theme usage by @piitaya in #46
  • feat(icon): allow user to hide icon in template and entity cards by @pierrecle in #64
  • feat(light): handle rgb color by @pierrecle in #48
1 Like

Thanks for the feedback.

Better documentation is in the roadmap. Most cards are easy to use but I agree, we need to add documentation for advanced usage :slightly_smiling_face:

I like the idea to add badge icon in template card. :+1:

4 Likes

The v1.0.0 introduces 2 new big features :

  • :art: Mushroom Themes and allow you to build your own.
  • :bulb: RGB color support for light card.

Itā€™s tagged as a prerelease because Iā€™m waiting the approval for Mushroom Themes in HACS repository.

2 Likes

thanks, already done.
Was too fast again.

1 Like

I have a small suggestionā€¦
Is it possible to put the graph in the background of the card
As in the exampleā€¦

this is my configuration.

type: custom:button-card
styles:
  grid:
    - grid-template-areas: '"item1" "item2"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content  min-content min-content
    - row-gap: 0px
  card:
    - border-radius: 15px
    - box-shadow: none
    - padding: 0px
custom_fields:
  item1:
    card:
      type: custom:button-card
      entity: sensor.nas0c6388_network_down_eth0
      name: Download
      show_icon: true
      show_label: true
      show_name: true
      show_state: true
      styles:
        icon:
          - color: null
        label:
          - justify-self: start
          - align-self: start
          - font-weight: bold
          - font-size: 13px
          - filter: opacity(50%)
          - margin-left: 12px
          - color: ''
        name:
          - align-self: end
          - justify-self: start
          - font-weight: bold
          - font-size: 15px
          - margin-left: 12px
          - filter: opacity(80%)
        state:
          - justify-self: start
          - align-self: start
          - font-weight: bold
          - font-size: 12px
          - filter: opacity(40%)
          - margin-left: 12px
        img_cell:
          - background-color: '#2e2d2d'
          - border-radius: 50%
          - place-self: center
          - width: 30px
          - height: 30px
        grid:
          - grid-template-areas: '"i n" "i l" "i s"'
          - grid-template-columns: min-content auto
          - grid-template-rows: min-content min-content
        card:
          - border-radius: 15px
          - box-shadow: none
          - padding: 10px
          - z-index: 1
          - background: none
      size: 60%
  item2:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.nas0c6388_network_down_eth0
      line_color: grey
      line_width: 2
      show:
        name: false
        icon: false
        legend: false
        state: false
      style: |
        ha-card {
          box-shadow: none;
          margin-top: -100px;
          border-radius: 0px;
        }

10 Likes

It seems that color control doesnā€™t work.

We just pushed some fixes in the 1.0.2 version :blush:

3 Likes

Hi. Is there any way to make the icons bigger in the cardsā€¦eg: mushroom light card

Hi. Is there a way that i can make the icons bigger on the cardsā€¦eg: the mushroom light card icon

2 Likes

Hi all :wave:, and GG to all of the contributors.

I encounter an issue, I have a sensor sensor.processor_use_percent and I would like the icon to go from green to red when the CPU utilisation is over 50%, I tried this config but I donā€™t know why itā€™s not working

- type: custom:mushroom-template-card
      entity_id: sensor.processor_use_percent
      primary: CPU {{ (states('sensor.processor_use_percent'))}} %
      icon: mdi:cpu-64-bit
      icon_color: '{{ "green" if sensor.processor_use_percent | float > 50 else "red" }}'
      vertical: true

If someone knows the issue with my config

This is what i use:

{{ is_state('sensor.person_home', '0') | iif('grey', 'orange') }}

Screenshot 2022-02-10 034306

type: custom:mushroom-entity-card
entity: binary_sensor.yousaf_presence
icon_color: >
            {% if is_state('binary_sensor.yousaf_presence', 'Home') %}
              green
            {% else %}
              red
            {% endif %}

Not working for me either

All my fans are controlled through Broadlink, example code below.

input_number:
  office_fan_percentage:
    name: office Fan Percentage
    min: 0
    max: 100
    step: 20
    ...
fan:
  - platform: template
    fans:
      fan_office:
        friendly_name: "Office Fan"
        unique_id: fan_office
        value_template: "{{ states('input_boolean.office_fan_state') }}"
        percentage_template: "{{ states('input_number.office_fan_percentage') }}"
        turn_on:
          service: script.fan_office_on
        turn_off:
          service: script.fan_office_off
        set_percentage:
          service: script.office_fan_set_speed
          data:
            percentage: "{{ percentage }}"
        speed_count: 5

Love the cards! The light card is my new favorite, but there is a issue: On the iPhone if you have to scroll down and touch a slider it changes the light. You have to be very careful of where you put your finger when scrolling. The OOTB sliders do not have this issue.

Use '{{ "green" if states("sensor.processor_use_percent") instead of '{{ "green" if sensor.processor_use_percent

There is an issue for the slider on github.
Itā€™s not an easy problem to solve when speaking about gesture but we will find a solution :blush: https://github.com/piitaya/lovelace-mushroom/issues/41

1 Like