Mushroom Inspiration!

Think its appropriate to post this here too :slight_smile:

12 Likes

Here’s my mushroom-style Home Summary Page. Still very much a work in progress (as always), but I’m very happy with how it’s looking. :slight_smile:

(Special thanks to @rhysb and @dimitri.landerloos for putting the work into making the animated icons with card_mod!)


Weather Warnings: 4 separate conditional cards pulling data from my weather integration (Environment Canada) that only show when there is an active weather alert.

type: vertical-stack
      cards:
        - type: conditional
          conditions:
            - entity: sensor.thermal_comfort_frost_risk
              state: high
          card:
            type: custom:mushroom-template-card
            primary: Frost Alert
            secondary: >-
              Frost likely to occur when tempearature reaches {{
              states('sensor.thermal_comfort_frost_point') | round(1) }}°C
            icon: mdi:snowflake-alert
            entity: sensor.thermal_comfort_frost_risk
            icon_color: red
            tap_action:
              action: more-info
        - type: conditional
          conditions:
            - entity: sensor.WEATHERENTITY_statements
              state: '1'
          card:
            type: custom:mushroom-template-card
            primary: '{{ state_attr(''sensor.WEATHERENTITY_statements'', ''alert_1'') }}'
            secondary: >-
              {{ state_attr('sensor.WEATHERENTITY_statements', 'alert_time_1')
              }}
            icon: mdi:alert-circle
            entity: sensor.WEATHERENTITY_statements
            icon_color: blue
            tap_action:
              action: url
              url_path: ## YOUR URL PATH HERE
            badge_icon: ''
            fill_container: false
        - type: conditional
          conditions:
            - entity: sensor.WEATHERENTITY_advisory
              state: '1'
          card:
            type: custom:mushroom-template-card
            primary: '{{ state_attr(''sensor.WEATHERENTITY_advisory'', ''alert_1'') }}'
            secondary: '{{ state_attr(''sensor.WEATHERENTITY_advisory'', ''alert_time_1'') }}'
            icon: mdi:alert
            entity: sensor.WEATHERENTITY_advisory
            icon_color: amber
            tap_action:
              action: url
              url_path: ## YOUR URL PATH HERE
            fill_container: false
        - type: conditional
          conditions:
            - entity: sensor.WEATHERENTITY_watches
              state: '1'
          card:
            type: custom:mushroom-template-card
            primary: '{{ state_attr(''sensor.WEATHERENTITY_watches'', ''alert_1'') }}'
            secondary: '{{ state_attr(''sensor.WEATHERENTITY_watches'', ''alert_time_1'') }}'
            icon: mdi:alert
            entity: sensor.WEATHERENTITY_watches
            icon_color: orange
            tap_action:
              action: url
              url_path: ## YOUR URL PATH HERE
            fill_container: false
        - type: conditional
          conditions:
            - entity: sensor.WEATHERENTITY_warnings
              state: '1'
          card:
            type: custom:mushroom-template-card
            primary: '{{ state_attr(''sensor.WEATHERENTITY_warnings'', ''alert_1'') }}'
            secondary: '{{ state_attr(''sensor.WEATHERENTITY_warnings'', ''alert_time_1'') }}'
            icon: mdi:alert
            entity: sensor.WEATHERENTITY_warnings
            icon_color: red
            tap_action:
              action: url
              url_path: ## YOUR URL PATH HERE
            fill_container: false
            card_mod:
              style: |
                ha-state-icon {
                 animation: pulse 3s ease-in-out infinite;;
                }

                @keyframes pulse {
                  100% {opacity: 0;}
                }
        - type: conditional
          conditions:
            - condition: state
              entity: sensor.WEATHERENTITY_endings
              state: '1'
          card:
            type: custom:mushroom-template-card
            primary: '{{ state_attr(''sensor.WEATHERENTITY_endings'', ''alert_1'') }}'
            secondary: '{{ state_attr(''sensor.WEATHERENTITY_endings'', ''alert_time_1'') }}'
            icon: mdi:clock-check
            entity: sensor.WEATHERENTITY_endings
            icon_color: grey
            tap_action:
              action: url
              url_path: ## YOUR URL PATH HERE
            fill_container: false

Garbage Collection: template card using custom schedule sensors

type: custom:mushroom-template-card
primary: Garbage Collection
secondary: |-
  {% if states('sensor.garbage_collection') == '0' %}
    Today between 8-9AM
  {% elif states('sensor.garbage_collection') == '1' %}
    Tomorrow between 8-9AM
  {% else %}
    in {{ states('sensor.garbage_collection') }} days
  {% endif %}
icon: |-
  {% if states('sensor.garbage_collection') == '0' %}
    mdi:trash-can
  {% else %}
    mdi:trash-can-outline
  {% endif %}
entity: sensor.garbage_collection
icon_color: |-
  {% if states('sensor.garbage_collection') == '0' %}
    green
  {% elif states('sensor.garbage_collection') == '1' %}
    amber
  {% else %}
    disabled
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: more-info
visibility:
  - condition: numeric_state
    entity: sensor.garbage_collection
    below: 2

Weather Summary: The actual summary is provided by my weather integration (Environment Canada), but I imagine you could create something similar with a template.

