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

pbohannon · August 12, 2022, 8:43pm

Thanks for all that you’ve shared already! Your examples have given me and I’m sure others a nice base and some cool things to chase after. I can say that I’m guilty of peeking back from time to time to see whether you’re at a place where you’ve shared your code as there are plenty of sticking points, but thanks for considering it anyway and sharing your progress.

As a specific example, do you mind to share a snippet or two as to your implementation of the sidebar card for your tablet/expanded view?

leeb98 · August 13, 2022, 4:55am

Aussie broadband too

Tim_Knowlden · August 13, 2022, 10:33am

Replaced the Ultrasonic for another and working now, Can you share your calls with me? my salt bin max is actually around 37cm but the sensor is 43cm from the bottom.

image969 · August 13, 2022, 2:07pm

Does custom stack-in card still work? I can’t get it to show Up after installing it woth HACS, restarting and clearing cache.

Need to make a vertical stack without seeing the borders so it looks like one card.

Boostin4HP · August 13, 2022, 6:05pm

What is everyone doing for their door locks and door sensors? I can’t come up with a good way to combine the lock card and door open/closed sensor card together for a cleaner look. I can’t stand how this currently looks.

hainesy · August 13, 2022, 6:16pm

Here you go:

esphome:
  name: salt_level_sensor
  platform: ESP8266
  board: d1_mini

# WiFi connection, replace these with values for your WiFi.
wifi:
  ssid: xxxxx
  password: xxxxx

# Enable logging
logger:

# Enable Home Assistant API
api:

# Enable over-the-air updates.
ota:

# Enable Web server.
web_server:
  port: 80
# Sync time with Home Assistant.
time:
  - platform: homeassistant
    id: homeassistant_time

# Text sensors with general information.
text_sensor:
  # Expose ESPHome version as sensor.
  - platform: version
    name: salt_level_sensor ESPHome Version
  # Expose WiFi information as sensors.
  - platform: wifi_info
    ip_address:
      name: salt_level_sensor IP
    ssid:
      name: salt_level_sensor SSID
    bssid:
      name: salt_level_sensor BSSID

# Exposed switches.
# Switch to restart the salt_level_sensor.   
switch:
  - platform: restart
    name: "salt_level_sensor Restart"

sensor:
  # Uptime sensor.
  - platform: uptime
    name: salt_level_sensor Uptime

  # WiFi Signal sensor.
  - platform: wifi_signal
    name: salt_level_sensor WiFi Signal
    update_interval: 60s

  - platform: ultrasonic
    trigger_pin: D1
    echo_pin: D2
    name: "saltlevel_in_percent"
    update_interval: 12h
    filters:
    # Calculates in %
    # MARK: Subtract depth reading from total height of hopper and divide that by max usable height of hopper to give total capacity percentage. Multiply by 100 to give %
    - lambda: return ((0.46-x)/0.35)*100;
    unit_of_measurement: "%"
    
  - platform: ultrasonic
    trigger_pin: D1
    echo_pin: D2
    name: "saltlevel_in_cm"
    update_interval: 12h
    filters:
    # MARK: Exact distance of sensor to bottom of hopper, with x output * 100 to change m to cm
    - lambda: return 46-(x*100);
    unit_of_measurement: "cm"
    
  - platform: ultrasonic
    trigger_pin: D1
    echo_pin: D2
    name: "raw_sensor_in_cm"
    update_interval: 12h
    filters:
    # MARK: Raw distance output * 100 to get m to cm - only used for validation.
    - lambda: return x*100;
    unit_of_measurement: "cm"

theandouz · August 13, 2022, 8:12pm

I combined the two cards using a template card and the lock card so that it only takes one card, I have indicators on my home page to show if the doors are open and unlocked as well so this is more than enough for my needs

snairolf · August 14, 2022, 1:45am

Could you share the code for your temperature card please?

KTibow · August 14, 2022, 1:47am

If you’re talking about the graph, it’s

stack-in-card
- horizontal row
  - mushroom entity card
  - mushroom entity card
- mini graph card

Boostin4HP · August 14, 2022, 2:37am

Woah, I like that a lot, can you please share the code? Thanks in advance!

pbohannon · August 14, 2022, 7:24am

Mine isn’t quite the same as the poster to whom you replied, but similar concept I think. Here’s my code if you’re interested and if it helps at all. Clicking will trigger the lock since it’s the controlling entity.

