Hello
I use the ui mode and I was wondering if anyone knew a way to use the !include?
I would like to add the popup templates but I dont want everything in one file.
However, everything that I have found says that the āincludeā is only available in .yaml
Sharingā¦ Created a custom card for minimalist to show a bar graph for commute time
This mod uses the bignumber-card, please install that from HACS before using this card.
You will need to have a travel time sensor created - e.g. Waze -
All variables are required:
ulm_card_commute_entity - Travel time sensor
ulm_card_commute_name - Name to display under the bar graph
These variables are in minutes
ulm_card_commute_normal - defines the normal commuting time, this time or less shows a green bar
ulm_card_commute_slow - commute times up to this this number will show yellow
ulm_card_commute_max - defines the maximum time. Anything between slow and max will show red.
Lovelace YAML example
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_commute
variables:
ulm_card_commute_entity: 'sensor.school_traveltime'
ulm_card_commute_name: "School"
ulm_card_commute_normal: 15
ulm_card_commute_slow: 20
ulm_card_commute_max: 120
- type: 'custom:button-card'
template: card_commute
variables:
ulm_card_commute_entity: 'sensor.ymca_traveltime'
ulm_card_commute_name: "YMCA"
ulm_card_commute_normal: 12
ulm_card_commute_slow: 20
ulm_card_commute_max: 120
minimalist-templates/custom_card_commute/custom_card_commute.yaml
### used card_graph as a template
card_commute:
variables:
ulm_card_commute_color: "var(--info-color)"
ulm_card_commute_name: "n/a"
triggers_update:
- "[[[ variables.ulm_card_commute_entity ]]]"
styles:
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 0.25fr 2fr 0fr
- grid-template-rows: 1fr
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- commute_icon_only
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
item2:
card:
type: 'custom:bignumber-card'
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
title: '[[[ return variables.ulm_card_commute_name ]]]'
scale: 12px
from: left
min: 0
max: '[[[ return variables.ulm_card_commute_max ]]]'
hideunit: true
severity:
- value: '[[[ return variables.ulm_card_commute_normal ]]]'
bnStyle: 'var(--label-badge-green)'
- value: '[[[ return variables.ulm_card_commute_slow ]]]'
bnStyle: 'var(--label-badge-yellow)'
- value: '[[[ return variables.ulm_card_commute_max ]]]'
bnStyle: 'var(--label-badge-red)'
item3:
card:
type: 'custom:button-card'
template:
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
commute_icon_only:
color: var(--google-grey)
show_icon: true
show_label: false
show_name: false
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content
size: 20px
Kudos to tben for Minimalist (this is an awesome framework!) and the bignumber-card team!
On my dashboard this visible palette icon to change color is missing, I need to hold click, how can I change to this palette? Thanks
I also needed to clean some names on your code to work, here is the result for the next people:
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
light_with_colors:
tap_action:
action: toggle
hold_action:
action: more-info
label: |-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri + '%' : 'On') ;
}
}else{
return "Indisponible";
}
]]]
state:
- styles:
icon:
- filter: |-
[[[
var bri = entity.attributes.brightness / 2.55;
return ('brightness(' + (50+bri/2) + '%)') ;
]]]
- color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--couleur-jaune),1)'
}
]]]
img_cell:
- background-color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
}
else{
return 'rgba(var(--couleur-jaune),0.2)'
}
]]]
value: 'on'
light_buttons_with_colors_light:
show_name: false
show_icon: false
variables:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: "[[[ return entity.entity_id ]]]"
radius: 12px
height: 42px
thumbColorOff: rgba(var(--couleur-theme),0.2)
mainSliderColorOff: rgb(var(--couleur-theme),0.2)
secondarySliderColorOff: var(--google-grey-500)
mainSliderColor: rgb(var(--couleur-gris-light))
thumbColor: rgb(var(--couleur-gris-light))
secondarySliderColor: var(--google-grey-500)
card_mod:
style: |
ha-card {
border-radius: 14px;
}
div {
border: 2px solid var(--google-grey-500);
border-radius: 14px !important;
box-sizing: border-box;
position: relative;
}
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
template: widget_icon
light_buttons_with_colors:
show_name: false
show_icon: false
variables:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: "[[[ return entity.entity_id ]]]"
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: rgba(var(--couleur-theme),0.05)
secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
thumbColorOff: white
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
template: widget_icon
You need to fix that using layout cards, you can use the standard horizontal layout card and put the header into one and the other cards to one. I prefer to use the custom:layout-card with grid layout for maximum control.
The new popup cards for lights are really awesome, thanks a bunch! Anyone knows if itās possible to somehow only control lights that are on in a light group? I use the popup with light groups so Iām looking into maybe adding a button on there for all the entities in that group to turn on/off them individually and only control the ones that are on with the popup card.
Sorry @Br3b, Iām a little bit late. Here comes my code.
Note that I made one big hardcoded template, because we have also one big poop area for our kitties 
Card:
#### KATZENKLO
- type: custom:button-card
entity: binary_sensor.bewegungsmelder_katzenklo
variables:
count: counter.katzenklo_besuche
reset: input_boolean.katzenklo
template: katzenklo
Template:
katzenklo:
triggers_update: all
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- border-radius: 5px
- padding: 10px 10px 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 10px
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: more-info
show_icon: true
show_name: true
show_state: false
show_label: true
size: 20px
icon: mdi:toilet
label: |
[[[
if (entity.state == 'on') return 'ā¦wird gerade benutzt';
return ' '
]]]
state:
- value: 'on'
styles:
icon:
- color: rgba(255, 69, 0, 1)
img_cell:
- background-color: rgba(255, 69, 0, 0.2)
- border: none
name:
- color: rgba(255, 69, 0, 1)
state:
- color: rgba(255, 69, 0, 1)
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
img_cell:
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- background: rgba(0, 0, 0, 0.06)
name:
- align-self: end
- justify-self: start
- font-weight: 500
- font-size: 13px
- margin-left: 12px
label:
- align-self: start
- justify-self: start
- text-align: left
- font-weight: 450
- font-size: 12px
- filter: opacity(70%)
- margin-left: 12px
item2:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- padding-bottom: 10px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- justify-items: center
- justify-content: space-between
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return variables.count ]]]'
tap_action:
action: more-info
show_state: false
show_name: false
show_icon: false
show_label: true
label: |
[[[
var c = states[variables.count].state;
return `<ha-icon icon="mdi:paper-roll-outline" style="width: 20px; height: 20px; color: var(--text-color-sensor);"></ha-icon>
<span style="font-weight: 450; color: var(--text-color-sensor)">Besuche: ${c}</span>`;
]]]
styles:
card:
- box-shadow: none
- padding: 0px
label:
- justify-self: start
- font-size: 11px
- '--text-color-sensor': |
[[[
var c = states[variables.count].state;
if (c == 2) return 'orange';
if (c >= 3) return 'red';
return 'var(--text-color-sensor)'
]]]
item2:
card:
type: custom:button-card
entity: '[[[ return variables.reset ]]]'
tap_action:
action: call-service
service: counter.reset
service_data:
entity_id: '[[[ return variables.count ]]]'
show_state: false
show_name: false
show_icon: false
show_label: true
label: |
[[[
var c = states[variables.count].state;
var status = 'Klo sƤubern!'
if (c > 0) { status = 'sƤubern!';}
if (c == 0) { status = 'gereinigt';}
return `<ha-icon icon="mdi:broom" style="width: 20px; height: 20px; color: var(--text-color-sensor);"></ha-icon>
<span style="color: var(--text-color-sensor)">${status}</span>`;
]]]
styles:
card:
- box-shadow: none
- padding: 0px
label:
- justify-self: start
- font-size: 11px
- '--text-color-sensor': |
[[[
var c = states[variables.count].state;
if (c == 0) return 'green';
if (c == 2) return 'orange';
if (c >= 3) return 'red';
return 'var(--primary-text-color)';
]]]
#### END ####
Helper:
input_boolean:
katzenklo:
name: Katzentoilette gereinigt
icon: mdi:broom
counter:
katzenklo_besuche:
name: Katzenklo-Besuche
icon: mdi:paper-roll-outline
initial: 0
restore: true
step: 1
minimum: 0
maximum: 24
Automation:
automation:
#### COUNTER VISITS
- id: katzenklo_besuche
alias: Katzenklo-Besuche
mode: single
trigger:
- platform: state
entity_id: binary_sensor.bewegungsmelder_katzenklo
to: 'on'
condition:
- condition: template
value_template: |
{{ as_timestamp(now()) - as_timestamp(states.automation.katzenklo_besuche.attributes.last_triggered) | int > 120 }}
action:
- service: counter.increment
target:
entity_id: counter.katzenklo_besuche
#### CAT TOILET USED; WARNINGS
- id: katzenklo_warnstufen
alias: 'benutztes Katzenklo Warnstufen'
mode: single
trigger:
- platform: state
entity_id: counter.katzenklo_besuche
condition:
- condition: state
entity_id: group.anwesend ## are servants at home?
state: 'on'
- condition: time
after: '07:00:00'
before: '22:00:00'
action:
- choose:
#### 1. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '2'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: Die Katzentoilette wurde benutzt.<break time="500ms"/>Bitte reinige sie.
data:
type: tts
method: speak
#### 2. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '4'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: |
<amazon:emotion name="disappointed" intensity="medium">Ich darf daran erinnern, die Katzentoilette zu reinigen.</amazon:emotion>
data:
type: tts
method: speak
#### 3. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '7'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: |
<amazon:emotion name="disappointed" intensity="high">Ich sag nur Katzentoilette.<break time="500ms"/>Aber auf mich hƶrt ja sowieso keiner.</amazon:emotion>
data:
type: tts
method: speak
#### INFO
- id: katzenklo_besuche_info
alias: Katzenklo-Besuche Info
mode: single
trigger:
- platform: state
entity_id: counter.katzenklo_besuche
action:
- choose:
#### 3 visits
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '6'
sequence:
- service: notify.alexa_media_this_device
data:
message: Katzentoilette zum 3. Mal benutzt
data:
type: push
#### more than 3 visits
- conditions:
- condition: numeric_state
entity_id: counter.katzenklo_besuche
above: '6'
sequence:
- service: notify.alexa_media_this_device
data:
message: Katzentoilette muss gereinigt werden!
data:
type: push
#### RESET COUNTER
- id: katzenklo_besuche_zuruecksetzen
alias: ZƤhler Katzenklo-Besuche zurĆ¼cksetzen
mode: single
trigger:
- platform: state
entity_id: input_boolean.katzenklo
to:
- 'on'
- 'off'
action:
- service: counter.reset
target:
entity_id: counter.katzenklo_besuche
#### END ####
Hi and happy new year!
Thank you for your answer, but how would I go about doing that? When I look at the yaml code of the card it is referencing to āicon_infoā and ālist_3_itemsā. These templates are present in the button_card_templates.yaml file. I tried to copy these specific templates to the custom_card_httpedo13_thermostat.yaml file to see if that would make a difference, but without luck. The rest of the card is functioning properly though, so there must be something obvious Iām missing.
This is the code of my thermostat:
- platform: generic_thermostat
name: Garage Boven Thermostaat
heater: switch.garage_boven_thermostaat_switch
target_sensor: sensor.garage_temperatuur
min_temp: 15
max_temp: 25
ac_mode: false
target_temp: 20
cold_tolerance: 0.3
hot_tolerance: 0
initial_hvac_mode: "heat"
precision: 0.1
Hey @flave, Iām using the new sidebar feature:
title: Homezone
path: panel-diele
type: sidebar
cards:
#### SIDEBAR
- !include sidebar.yaml
It is not ideal, but ok for my needs.
sidebar.yaml:
#### SIDEBAR
type: grid
columns: 1
square: false
cards:
- !include uhr_sidebar.yaml
- !include wetter_sidebar.yaml
#### SIDEBAR - NAVIGATION
- type: custom:button-card
entity: group.diele
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.schlafzimmer
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.kueche
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.wohnzimmer
template: panel_navigation_sidebar
view_layout: ## IMPORTANT!
position: sidebar
#### END ####
uhr_sidebar.yaml / clock - date - sun - lux:
type: custom:button-card
entity: sensor.time
triggers_update: all
show_icon: false
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
name: "[[[ return entity.state ]]]"
state_display: |
[[[
var tag = states['sensor.datumsanzeige'].state; ## sensor date
var kw = states['sensor.aktuelle_kalenderwoche'].state; ## sensor calendar week
return tag + '<br>(Kalenderwoche ' + kw + ')'
]]]
label: |
[[[
var s = states['sun.sun'].state
var auf = states['sensor.sonnenaufgang'].state; ## sensor sunrise
var unter = states['sensor.sonnenuntergang'].state; ## sensor sunset
var lux = states['sensor.lux'].state;
if (s == 'below_horizon')
return 'Die Sonne geht um ' + auf + ' auf.';
return 'Die Sonne geht um ' + unter + ' unter.<br> LichtintensitƤt: ' + lux + ' lx'
]]]
styles:
card:
- margin-left: 40px
- width: 25vw
- padding: 0
- border-radius: 0%
- box-shadow: none
- color: var(--primary-text-color)
- font-size: 13px
grid:
- grid-template-areas: '"n" "s" "l"'
- grid-template-columns: max-content
- justify-content: center
name:
- font-family: Arial Rounded MT Bold
- font-size: 42px
label:
- padding: 13px 0px
- white-space: pre-line
#### END ####
wetter_sidebar.yaml / weather:
type: custom:button-card
triggers_update: all
tap_action:
action: navigate
navigation_path: /homezone-yaml/wetter
styles:
card:
- margin-left: 40px
- width: 25vw
- padding: 0
- border-radius: 0%
- box-shadow: none
- color: var(--primary-text-color)
- font-size: 13px
grid:
- grid-template-areas: '"wetter"'
- grid-template-columns: max-content
- grid-template-rows: 1fr 1fr
- justify-content: center
custom_fields:
wetter:
- align-self: start
- justify-self: center
- text-align: left
- '--text-color-sensor': |
[[[
var entity = states['sensor.openweathermap_condition'].state;
if (entity == 'sunny') return 'yellow';
if (entity == 'windy') return 'skyblue';
if (entity == 'windy-variant') return 'skyblue';
if (entity == 'clear-night') return '#FFFFE0';
if (entity == 'partlycloudy') return 'lightgrey';
if (entity == 'cloudy') return 'lightgrey';
if (entity == 'overcast') return 'lightgrey';
if (entity == 'fog') return 'ivory';
if (entity == 'hail') return 'silver';
if (entity == 'lightning') return '#f4f3ef';
if (entity == 'lightning-rainy') return '#f4f3ef';
if (entity == 'rainy') return '#00d1d2';
if (entity == 'pouring') return '#00d1d2';
if (entity == 'snowy-rainy') return 'grey';
if (entity == 'snowy') return 'white';
else return 'teal';
]]]
custom_fields:
wetter: |
[[[
var i = states['sensor.openweathermap_condition'].state;
var mdi = 'mdi:white-balance-sunny';
if (i == 'sunny') { mdi = 'mdi:white-balance-sunny'; }
else if (i == 'windy') { mdi = 'mdi:weather-windy'; }
else if (i == 'windy-variant') { mdi = 'mdi:weather-windy-variant'; }
else if (i == 'clear-night') { mdi = 'mdi:weather-night'; }
else if (i == 'partlycloudy') { mdi = 'mdi:weather-partly-cloudy'; }
else if (i == 'cloudy') { mdi = 'mdi:weather-cloudy'; }
else if (i == 'overcast') { mdi = 'mdi:weather-cloudy-arrow-right'; }
else if (i == 'fog') { mdi = 'mdi:weather-fog'; }
else if (i == 'hail') { mdi = 'mdi:weather-hail'; }
else if (i == 'lightning') { mdi = 'mdi:weather-lightning'; }
else if (i == 'lightning-rainy') { mdi = 'mdi:weather-lightning-rainy'; }
else if (i == 'pouring') { mdi = 'mdi:weather-pouring'; }
else if (i == 'rainy') { mdi = 'mdi:weather-rainy'; }
else if (i == 'snowy-rainy') { mdi = 'mdi:weather-snowy-rainy'; }
else if (i == 'snowy') { mdi = 'mdi:weather-snowy'; }
else if (i == 'fog') { mdi = 'mdi:weather-fog'; }
var w = 'sunny';
if (i == 'sunny') { w = 'Sonnig'; }
else if (i == 'clear-night') { w = 'Klare Nacht'; }
else if (i == 'windy') { w = 'Windig'; }
else if (i == 'windy-variant') { w = '?'; }
else if (i == 'partlycloudy') { w = 'Tw. bewƶlkt'; }
else if (i == 'cloudy') { w = 'Bewƶlkt'; }
else if (i == 'overcast') { w = 'Bedeckt'; }
else if (i == 'fog') { w = 'Neblig'; }
else if (i == 'hail') { w = 'Hagel'; }
else if (i == 'lightning') { w = 'Gewittrig'; }
else if (i == 'lightning-rainy') { w = '?'; }
else if (i == 'rainy') { w = 'Regnerisch'; }
else if (i == 'pouring') { w = 'Starkregen'; }
else if (i == 'snowy') { w = 'Schnee'; }
else if (i == 'snowy-rainy') { w = 'Schneeregen'; }
else if (i == 'fog') { w = 'Nebel'; }
var temp = Math.round(states['sensor.openweathermap_temperature'].state * 10) / 10 ;
var nied = states['sensor.openweathermap_forecast_precipitation_probability'].state;
var feuchte = states['sensor.openweathermap_humidity'].state;
return `<ha-icon
icon='${mdi}'
style='width: 20px; height: 20px; color: var(--text-color-sensor);'>
</ha-icon>
<span style='vertical-align: -1px;'>${w} bei ${temp}Ā°<br>Niederschlagswahrsch.: ${nied}%<br>Luftfeuchte: ${feuchte}%</span>`
]]]
#### END ####
I need help @clemalex
I copied the code. It should be noted that I already have a robot-vacuum connected to the smart home - in another code. Iām just trying the minimalist.
I constantly get an error ā¦ and do not clear to me why.
Hereās the error:
And this information on the Vacuum:
the code:
vacuum_info:
tap_action:
action: none
icon: mdi:robot-vacuum
label: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'On its base';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'In charge';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'Cleaning in progress';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'Back to its base';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'On break';
}
else{
return 'ā Unknown ā' ;
}
]]]
styles:
icon:
- color: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),1)';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'rgba(var(--couleur-vert),1)';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'rgba(var(--couleur-jaune),1)';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'rgba(var(--couleur-violet),1)';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'rgba(var(--couleur-bleu),1)';
}
else{
return 'rgba(var(--couleur-gris),1)';
}
]]]
img_cell:
- background-color: |-
[[[
if (entity.state.toUpperCase() == 'DOCKED' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'CHARGING'){
return 'rgba(var(--couleur-vert),0.2)';
}
else if (entity.state.toUpperCase() == 'CLEANING'){
return 'rgba(var(--couleur-jaune),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'RETURNING HOME'){
return 'rgba(var(--couleur-violet),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'PAUSED'){
return 'rgba(var(--couleur-bleu),0.2)';
}
else{
return 'rgba(var(--couleur-gris),0.2)';
}
]]]
Seems that you have not defined the entity.
I also think so, just I do not know what Iām supposed to do, you can give an example.
thanks
How did you define your custom:button-card? Could you please post its code?
I see that the temperatures are there, so itās a problem with the icon templates. Both normal and collapse cards work in my home assistant, so I canāt understand why this happens in your configuration
I tried two codes:
a:
- type: custom:button-card
template: vacuum
variables:
entity: vacuum.vacuum
name: vacuum abeksis
b:
- type: custom:stack-in-card
mode: vertical
style: |
ha-card{
border-radius: 21px;
}
cards:
- type: custom:button-card
template: vacuum
variables:
entity: vacuum.vacuum
name: Aspiro
- type: custom:button-card
template: card_1_line_4_actions_select_vacuum_fan_speed
triggers_update:
- sensor.aspiro_fan
variables:
item1_background_entity: sensor.aspiro_fan
item1_background_state: GENTLE
item1_icon: mdi:water
item2_background_entity: sensor.aspiro_fan
item2_background_state: SILENT
item2_icon: mdi:fan
item2_icon_scale: 0.75
item3_background_entity: sensor.aspiro_fan
item3_background_state: STANDARD
item3_icon: mdi:fan
item3_icon_scale: 1.3
item4_background_entity: sensor.aspiro_fan
item4_background_state: TURBO
item4_icon: mdi:fan
item4_icon_scale: 2
Your entity vacuum.vacuum has no states in capital letters. Try it with
label: |-
[[[
if (entity.state == 'docked' && entity.attributes.battery_level == '100'){
return 'On its base';
}
vacuum_info: correctly indented?wow, thats awesome. Will have a detailled look at it! Thank you very much for all your configs!
Thanks for the help,
I changed according to what you said - and unfortunately I still get an error.
code:
vacuum_info:
tap_action:
action: none
icon: mdi:robot-vacuum
label: |-
[[[
if (entity.state.toUpperCase() == 'docked' && entity.attributes.battery_level == '100'){
return 'On its base';
}
else if (entity.attributes.status.toUpperCase() == 'charging'){
return 'In charge';
}
else if (entity.state.toUpperCase() == 'cleaning'){
return 'Cleaning in progress';
}
else if (entity.attributes.status.toUpperCase() == 'retuning home'){
return 'Back to its base';
}
else if (entity.attributes.status.toUpperCase() == 'pause'){
return 'On break';
}
else{
return 'ā Unknown ā' ;
}
]]]
styles:
icon:
- color: |-
[[[
if (entity.state.toUpperCase() == 'docked' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),1)';
}
else if (entity.attributes.status.toUpperCase() == 'charging'){
return 'rgba(var(--couleur-vert),1)';
}
else if (entity.state.toUpperCase() == 'cleaning'){
return 'rgba(var(--couleur-jaune),1)';
}
else if (entity.attributes.status.toUpperCase() == 'retuning home'){
return 'rgba(var(--couleur-violet),1)';
}
else if (entity.attributes.status.toUpperCase() == 'pause'){
return 'rgba(var(--couleur-bleu),1)';
}
else{
return 'rgba(var(--couleur-gris),1)';
}
]]]
img_cell:
- background-color: |-
[[[
if (entity.state.toUpperCase() == 'docked' && entity.attributes.battery_level == '100'){
return 'rgba(var(--couleur-gris),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'charging'){
return 'rgba(var(--couleur-vert),0.2)';
}
else if (entity.state.toUpperCase() == 'cleaning'){
return 'rgba(var(--couleur-jaune),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'retuning home'){
return 'rgba(var(--couleur-violet),0.2)';
}
else if (entity.attributes.status.toUpperCase() == 'pause'){
return 'rgba(var(--couleur-bleu),0.2)';
}
else{
return 'rgba(var(--couleur-gris),0.2)';
}
]]]
in the file button_card_templates.yaml
Look for:
### VERTICAL BUTTONS (fka SCENES) ###