For this card, I also created 2 separate template sensors: "sensor.weather_icon_colour" which provides a colour value for the card icon based on the weather condition, and "sensor.weather_condition_easy" which makes the current condition more “grammatically correct” for the card (see the primary text on the card). The icons are also animated (check the forum for more animation options), and there’s several conditional chips for different information (the chips will also scroll horizontally when they won’t fit in the card width).

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: >-
      Its currently {{ states('sensor.WEATHERENTITY_temperature') | round(0)
      }}°C outside and {{ states('sensor.weather_condition_easy') }}.
    secondary: '{{ states(''sensor.WEATHERENTITY_summary'') }}'
    icon: |-
      {% if is_state('weather.WEATHERENTITY_forecast', 'clear-night') %}
        mdi:weather-night
      {% elif is_state('weather.WEATHERENTITY_forecast', 'partlycloudy') %}
        {% if is_state('sun.sun', 'below_horizon') %}
          mdi:weather-night-partly-cloudy
        {% else %}
          mdi:weather-partly-cloudy
        {% endif %}
      {% else %}
        mdi:weather-{{ states('weather.WEATHERENTITY_forecast') }}
      {% endif %}
    multiline_secondary: true
    tap_action:
      action: navigate
      navigation_path: /mu-main/weather
    icon_color: '{{ states(''sensor.weather_icon_colour'') }}'
    card_mod:
      style: |
        {% set weather_code = states('weather.WEATHERENTITY_forecast') %}
          {% if weather_code == 'clear-night' %}
            ha-state-icon {
               animation: moon 10s linear infinite, stars 5s linear infinite;
            }
            @keyframes moon {
              0%, 100% { transform: rotate(12deg); }
              30% { transform: rotate(-6deg); }
              45% { transform: rotate(8deg); }
              75% { transform: rotate(-10deg); }
            }
            @keyframes stars {
              0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
              3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
              14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
            }
          {% elif weather_code == 'partlycloudy' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
            }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }
          {% elif weather_code == 'cloudy' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
            }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }
          {% elif weather_code == 'pouring' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, rain 1s infinite; 
            }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }
            @keyframes rain {
              0%, 50%, 100% { clip-path: inset(0 0 0 0); }
              25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
              75%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
            }
          {% elif weather_code == 'rainy' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite; 
              }
              @keyframes cloudy {
                0%, 100% { transform: translateX(3px); }
                30% { transform: translateX(-1px); }
                45% { transform: translateX(1.5px); }
                75% { transform: translateX(-3.2px); }
              }
              @keyframes rain {
                50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
              }
          {% elif weather_code == 'snowy' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, snow 4s infinite; 
            }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }
            @keyframes snow {
              50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
              51% { clip-path: inset(0 0 0 0); }
            }
          {% elif weather_code == 'fog' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, fog 4s infinite; 
            }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
            }
            @keyframes fog {
              0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
              25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
              75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
            }
          {% elif weather_code == 'windy' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite; 
              transform-origin: 15% 50%
            }
            @keyframes cloudy {
              0%, 100% { transform: scaleX(1.2); }
              30% { transform: scaleX(0.9); }
              45% { transform: scaleX(1.1); }
              75% { transform: scaleX(0.8); }
            }
          {% elif weather_code == 'sunny' %}
            ha-state-icon {
              animation: spin 6s ease-in-out infinite alternate;
            }
          {% elif weather_code == 'lightning' %}
            ha-state-icon {
              animation: cloudy 10s ease-in-out infinite, lightning 4s infinite; 
              }
            @keyframes cloudy {
              0%, 100% { transform: translateX(3px); }
              30% { transform: translateX(-1px); }
              45% { transform: translateX(1.5px); }
              75% { transform: translateX(-3.2px); }
             }
            @keyframes lightning {
              10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
              10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
            }
          {% else %}
            
          {% endif %}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: state
            entity: sun.sun
            state: below_horizon
        chip:
          type: entity
          entity: sensor.sun_next_rising
          icon: mdi:weather-sunset-up
          icon_color: orange
          use_entity_picture: false
      - type: conditional
        conditions:
          - condition: state
            entity: sun.sun
            state: above_horizon
        chip:
          type: entity
          entity: sensor.sun_next_setting
          icon: mdi:weather-sunset-down
          icon_color: deep-orange
      - type: entity
        entity: sensor.WEATHERENTITY_humidity
        icon_color: cyan
        icon: mdi:water-opacity
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.WEATHERENTITY_chance_of_precipitation
            state_not: unknown
        chip:
          type: entity
          entity: sensor.WEATHERENTITY_chance_of_precipitation
          tap_action:
            action: more-info
          hold_action:
            action: more-info
          icon: mdi:weather-rainy
          icon_color: light-blue
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.WEATHERENTITY_wind_chill
            state_not: unknown
        chip:
          type: template
          entity: sensor.WEATHERENTITY_wind_chill
          icon: mdi:weather-windy-variant
          icon_color: cyan
          content: '{{ states(''sensor.WEATHERENTITY_wind_chill'') }}°C Wind Chill'
      - type: conditional
        conditions:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.thermal_comfort_frost_risk
                state: high
              - condition: state
                entity: sensor.thermal_comfort_frost_risk
                state: probable
        chip:
          type: template
          entity: sensor.thermal_comfort_frost_risk
          icon: mdi:snowflake-alert
          icon_color: blue
          content: Frost Risk
      - type: conditional
        conditions:
          - condition: numeric_state
            entity: sensor.WEATHERENTITY_wind_speed
            above: 0
        chip:
          type: template
          entity: sensor.WEATHERENTITY_wind_speed
          icon: mdi:weather-windy
          icon_color: grey
          content: >-
            {{ states('sensor.WEATHERENTITY_wind_speed') }}km/h {{
            states('sensor.WEATHERENTITY_wind_direction') }}
          tap_action:
            action: more-info
      - type: conditional
        conditions:
          - condition: numeric_state
            entity: sensor.WEATHERENTITY_aqhi
            above: 4
        chip:
          type: template
          entity: sensor.WEATHERENTITY_aqhi
          icon: mdi:air-filter
          icon_color: |-
            {% set aqhi = states('sensor.WEATHERENTITY_aqhi') | int %}
            {% if aqhi >= 8 %}
              red
            {% elif aqhi >= 6 %}
              orange
            {% elif aqhi > 3 %}
              amber
            {% else %}
              green
            {% endif %}
          content: |-
            {% set aqhi = states('sensor.WEATHERENTITY_aqhi') | int %}
            {% if aqhi >= 8 %}
              AQHI Very High
            {% elif aqhi >= 6 %}
              AQHI High
            {% elif aqhi > 3 %}
              AQHI Moderate
            {% else %}
              AQHI Low 
            {% endif %}

            ({{ states('sensor.WEATHERENTITY_aqhi') }})
      - type: conditional
        conditions:
          - condition: state
            entity: sun.sun
            state: above_horizon
          - condition: numeric_state
            entity: sensor.WEATHERENTITY_uv_index
            above: 4
        chip:
          type: template
          entity: sensor.WEATHERENTITY_uv_index
          icon: mdi:sun-wireless
          icon_color: |-
            {% set uv_index = states('sensor.WEATHERENTITY_uv_index') | int %}
            {% if uv_index >= 8 %}
              red
            {% elif uv_index > 6 %}
              orange
            {% elif uv_index > 3 %}
              amber
            {% else %}
              green
            {% endif %}
          content: |-
            {% set uv_index = states('sensor.WEATHERENTITY_uv_index') | int %}
            {% if uv_index >= 8 %}
              UV Very High
            {% elif uv_index > 6 %}
              UV High
            {% elif uv_index > 3 %}
              UV Moderate
            {% else %}
              UV Low
            {% endif %}

            ({{ states('sensor.WEATHERENTITY_uv_index') }})
    alignment: left
    card_mod:
      style: |
        ha-card {
            margin: -10px 12px 10px;
            --chip-border-width: 0;
            --chip-box-shadow: 0;
            --chip-background: #9E9E9E20;
          }
          ha-card > .chip-container {
            flex-wrap: nowrap;
            overflow-x: scroll;
          }

          ha-card > .chip-container > * {
            flex-shrink: 0;
          }

