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

Share your Projects!
,
1962

And actually, I can get to it by clicking the media icon on the left. I was just hoping to get one click select.

1963

Using the card layout as I did, you should be able to place any card on top right. So reorganize entities /cards you already have to acheive your wish. Cards are yaml code and relies on existing entities, so noboby can do it from 1 screenshot

1 Like
1964

Is there a way to set templatable parameters in a conditional chip card (or add conditions to a template chip card??)

At the moment Iā€™m using the state switch card together with the template chip card but itā€™s causing weird formatting problems (it is creating line breaks in some but not all of my template chip cards)

Thanks!

1 Like
1965

Is this a sensor you created and if so could you please shareā€¦

binary_sensor.updater

1966

I like your media control page. Is this a special card I can use as well?

1967

I was working on something similar and Have used this here:

type: custom:swipe-card
card_width: 100px
parameters:
  slidesPerView: auto
  spaceBetween: 10
cards:

Maybe you need do adjust the card widthā€¦

1968

How do you get the squeezebox page in HA? Or is it just iframe?
I am searching for a long time for a good LMS lovelace card, but it seems it doesnā€™t exist.

1969

hey mate, im like what you have done.

Question your first Tab seems to have alot of info, so you dont mind scrolling i guess??

1970

Whats the best way to accomplish the task of seeing all lights that are on? I have this conditional chip card which then opens to my light group (just a few for testing).

But Iā€™d like to ONLY see lights that are on. Is that possible?

image

image
image561Ɨ616 38.8 KB

1971

Have the Conditional Chip open a Conditional card,

1972

Use Auto entities to show lights that are on with Card-mod Popup

1973

Youā€™d probably need to do it how heā€™s doing it. Create a drop down helper with all the source names and then use conditional cards. When Input equals x then play on the correct source.

1974

Thanks! Iā€™ll try this.

1975

The players are the ā€œmini media playerā€ cards. The music page is a webpage card (iframe) that shows the Squeezebox server layout.

1976

I use the single card iframe page to show the LMS site. With the ā€œMaterial skinā€ installed on your LMS this works very well, also when using HA on mobile. The Material skin also allows you to use an iframe card to use on your dashboard that scales nicely

1977

With the new climate card. Iā€™m trying to use what I created with a vertical stack card on my tablet dashboard.

Does anyone know why the icon doesnā€™t show using this code?

type: vertical-stack
cards:
  - type: custom:mushroom-climate-card
    entity: climate.daniel_s
    show_temperature_control: false
    hvac_modes:
      - cool
      - 'off'
      - heat
    layout: horizontal
    icon: |-
      {% set mode = states('climate.daniel_s') %}
      {% if mode == 'off' %}
      mdi:fan-off
      {% elif mode == 'cool' %}
      fas:fan
      {% elif mode == 'heat' %}
      mdi:fire
      {% else %}
      mdi:home-thermometer
      {% endif %}
    icon_color: |-
      {% set status = state_attr('climate.daniel_s','hvac_action') %}
      {% if status == 'idle' %}
      grey
      {% elif status == 'cooling' %}
      blue
      {% elif status == 'heating' %}
      red
      {% else %}
      grey
      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon:
          $: |
            .shape ha-icon {
                {% set status = state_attr('climate.daniel_s','hvac_action') %}
                {% if status == 'cooling' or status == 'heating' %}
                  --icon-animation: rotation 1s linear infinite;
                {% endif %}
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
          .: |
            mushroom-shape-icon {
              --shape-color: none !important;
            }
            ha-card {
              padding-bottom: 14px !important;
            }

Screenshot_20220721-082004_Home Assistant
Screenshot_20220721-082004_Home Assistant1080Ɨ2220 260 KB

1979

Because the icon doesnā€™t support template

1980

Code for this would be amazing.

1981

Are there animated icons that can be used or should the css option?

Hereā€™s my icon situationā€¦

icon: |
              {% if is_state('climate.john_s_device', 'cool') %}
              mdi:fan
              {% else %}
              mdi:fan
              {% endif %}
            use_light_color: false
            icon_animation: true

Had to try but itā€™s not workingā€¦

Thank you!

1982

Yes, you can animate the border shadow like this:

Border Pulse

type: custom:mushroom-template-card
primary: Warning
secondary: null
icon: mdi:radioactive
icon_color: red
card_mod:
  style: |
    ha-card {
      animation: borderPulse 2s ease-out infinite;
    }
    @keyframes borderPulse {
      50% {
        box-shadow: 0 0 20px red;
      }
    }
11 Likes