Mushroom Inspiration!

Amazing!
Good job!

1 Like

Been working on this one for a while. A weather forecast card, for weather entities that report weather variables for the upcoming days, with basic high/low temperatures. The day names can be localized to your language. The pictures are Googles weather icons, which has the consequence that the card background cannot be white, as that is the color of the clouds… You could use mdi icons instead. I recommend using the custom decluttering card as well.

image

Card
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:decluttering-card
    template: weather_day_template
    variables:
      - index: 0
      - day: 1
  - type: custom:decluttering-card
    template: weather_day_template
    variables:
      - index: 1
      - day: 2
  - type: custom:decluttering-card
    template: weather_day_template
    variables:
      - index: 2
      - day: 3
  - type: custom:decluttering-card
    template: weather_day_template
    variables:
      - index: 3
      - day: 4
  - type: custom:decluttering-card
    template: weather_day_template
    variables:
      - index: 4
      - day: 5
card_mod:
  style: |
    ha-card {
      background: rgba(var(--mush-rgb-blue), 0.3);
    }
Decluttering template
decluttering_templates:
  weather_day_template:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          layout: vertical
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: none;
                margin-bottom: -18px;
              }
          primary: ''
          secondary: >
            {% set dict = {'Mon': 'ma', 'Tue': 'di', 'Wed': 'wo', 'Thu': 'do',
            'Fri': 'vr', 'Sat': 'za', 'Sun': 'zo'} %}

            {% set str = as_timestamp(state_attr('weather.buienradar',
            'forecast')[[[index]]].datetime) | timestamp_custom("%a") %}

            {{ dict[str] }}
        - type: custom:mushroom-template-card
          layout: vertical
          entity: weather.buienradar
          tap_action:
            action: more-info
          icon: mdi:weather-partly-cloudy
          picture: >-
            {% set cloud = 100 -
            states("sensor.buienradar_sunchance_[[day]]d")|int %}

            {% set rain = states("sensor.buienradar_rain_[[day]]d")|float %}

            {% set entity =
            states("sensor.buienradar_detailed_condition_[[day]]d") %}

            {% if entity == "exceptional" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/isolated_scattered_tstorms_day_dark_color_96dp.png

            {% elif entity == "fog" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/haze_fog_dust_smoke_dark_color_96dp.png

            {% elif entity == "hail" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png

            {% elif entity == "lightning" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png

            {% elif entity == "lightning-rainy" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png

            {% elif entity == "snowy" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/flurries_dark_color_96dp.png

            {% elif entity == "snowy-rainy" %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png

            {% elif rain > 0.3 and rain <= 1 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/drizzle_dark_color_96dp.png

            {% elif rain > 1 and rain <= 6 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/showers_rain_dark_color_96dp.png

            {% elif rain > 6 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/heavy_rain_dark_color_96dp.png

            {% else %}  

            {% if cloud < 20 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/sunny_dark_color_96dp.png

            {% elif cloud < 40 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_sunny_dark_color_96dp.png

            {% elif cloud < 60 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/partly_cloudy_dark_color_96dp.png

            {% elif cloud < 80 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_cloudy_day_dark_color_96dp.png

            {% elif cloud <= 100 %}

            http://www.gstatic.com/images/icons/material/apps/weather/2x/cloudy_dark_color_96dp.png

            {% else %} none {% endif %} 

            {% endif %}
          primary: '{{states(''sensor.buienradar_temperature_[[day]]d'')}},'
          secondary: '{{states(''sensor.buienradar_minimum_temperature_[[day]]d'')}},'
          multiline_secondary: true
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: none;
              }
6 Likes

Have something similar created.
2023-01-25 16_38_20-Mushroom – Home Assistant and 1 more page - Work - Microsoft​ Edge

2023-01-25 16_38_43-Mushroom – Home Assistant and 1 more page - Work - Microsoft​ Edge

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 10% 80%
      grid-template-rows: auto
    cards: null
  - type: custom:layout-card
    layout_type: grid
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.speedtest_ping
            icon: mdi:speedometer
            icon_color: null
            content: Speedtest
          - type: template
            entity: sensor.speedtest_ping
            icon: null
            icon_color: deep-orange
            content: ''
        alignment: left
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_download
                color: rgb(255, 87, 34)
                max: 500
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 130
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_download
            primary_info: state
            secondary_info: name
            name: Download
            icon_color: deep-orange
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  width: auto%;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_ping
            primary_info: state
            secondary_info: name
            name: Ping
            icon_color: light-green
            icon: mdi:wan
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: auto;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_upload
                color: rgb(33, 150, 243)
                max: 50
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 40
                    - 50
                    - 60
              legend:
                show: false
              chart:
                height: 130
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_upload
            primary_info: state
            secondary_info: name
            name: Upload
            icon_color: blue
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
  - type: custom:fold-entity-row
    head:
      type: custom:mushroom-template-card
      label: padding
      secondary: meer
      tap_action: null
      multiline_secondary: true
      card_mod:
        style: |
          ha-card {
            margin-left: 250px;
          }
    padding: 0
    entities:
      - type: custom:stack-in-card
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.speedtest_download
                line_color: deep-orange
              - entity: sensor.speedtest_upload
                show_adaptive_color: true
                y_axis: secondary
            hours_to_show: 24
            points_per_hour: 4
            line_width: 1
            font_size: 50
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: true
              fill: fade

17 Likes

Also, a server card that’s similar to the Speedtest.
2023-01-25 16_46_57-Mushroom – Home Assistant and 1 more page - Work - Microsoft​ Edge

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 10% 80%
      grid-template-rows: auto
    cards: null
  - type: custom:layout-card
    layout_type: grid
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.speedtest_ping
            icon: phu:nas
            icon_color: null
            content: Unraid
          - type: template
            entity: sensor.speedtest_ping
            icon: null
            icon_color: deep-orange
            content: ''
        alignment: left
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_cpu_used
                color: green
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_cpu_used
            primary_info: state
            secondary_info: name
            name: CPU
            icon_color: green
            icon: phu:intel-cpu
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_ram_used_percent
                color: rgb(33, 150, 243)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_ram_used_percent
            primary_info: state
            secondary_info: name
            name: Memory
            icon_color: blue
            icon: phu:ram-memory
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_package_id_0_temperature
                color: red
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_package_id_0_temperature
            primary_info: state
            secondary_info: name
            name: CPU
            icon_color: red
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_mnt_disk1_used_percent
                color: rgb(255, 233, 0)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_mnt_disk1_used_percent
            primary_info: state
            secondary_info: name
            name: Storage
            icon_color: yellow
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
                color: rgb(255, 233, 0)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
            primary_info: state
            secondary_info: name
            name: SSD Cache
            icon_color: yellow
            icon: phu:seagate-ssd
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
                color: rgb(255, 233, 0)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 70%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 140
          - type: custom:mushroom-entity-card
            entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
            primary_info: state
            secondary_info: name
            name: HDD Cache
            icon_color: yellow
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -57px;
                  width: auto;
                  margin-left: auto;
                  margin-right: auto;
                  --card-primary-font-size: 12px;
                  --card-secondary-font-size: 10px;
                }

21 Likes

This is a simple Tile for RGBs lights with the RGB component inside stack-in-a-card, since the Tile light does not have the color options yet.

image
image

type: custom:stack-in-card
mode: vertical
cards:
  - type: tile
    entity: light.luz_qua_abajur
    show_entity_picture: false
    features:
      - type: light-brightness
  - type: custom:rgb-light-card
    option: null
    justify: center
    entity: light.luz_qua_abajur
    colors:
      - rgb_color:
          - 243
          - 156
          - 18
      - rgb_color:
          - 230
          - 126
          - 34
      - rgb_color:
          - 211
          - 84
          - 0
      - rgb_color:
          - 192
          - 57
          - 43
        brightness: 150
        transition: 1

5 Likes

Mushroom Uptime Card:

uptimecard

required card: uptime card
GitHub - dylandoamaral/uptime-card: Minimalistic uptime card for Home Assistant Lovelace UI

code:

  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        entity: switch.iot_docker_adguardhome
        primary: AdGuard
        icon_color: |
          {% if is_state(config.entity, 'on') %}  
            var(--color-background-green)
          {% else %}
            var(--color-background-red)
          {% endif %}
        badge_icon: |
          {% if is_state('update.wud_container_local_adguardhome', 'on') %}  
            mdi:update
          {% elif is_state('update.wud_container_local_adguardhome', 'unknown')  %}
            mdi:help
          {% else %}
            disabled
          {% endif %}   
        badge_color: |
          {% if is_state('update.wud_container_local_adguardhome', 'on') %}  
            disabled
          {% elif is_state('update.wud_container_local_adguardhome', 'unknown')  %}
            orange
          {% else %}
            transparent
          {% endif %}                    
        name: AdGuard
        icon: si:adguard
        fill_container: true
        layout: horizontal
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 15px !important;
                position: relative;
                top: -10px;
                left: 0px;
                overflow: visible !important;
                color: var(primary-text-color);
                font-weight: bold;
                text-overflow: ellipsis;
              }
              .primary:after {
                content: "{{ states(config.entity) }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                {% if is_state(config.entity, 'on') %}  
                  color: var(--google-green);
                {% else %}
                  color: var(--google-red);
                {% endif %}
                font-weight: bolder;
                border-radius: 50%;
                top: 5px;
                left: 115px;
                width: 16px;
                height: 16px;
                font-size: 14px; 
              }   
      - type: custom:uptime-card
        entity: binary_sensor.uptimekuma_docker_adguard_iot
        hours_to_show: 48
        alignment:
          tooltip_first: true
        show:
          footer: false
          header: false
          status: false
        bar:
          height: 40
          round: 10
          spacing: 10
          amount: 6
        card_mod:
          style: |
            ha-card {
              position: relative;
              top: 10px;
              left: -55%;
              overflow: visible !important;
              width: 150%;
            } 

may you need to do some adjustment for your setup with the position. Maybe there is also a better way to do it with css. Feel free to make the code better :slight_smile:

Cheers.

31 Likes

Mushroom card showing the number of unit on or off in a group:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Lumières
    secondary: |
      {% set all = expand('group.lumieres_toutes')| list -%}
      {% set ND1 = all | selectattr('state','eq','on')|list|count%}
      {% set D1 = all | selectattr('state','eq','off')|list|count%}
      allumées : {{ND1}} / éteintes : {{D1}}
    icon: |
      {% if is_state('group.lumieres_toutes', 'on') %} 
        mdi:lightbulb-group
      {% else %}
        mdi:lightbulb-group-off
      {% endif %}
    icon_color: |
      {% if is_state('group.lumieres_toutes','on') %}
        orange
      {% else %}
        grey
      {% endif %}
    badge_icon: |-
      {% set all = expand('group.lumieres_toutes')| list -%} 
      {% set open1 = all | selectattr('state','eq','on')|list|count%}
      {% if open1 == 0 %}
        mdi:numeric-0
      {% elif open1 == 1 %}
        mdi:numeric-1
      {% elif open1 == 2 %}
        mdi:numeric-2
      {% elif open1 == 3 %}
        mdi:numeric-3
      {% elif open1 == 4 %}
        mdi:numeric-4
      {% elif open1 == 5 %}
        mdi:numeric-5
      {% elif open1 == 6 %}
        mdi:numeric-6
      {% elif open1 == 7 %}
        mdi:numeric-7
      {% elif open1 == 8 %}
        mdi:numeric-8
      {% elif open1 == 9 %}
        mdi:numeric-9
      {% elif open1 >= 9 %}
        mdi:numeric-9-plus
      {% else %}
        none
      {% endif %}
    badge_color: |
      {% set all = expand('group.lumieres_toutes')| list -%} 
      {% set open1 = all | selectattr('state','eq','on')|list|count%}
      {% if open1 == 0 %}
        grey
      {% else %}
        orange
      {% endif %}
    entity: group.lumieres_toutes
    layout: vertical
    tap_action:
      action: more-info
    hold_action:
      action: call-service
      service: homeassistant.turn_off
      data: {}
      target:
        entity_id:
          - group.lumieres_toutes
          - switch.prise_tradfri_1
    double_tap_action:
      action: more-info
    multiline_secondary: true
  - type: custom:mushroom-template-card
    primary: Volets
    secondary: |
      {% set all = expand('cover.tous_les_volets')| list -%}
      {% set ND1 = all | selectattr('state','eq','open')|list|count%}
      {% set D1 = all | selectattr('state','eq','closed')|list|count%}
      ouverts : {{ND1}} / fermés : {{D1}}
    icon: |
      {% if is_state('cover.tous_les_volets', 'open') %} 
        mdi:window-shutter-open
      {% else %}
        mdi:window-shutter
      {% endif %}
    icon_color: |
      {% if is_state('cover.tous_les_volets','open') %}
        light-blue
      {% else %}
        green
      {% endif %}
    badge_icon: |-
      {% set all = expand('cover.tous_les_volets')| list -%} 
      {% set open1 = all | selectattr('state','eq','open')|list|count%}
      {% if open1 == 0 %}
        mdi:numeric-0
      {% elif open1 == 1 %}
        mdi:numeric-1
      {% elif open1 == 2 %}
        mdi:numeric-2
      {% elif open1 == 3 %}
        mdi:numeric-3
      {% elif open1 == 4 %}
        mdi:numeric-4
      {% elif open1 == 5 %}
        mdi:numeric-5
      {% elif open1 == 6 %}
        mdi:numeric-6
      {% elif open1 == 7 %}
        mdi:numeric-7
      {% elif open1 == 8 %}
        mdi:numeric-8
      {% else %}
        none
      {% endif %}
    badge_color: |
      {% set all = expand('cover.tous_les_volets')| list -%} 
      {% set open1 = all | selectattr('state','eq','open')|list|count%}
      {% if open1 == 0 %}
        green
      {% else %}
        orange
      {% endif %}
    entity: cover.tous_les_volets
    layout: vertical
    hold_action:
      action: navigate
      navigation_path: /lovelace-smartphone/volets
    double_tap_action:
      action: more-info
    multiline_secondary: true
    tap_action:
      action: more-info
  - type: custom:mushroom-template-card
    primary: Présence
    secondary: |
      {% set all = expand('binary_sensor.presence')| list -%}
      {% set ND1 = all | selectattr('state','eq','off')|list|count%}
      {% set D1 = all | selectattr('state','eq','on')|list|count%}
      présence : {{D1}} / non détectée : {{ND1}}
    icon: |
      {% if is_state('binary_sensor.presence', 'on') %} 
        mdi:motion-sensor
      {% else %}
        mdi:thumb-up
      {% endif %}
    icon_color: |
      {% if is_state('binary_sensor.presence','on') %}
        red
      {% else %}
        green
      {% endif %}
    badge_icon: |-
      {% set all = expand('binary_sensor.presence')| list -%} 
      {% set open1 = all | selectattr('state','eq','on')|list|count%}
      {% if open1 == 1 %}
        mdi:numeric-1
      {% elif open1 == 2 %}
        mdi:numeric-2
      {% elif open1 == 0 %}
        mdi:numeric-0
      {% elif open1 == 3 %}
        mdi:numeric-3
      {% elif open1 == 4 %}
        mdi:numeric-4
      {% elif open1 == 5 %}
        mdi:numeric-5
      {% elif open1 == 6 %}
        mdi:numeric-6
      {% elif open1 == 7 %}
        mdi:numeric-7
      {% elif open1 == 8 %}
        mdi:numeric-8
      {% else %}
        none
      {% endif %}
    badge_color: |
      {% set all = expand('binary_sensor.presence')| list -%} 
      {% set open1 = all | selectattr('state','eq','on')|list|count%}
      {% if open1 == 0 %}
        green
      {% else %}
        red
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/securite
    layout: vertical
    multiline_secondary: true

14 Likes

Hi !

I love the idea and the compact and efficient use of the space.

I will probably use and modify it a lot !

On the other hand, I am trying to remove as much as possible cardmod and stack-in-card in order to stay closer to mushroom initial idea and be capable to use UI only.

I am thus trying to bring the same simplicity using only mushroom template and chips, but I have one problem remaining : Removing card mod is easy (despite less beautifull), but I struggle to find the equivalent of grid or horizontal/vertical stack that would allow to merge borders of cards while not breaking UI. Does this exist ?

When i use this room card in a h-stack, the left border is smaller then the right (i have 2 cards per row)

Using in a horizontal stack as well, 2 cards per row. They’re all the same size for me?

3 Likes

Hm, i’m also using h-stack. This is the results:

2 Likes

Printer Card with Bubbles for toner:

image

YAML-Code for the card:

type: custom:button-card
entity: sensor.ecosys_m5521cdn
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - overflow: unset
    - padding: 0px
  grid:
    - grid-template-areas: '"mushroom colors" "mushroom colors"'
    - grid-template-columns: auto 13rem
custom_fields:
  mushroom:
    card:
      type: custom:mushroom-entity-card
      tap_action:
        action: more-info
      icon: mdi:printer-outline
      entity: '[[[ return entity.entity_id ]]]'
      card_mod:
        style: |
          ha-card {
            padding: 3px 3px 3px 3px !important;
            text-align: left !important;
            border: none !important;
            box-shadow: none !important;
          }
  colors:
    card:
      type: custom:auto-entities
      card:
        type: grid
        square: false
        columns: 4
      card_param: cards
      sort:
        method: state
        numeric: true
        reverse: true
      filter:
        include:
          - entity_id: sensor.ecosys*
            attributes:
              friendly_name: Magenta
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: magenta
                light_color: rgb(255,0,255,0.2)
          - entity_id: sensor.ecosys*
            attributes:
              friendly_name: Cyan
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: darkcyan
                light_color: rgb(0, 139, 139,0.2)
          - entity_id: sensor.ecosys*
            attributes:
              friendly_name: Schwarz
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: black
                light_color: rgb(0, 0, 0,0.2)
          - entity_id: sensor.ecosys*
            attributes:
              friendly_name: Gelb
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: darkorange
                light_color: rgb(255, 140, 0,0.2)

Custom-Button-Card Template for the bubbles:

  filled_circle_card:
    type: custom:button-card
    variables:
      full_color: magenta
      light_color: rgba(255, 0, 255, 0.2)
    show_name: false
    show_icon: false
    show_state: true
    show_label: false
    state_display: '[[[ return entity.state + entity.attributes.unit_of_measurement ]]]'
    styles:
      card:
        - border-radius: 50%
        - height: 40px
        - width: 40px
        - background-color: var(--card-background-color)
        - border: '[[[ return "1px solid " + variables.full_color ]]]'
        - background: |
            [[[
              var ink_level = 100 - entity.state;
              return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.light_color + '0%)';
            ]]]
      state:
        - color: '[[[ return variables.full_color ]]]'
        - font-size: 1.0em
        - font-weight: bold
11 Likes

Internet-Card with toggle for Guest-wifi and Bubbles for Download, Upload and Ping

image
image

YAML-Code for the card:

type: custom:button-card
entity: binary_sensor.fb_keller_connection
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - overflow: unset
    - padding: 0px
  grid:
    - grid-template-areas: '"mushroom colors" "mushroom colors"'
    - grid-template-columns: auto 13rem
custom_fields:
  mushroom:
    card:
      type: custom:mushroom-template-card
      tap_action:
        action: more-info
      icon: |
        {% if is_state(config.entity, "on") %}
          mdi:web-check
        {% elif is_state(config.entity, "off") %}
          mdi:web-cancel
        {% endif %}
      icon_color: |
        {% if is_state(config.entity, "on") %}
          green
        {% elif is_state(config.entity, "off") %}
          red
        {% endif %}
      entity: '[[[ return entity.entity_id ]]]'
      primary: |
        {% if is_state(config.entity, "on") %}
          online
        {% elif is_state(config.entity, "off") %}
          offline
        {% endif %}
      secondary: '{{ state_attr(config.entity,"friendly_name") }}'
      card_mod:
        style: |
          ha-card {
            padding: 3px 3px 3px 3px !important;
            text-align: left !important;
            border: none !important;
            box-shadow: none !important;
          }
  colors:
    card:
      type: custom:auto-entities
      card:
        type: grid
        square: false
        columns: 4
      card_param: cards
      filter:
        include:
          - entity_id: switch.fb_keller_wi_fi_gast_wlan
            options:
              type: custom:button-card
              size: 70%
              entity: this.entity_id
              show_name: true
              show_state: false
              state:
                - value: 'on'
                  color: var(--google-blue)
                  name: Gast123!
                - value: 'off'
                  color: grey
                  name: ' '
              styles:
                name:
                  - font-size: 10px
                card:
                  - height: 100%
                  - border: none
                  - box-shadow: none
                  - background: none
          - entity_id: sensor.speedtest_download
            options:
              type: custom:button-card
              template: filled_circle_card_max
              variables:
                min: 0
                max: 400
          - entity_id: sensor.speedtest_upload
            options:
              type: custom:button-card
              template: filled_circle_card_max
              variables:
                min: 0
                max: 200
          - entity_id: sensor.speedtest_ping
            options:
              type: custom:button-card
              template: filled_circle_card_max
              variables:
                min: 0
                max: 50

Custom-Button-Card Template for the bubbles:

  filled_circle_card_max:
    type: custom:button-card
    variables:
      color: rgb(255, 140, 0, 0.5)
      min: 0
      max: 400
    show_icon: true
    show_name: false
    show_state: true
    state_display: '[[[ return Math.round(Number(entity.state)).toFixed(0) ]]]'
    styles:
      card:
        - border: none
        - box-shadow: none
        - height: 40px
        - width: 40px
        - border-radius: 50%
        - border: '[[[ return "1px solid " + variables.color ]]]'
        - background: |
            [[[
              var ink_level = 100 - (entity.state / variables.max * 100);
              return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.color + '0%)';
            ]]]
      icon:
        - color: black
      state:
        - font-size: 0.7em
        - color: black
        - font-weight: bold
15 Likes

Upcoming garbage card with today, tomorrow, weekday (for the next 6 days) and date (for more than 6 days). For “tomorrow” and “today” the cards gets a warning-badge and an other background-color:

The card displays the next garbage appointments sorted by “days_to”.
image

When a schedule is today or tomorrow it looks like this:
image

I use the the waste collection schedule

YAML-Code for the Card:

type: custom:auto-entities
card:
  square: false
  columns: 1
  type: grid
card_param: cards
sort:
  method: attribute
  attribute: daysTo
  numeric: true
filter:
  exclude:
    - entity_id: sensor.muellsensor_alle
  include:
    - entity_id: sensor.muellsensor_*
      not:
        state: unknown
      options:
        type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              padding: 3px !important;
              --ha-card-background:
                {%- set sensor = state_attr(config.entity,'friendly_name') %}
                {%- set days = state_attr(config.entity,'daysTo') %}
                {%- if days > 1 %} var(--card-background) !important;
                {%- elif sensor == 'Gelbe Tonne' %}rgb(245,217,82,0.25) !important;
                {%- elif sensor == 'Papiermüll' %}rgb(0,105,175,0.25) !important;
                {%- elif sensor == 'Bioabfall' %}rgb(153,69,33,0.25) !important;
                {%- elif sensor == 'Restmüll' %}rgb(79,79,79,0.25) !important;
                {%- endif %}
              }
        tap_action:
          action: more-info
        badge_color: red
        badge_icon: |-
          {% if state_attr(config.entity, "daysTo") < 2 %}
            mdi:alert
          {% endif %}
        picture: |-
          {% if is_state_attr(config.entity, "friendly_name", "Gelbe Tonne") %}
            /local/img/tonne-gelb-square.png
          {% elif is_state_attr(config.entity, "friendly_name", "Papiermüll") %}
            /local/img/tonne-blau-square.png
          {% elif is_state_attr(config.entity, "friendly_name", "Bioabfall") %}
            /local/img/tonne-braun-square.png
          {% elif is_state_attr(config.entity, "friendly_name", "Restmüll") %}
            /local/img/tonne-schwarz-square.png
          {% endif %}
        primary: '{{ state_attr(config.entity,"friendly_name") }}'
        secondary: >-
          {% if is_state_attr(config.entity, "daysTo", 0) %}
            heute am {{ states(config.entity) | regex_replace(".+\|","") | replace("0","Sonntag") | replace("1","Montag") | replace("2","Dienstag") | replace("3","Mittwoch") | replace("4","Donnerstag") | replace("5","Freitag") | replace("6","Samstag") }}
          {% elif is_state_attr(config.entity, "daysTo", 1) %}
            morgen am {{ states(config.entity) | regex_replace(".+\|","") | replace("0","Sonntag") | replace("1","Montag") | replace("2","Dienstag") | replace("3","Mittwoch") | replace("4","Donnerstag") | replace("5","Freitag") | replace("6","Samstag") }}
          {% elif is_state_attr(config.entity, "daysTo", 2) %}

          in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
          states(config.entity) | regex_replace(".+\|","") |
          replace("0","Sonntag") | replace("1","Montag") |
          replace("2","Dienstag") | replace("3","Mittwoch") |
          replace("4","Donnerstag") | replace("5","Freitag") |
          replace("6","Samstag") }}

          {% elif is_state_attr(config.entity, "daysTo", 3) %}

          in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
          states(config.entity) | regex_replace(".+\|","") |
          replace("0","Sonntag") | replace("1","Montag") |
          replace("2","Dienstag") | replace("3","Mittwoch") |
          replace("4","Donnerstag") | replace("5","Freitag") |
          replace("6","Samstag") }}

          {% elif is_state_attr(config.entity, "daysTo", 4) %}

          in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
          states(config.entity) | regex_replace(".+\|","") |
          replace("0","Sonntag") | replace("1","Montag") |
          replace("2","Dienstag") | replace("3","Mittwoch") |
          replace("4","Donnerstag") | replace("5","Freitag") |
          replace("6","Samstag") }}

          {% elif is_state_attr(config.entity, "daysTo", 5) %}

          in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
          states(config.entity) | regex_replace(".+\|","") |
          replace("0","Sonntag") | replace("1","Montag") |
          replace("2","Dienstag") | replace("3","Mittwoch") |
          replace("4","Donnerstag") | replace("5","Freitag") |
          replace("6","Samstag") }}

          {% elif is_state_attr(config.entity, "daysTo", 6) %}

          in {{ state_attr(config.entity,'daysTo') }} Tagen am {{
          states(config.entity) | regex_replace(".+\|","") |
          replace("0","Sonntag") | replace("1","Montag") |
          replace("2","Dienstag") | replace("3","Mittwoch") |
          replace("4","Donnerstag") | replace("5","Freitag") |
          replace("6","Samstag") }}

          {% else %}
            in {{ state_attr(config.entity,'daysTo') }} Tagen am {{ states(config.entity) | regex_replace("[A-Z,a-z,ä,ö,ü]","") | regex_replace("\|.$","") | regex_replace("\s","") | regex_replace("^\|.+\|","") }}
          {% endif %}
11 Likes

I am attempting to us your yaml code but all I am getting for display is below. Suggestions?

image

type: custom:button-card
entity: sensor.canon_tr8500_series
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - overflow: unset
    - padding: 0px
  grid:
    - grid-template-areas: '"mushroom colors" "mushroom colors"'
    - grid-template-columns: auto 13rem
custom_fields:
  mushroom:
    card:
      type: custom:mushroom-entity-card
      tap_action:
        action: more-info
      icon: mdi:printer-outline
      entity: '[[[ return entity.entity_id ]]]'
      card_mod:
        style: |
          ha-card {
            padding: 3px 3px 3px 3px !important;
            text-align: left !important;
            border: none !important;
            box-shadow: none !important;
          }
  colors:
    card:
      type: custom:auto-entities
      card:
        type: grid
        square: false
        columns: 4
      card_param: cards
      sort:
        method: state
        numeric: true
        reverse: true
      filter:
        include:
          - entity_id: sensor.canon_tr8500_series*
            attributes:
              friendly_name: Magenta
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: magenta
                light_color: rgb(255,0,255,0.2)
          - entity_id: sensor.canon_tr8500_series*
            attributes:
              friendly_name: Cyan
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: darkcyan
                light_color: rgb(0, 139, 139,0.2)
          - entity_id: sensor.canon_tr8500_series*
            attributes:
              friendly_name: Schwarz
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: black
                light_color: rgb(0, 0, 0,0.2)
          - entity_id: sensor.canon_tr8500_series*
            attributes:
              friendly_name: Gelb
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: darkorange
                light_color: rgb(255, 140, 0,0.2)
                
filled_circle_card:
  type: custom:button-card
  variables:
    full_color: magenta
    light_color: rgba(255, 0, 255, 0.2)
  show_name: false
  show_icon: false
  show_state: true
  show_label: false
  state_display: '[[[ return entity.state + entity.attributes.unit_of_measurement ]]]'
  styles:
    card:
      - border-radius: 50%
      - height: 40px
      - width: 40px
      - background-color: var(--card-background-color)
      - border: '[[[ return "1px solid " + variables.full_color ]]]'
      - background: |
          [[[
            var ink_level = 100 - entity.state;
            return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%,' + variables.light_color + '0%)';
          ]]]
    state:
      - color: '[[[ return variables.full_color ]]]'
      - font-size: 1.0em
      - font-weight: bold

The auto-entities-card filter filters for a specific “friendly name” like “Schwarz” or “Magenta”. Does your entities have these specific friendly names?

          - entity_id: sensor.canon_tr8500_series*
            attributes:
              friendly_name: Schwarz # Filter for a specific friendly name
            options:
              type: custom:button-card
              template: filled_circle_card
              variables:
                full_color: black
                light_color: rgb(0, 0, 0,0.2)

nice!

Still very new to Mushroom, I have been playing around a bit with that config, and, with the exception of the template in the folder header, came up with:

Yaml here
type: entities
entities:
  - type: custom:hui-element
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: -16px;
        }
    card_type: picture-entity
    image: >-
      https://img.freepik.com/free-photo/pillow-bed_1203-9518.jpg?w=1800&t=st=1666202344~exp=1666202944~hmac=7531e58884b24b8d2b847a8d0b04e59005362e7fdad1fabbc3c7678247086a4a
    entity: light.living
    show_state: false
    show_name: false
    aspect_ratio: '3'
    tap_action:
      action: toggle

  - type: custom:fold-entity-row
    head:
      type: section
      label: Living lights
      card_mod: &style
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 0 -16px -16px -16px;
              }
        filter:
          exclude:
            - entity_id: light.living
          include:
            - domain: light
              area: living
              options:
                type: custom:hui-element
                card_type: custom:mushroom-light-card
                fill_container: true
                layout: horizontal
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                show_color_control: true
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      box-shadow: none;
                      margin: -8px -16px;
                    }

