Mushroom Inspiration!

Share your Projects! Dashboards & Frontend
368

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
369

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
6 Likes
370

…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
371

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).

372

Gas-Stations-Card

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

image
image519×605 31.8 KB

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
373

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
374

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 %}
10 Likes
375

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?

376

Very nice work!
Could you please post also the code for your Area-Tile on your homepage?

377

Hi, and many thanks for your time.
Would it be possible to have this option for the mushroom cover cards?
Thank you.

378

I use the waste collection HACS addon and a mushroom card to see the type of trash, how many days left and on which date, Day:

You need no separate sensor for each trash type, it takes the type and date from the attributes of the waste collection entity.

Just replace “calendar.REPLACE_WITH_YOUR_CALENDAR” with your Entity of the waste collection calendar.

image

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: >-
      {% set message = state_attr('calendar.REPLACE_WITH_YOUR_CALENDAR', 'message') %}
      {% set event_ts = as_timestamp(state_attr('calendar.REPLACE_WITH_YOUR_CALENDAR', 'start_time')) %}
      {% set now_ts = as_timestamp(now()) %}
      {% set days_until = ((event_ts - now_ts) / 86400) | round(0, 'ceil') %}
      {% set day_text = 'Tag' if days_until == 1 else 'Tage' %}
      {% if days_until == 0 %}
        Heute: {{ message }}
      {% elif days_until == 1 %}
        Morgen: {{ message }}
      {% else %}
        {{ message }} - Noch {{ days_until }} {{ day_text }}
      {% endif %}
    secondary: >-
      {% set weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
      {% set day = as_timestamp(state_attr('calendar.REPLACE_WITH_YOUR_CALENDAR', 'start_time')) | timestamp_custom('%w') %}
      {{ weekdays[day | int] }}, {{ as_timestamp(state_attr('calendar.REPLACE_WITH_YOUR_CALENDAR', 'start_time')) | timestamp_custom('%d.%m.%Y') }}
    icon: mdi:delete-empty
    entity: calendar.REPLACE_WITH_YOUR_CALENDAR
    icon_color: >-
      {% set event_ts = as_timestamp(state_attr('calendar.REPLACE_WITH_YOUR_CALENDAR', 'start_time')) %}
      {% set now_ts = as_timestamp(now()) %}
      {% set hours_until = ((event_ts - now_ts) / 3600) | round(2) %}
      {% if hours_until <= 24 and hours_until > 0 %}
        pink
      {% elif hours_until <= 0 and hours_until >= -24 %}
        red
      {% else %}
        grey
      {% endif %}
    multiline_secondary: true
    fill_container: false
    tap_action:
      action: more-info
columns: 1
4 Likes
379

Great work, I love the simplicity, but what if I have collects in the same day? For exemple, my Gelber Sack and Bioabfall come always together.

380

Hi Guys,

Maybe you can help me. I try to combine a Mushroom lightcard with the Chips-Card with Vertical-Stack-in-Card.

image
image738×332 15.8 KB

image
image1125×2436 291 KB

Now I try to margin the Chips to the same gap as the Mushroomtitle. I tried that with Card-mod but I did it wrong. Maybe I use the wrong Container.

Can you please Push me in the Right direction.

Thanks a lot.

Christian

381

Can you post your code using back tics?

The instructions are here #11

1 Like
382 
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
    alignment: end
  - type: custom:mushroom-light-card
    entity: light.wohnzimmer_2
    use_light_color: true
    show_color_temp_control: true
    show_color_control: true
    show_brightness_control: true
    layout: vertical
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            text-align: left !important;
          }
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 20px !important;
          } 
        .: |
          ha-card {
            padding: 5px !important;
          }
383

Let’s start here…

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
    alignment: end
    card_mod:
      style: |
        ha-card {
           top: 50px;
           z-index: 1;
           right: 20px;
           }
  - type: custom:mushroom-light-card
    entity: light.wohnzimmer_2
    use_light_color: true
    show_color_temp_control: true
    show_color_control: true
    show_brightness_control: true
    layout: vertical
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            text-align: left !important;
          }
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 20px !important;
          } 
        .: |
          ha-card {
             padding: 5px !important;
           }
384

Thanks a lot. That‘s very close.

image
image1169×521 20.1 KB

But now we have to reduce the height :sweat_smile: to make Perfect.

Christian

385

Like this?

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
      - type: template
        icon: mdi:heart
    alignment: end
    card_mod:
      style: |
        ha-card {
           top: 30px;
           z-index: 1;
           right: 20px;
           }
  - type: custom:mushroom-light-card
    entity: light.wohnzimmer_2
    use_light_color: true
    show_color_temp_control: true
    show_color_control: true
    show_brightness_control: true
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            text-align: left !important;
          }
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 20px !important;
          } 
        .: |
          ha-card {
           margin-top:-10px;
           }

image
image755×254 5.61 KB

3 Likes
386

Perfect. You are a Master in CSS.

Thank you very much!

1 Like
387

Happy to assist!!

1 Like