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

This is amazing. I’ve been playing with it for 24 hours and I keep changing things as I see other possibilities.

Also, the speed at which these guys are moving adding features based on requests is scary! :smiley:

Looking forward to see the future of this. As someone said, I see this one becoming a reference.

Thanks mate!

yes the graphs are mini graph cards, here is the config:

animate: true
decimals: 1
entities:
  - entity: sensor.lounge_humidity
    color: '#a1dcff'
    name: Lounge
  - entity: sensor.bedroom_humid_humidity
    color: '#316ade'
    name: Bedroom
  - entity: sensor.bathroom_humid_sensor_humidity
    color: '#19b6e6'
    name: Bathroom
name: House Humidity
hour24: false
hours_to_show: 24
line_width: 3
points: false
points_per_hour: 2
show:
  fill: fade
  icon_adaptive_color: false
4 Likes

sure can, here you go. FYI some of the cards like the tv remote are messy as I just used my old button card code from like a year ago and havnt cleaned it up, its on my todo list to redo that.

here is a link to my lovelace code as its to long to post here:

Google drive - lovelace

2 Likes

Hi there,

the TV remote is a bit of a mess tbh, im going to redo it with new stuff I have learnt and make it cooler. next on my project list. its made from custom button cards and vertical stacks with custom:layout-card as formatting for each row. I use this to set the columns:

layout_options:
      grid-template-columns: 35px 1fr 1fr 1fr 0px

here is the google drive file for my yaml code:
Google Drive YAML file

for the chips at the top I make a master card using condition chips with all the chips I want to show at different times/situations then I copy the code and paste it to every view. best to do this in yaml view to save time.

Hamburger view is a chip and the I use card mod to remove the home assistant menu, here is the card mod code for your themes mushroom yaml:

  card-mod-theme: "Mushroom"
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
3 Likes

This work is amazing, game changer! Completely redid my mobile dashboard thank you!

One question / request. I have some light dimmers but no color, the sliders are gold but my dashboard is blue and black. Any way to change to a custom color?

Does anyone know if it is possible to create line breaks in the template card?

2 Likes

love this! Do you mind sharing how you have the ‘sensor.time_of_day’ setup?

Hi there, the greeting is made from this template…

Good {{states('sensor.time_of_day')}} {{ user }}

It's {{states('sensor.outside_temp')}}° outside and {{states('weather.home')}}

and the sensor from this template:

  - platform: template
    sensors:
      time_of_day:
        value_template: >
          {% if now().hour < 5 %}Night{% elif now().hour < 12 %}Morning{% elif now().hour < 18 %}Afternoon{% else %}Evening{% endif %}
9 Likes

This is amazing, and I am so thankful that you included your code and the photos! Really helpful to be able to see what it should look like and how to get there. 1 question though, you have quite a lot of sensors, input booleans, and binary sensors which control a lot of the conditional chips. Are you able to share how you created those? Like home_away and the number of people home specifically!

Hello ! :mushroom:

The 1.1.1 version is out : https://github.com/piitaya/lovelace-mushroom/releases/tag/v1.1.1

Some features has been added :

  • Light chip.
  • Alam chip.
  • Chips alignement (center, start, end, justified)
  • Double tap action for all cards and chips.
  • And the horizontal layout for all cards

Capture d’écran 2022-02-17 à 19.11.18

Happy update :smiley:

13 Likes

Awesome additions! Just when I think I am as happy as can be with my new dashboards, these little tweaks go in and things keep getting better!

Just a note about the latest release. If you’ve set any cards to ‘vertical: true’, you’ll have to remove that line for the yaml in order to get back to the visual editor. This is due to the new syntax for the card layouts.

you rock mate! thanks for all the amazing updates so far!

Hi there, happy to help :smile:

For the home/away its just an input boolean (helper) that is turned on/off via device tracking, I use it to start my home/away scripts and to choose what chips should be shown.

number of people is a template sensor, I have added some useful templates below for your reference:

