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

But if i dont use protect and only use NETWORK i can do this integration ?

Can you show your code fro this card with cpu and memory ?

Use the waze integration for this one

Of course.

        type: horizontal-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: CPU
                secondary: UDM-Pro
                icon: phu:unifi
                layout: vertical
                entity: sensor.unifi_gateway_wan_cpu
                icon_color: |2-
                            {% set bl = states('sensor.unifi_gateway_wan_cpu') | int %}
                            {% if bl < 10 %} green
                            {% elif bl < 20 %} green
                            {% elif bl < 30 %} green
                            {% elif bl < 40 %} green
                            {% elif bl < 50 %} orange
                            {% elif bl < 60 %} orange
                            {% elif bl < 70 %} red
                            {% elif bl < 80 %} red
                            {% elif bl < 90 %} red
                            {% elif bl < 100 %} red
                            {% elif bl == 100 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0px 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.unifi_gateway_wan_cpu'')}} %'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: RAM
                secondary: UDM-Pro
                icon: mdi:memory
                layout: vertical
                entity: sensor.unifi_gateway_wan_mem
                icon_color: |2-
                            {% set bl = states('sensor.unifi_gateway_wan_mem') | int %}
                            {% if bl < 10 %} green
                            {% elif bl < 20 %} green
                            {% elif bl < 30 %} green
                            {% elif bl < 40 %} green
                            {% elif bl < 50 %} green
                            {% elif bl < 60 %} green
                            {% elif bl < 70 %} orange
                            {% elif bl < 80 %} orange
                            {% elif bl < 90 %} red
                            {% elif bl < 100 %} red
                            {% elif bl == 100 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.unifi_gateway_wan_mem'')}} %'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: TempƩrature
                secondary: UDM-Pro
                icon: mdi:thermometer
                layout: vertical
                entity: sensor.dalg_udm_cpu_temperature
                icon_color: |2-
                            {% set bl = states('sensor.dalg_udm_cpu_temperature') | int %}
                            {% if bl <= 40 %} green
                            {% elif bl <= 45 %} orange
                            {% elif bl >= 50 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.dalg_udm_cpu_temperature'')}}Ā°C'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }

Thank you so much for the detailed infoā€¦ though i didnt understand a major portion of itā€¦(not really a programmerā€¦ just hobby diyā€™s)ā€¦ anywaysā€¦ will try to understand the content with time as i proceed furtherā€¦ as i develop my dashboard furtherā€¦

1 Like

It counts the active items in the lights, windows, external doors and low batteries groups. If the count is greater than 0, then it turns the notification dot on.

You could replace the weather info card with this:

      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
        secondary: |-
          {% set conditions = {
                'clear-night': 'Clear, night',
                'cloudy': 'Cloudy',
                'fog': 'Fog',
                'hail': 'Hail',
                'lightning': 'Lightning',
                'lightning-rainy': 'Lightning, rainy',
                'partlycloudy': 'Partly cloudy',
                'pouring': 'Pouring',
                'rainy': 'Rainy',
                'snowy': 'Snowy',
                'snowy-rainy': 'Snowy, rainy',
                'sunny': 'Sunny',
                'windy': 'Windy',
                'windy-variant': 'Windy',
                'exceptional': 'Exceptional'
              } %}
        
          {{ conditions[state_attr(entity, 'forecast')[0]['condition']] }}        
        icon: none
        entity: weather.weatherflow_weather_hourly
        picture: >-
          {% set condition = states(entity)  %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          /local/weather_icons/anim/{{ condition }}.svg
        tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Weather
                content:
                  type: custom:layout-card
                  layout_type: masonry
                  layout: {}
                  cards:
                    - type: custom:weather-card
                      entity: weather.weatherflow_day_based_forecast
                      number_of_forecasts: '5'
        card_mod:
          style:
            mushroom-state-info$: |

              /* Align text on the right */
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
              }
            .: |
              ha-card {

                /* Move icon to the right */
                transform: scaleX(-1);

                /* Enlarge icon & remove circular shape */
                --icon-size: 42px;
                --icon-border-radius: 0;

                /* Style secondary text */
                --card-secondary-font-weight: normal;

                /* Remove styling from card */
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                
                transition: all 0s;
              }
2 Likes

Could you share or explain what are you using under the hood for sensor.devices_with_low_battery?

Have a look here:

2 Likes