Climate Summary: First, I made a “HVAC Action” template sensor to record the current action of the thermostat (I think this is redundant, but I was planning on using it for other things and wanted it to be readily available):

{{ state_attr('climate.nest_thermostat_name', 'hvac_action') }}

Then, I made the following Historical Stats sensors in my configuration.yaml (can’t make these in the UI yet):

##History Stats
- platform: history_stats
  name: Climate Heat Today
  entity_id: sensor.hvac_action
  state: "heating"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) }}"
  end: "{{ now() }}"
- platform: history_stats
  name: Climate Cool Today
  entity_id: sensor.hvac_action
  state: "cooling"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) }}"
  end: "{{ now() }}"

- platform: history_stats
  name: Climate Heat Yesterday
  entity_id: sensor.hvac_action
  state: "heating"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) - timedelta(days=1) }}"
  end: "{{ now().replace(hour=0, minute=0, second=0) }}"

- platform: history_stats
  name: Climate Cool Yesterday
  entity_id: sensor.hvac_action
  state: "cooling"
  type: time
  start: "{{ now().replace(hour=0, minute=0, second=0) - timedelta(days=1) }}"
  end: "{{ now().replace(hour=0, minute=0, second=0) }}"

With the 4 sensors created, I made 2 conditional template cards (one for Cooling and one for Heating) as below which will display “Heated (or Cooled) for __ hours and __ minutes” as the primary and “__hours and __ minutes more/less than yesterday” - if the heating/cooling time is less than yesterday, it will display a badge with a leaf otherwise it will display an up arrow:

(The conditional cards are set to only show the cards if the heating/cooling time is above “0”):

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.climate_heat_today
        above: 0
    card:
      type: custom:mushroom-template-card
      primary: '{{ states(''sensor.climate_heat_time_summary'') }}'
      secondary: '{{ states(''sensor.climate_heat_yesterday_summary'') }}'
      icon: mdi:home-thermometer-outline
      entity: sensor.climate_heat_today
      icon_color: red
      tap_action:
        action: more-info
      badge_icon: >-
        {% set total_minutes_today = states('sensor.climate_heat_today') | float
        * 60 %}

        {% set total_minutes_yesterday = states('sensor.climate_heat_yesterday')
        | float * 60 %}


        {% if total_minutes_today < total_minutes_yesterday %}
          mdi:leaf
        {% else %}
          mdi:chevron-up
        {% endif %}
      badge_color: >-
        {% set total_minutes_today = states('sensor.climate_heat_today') | float
        * 60 %}

        {% set total_minutes_yesterday = states('sensor.climate_heat_yesterday')
        | float * 60 %}


        {% if total_minutes_today < total_minutes_yesterday %}
          green
        {% else %}
          red
        {% endif %}
      multiline_secondary: true
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.climate_cool_today
        above: 0
    card:
      type: custom:mushroom-template-card
      primary: '{{ states(''sensor.climate_cool_time_summary'') }}'
      secondary: '{{ states(''sensor.climate_cool_yesterday_summary'') }}'
      icon: mdi:home-thermometer-outline
      entity: sensor.climate_cool_today
      icon_color: blue
      tap_action:
        action: more-info
      badge_icon: >-
        {% set total_minutes_today = states('sensor.climate_cool_today') | float
        * 60 %}

        {% set total_minutes_yesterday = states('sensor.climate_cool_yesterday')
        | float * 60 %}


        {% if total_minutes_today < total_minutes_yesterday %}
          mdi:leaf
        {% else %}
          mdi:chevron-down
        {% endif %}
      badge_color: >-
        {% set total_minutes_today = states('sensor.climate_cool_today') | float
        * 60 %}

        {% set total_minutes_yesterday = states('sensor.climate_cool_yesterday')
        | float * 60 %}


        {% if total_minutes_today < total_minutes_yesterday %}
          green
        {% else %}
          red
        {% endif %}
      multiline_secondary: true

Calendar: Weekly Planner Card by FamousWolf (GitHub - FamousWolf/week-planner-card: Custom Home Assistant card displaying a responsive overview or multiple days with events from one of multiple calendars)

(NOT SHOWN) Vacation Mode and Guest Mode Cards: Conditional Template cards that indicate if Vacation/Guest Mode is on and what it means for certain schedules or routines (this is for the day my household inevitably decides to use Home Assistant… some day lol).

