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
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:
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)
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 
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)
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 %}
7 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?