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

Share your Projects!
,
5934

So I have this template card:

type: custom:mushroom-template-card
entity: sensor.african_violet_moisture
icon: mdi:water
icon_color: |-
  {% set state = states('sensor.african_violet_moisture')|float(-1) %}
  {% if state >= 60 %} orange
  {% elif state >= 15 %} green
  {% else %} red
  {% endif %}
primary: African Violet Moisture
secondary: '{{ states(entity) | int }} %'

image
image921Ɨ65 45.6 KB

Works great. Except when the sensor goes randomly unavailableā€¦

image
image932Ɨ73 45.3 KB

What can I add to that template to make me aware that sensor is unavailable?

5935

It works perfect, thanks!!

1 Like
5936

You would need catch the unavailable condition with something like this:

type: custom:mushroom-template-card
entity: sensor.african_violet_moisture
icon: mdi:water
icon_color: |-
  {% set state = states(entity) | float(-1) %}
  {% if state >= 60 %} orange
  {% elif state >= 15 %} green
  {% else %} red
  {% endif %}
primary: African Violet Moisture
secondary: |-
  {% set state = states(entity) %}
  {% if state != 'unavailable' %}
    {{ state | int }} %
  {% endif %}
badge_icon: '{{ ''mdi:help'' if is_state(entity, ''unavailable'') }}'
badge_color: orange
2 Likes
5937

all I want is for the lock icon to show red when unlocked and green when locked, and a tap to unlock it. IT all works as it should apart from the green on lock. The card is part of a 4 item vertical stack, with grid layout for positioning the cards within browsermod. below is what I have at the moment.