I would love to know your thoughts and feedback!!

14 Likes

I have now updated this card to the new look of the mushroom cards. I am also using colors more faithfull to the original mushroom colors :slight_smile:
image

follow the directions in the original post to make this work for you.

As last time code is too large to post in 1 post, so i will split it into 2 and you can just add the code in the same card right below eachother.

1st Half of Code
type: custom:stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:auto-entities
        card:
          type: custom:stack-in-card
          card_mod:
            style: |
              ha-card {
                padding-top: 0px;
                padding-bottom: 0px;
                padding-right: 30px;
                width: 200%;
                background: transparent !important;
                box-shadow: none;
                border: none !important;
              }
        card_param: cards
        filter:
          template: >-
            {%- for state in states.sensor |
            selectattr('entity_id','search','battery_plus') |
            selectattr('entity_id','search','lounge') |
            rejectattr('entity_id','search','type') |
            rejectattr('entity_id','search','last_replaced') -%}
              {{
                {
                  'type': 'custom:bar-card',
                  'entity': state.entity_id,
                  'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Lounge')[1],
                  'card_mod':
                    {
                    'style': 'bar-card-currentbar, bar-card-backgroundbar {
                              border-radius: 12px !important;
                              height: 36px !important;
                              margin-top: -7px !important;
                              width: calc(100% + 56px);
                              left: -4%;
                            }
                            ha-icon {
                              position: relative;
                              padding: 8px;
                              border-radius: 50%;
                              --mdc-icon-size: 21px;
                              margin-top: -19px;
                              right: 8px;
                            }
                            bar-card-name {
                              display: relative;
                              font-weight: bold;
                              width: fit-content;
                              bottom: 8px;
                              right: 8px;
                            }
                            bar-card-name:after {
                              content: "{{states(config.entity)}} %";
                              display: flex;
                              position: relative;
                              font-size: 11px;
                              font-weight: light;
                              bottom: 2px;
                              left: 0px;
                            }
                            {% if states(config.entity) | int(default=unknown) == unknown %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                              /* Bar color */
                              --bar-color: #0033ff !important;
                              /* Icon */
                              --card-mod-icon: mdi:bug;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 10 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                              /* Bar color */
                              --bar-color: rgb(244, 67, 54) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-10 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 20 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                              /* Bar color */
                              --bar-color: rgb(255, 111, 0) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-20 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 30 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                              /* Bar color */
                              --bar-color: rgb(255, 152, 0) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-30 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 40 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                              /* Bar color */
                              --bar-color: rgb(255, 193, 7) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-40 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 50 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                              /* Bar color */
                              --bar-color: rgb(255, 235, 59) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-50 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 60 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                              /* Bar color */
                              --bar-color: rgb(205, 220, 57) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-60 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 70 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                              /* Bar color */
                              --bar-color: rgb(139, 195, 74) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-70 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 80 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                              /* Bar color */
                              --bar-color: rgb(139, 195, 74) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-80 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 90 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                              /* Bar color */
                              --bar-color: rgb(76, 175, 80) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery-90 !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% elif states(config.entity) | int <= 100 %}
                            bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                              /* Bar color */
                              --bar-color: rgb(76, 175, 80) !important;
                              /* Icon */
                              --card-mod-icon: mdi:battery !important;
                            }
                            @media (prefers-color-scheme: dark) {
                              /* Dark theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color) !important;
                                filter: invert(1);
                              }
                              bar-card-name:after {
                                color: #cccccc !important;
                              }
                            }
                            @media (prefers-color-scheme: light) { 
                              /* Light theme text colors */
                              bar-card-name {
                                color: var(--card-primary-color)  !important;
                              }
                              bar-card-name:after {
                                color: #3b3b3b !important;
                              }
                            }
                            {% endif %}
                            bar-card-row, ha-icon {
                              color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                              background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                            }
                            bar-card-indicator {
                              color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                              top: -8px;
                            }
                            bar-card-value {
                              color: transparent !important;
                            }
                            ha-card {
                              margin: 0px 0px 0px 0px !important;
                              height: 54px;
                            }'
                          }
                }
             }},
            {%- endfor %}
        sort:
          method: state
          numeric: true
          count: 1
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: |-
              {% if states(entity) == 'on' %}
                mdi:chevron-up
              {% else %}
                mdi:chevron-down
              {% endif %}
            entity: input_boolean.lounge_battery_dropdown
            card_mod:
              style: |
                ha-card {
                  top: 10px;
                  right: 11px;
                  --chip-icon-size: 23px;
                  border: none !important;
                  box-shadow: none !important;
                  background: transparent !important;
                }
        alignment: end
