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

You can kinda do it like this with the background. but that is about it.
image

card_mod:
  style:
    mushroom-fan-percentage-control$: |
      mushroom-slider {
        --gradient: -webkit-linear-gradient(left, rgba(var(--rgb-green), 0.2) 20%, black 20.4%, rgba(var(--rgb-green), 0.2) 20.5%, rgba(var(--rgb-green), 0.2) 40%, black 40.4%, rgba(var(--rgb-green), 0.2) 40.5%, rgba(var(--rgb-green), 0.2) 60%, black 60.3%, rgba(var(--rgb-green), 0.2) 60.5%, rgba(var(--rgb-green), 0.2) 80%, black 80.4%, rgba(var(--rgb-green), 0.2) 80.5%, rgba(var(--rgb-green), 0.2) 100%) !important;
      }

But this is just visual. no guarantee that the numbers will stick to it of course.

1 Like

@dimitri.landerloos thanks a lot.

1 Like

hello i have a couple of questions that i hope @piitaya can respond to

  1. is it possible to use template in the color option of the select card? it would be usefull to glance at the selected item quickly
  2. in the media card i wuold love to link a script to holding the volume button so i would be able to rise the volume by step (+5 or -5 for example) is it possible?
    thanks in advance for the response

I can answer for you how it currently works.

  1. No you cant. but if you use card_mod you could do templating like this:
type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
icon_color: white
card_mod:
  style: |
    mushroom-shape-icon {
      {% if states(config.entity) == 'Downstairs Speakers' %}
        --icon-color: rgba(var(--rgb-red), 1) !important;
        --shape-color: rgba(var(--rgb-red), 0.2) !important;
      {% elif states(config.entity) == 'Upstairs Speakers' %}
        --icon-color: rgba(var(--rgb-green), 1) !important;
        --shape-color: rgba(var(--rgb-green), 0.2) !important;
      {% elif states(config.entity) == 'Home' %}
        --icon-color: rgba(var(--rgb-blue), 1) !important;
        --shape-color: rgba(var(--rgb-blue), 0.2) !important;      
      {% endif %}
  1. Very confident that this is not currently possible. couldnt tell you whether this is something that might come at some point. who knows.

Hi,

I created a temperature card with a custom mushroom card. There is something going wrong… The temperature of ‘Woonkamer’ (orange) is almost equal to temperature ‘Hal’ (green), but in the graphic ‘Woonkamer’ is almost the same as ‘Slaapkamer’, which is almost 4 degrees lower.

Do some of you guys know why this is happening?

Code:

type: custom:vertical-stack-in-card
cards:
  - square: false
    type: grid
    columns: 3
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.sensor_temperatuur_woonkamer_tuya_temperature
        primary_info: name
        secondary_info: state
        name: Woonkamer
        icon_color: orange
        icon: ''
        fill_container: true
        icon_type: none
        justify_text: center
        style: |
          ha-card {
            --secondary-text-color: rgb(241, 157, 56);
          position: relative;
          left: 5%;
          top: 4%;
          font-size: 18px; 
          margin-top: 0px; 
          }
      - type: custom:mushroom-entity-card
        entity: sensor.hue_motion_sensor_1_temperature
        primary_info: name
        secondary_info: state
        name: Slaapkamer
        icon_color: blue
        icon_type: none
        justify_text: center
        style: |
          ha-card {
            --secondary-text-color: rgb(73, 148, 236);
          position: relative;
          left: 11%;
          top: 4%;
          font-size: 18px; 
          margin-top: 0px; 
      - type: custom:mushroom-entity-card
        entity: sensor.hal_bewegingssensor_groene_deur_temperature
        primary_info: name
        secondary_info: state
        name: Hal
        icon_color: green
        icon: mdi:thermometer
        icon_type: none
        justify_text: center
        style: |
          ha-card {
            --secondary-text-color: rgb(103, 173, 91);
          position: relative;
          left: 22%;
          top: 4%;
          font-size: 18px; 
          margin-top: 0px; 
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.sensor_temperatuur_woonkamer_tuya_temperature
        name: Temperatuur
        color: var(--orange-color)
      - entity: sensor.hue_motion_sensor_1_temperature
        name: Temperatuur
        color: var(--blue-color)
        y_axis: secondary
      - entity: sensor.hal_bewegingssensor_groene_deur_temperature
        name: Temperatuur
        color: var(--green-color)
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Try more points per hour on the mini-graph-card:

        color: var(--green-color)
        y_axis: secondary
    hours_to_show: 24
    points_per_hour: 30
    line_width: 3
    font_size: 50
1 Like

Unfortunately this will not help. Yesterday I changed the temperature Woonkamer to 60 degrees in the developer tools setting, to test the sensor. Maybe that can be the problem? It looks like after setting it to 60 for the test the line is completely flat?

Yes this is definetly the problem.

Yes that looks like a 60 degree spike that changes the scale of the probe.

Try lower_bound and upper_bound to define the scale exactly.

I tried lower_bound and upper_bound but the line is still incorrect. Is there a way to delete the test setting (60 degrees) in the graph/for the records?.

I really don’t know how to do that :frowning: .

your only showing 24 hours, so it will start to be correct once time has past.

2 Likes

thank you very much :grinning:
it was the last thing that didn’t work on my desk dashboard now it’s finally aesthetically coherent

1 Like

How about showing it off here? :wink: :slight_smile:

I love this simple, compact, design! I’m trying to use your code but could use a little help on how you setup your input booleans and what your scenes do.

Figured out a way for you to do both.

You were on the right path with a script.
You need browser mod and the device needs to be registered with browser mod for this to work.

Test Card Config
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
icon_color: |-
  {% if states('input_boolean.alarm_skip') == 'on' %}
    green
  {% else %}
  {% endif %}
tap_action:
  action: call-service
  service: script.test
  target: {}

Script Code (delay added to be able to see color change. Can be removed)
alias: Test
sequence:
  - service: input_boolean.toggle
    data: {}
    target:
      entity_id: input_boolean.alarm_skip
  - delay:
      hours: 0
      minutes: 0
      seconds: 5
      milliseconds: 0
  - service: browser_mod.navigate
    data:
      path: /lovelace/lounge
    target:
      device_id: c5b9282646c4fffe6d84ede882726e63
mode: single
1 Like

Not sure which input booleans you mean

  • input_boolean.vacuum_auto_start - helper to control automation/notifications I set for vacuum. On the card, it controls the icon color to display the current automation state on/off

  • input_boolean.vacuum_[room_name] - these are helpers to store preferences if the room should be cleaned or not with the “play-list” button. On the card, it controls the background color of the room button.

    • It is further utilized in a script that retrieves room settings for cleaning
Script
alias: Vacuum Selected Rooms
sequence:
  - service: vacuum.send_command
    data:
      command: app_segment_clean
      params:
        - segments: >-
            {%- set ns = namespace(ids=[]) %} {%- if
            is_state('input_boolean.vacuum_bathroom', 'on') %}
              {% set ns.ids = ns.ids + [24] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_bedroom', 'on')
            %}
              {% set ns.ids = ns.ids + [19] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_hallway', 'on')
            %}
              {% set ns.ids = ns.ids + [16] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_kitchen', 'on')
            %}
              {% set ns.ids = ns.ids + [22] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_living_room',
            'on') %}
              {% set ns.ids = ns.ids + [23] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_technical', 'on')
            %}
              {% set ns.ids = ns.ids + [18] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_toilet', 'on') %}
              {% set ns.ids = ns.ids + [17] %}
            {%- endif %} {%- if is_state('input_boolean.vacuum_veronika_room',
            'on') %}
              {% set ns.ids = ns.ids + [20] %}
            {%- endif %} {{ ns.ids }}
          repeat: "{{ states('input_number.vacuum_repeat_count') | int }}"
    target:
      entity_id: vacuum.roborock_s7_2
mode: single
icon: mdi:robot-vacuum

More details about how to retrieve room IDs here

In terms of scene.fan_20 , those are actually irrelevant. The entity card requires some entity to be set although I only need the entity (icon) to call a service. I didn’t find a better solution. Only note that if you use e.g., input_boolean for that, the icon on the card will gray out when input_boolean state is off.

There are still a few things on my vacuum card I want to tackle

  • hold_action on room buttons - this is supposed to initiate cleaning the selected room. The script I am calling includes a repeat parameter that should specify vacuum repeat count for which I am using input_number.vacuum_repeat_count. I however did not manage to retrieve its value with the template on the card. In other words, this doesn’t work on the card for action: call-service data param
    • repeat: "{{ states('input_number.vacuum_repeat_count') | int }}"
  • I thought about adding a badge to the “play-list” button to indicate how many rooms are selected
  • I want to remove the “pause” button and only display it instead of the “play” or “play-list” button depending on what is currently running
3 Likes

@spacekiek Or you could possibly use the input_number helper, set a range 0 to 100, and step size 20. Then the mushroom number card works as expected.

But you would need to figure out how to control your device with the helper.

2 Likes

Thank you so much, i will try it now

1 Like

Let me know how it goes! i like your nav bar a lot, so keen to see results :slight_smile:

1 Like

The code works great if I had to move between pages. But I should show a card via local_conditional_card when I tap on the icon and I would also like the shape to be colored to be sure of the touch.