type: vertical-stack
cards:
  - type: custom:mushroom-entity-card
    entity: binary_sensor.alarm_front_door_locked
    name: Front Door
    icon_color: red
    tap_action:
      action: call-service
      service: switch.turn_on
      data: {}
      target:
        entity_id: switch.sonoff_10008bf604_1
    secondary_info: none
    layout: vertical
    icon: mdi:lock-open-alert
    card_mod:
      style: |
        ha-card {
          --icon-size: 100px;
           background: transparent;
           border-style: none;
5938

Screenshot 2023-03-14 at 11.14.56
Screenshot 2023-03-14 at 11.14.561362Ɨ482 53 KB

Iā€™m trying to edit the font-weight for a title card but I canā€™t seem to figure out how. Any ideas?

5939

Hi guys.
I like reading this thread everyday to get inspired with these awesome cards.
I have a question about the media card. Iā€™m using rhysb media card and when watching Youtube on my apple TV, i get no thumbnail due to the Youtube app on the apple TV.
My question is, is it possible to display a youtube logo when the apple tvā€™s attribute is ā€˜app_id: com.google.ios.youtubeā€™?

here is my code for the card so far:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.wohnbereich_apple_tv
    name: Apple TV
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    volume_controls:
      - volume_buttons
      - volume_set
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% elif media_type == 'movie' %}
            --card-mod-icon: mdi:movie-roll;
            animation: spin 2s linear infinite reverse;
          {% elif media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

          {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

        }
        @keyframes flicker {
          0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
          32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
        }
        @keyframes beat {
          0%, 60% { --icon-symbol-size: 21px; }
          5%, 17%, 57% { --icon-symbol-size: 22px; }
          10%, 20%, 51% { --icon-symbol-size: 23px; }
          25%, 45% { --icon-symbol-size: 24px; }
          30%, 39% { --icon-symbol-size: 25px; }
          33% { --icon-symbol-size: 26px; }
        }
        ha-card {
          --ha-card-border-width: 0;
        }
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";

          background: url('/local/apple-tv-icon.jpg') center no-repeat;
          {% if not is_state(config.entity, 'idle') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

          background-size: contain;
          margin: 4px 4px 16px;
          filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            aspect-ratio: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.wohnbereich_apple_tv
        state_not: 'off'
      - entity: media_player.wohnbereich_apple_tv
        state_not: idle
    card:
      entity: media_player.wohnbereich_apple_tv
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/apple-tv-icon.jpg') center no-repeat;
      {% if not is_state('media_player.wohnbereich_apple_tv', 'idle') %}
        background: url( '{{ state_attr('media_player.wohnbereich_apple_tv', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

Screenshot 2023-03-14 112308
Screenshot 2023-03-14 112308649Ɨ753 15.1 KB

5940

Perfect, thank you so much!

1 Like
5941

try mushroom-tite-card instead of ha-card.

5942

@rhysb

Is it possible to use a template card for light entities (which RGB?)

I have several lights (Hue lights with a smart plug) that are not available at all time but i do not want to show this state (unavailable).

5943

You mean ha-card instead of mushroom-title-card? Yeah doesnā€™t seem to work.

5944

Try something like this:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Hello, {{ user }} !
  subtitle: test
card_mod:
  style:
    mushroom-title-card$: |
      .title {
        font-size: 18px !important;
        font-weight: 600 !important;
      }
      .subtitle {
        #do something with subtitle
      }
    .: |
      ha-card {
        background: red;
      }
1 Like
5945

mush-card

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: |-
      {% set time = now().hour %}
      {% if (time >= 21) %}
        Good Night, {{user}} !
      {% elif (time >= 17) %}
        Good Evening, {{user}} !
      {% elif (time >= 12) %}
        Good Afternoon, {{user}} !
      {% elif (time >= 6) %}
        Good Morning, {{user}} !
      {% else %}
        Hello, {{user}} !
      {% endif %}
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    chips:
      - type: weather
        entity: weather.ecobee
        double_tap_action:
          action: none
        show_conditions: true
        show_temperature: true
        tap_action:
          action: more-info
        hold_action:
          action: none
      - type: template
        double_tap_action:
          action: none
        entity: sensor.lights_on
        icon: |-
          {% if (states('sensor.lights_on') | int >= 1) %} mdi:lightbulb-group
          {% else %} mdi:lightbulb-group-off
          {% endif %}
        icon_color: |-
          {% if (states('sensor.lights_on') | int >= 1) %} amber
          {% else %} grey
          {% endif %}
        content: |-
          {% if (states('sensor.lights_on') | int == 0) %}{0}
          {% else %} {{ states('sensor.lights_on') | int }}
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
    alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: House
        secondary: ''
        icon: mdi:home
        icon_color: blue
        layout: vertical
        fill_container: false
        tap_action:
          action: navigate
          navigation_path: /mobile-view/home
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: Lights
        secondary: ''
        icon: mdi:lightbulb
        layout: vertical
        icon_color: '#FFFF99'
        tap_action:
          action: navigate
          navigation_path: lights
      - type: custom:mushroom-template-card
        primary: Security
        secondary: ''
        icon: mdi:security
        icon_color: green
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        tap_action:
          action: navigate
          navigation_path: security
      - type: custom:mushroom-template-card
        primary: AD Guard
        secondary: ''
        icon: mdi:check-network
        icon_color: '#FF66FF'
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        tap_action:
          action: navigate
          navigation_path: ad-guard
      - type: custom:mushroom-template-card
        primary: System
        secondary: ''
        icon: mdi:raspberry-pi
        icon_color: '#FFB266'
        hold_action:
          action: none
        double_tap_action:
          action: none
        tap_action:
          action: navigate
          navigation_path: /mobile-view/hardware
        layout: vertical
    card_mod:
      style: |
        mushroom-template-card {
          border: none;
          box-shadow: none;
        }

Can someone help me with the code I want to remove the border for just the mushroom-template-cards (i added the card-mod but its not working, it does work if enter it under individual template-card but that would mean I have repeat the same code over and over again which is pointless)
and I want to appear as pills if possible to reduce the dead space around the cards
If possible I would also like to have the 2 chips sizes to be same, i.e whatever the size of the weather chip is make the same size for my template chip

5946

I realize your radio card has been posted almost a year ago but Iā€™m just getting to it. I was wondering why did you call the three top buttons spotify buttons when you are actually calling up the radio scripts. Did you ever figure out how to actually make those real spotify buttons that would either start a song or a playlist? Thanks for sharing. iā€™m using it

5947

Yes! Thank you!

5948

Hello, First of all, thank you for such a great and beautiful feature. Iā€™m wondering if itā€™s possible to customize the controls from the climate card? For example, when I hit the control to adjust the temperature to a higher level or a lower level, then it needs to activate an automation to control my duux heater.

Thank you in advance.

5949

example
card_mod:
style: |
{%if is_state(ā€˜light.salonā€™,ā€˜onā€™)%}
ha-card {
height: 100px !important;
border: solid #B8860B;
box-shadow: 0px 0px 9px 1px #DAA520;
background-image: url(ā€™/local/sufragerie1.jpgā€™),linear-gradient(to left, transparent, rgba(var(ā€“rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
ā€“primary-text-color: #DAA520;
ā€“secondary-text-color: #447FA6;
ā€“card-primary-font-size: 20px;
ā€“card-secondary-font-size: 11px
}
{% else %}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url(ā€™/local/sufragerie1.jpgā€™),linear-gradient(to left, transparent, rgba(var(ā€“rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
ā€“primary-text-color: #447FA6;
ā€“secondary-text-color: #447FA6;
ā€“card-primary-font-size: 20px;
ā€“card-secondary-font-size: 11px

}
{%endif%}

hello, i have this card and when i set the dark mode in hassio the gradient of the photo is not like in light mode. someone can help me?

1 Like
5950

I have already asked in the card-mod thread but Iā€™m taking my chances here too :slight_smile:

I have a sticky mushroom card that I want it too have different behavior in the home assistant app and the browser. The card-mod documentation states that a browser variable is available to use with jinja templates. I used the code bellow but it doesnā€™t work, so I obviously doing something wrong.

Any ideas?

  {% if browser == 'pixel7-app' %}
        top: 2px;
      {% else %}
        top: var(--header-height); 
      {% endif %}

Any ideas how can I solve this one with another way? I canā€™t find any info how to you the browser variable.

Maybe @rhysb have a solution to that?

5951

try my code
HA Phone Dashboard by Sinan (github.com)

5952

Hi @rhysb, could you please guide me on how to apply an icon animation and remove the ha-card-border? I have attempted to do so, but when I apply the ā€œā€“ha-card-border-width: 0;ā€ property, it also removes the icon animation. Thank you in advance.

Borders

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Master
    secondary: |-
      {% if is_state('binary_sensor.nest_protect_master', 'off') %}
        Clear
      {% else %}
        Detected - {{ as_timestamp(states.binary_sensor.nest_protect_master.last_changed) | timestamp_custom('%-I:%M %p') }}
      {% endif %}
    icon: mdi:smoke-detector
    icon_color: >-
      {{ 'blue' if is_state('binary_sensor.nest_protect_master', 'on') else
      'disabled' }}
    entity: binary_sensor.nest_protect_master
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state('binary_sensor.nest_protect_master', 'on') %}
              --shape-animation: ping 2s infinite;
            {% endif %}
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            
            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.master
        icon_color: red
        icon: mdi:fire
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'rgba(var(--rgb-red),0.2)' if is_state(config.entity, 'on') else 'rgba(var(--rgb-primary-text-color), 0.05)' }};
              --icon-color: rgb(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-white' }}));
              --chip-border-width: 0;
            }
            .content {
              {% if is_state(config.entity, 'on') %}
                animation: fire 1.5s infinite;
                transform-origin: 50% 85%;
              {% endif %}
            }
            @keyframes fire {
                0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
            } 
      - type: entity
        entity: binary_sensor.master_2
        icon_color: orange
        icon: mdi:gas-cylinder
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'rgba(var(--rgb-orange),0.2)' if is_state(config.entity, 'on') else 'rgba(var(--rgb-primary-text-color), 0.05)' }};
              --icon-color: rgb(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-white' }}));
              --chip-border-width: 0;
            }
            .content {
              {% if is_state(config.entity, 'on') %}
                animation: shake 400ms ease-in-out infinite;
                transform-origin: 50% 90%;
                clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 33% 62%);
              {% endif %}
              transform-origin: 50% 90%;
            }
            @keyframes shake {
              0%, 100% { transform: rotate(3deg); }
              50%  { transform: rotate(-3deg); }
            }
      - type: entity
        entity: binary_sensor.master_3
        icon_color: green
        icon: mdi:motion-sensor
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'rgba(var(--rgb-green),0.2)' if is_state(config.entity, 'on') else 'rgba(var(--rgb-primary-text-color), 0.05)' }};
              --icon-color: rgb(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-white' }}));
              --chip-border-width: 0;
            }
            .content {
              {% if is_state(config.entity, 'on') %}
                animation: beat 1.3s ease-out infinite both;
                transform-origin: 50% 60%;
              {% endif %}
            }
            @keyframes beat {
              0% { transform: scale(1); }
              10% { transform: scale(1.1); }
              17% { transform: scale(1.05); }
              33% { transform: scale(1.25); }
              60% { transform: scale(1); }
            }   
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }
5953

How can I change the color of the symbol inside of the circle?
Screenshot 2023-03-16 at 08.46.58