sensor:

      time_of_day:
        value_template: >
          {% if now().hour < 5 %}Night{% elif now().hour < 12 %}Morning{% elif now().hour < 18 %}Afternoon{% else %}Evening{% endif %}
          
      ha_update_available:
        friendly_name: "HA Update Available"
        value_template: >-
          {{ not is_state( "sensor.ha_available_version", states("sensor.ha_current_version") ) }}
          
          
      number_of_persons_home:
        friendly_name: "Number of persons home"
        icon_template: mdi:account-circle
        value_template: >-
          {% set count = namespace(value=0) %}
          {% for entity_id in state_attr('group.home_users','entity_id') %}
            {% if (states(entity_id) == 'home') %}
              {% set count.value = count.value + 1 %}
            {% endif %}
          {% endfor %}
          {{ count.value }}          
          
      only_person_home:
        friendly_name: "Only Person Home"
        icon_template: mdi:account-circle
        value_template: >-
          {% for entity_id in state_attr('group.home_users','entity_id') %}
            {% if (states(entity_id) == 'home') %}
              {{ states[entity_id].attributes.friendly_name }}
            {% endif %}
          {% endfor %}        
          
      number_of_motion_sensors_on:
        friendly_name: "Number of Motion Sensors On"
        icon_template: mdi:run
        value_template: >-
          {% set count = namespace(value=0) %}
          {% for entity_id in state_attr('group.all_motion_sensor_entities','entity_id') %}
            {% if (states(entity_id) == 'on') %}
              {% set count.value = count.value + 1 %}
            {% endif %}
          {% endfor %}
          {{ count.value }}
          
      only_motion_sensor_on:
        friendly_name: "Only Motion Sensor On"
        icon_template: mdi:run
        value_template: >-
          {% for entity_id in state_attr('group.all_motion_sensor_entities','entity_id') %}
            {% if (states(entity_id) == 'on') %}
              {{ states[entity_id].attributes.friendly_name }}
            {% endif %}
          {% endfor %}
          
          
      only_light_on:
        friendly_name: "Only Light On"
        icon_template: mdi:lightbulb
        value_template: >-
          {% for entity_id in state_attr('group.all_light_entities','entity_id') %}
            {% if (states(entity_id) == 'on') %}
              {{ states[entity_id].attributes.friendly_name }}
            {% endif %}
          {% endfor %}
          
          
      number_of_lights_on:
        friendly_name: "Number of lights on"
        icon_template: mdi:lightbulb
        value_template: >-
          {% set count = namespace(value=0) %}
          {% for entity_id in state_attr('group.all_light_entities','entity_id') %}
            {% if (states(entity_id) == 'on') %}
              {% set count.value = count.value + 1 %}
            {% endif %}
          {% endfor %}
          {{ count.value }}

hope this helps you, let me know if you need more info

12 Likes

Screenshot 2022-02-18 at 08.45.21
Hello, is there is a way to add more information in person card (where red square is)? Like steps, distance walked…

It’s not possible but you can mix cards :

Capture d’écran 2022-02-18 à 09.47.06

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.paul
  - type: custom:mushroom-template-card
    primary: 'Steps today : {{ states("sensor.paul_steps") }}'
    secondary: 'Distance walked: {{ states("sensor.paul_distance_walked") }} km'
5 Likes

Another great update for these great cards!

I’m having doubts about how to use the chip cards in my layout. I want to center the chips above 2 columns (a bit like the badges would line out). At the moment I’m using the custom layout card to create a grid, this way it’s responsive and the dashboard works on all our devices. But the grid is more work to update, breaks the ui editor and makes the whole setup more complicated then needed.

Any ideas? the layout looks like this:

34 Likes

Great new update!
Just 2 thing:

  • Is it possible to have a bigger slider in the horizontal view ?
    image

  • In the template card, i can’t manage to add break line. How cann i do that?

Thanks a lot for all your work!

2 Likes

That looks really nice! Care to share some more screenshots of your setup for inspiration? :smiley:

Wow… nice. How do i get sidebar like yours?

It’s the “Custom sidebar card”: https://github.com/DBuit/sidebar-card

1 Like