image
image
As you can see 10 covers are open and no red dot

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ states(''sensor.current_date'') }} {{ states(''sensor.time'') }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.all_doors_sensor_entities) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count) 
              {% if notifications > 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: alarm_control_panel.maison
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_home' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              blue
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.maison
                  states:
                    - armed_home
                    - armed_away
          hold_action:
            action: none
        - type: template
          entity: lock.nuki_porte_entree_lock
          icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
          icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Front Door
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:layout-card
                      layout_type: masonry
                      layout: {}
                      cards:
                        - type: custom:frigate-card
                          cameras:
                            - camera_entity: camera.nvr_sub
                          dimensions:
                            aspect_ratio_mode: dynamic
                    - type: custom:mushroom-lock-card
                      entity: lock.nuki_porte_entree_lock
                card_mod:
                  style: |
                    .content {
                    }
        - type: conditional
          conditions:
            - entity: group.all_lights
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.all_lights
            content: >
              {{ expand(states.group.all_lights) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.all_doors_sensor_entities
              state: 'on'
          chip:
            type: template
            icon_color: |-
              {{ 'green' if is_state('group.all_doors_sensor_entities', 'off')
                            else 'red' }}
            icon: >-
              {{ 'mdi:door-closed' if
              is_state('group.all_doors_sensor_entities', 'off')
                            else 'mdi:door-open' }}
            entity: group.all_doors_sensor_entities
            content: >
              {{ expand(states.group.all_doors_sensor_entities) |
              selectattr('state', 'eq', 'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: AccĆØs Ouverts
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_doors_sensor_entities
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: cover.volets_maison
              state: open
          chip:
            type: template
            entity: cover.volets_maison
            content: >
              {{ expand(states.cover.volets_maison) | selectattr('state', 'eq',
              'open') | list | count }}
            icon_color: |-
              {{ 'blue' if is_state('cover.volets_maison', 'open')
                            else 'green' }}
            icon: >-
              {{ 'mdi:window-shutter-open' if is_state('cover.volets_maison',
              'open')
                            else 'mdi:window-shutter' }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Volets Ouverts
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: cover.volets_maison
                          state: open
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: var(--header-height);
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: var(--header-height);

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

Foe the weather iā€™d like to replace weatherflow with openweathermap for exemple

Is it possible to add a name to a mushroom chip card type entity?

Simple function idea to find phone. I like it. I just added timeout to it so do will no ring forever if you do not find your phone.

1 Like

Hey @rhysb, why is my top bar always transparent? :frowning:

Screen_Recording_20230329_200736_Home Assistant

1 Like

Hello everyone,

I have read this topic and I have gained a lot of inspiration from it!

Iā€™m having a problem with a card that I have build. Itā€™s a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but itā€™s not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via mushroom cards / card mods, but I donā€™t know how. Can anyone please help me?

This is the code that I have used:

cards:
  - cards:
      - entity: media_player.sonos_move_keuken
        type: media-control
        tap_action:
          action: more-info
      - entity: media_player.sonos_move_keuken
        hide:
          icon: true
          info: true
          mute: true
          power: true
          source: true
          volume: true
          name: true
          controls: true
        mini-media-player-progress-height: 1px
        progress: true
        shortcuts:
          buttons:
            - data:
                entity_id: script.new_script
              image: /local/SLAM-MM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_2
              image: /local/SLAM40!.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_3
              image: /local/SLAM Hardstyle.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_4
              image: /local/SLAMFM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_5
              image: /local/Radio 538.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_6
              image: /local/Radio 538 DD.png
              id: script.turn_on
              name: null
              type: service
          columns: 3
        show_group_count: true
        show_progress: true
        type: custom:mini-media-player
        volume_stateless: true
      - entity: media_player.sonos_move_keuken
        hide:
          controls: true
          icon: true
          info: true
          max_volume: 100
          min_volume: 0
          name: hide
          play_pause: true
          power: true
          progress: true
          source: true
        type: custom:mini-media-player
    type: vertical-stack
mode: vertical
type: custom:stack-in-card

Thanks a lot!

Thanks a lot - now I got itā€¦ :smiley:
The entity in the chip card was missing too - now perfect :slight_smile:

1 Like

Thatā€™s handled by the pseudo element on the header. have you copied all the code? In particular the bit starting with this:

    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";
.
.
.

Youā€™ve left off the closing %} here:

+ (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count)  %}

To change weather providers, just change the weather entity to weather.whatever.

For help styling the mini-media-player card, you will get a better response posting in the Mini Media Player thread:

or card-mod thread:

2 Likes

Iā€™ve been using these dashboards so much recently. I appreciate all the work gone into them.

Iā€™ve been using the chips card for a Sonos speaker. Touch to play, touch to pause etc. (In green below)

image

This is the code:

 - type: conditional
        conditions:
          - entity: media_player.office
            state_not: playing
        chip:
          type: template
          entity: media_player.office
          icon: mdi:speaker
          icon_color: grey
          tap_action:
            action: call-service
            service: sonos.play_queue
            data: {}
            target:
              device_id: 9b3c43e40824141046b290a01ee7f962

Iā€™ve recently expanded my Sonos, and cant figure out where to get the device_id for the new Sonos speaker? Any suggestions?

yes man waze