shows just like that, only auto builds a bit more. (ofc, change the card options to your liking)

Scherm­afbeelding 2023-02-05 om 17.36.56

(btw, replacing mushroom with core tile is rather nice too… )

though I guess the empty spaces then would want me to use a grid of smaller tile. But that’s off topic here, sorry ;0( )

8 Likes

Looks good. What value_template and date_template are you using for your sensors?

I’m using these templates:

- platform: waste_collection_schedule
  name: Muellsensor_Gelbe_Tonne
  value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
  add_days_to: true
  date_template: '{{value.date.strftime("%d.%m.%Y")}}'
  types:
    - "Gelbe Tonne"
    - "Gelbe Tonne 2"
- platform: waste_collection_schedule
  name: Muellsensor_Restmuell
  value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
  add_days_to: true
  date_template: '{{value.date.strftime("%d.%m.%Y")}}'
  types:
    - "Restmüll"
- platform: waste_collection_schedule
  name: Muellsensor_Papiertonne
  add_days_to: true
  date_template: '{{value.date.strftime("%d.%m.%Y")}}'
  value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
  types:
    - "Papiermüll"
- platform: waste_collection_schedule
  name: Muellsensor_Bioabfall
  add_days_to: true
  date_template: '{{value.date.strftime("%d.%m.%Y")}}'
  value_template: '{{value.types|join(", ")}}|{{value.daysTo}}|{{value.date.strftime("%d.%m.%Y")}}|{{value.date.strftime("%u")}}'
  types:
    - "Bioabfall"
1 Like

Great, thanks alot…

1 Like