I have a fan entity with 5 speed setting that I have assigned button cards in my ui setup. the varying speeds are not displayed in states, but are available in Attributes. I want the button-card box-shadows to react to the speed settings of the fan. I see that @daphatty did something similar, but for me the the box-shadow that should only show if the fan is on and at this particular speed ( low/Medium/High/ Auto/ Breeze/Smart) is constantly displayed even though the fan is off..
Here is my code:
name: Low
icon: none
styles:
card:
- width: 50px
- border-style: solid
- border-color: silver
- '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
name:
- align-self: middle
state:
- operator: template
value: >
return
states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan',].attributes.speed
=== 'low'
styles:
card:
- box-shadow: 0px 0px 9px 3px orange
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
speed: low```
Would definitely appreciate any help that I could get in sorting this out.
Hi guys, I need to round off a value to no decimal places and I know in templating can use something like | round(1) for example but no idea on how to add that to my if (states['sensor.dryer_mss310_power_sensor_w_0'].state > 2) below.
Does that something like that work without me creating a template?
That should do the trick for rounding without any decimal (itâs rounding, not truncating): Math.round(states['sensor.dryer_mss310_power_sensor_w_0'].state)
Hey Cadster, thanks for sharing your code. I have tried to edit my setup with your code in two ways :
name: Low
icon: none
styles:
card:
- box-shadow: |
[[[
if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') & (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
return "0px 0px 9px 3px teal";
return "red";
]]]
- width: 50px
- border-style: solid
- border-color: silver
- '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
speed: low```
This way is not producing any change to the card.
This code is somewhat working as the icon lights up but the speed button does not respond to the device being turned on.
```- type: 'custom:button-card'
name: Low
icon: none
styles:
card:
- background-color: |
[[[
if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') & (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
return "blue";
return "red";
]]]
- width: 50px
- border-style: solid
- border-color: silver
- '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
speed: low```
  .
Not sure what I am doing wrong. How are you able to get away from having `state:` as part of the config.
Actually it is this part where I need it in not as I said above entity: sensor.dryer_mss310_power_sensor_w_0 so it doesnât work there
I thought this would work:
@RomRider how can I get my card to only apply a box-shadow if the state of the device is âonâ and the speed attribute is âlowâ? As you can see above I have tried the background color method and it works , but the box shadow does not.
No change with the card, so let me try and explain my intent.
I want to have a box-shadow show around a card when the entity state is âonâ and the state_attribute (fan speed setting) is âlowâ. I have been able to do that fairly easily using the state: element like in this example for a light:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color)```
But when I try and replicate the same efforts for my fan setting then the box-shadow no longer works:
```styles:
card:
- box-shadow: |
[[[
if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') && (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
return "0px 0px 9px 3px teal";
]]]```
It appears that the issue is with the box-shadow element as i am successful trying it with `- background-color: |`..... I just am not able to see why
I am struggling in using a âexternalâ entity in a template. Maybe someone can help me. Need to readjust after changing from open z-wave to zwave js
The problem is, that â[ânumber.bad_heizung_ventilâ]â is hardcoded.
The entity-id of the card is âclimate.bad_heizungâ. So only the prefix changes and â_ventilâ is added.
Is there a way to build a template which uses only the name of the entity and wrap it with the prefix and the text from the end?
Something like
@RomRider not sure what I am doing wrong with the format, I tried the - background -color: setup and it worked, but oddly using the same template with - box-shadow: failed to work. Here is my full config:
Just exactly write what I have put above. Donât replace entity with something else. entity is a shortcut to the entity defined as part of the button so that you donât have to write states['sensor.xyz'].state
I am not sure this is working as expected. please help me out. If I click this button (which obviously toggles, because thatâs what I have entered as the actionâŚ) while it is opening or closing, it completely reverses the direction up to the end. while I would have hoped not to mimic my hardware pulse button on the wall, meaning closed/opening/stop/closing/closed, or, of course vice versa opened/closing/stop/opening/opened
Is that possible with the button-card?
if that were possible, my second challenge would arise, meaning I only need the confirmation when moving from closed to opening⌠right now, I have it confirm each change, but with the additional state between the moving actions, that would be necessary
anyways, before I start experimenting too wildly, please have a look if what I would like is available in button-card
.
