iPadOS 
Oke. I will do some more testing tonight. Maybe itâs just a cache issue like you said. Thx for the research ! 
Did some more testing. Clearing cache didnât solve the problem. Only switching to mobile view solves the problem. Safari will remember the mobile view for the specific url so luckily the âfixâ is permanent.
1 Like
made a simple button-card for my covers. is there any way to show in what state they are (highlight it for exmaple)?
- cards:
- icon: 'mdi:arrow-up-box'
name: Oben
tap_action:
action: call-service
haptic: success
service: cover.set_cover_position
service_data:
entity_id: group.all_covers
position: 100
type: 'custom:button-card'
- icon: 'mdi:arrow-right-box'
name: Mitte
tap_action:
action: call-service
haptic: success
service: cover.set_cover_position
service_data:
entity_id: group.all_covers
position: 50
type: 'custom:button-card'
- icon: 'mdi:arrow-down-box'
name: Unten
tap_action:
action: call-service
haptic: success
service: cover.set_cover_position
service_data:
entity_id: group.all_covers
position: 0
type: 'custom:button-card'
type: horizontal-stack
1 Like
If you know the states of your covers, you can show it with the state operator.
I use this:
Cover fully open:
Cover moving:
Sun protect position:
with these templates:
button_card_templates:
## Cover Buttons ##
cover_up:
show_name: false
icon: mdi:arrow-up-thick
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: entity
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
state:
- operator: template
value: >
[[[ return entity.attributes.current_position == 100 ]]]
color: var(--my-icon-off)
id: cov_id
- value: 'on'
color: var(--my-green)
- operator: default
color: white
cover_down:
template: cover_up
icon: mdi:arrow-down-thick
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: entity
state:
- operator: template
value: >
[[[ return entity.attributes.current_position == 0 ]]]
color: var(--my-icon-off)
id: cov_id
cover_stop:
show_name: false
icon: mdi:stop
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: entity
hold_action:
action: call-service
service: cover.set_cover_position
service_data:
entity_id: entity
position: 25
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
state:
- operator: template
value: >
[[[ return entity.attributes.current_position >= 23
&& entity.attributes.current_position <= 27 ]]]
color: var(--my-yellow)
icon: mdi:sunglasses
id: cov_sun
- operator: template
value: >
[[[ return states['script.cover_' + entity.entity_id.split('.')[1] + '_open'].state == 'on'
|| states['script.cover_' + entity.entity_id.split('.')[1] + '_close'].state == 'on' ]]]
color: var(--my-red)
- operator: default
color: white
and the card:
## Cover Test 1 #################
- type: entities
title: TEST Cover 1
show_header_toggle: false
entities:
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
template: cover_up
entity: cover.test_1
- type: custom:button-card
template: cover_stop
entity: cover.test_1
show_entity_picture: true
hold_action:
action: call-service
service: cover.set_cover_position
service_data:
entity_id: entity
position: 28
state:
- operator: template
value: >
[[[
return entity.attributes.current_position >= (28-2)
&& entity.attributes.current_position <= (28+2)
]]]
#color: var(--my-yellow)
#icon: mdi:sunglasses
entity_picture: /local/esunglass.png
id: cov_sun
- type: custom:button-card
template: cover_down
entity: cover.test_1
- type: custom:fold-entity-row
head:
type: custom:slider-entity-row
entity: cover.test_1
full_row: true
entities:
- entity: input_number.cov_test_1_duration
name: Duration
- entity: input_number.cov_test_1_offset
name: Offset
- entity: input_number.cov_test_1_counter
name: Counter
The slider at the bottom is from here:
2 Likes
I have a question if anybody can answer it.
Im using home assistant cast, Im trying to get my buttons to display on my TV but most of the cards will not render properly. Is there something I can do to get these to show or is it something in the code that would make this card render properly. It does show up fine if I cast from a tab on my laptop but not by calling the service.
Thanks in advance!
I want to change the style of the state based on the current date. I have a sensor which shows the date the carbage is collected. It would be nice if i could make the text color change to another color when the date ius equal to the current date. So something like this :
state:
- value: 'current date variable ??'
styles:
state:
- color: green
Is it possible somehow to make this work?
i.e. Set the icon based on a batteryâs state value and also set other things if it is below a specific value?
- value: '[[[ if (entity.entity_id.includes("battery")) return 40 ]]]'
operator: <
styles:
card:
- opacity: 1.0
- box-shadow: '[[box_shadow]] [[box_shadow_color]]'
- color: var(--secondary-text-color)
icon:
- color: red
- animation: blink 2s ease infinite
- value: '[[[
if (entity.entity_id.includes("battery")) return 0;
else return 101;
]]]'
operator: '>='
icon: >
[[[
if (entity.state < 20) return "mdi:battery-10";
if (entity.state < 30) return "mdi:battery-20";
if (entity.state < 40) return "mdi:battery-30";
if (entity.state < 50) return "mdi:battery-40";
if (entity.state < 60) return "mdi:battery-50";
if (entity.state < 70) return "mdi:battery-60";
if (entity.state < 80) return "mdi:battery-70";
if (entity.state < 90) return "mdi:battery-80";
if (entity.state < 100) return "mdi:battery-90";
if (entity.state = 100) return "mdi:battery";
]]]
you could at least set the device_class to battery on those sensors, so they automatically adjust the icon. The button will use that icon, so you donât need t set the template here.
Wow! Thank you. I never knew you could set the device_class in customize.
But then since Lovelace I have not used customize for anythingâŠ
yes, I see that all over.
Was just examining some of my own button cards configs, which became loaded with templates like that, thus overloading the frontend with it.
Simply moving a template to a dedicated template sensor, and use the state of that sensor in the button-card config makes it all so much easier to configure, and lighter on the system.
Its too bad the buttons cant take the already set icon_color too. Coming form the pre Lovelace age (âŠ) I had all my entities already customized via customize, including colors using the custom-ui. This is not imported by the buttons. Luckily it is used by regular Lovelace cards, to all is not in vein
This didnât seem to change the icon based on the stateâŠ
homeassistant:
customize:
sensor.kitchen_battery_level:
device_class: battery
well what can I sayâŠ
I take it you did restart⊠using the same
sensor.hallway_frontdoor_bewegingssensor:
device_class: battery
sensor.hallway_dresser_bewegingssensor:
device_class: battery
``I did do a restart, yes. You can see the new device_class in the states page screenshotâŠ
More HA weirdness⊠
Remove the icon configuration. device_class sets its own icons.
are these handmade template sensors, or system generated ones?
Yes I did that but it didnât work. I havenât had time today to look any further but will do.
System generated. They are created by ESPHome. Does that make a difference?
not sure, but I had issues customizing Python made entities, and ended up customizing those in the python scriptsâŠ
also there have been 1 or sensors I couldnât get to change according to completely valid customizations.
I donât use ESPHome, so wouldnât know if that already sets some customizations.
Well to be honest Iâm happy as it is.
I have my first template set the icon to red with an alert battery symbol and my fancy animation and border.
If that doesnât evaluate because the charge is too high it then goes on to template the icons for different charge levels.
Itâs all just fancy fluff anyway!! 