4 Likes
2nd Half of Code
  - type: custom:auto-entities
    visibility:
      - conditon: state
        entity: input_boolean.lounge_battery_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding-top: 0px;
            padding-bottom: 18px;
            margin: -18px 0px 0px 0px;
            background: transparent;
            box-shadow: none;
            border: none;
          }
    card_param: cards
    filter:
      template: >-
        {%- for state in states.sensor |
        selectattr('entity_id','search','battery_plus') |
        selectattr('entity_id','search','lounge') |
        rejectattr('entity_id','search','type') |
        rejectattr('entity_id','search','last_replaced') -%}
          {{
            {
              'type': 'custom:bar-card',
              'entity': state.entity_id,
              'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Lounge')[1],
              'card_mod':
                {
                'style': 'bar-card-currentbar, bar-card-backgroundbar {
                        border-radius: 12px !important;
                        height: 36px !important;
                        margin-top: -8px !important;
                        width: calc(100% + 18px);
                        left: -3.5%;
                      }
                      ha-icon {
                        position: relative;
                        padding: 8px;
                        border-radius: 50%;
                        --mdc-icon-size: 21px;
                        margin-top: -19px;
                        right: 8px;
                      }
                      bar-card-name {
                        display: relative;
                        font-weight: bold;
                        width: fit-content;
                        bottom: 8px;
                        right: 8px;
                      }
                      bar-card-name:after {
                        content: "{{states(config.entity)}} %";
                        display: flex;
                        position: relative;
                        font-size: 11px;
                        font-weight: light;
                        bottom: 2px;
                        left: 0px;
                      }
                      {% if states(config.entity) | int(default=unknown) == unknown %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                        /* Bar color */
                        --bar-color: #0033ff !important;
                        /* Icon */
                        --card-mod-icon: mdi:bug;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 10 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                        /* Bar color */
                        --bar-color: rgb(244, 67, 54) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-10 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 20 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                        /* Bar color */
                        --bar-color: rgb(255, 111, 0) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-20 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 30 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                        /* Bar color */
                        --bar-color: rgb(255, 152, 0) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-30 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 40 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                        /* Bar color */
                        --bar-color: rgb(255, 193, 7) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-40 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 50 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                        /* Bar color */
                        --bar-color: rgb(255, 235, 59) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-50 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 60 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                        /* Bar color */
                        --bar-color: rgb(205, 220, 57) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-60 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 70 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                        /* Bar color */
                        --bar-color: rgb(139, 195, 74) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-70 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 80 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                        /* Bar color */
                        --bar-color: rgb(139, 195, 74) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-80 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 90 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                        /* Bar color */
                        --bar-color: rgb(76, 175, 80) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery-90 !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% elif states(config.entity) | int <= 100 %}
                      bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                        /* Bar color */
                        --bar-color: rgb(76, 175, 80) !important;
                        /* Icon */
                        --card-mod-icon: mdi:battery !important;
                      }
                      @media (prefers-color-scheme: dark) {
                        /* Dark theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color) !important;
                          filter: invert(1);
                        }
                        bar-card-name:after {
                          color: #cccccc !important;
                        }
                      }
                      @media (prefers-color-scheme: light) { 
                        /* Light theme text colors */
                        bar-card-name {
                          color: var(--card-primary-color)  !important;
                        }
                        bar-card-name:after {
                          color: #3b3b3b !important;
                        }
                      }
                      {% endif %}
                      bar-card-row, ha-icon {
                        color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                        background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                      }
                      bar-card-indicator {
                        color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                        top: -8px;
                      }
                      bar-card-value {
                        color: transparent !important;
                      }
                      ha-card {
                        margin: 0px 0px -18px 0px !important;
                        height: 54px;
                      }'
                    }
          }
        }}, {%- endfor %}
    sort:
      method: state
      numeric: true
      first: 1
      count: 100
2 Likes

Is this still working friend?

Im trying to replicate here but the sticky bar is not “stickyng” hahaha

you have to use fixed instead. sticky is no more working since a few updates. Here is an example of my menu css.

card_mod:
  style: |
    :host {
      z-index: 4;
      position: fixed;
      width: 100%;
      bottom: 0;
      padding-right: 8px;
      margin: 0px 8px 0px -8px;
      border-top: 1px solid rgba(0,0,0,0.1);
    }

    ha-card {    
      background: var(--cstm-rgb-bottom-nav);
      box-shadow: none;
      padding-bottom: 15px;
      border-radius: 0px;
      }

6 Likes

Thanks!!!

it worked.

1 Like

Holy s*** -30 outdoor?
You are freezing hahaha

thanks, nice card btw!!

Hi just trying some of your nice cards,