type: custom:mushroom-template-card
    entity: '[[entity]]'
    primary: '[[primary]]'
    secondary: |
      {% if states('[[door_entity]]') == 'off' %}
        Closed
      {% else %}
        Open
      {% endif %}
      /
      {{ states('[[entity]]')[0] | upper }}{{ states('[[entity]]')[1:] }}
    icon: |
      {% if is_state('[[door_entity]]', 'off') %}
        mdi:door-closed
      {% elif is_state('[[door_entity]]', 'on') %}
        mdi:door-open
      {% endif %}
    icon_color: |
      {% if is_state('[[door_entity]]', 'off') %}
        green
      {% elif is_state('[[door_entity]]', 'on') %}
        red
      {% endif %}
    badge_icon: |
      {% if is_state('[[entity]]', 'locked') %}
        mdi:lock
      {% elif is_state('[[entity]]', 'unlocked') %}
        mdi:lock-open
      {% endif %}
    badge_color: |
      {% if is_state('[[entity]]', 'locked') %}
        green
      {% elif is_state('[[entity]]', 'unlocked') %}
        red
      {% endif %}
    card_mod:
      style: |
        ha-card {

          border-radius: 30px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 2px;
        }
        :host([dark-mode]) {
            background: rgba(var(--rgb-primary-background-color), 0.2);    
        }

- type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        cards:
          - type: custom:mushroom-title-card
            subtitle: Open, Close, Lock
          - type: horizontal-stack
            cards:
              - type: custom:decluttering-card
                template: door-with-lock
                variables:
                  - entity: lock.front_door
                  - primary: Front Door
                  - door_entity: binary_sensor.front_door_entry
              - type: custom:decluttering-card
                template: door-with-lock
                variables:
                  - entity: lock.back_door
                  - primary: Back Door
                  - door_entity: binary_sensor.back_door_entry

rvdbrink · August 14, 2022, 7:41am

How can I hide the state text, so I only see the icon?
I have this card:

type: conditional
conditions:
  - entity: binary_sensor.nice_outside
	state: 'on'
chip:
  type: entity
  entity: binary_sensor.nice_outside

I looking for while but can’t find the answer. I tried to set the hide_state and more but none of them works. Or is there a way to use the type: template to show only the icon.

adijk74 · August 14, 2022, 9:20am

I use it like this:

type: conditional
conditions:
  - entity: group.badkamer
    state: 'on'
chip:
  type: template
  icon_color: red
  icon: mdi:window-open-variant
  entity: group.badkamer
  content: ''

tempus2016 · August 14, 2022, 10:32am

Could you use the template card and have the icon show the status of the lock then use badges to show the status of the sensors? Then have the card toggle the lock status.

Apollo · August 14, 2022, 10:34am

Good Day,

Anyone knows how to make a Mushroom Template Card ‘reactive’ (change color or icon), same as the HA Button card that change color when pressed.
I am trying to use a Template Card as a ‘button’ for a script or shell command, but I have not find a way of visually knowing the template card was indeed being pushed. (tap_action:)
I know I can use the date stamp for when the script was executed and have that change the color/icon of the template card, but I was hoping it was a more straight forward approach? Appreciate anyone’s suggestions or ideas. Thanks

tempus2016 · August 14, 2022, 11:18am

What are you using to track the current position of your tv show?

berkans · August 14, 2022, 11:44am

These are very beautiful words. Really. Thank you very much.

Lately I have decided to get rid of some third party add-ons because of the dependincies to them may cause problems in future updates. As for sidebar it has some bugs at the moment especially with the the bottom bar not displaying things properly. So I decided to delete that as well.

Currently I am still working on my mobile view. I will share the code if I can manage to complete sooner. And after that I am also planing to do something for the tablet view.

cowboysdude · August 14, 2022, 11:51am

pbohannon:

type: custom:mushroom-template-card
    entity: '[[entity]]'
    primary: '[[primary]]'
    secondary: |
      {% if states('[[door_entity]]') == 'off' %}
        Closed
      {% else %}
        Open
      {% endif %}

This is what I’m trying to learn here… the concept of using variables such as ‘[[entity]]’
Not sure how that’s done.
Care to perhaps share a little insight on that if you would.

Thank you and great card!

cowboysdude · August 14, 2022, 12:56pm

That’s awesome!!!

Thank you!

cowboysdude · August 14, 2022, 12:58pm

This is what I use… you can modify it to make it work for you…

             - type: custom:mushroom-template-card
                layout: vertical
                secondary: 'Battery: {{ state_attr(entity, "battery") }}%'
                entity: lock.front_door_lock_2
                primary: |
                  {% if is_state(entity, 'unlocked') %}
                  Door is Unlocked
                  {% else %}
                  Door is Locked
                  {% endif %}
                icon_color: |
                  {% if is_state(entity, 'unlocked') %}
                  red
                  {% else %}
                  green
                  {% endif %}
                icon: |
                  {% if is_state(entity, 'unlocked') %}
                  mdi:lock-open
                  {% else %}
                  mdi:lock
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      background-color: {{ 'rgba(255,114,118, 0.4)' if is_state('lock.front_door_lock_2', 'unlocked') else 'rgba(147, 227, 215, 0.2)' }};
                      height:170px !important;
                    }
                    mushroom-shape-icon {
                      {{ 'animation: blink 1.3s ease-in-out infinite;' if is_state('lock.front_door_lock_2', 'unlocked') }}
                    }
                    @keyframes blink {
                      50% {opacity: 0.1;}
                    }

Examples:
Unlocked:

Locked:
locked