card_mod:
  style:
     mushroom-shape-icon$: |
      .shape {
        border: 5.5px groove green;
        --shape-color: orange !important;
         }
  
  .: |
      ha-card {
        background-color: #fff000;
        border: 2.0px outset white;
        height: 200px !important;
        width: 200px;
        box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
        border-radius: 20px !important;
        animation: ping 2s infinite;
         } 
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
        70% {box-shadow: 20px 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

does not work for me, if I remove

mushroom-shape-icon$: |
      .shape {
        border: 5.5px groove green;
        --shape-color: orange !important;
         }

and let the code as this

card_mod:
  style: |
      ha-card {
        background-color: #fff000;
        border: 2.0px outset white;
        height: 200px !important;
        width: 200px;
        box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
        border-radius: 20px !important;
        animation: ping 2s infinite;
         } 
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
        70% {box-shadow: 20px 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

then it works fine

I cant understnad the $ and | thing

could you please explain for novices?

This is fantastic and I’ve just added it to my dashboard. However for some reason I can’t get the Wifi icon to show for the guest Wifi:

image

The entity does have an icon set… Any idea?

Nice, with filling. can you please share the code?

I think it’s here- I followed the thread backwards

I updated my setup to use tile-card (incl. custom features (HACS)) instead of button-card. The new card looks like this

image

Code:

type: tile
layout_options:
  grid_columns: full
card_mod:
  style: |
    ha-card {
      box-shadow: none !important;
    }      
color: blue
entity: sensor.ecosys_m5521cdn
features:
  - type: custom:service-call
    entries:
      - type: button
        entity_id: sensor.ecosys_m5521cdn_black_tk_5230k
        icon: mdi:water
        label: "{{ states(config.entity)}} %"
        styles: |-
          :host {
            --color: grey;
            --icon-color: grey;
          }              
        tap_action:
          action: more-info
          data:
            entity_id: sensor.ecosys_m5521cdn_black_tk_5230k
      - type: button
        entity_id: sensor.ecosys_m5521cdn_cyan_tk_5230cs
        icon: mdi:water
        label: "{{ states(config.entity)}} %"
        styles: |-
          :host {
            --color: darkcyan;
            --icon-color: darkcyan;
          }
        tap_action:
          action: more-info
          data:
            entity_id: sensor.ecosys_m5521cdn_cyan_tk_5230cs
      - type: button
        entity_id: sensor.ecosys_m5521cdn_magenta_tk_5230m
        icon: mdi:water
        label: "{{ states(config.entity)}} %"
        styles: |-
          :host {
            --color: darkmagenta;
            --icon-color: darkmagenta;
          }
        tap_action:
          action: more-info
          data:
            entity_id: sensor.ecosys_m5521cdn_magenta_tk_5230m
      - type: button
        entity_id: sensor.ecosys_m5521cdn_yellow_tk_5230y_2
        icon: mdi:water
        label: "{{ states(config.entity)}} %"
        styles: |-
          :host {
            --color: orange;
            --icon-color: orange;
          }
        tap_action:
          action: more-info
          data:
            entity_id: sensor.ecosys_m5521cdn_yellow_tk_5230y_2


8 Likes

Also updated the Internet-state-card to use tile instead of button-card:

image

Code:

type: tile
color: green
entity: binary_sensor.fb_keller_connection
features:
  - type: custom:service-call
    entries:
      - type: button
        entity_id: switch.fb_keller_wi_fi_guestwifi
        icon: "{{state_attr(config.entity,\"icon\")}}"
        label: "{{state_attr(config.entity,\"friendly_name\")}}"
        styles: |-
          :host {
            {% if is_state(config.entity, "on") %}
              --color: var(--green-color);
              --icon-color: var(--green-color);
              --label-color: var(--green-color);
            {% endif %}        
          }            
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.fb_keller_wi_fi_guestwifi
        hold_action:
          action: more-info
          data:
            entity_id: switch.fb_keller_wi_fi_guestwifi
      - type: button
        entity_id: sensor.speedtest_download
        icon: "{{state_attr(config.entity,\"icon\")}}"
        label: "{{ states(config.entity) | int }} Mbit/s"
        styles: |-
          :host {
            {% if states(config.entity) > 350 %}
              --color: var(--green-color);
              --icon-color: var(--green-color);
              --label-color: var(--green-color);
            {% elif states(config.entity) < 100 %}
              --color: var(--red-color);
              --icon-color: var(--red-color);
              --label-color: var(--red-color);                  
            {% else %}
              --color: var(--orange-color);
              --icon-color: var(--orange-color);
              --label-color: var(--orange-color);                                    
            {% endif %}        
          }                                    
        tap_action:
          action: more-info
          data:
            entity_id: sensor.speedtest_download
      - type: button
        entity_id: sensor.speedtest_upload
        icon: "{{state_attr(config.entity,\"icon\")}}"
        label: "{{ states(config.entity) | int }} Mbit/s"
        styles: |-
          :host {
            {% if states(config.entity) > 150 %}
              --color: var(--green-color);
              --icon-color: var(--green-color);
              --label-color: var(--green-color);
            {% elif states(config.entity) < 50 %}
              --color: var(--red-color);
              --icon-color: var(--red-color);
              --label-color: var(--red-color);                  
            {% else %}
              --color: var(--orange-color);
              --icon-color: var(--orange-color);
              --label-color: var(--orange-color);                                    
            {% endif %}        
          }                                                           
        tap_action:
          action: more-info
          data:
            entity_id: sensor.speedtest_upload
      - type: button
        entity_id: sensor.speedtest_ping
        icon: "{{state_attr(config.entity,\"icon\")}}"
        label: "{{ states(config.entity) | int }} ms"
        styles: |-
          :host {
            {% if states(config.entity) < 20 %}
              --color: var(--green-color);
              --icon-color: var(--green-color);
              --label-color: var(--green-color);
            {% elif states(config.entity) > 50 %}
              --color: var(--red-color);
              --icon-color: var(--red-color);
              --label-color: var(--red-color);                  
            {% else %}
              --color: var(--orange-color);
              --icon-color: var(--orange-color);
              --label-color: var(--orange-color);                                    
            {% endif %}        
          }                                           
        tap_action:
          action: more-info
          data:
            entity_id: sensor.speedtest_ping
layout_options:
  grid_columns: 4
  grid_rows: 2
5 Likes

…and also my desk-card (button-card → tile-card)

image

Code:

type: tile
color: blue
entity: cover.desk
state_content: current_position
features:
  - type: cover-open-close
  - type: custom:service-call
    entries:
      - type: button
        entity_id: button.sit
        icon: "{{ state_attr(config.entity,\"icon\")}}"
        label: "{{ state_attr(config.entity,\"friendly_name\")}}"
        tap_action:
          action: perform-action
          perform_action: button.press
          target:
            entity_id: button.sit
        hold_action:
          action: more-info
          target:
            entity_id: button.sit
      - type: button
        entity_id: button.stand
        icon: "{{ state_attr(config.entity,\"icon\")}}"
        label: "{{ state_attr(config.entity,\"friendly_name\")}}"
        tap_action:
          action: perform-action
          perform_action: button.press
          target:
            entity_id: button.stand
        hold_action:
          action: more-info
          target:
            entity_id: button.stand
card_mod:
  style:
    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: " - {{ states('sensor.desk_height', with_unit=true) | string }} ";
      }         
layout_options:
  grid_columns: 4
  grid_rows: 3
2 Likes

did you see this:

My effort to delete `custom: bar-card`
type: custom:auto-entities
card:
  title: Battery Status
  type: entities
  card_mod:
    class: class-header-margin
    style:
      hui-sensor-entity-row:
        $: |
          hui-generic-entity-row {
            height: 25px;
            padding: 0px 16px;
            border-radius: var(--ha-card-border-radius);
            border: 1px groove var(--primary-color);
          }
      .: |
        ha-card {
          color: vcar(--primary-color);
          /*--mdc-icon-size: 40px;*/
          font-weight: 400;
        }
        .card-content {
          max-height: {{states('input_number.max_scroll_hoogte')}}px;
          overflow-y: scroll;
        }
  state_color: false
  show_header_toggle: false
filter:
  exclude:
    - integration: battery_notes
    - entity_id: sensor.*battery_state
  include:
    - entity_id: sensor.*_battery*
      options:
        type: custom:template-entity-row
        state: >
          {{states(config.entity,with_unit=True)}}
        secondary: >
            Batterij: {{states(config.entity ~'_type')}},
            sinds: {{states(config.entity ~'_last_replaced')|as_timestamp(default=none)|timestamp_custom('%d-%m-%y %X',True,'Nog niet geactiveerd')}}
        card_mod:
          style:
            div#wrapper:
              .: |
                .state {
                  color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }
                .info {
                  color: black;
                  border: 2px solid var(--ha-color);
                  background:
                    {% set perc = states(config.entity)|float(0) %}
                    /*{% set rest = 100 - perc %}*/
                    {% if perc <= 10 %} {% set bar = '255,0,0' %}
                    {% elif perc <= 20 %} {% set bar = '128,0,0' %}
                    {% elif perc <= 30 %} {% set bar = '255,140,0' %}
                    {% elif perc <= 40 %} {% set bar = '255,165,0' %}
                    {% elif perc <= 50 %} {% set bar = '255,255,0' %}
                    {% elif perc <= 60 %} {% set bar = '154,205,5' %}
                    {% elif perc <= 70 %} {% set bar = '144,238,144' %}
                    {% elif perc <= 80 %} {% set bar = '50,205,50' %}
                    {% elif perc <= 90 %} {% set bar = '0,128,0' %}
                    {% else %} {% set bar = '0,100,0' %}
                    {% endif %}
                    /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
                    linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                              rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
                  }
                .info .secondary {
                  color: white;
                }
            .: |
              :host {
                --card-mod-icon-color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }
sort:
  method: state
  numeric: true
  reverse: false
show_empty: false

seems so much shorter, and gives an identical look and feel. well, sort of :wink:

its admittedly a bit clunky depending on the displaying device (all n frontend).

Gas-Stations-Card

A vertical-stack of tile-cards with custom-feature-buttons sorted by gas-price (low → high) with auto-entities-card.

needed components:

Code:

type: vertical-stack
cards:
  - type: custom:auto-entities
    card:
      square: false
      columns: 1
      type: grid
    card_param: cards
    sort:
      method: state
      numeric: true
    filter:
      include:
        - attributes:
            fuel_type: e5
          not:
            state: unavailable
          not 2:
            state: unknown
          options:
            type: tile
            show_entity_picture: true
            state_content:
              - street
              - house_number
              - city
            features:
              - type: custom:service-call
                entries:
                  - type: button
                    entity_id: this.entity_id
                    icon: mdi:door-open
                    label: geöffnet
                    tap_action:
                      action: more-info
                      target:
                        entity_id: this.entity_id
                  - type: button
                    entity_id: this.entity_id
                    icon: mdi:water
                    label: >-
                      {{
                      state_attr(config.entity,"fuel_type").replace("e5","Super
                      E5").replace("diesel","Diesel") }}
                    tap_action:
                      action: more-info
                  - type: button
                    entity_id: this.entity_id
                    icon: mdi:currency-eur
                    label: >-
                      {{ states(config.entity) | float(default=0) | round(2) }}
                      €
                    tap_action:
                      action: more-info
                      target:
                        entity_id: this.entity_id

3 Likes

Thats pretty good! I would definitely want to make some changes for it to fit in with mushroom more, but it certainly loads better, at least for me.

1 Like

Energie Autarky-Card (Mushroom-Template-Card)

image

This Card displays the grade of autarky and a text to discripe how much power your house currently needs und where this power comes from (in order from high to low values).

The color and icon will match the primary source of power (solar = orange + mdi:solar-power, home-battery = green + mdi:home-battery-outline and grid = red + mdi:transmission-tower-export). The same goes for the badge, but for your secondary source of power.

For this you will need the following sensors:

  • a sensor representing the current power your house uses (see “hausverbrauch” in code below)
  • a sensor representing the current power directly from your solar-panels that is used in hour house (see “solarenergie” in code below)
  • a sensor representing the current power from your home-battery that is used in hour house (see “speicherentladung” in code below)
  • a sensor representing the current power from grid that is used in hour house (see “netzbezug” in code below)

Just change the “sensor.[…]” values in the following code to use your entities.

type: custom:mushroom-template-card
primary: >-
  Autarkie von {% set hausverbrauch = states('sensor.senec_house_power') |
  int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}

  {{((solarenergie + speicherentladung) / hausverbrauch * 100) |
  int(default=0)}}%
multiline_secondary: true
secondary: >-
  {% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}


  {% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus dem Netz gedeckt.
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus dem Speicher gedeckt.
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird vollständig aus Solarenergie gedeckt.
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(speicherentladung > solarenergie, speicherentladung, solarenergie) }} W aus {{ iif(speicherentladung > solarenergie, "dem Speicher", "Solarenergie") }} und mit {{ iif(speicherentladung > solarenergie, solarenergie, speicherentladung) }} W aus {{ iif(speicherentladung > solarenergie, "Solarenergie", "dem Speicher") }} gedeckt.  
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(netzbezug > solarenergie, netzbezug, solarenergie) }} W aus {{ iif(netzbezug > solarenergie, "dem Netz", "Solarenergie") }} und mit {{ iif(netzbezug > solarenergie, solarenergie, netzbezug) }} W aus {{ iif(netzbezug > solarenergie, "Solarenergie", "dem Netz") }} gedeckt.    
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
    Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ iif(netzbezug > speicherentladung, netzbezug, speicherentladung) }} W aus {{ iif(netzbezug > speicherentladung, "dem Netz", "dem Speicher") }} und mit {{ iif(netzbezug > speicherentladung, speicherentladung, netzbezug) }} W aus {{ iif(netzbezug > speicherentladung, "dem Speicher", "dem Netz") }} gedeckt.
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
    {% if netzbezug > solarenergie and netzbezug > speicherentladung %}
      Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ netzbezug }} W aus dem Netz, mit {{ iif(solarenergie > speicherentladung, solarenergie, speicherentladung) }} W aus {{ iif(solarenergie > speicherentladung, "Solarenergie", "dem Speicher") }} und mit {{ iif(solarenergie > speicherentladung, speicherentladung, solarenergie) }} W aus {{ iif(solarenergie > speicherentladung, "dem Speicher", "Solarenergie") }} gedeckt.
    {% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
      Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ solarenergie }} W aus Solarenergie, mit {{ iif(netzbezug > speicherentladung, netzbezug, speicherentladung) }} W aus {{ iif(solarenergie > speicherentladung, "dem Netz", "dem Speicher") }} und mit {{ iif(netzbezug > speicherentladung, speicherentladung, netzbezug) }} W aus {{ iif(solarenergie > speicherentladung, "dem Speicher", "dem Netz") }} gedeckt.
    {% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
      Der Hausverbrauch von {{ hausverbrauch }} W wird mit {{ speicherentladung }} W aus dem Speicher, mit {{ iif(solarenergie > netzbezug, solarenergie, netzbezug) }} W aus {{ iif(solarenergie > netzbezug, "Solarenergie", "dem Netz") }} und mit {{ iif(solarenergie > netzbezug, netzbezug, solarenergie) }} W aus {{ iif(solarenergie > netzbezug, "dem Netz", "Solarenergie") }} gedeckt.
    {% else %}
      Fehler
    {% endif %}
  {% endif %}
icon: >-
  {% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}


  {% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
    mdi:transmission-tower-export
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
    mdi:home-battery-outline
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
    mdi:solar-power
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
    {{ iif(speicherentladung > solarenergie,"mdi:home-battery-outline","mdi:solar-power") }}
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
    {{ iif(netzbezug > solarenergie,"mdi:transmission-tower-export","mdi:solar-power") }}
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
    {{ iif(speicherentladung > netzbezug,"mdi:home-battery-outline","mdi:transmissions-tower-export") }}
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
    {% if netzbezug > solarenergie and netzbezug > speicherentladung %}
      mdi:transmission-tower-export
    {% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
      mdi:solar-power
    {% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
      mdi:home-battery-outline    
    {% else %}
      mdi:home-import-outline
    {% endif %}
  {% endif %}
icon_color: >-
  {% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}


  {% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
    red
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
    green
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
    orange
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
    {{ iif(speicherentladung > solarenergie,"green","orange") }}
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
    {{ iif(netzbezug > solarenergie,"red","orange") }}
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
    {{ iif(speicherentladung > netzbezug,"green","red") }}
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
    {% if netzbezug > solarenergie and netzbezug > speicherentladung %}
      red
    {% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
      orange
    {% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
      green
    {% else %}
      blue
    {% endif %}
  {% endif %}
layout_options:
  grid_columns: full
tap_action:
  action: none
visibility:
  - condition: state
    entity: input_boolean.energie_aktuell_anzeigen
    state: "on"
  - condition: state
    entity: input_select.stromwassergas
    state: Strom
badge_icon: >-
  {% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}


  {% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
    none
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
    none
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
    none
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
    {{ iif(speicherentladung > solarenergie,"mdi:solar-power","mdi:home-battery-outline") }}
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
    {{ iif(netzbezug > solarenergie,"mdi:solar-power","mdi:transmission-tower-export") }}
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
    {{ iif(speicherentladung > netzbezug,"mdi:transmissions-tower-export","mdi:home-battery-outline") }}
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
    {% if netzbezug > solarenergie and netzbezug > speicherentladung %}
      {{ iif(solarenergie > speicherentladung,"mdi:solar-power","mdi:home-battery-outline") }}
    {% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
      {{ iif(netzbezug > speicherentladung,"mdi:transmission-tower-export","mdi:home-battery-outline") }}
    {% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
      {{ iif(netzbezug > solarenergie,"mdi:transmission-tower-export","mdi:solar-power") }}
    {% else %}
      mdi:home-import-outline
    {% endif %}
  {% endif %}
badge_color: >-
  {% set hausverbrauch = states('sensor.senec_house_power') | int(default=0) %}

  {% set netzbezug = states('sensor.senec_grid_house_used_power') |
  int(default=0) %}

  {% set speicherentladung = states("sensor.senec_battery_house_used_power") |
  int(default=0) %}

  {% set solarenergie = states("sensor.senec_solar_house_used_power") |
  int(default=0) %}


  {% if speicherentladung == 0 and solarenergie == 0 and netzbezug > 0 %}
    none
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug == 0 %}
    none
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug == 0 %}
    none
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug == 0 %}
    {{ iif(speicherentladung > solarenergie,"orange","green") }}
  {% elif speicherentladung == 0 and solarenergie > 0 and netzbezug > 0 %}
    {{ iif(netzbezug > solarenergie,"orange","red") }}
  {% elif speicherentladung > 0 and solarenergie == 0 and netzbezug > 0 %}
    {{ iif(speicherentladung > netzbezug,"red","green") }}
  {% elif speicherentladung > 0 and solarenergie > 0 and netzbezug > 0 %}
    {% if netzbezug > solarenergie and netzbezug > speicherentladung %}
      {{ iif(solarenergie > speicherentladung,"orange","green") }}
    {% elif solarenergie > netzbezug and solarenergie > speicherentladung %}
      {{ iif(netzbezug > speicherentladung,"red","green") }}
    {% elif speicherentladung > netzbezug and speicherentladung > solarenergie %}
      {{ iif(netzbezug > solarenergie,"red","orange") }}
    {% else %}
      mdi:home-import-outline
    {% endif %}
  {% endif %}

8 Likes

I’m using this and really like the design; thanks for the work. There is one thing that I’d prefer: when a light is off, pressing the slider bar toggles to last brightness. I’d prefer it turn it on to wherever along the bar the press was made. Doable?