vunnies
(Vincent)
August 30, 2024, 8:37am
1
Hi.
I have a question regarding a custom button card. It seemed to be simple but I’m stuck now.
I have a input button (boolean) which triggers an automation for a certain time. To trigger this switch I have a custom button card that calls a service to turn the boolean on. I do not want to make it a toggle because once the helper is turned on it triggers an automation that sets some valves and turns my havac on to vent certain parts of the house.
Now do need to see the state of that helper so i use the service data entry.
As for now everything works accept that I want to have some Icon styling like change the color and make the icon spin.
It works with a normal custom button card but as soon as I want to use “service data”
is does not work anymore.
Could anyone tell me what I’m doing wrong or how te set this up
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: input_boolean.ventilatie_laag
styles:
card:
- theme: mushroom square
- border-radius: 5%
- background-color: rgb(29,18,37, 60%)
- height: 70px
name:
- justify-self: center
- padding-top: 1px
- padding-bottom: 2px
- font-weight: italic
- font-size: 10px
- text-transform: false
name: |
[[[
if (states['input_boolean.ventilatie_laag'].state === "on")
return "Aan";
else if (states['input_boolean.ventilatie_laag'].state === "off")
return "Uit";
]]]
icon: |
[[[
if (states['input_boolean.ventilatie_laag'].state === "on")
return "mdi:fan"
else if (states['input_boolean.ventilatie_laag'].state === "off")
return "mdi:fan-speed-1";
]]]
There is a dedicated thread for button-card. Suggest to ask there.
jchh
((not John))
August 30, 2024, 12:03pm
4
OK, you’ve posted the exact same question 3 hours apart (here is the newer one ) Please delete the other to avoid confusion.
Edit: I think a moderator has done this for you now.
jchh
((not John))
August 30, 2024, 12:04pm
5
Is this your question? I don’t understand what you are asking for but happy to help you can explain.
jchh
((not John))
August 30, 2024, 12:10pm
6
Is this what you are asking about? …Try this:
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.ventilatie_laag
edit: might also be this:
tap_action:
action: call-service
service: input_boolean.turn_on
data:
entity_id: input_boolean.ventilatie_laag
vunnies
(Vincent)
August 30, 2024, 5:38pm
7
Hi jchh
I’ve tried this code… I can confirm it is switching but still no result on the icon…
type: custom:button-card
tap_action:
action: call-service
service: input_boolean.turn_on
data:
entity_id: input_boolean.ventilatie_laag
name: Ventilatie laag
styles:
card:
- theme: mushroom square
- border-radius: 5%
- background-color: rgb(29,18,37, 60%)
- height: 50px
name:
- justify-self: center
- padding-top: 1px
- padding-bottom: 2px
- font-weight: italic
- font-size: 11px
- text-transform: false
icon: mdi:fan
size: 35px
align: left
state:
- value: 'on'
color: orange
styles:
icon:
- animation:
- rotating linear 3s infinite
- value: 'off'
color: grey
styles:
icon:
- animation:
- rotate 3s infinite
jchh
((not John))
August 30, 2024, 5:52pm
8
Ok, I didn’t look at the icon as I didn’t really understand your concern to begin with. I’ll take a look at the icon later.
vunnies
(Vincent)
August 30, 2024, 7:02pm
9
This works…
Thanks for thinking with me!!!
type: custom:button-card
entity: input_boolean.ventilatie_laag
show_state: false
tap_action:
action: call-service
service: input_boolean.turn_on
data:
entity_id: input_boolean.ventilatie_laag
name: Ventilatie hoog
styles:
card:
- theme: mushroom square
- border-radius: 5%
- background-color: rgb(29,18,37, 60%)
- height: 50px
name:
- justify-self: center
- padding-top: 1px
- padding-bottom: 2px
- font-weight: italic
- font-size: 11px
- text-transform: false
icon: mdi:fan
size: 35px
align: left
state:
- value: 'on'
color: orange
styles:
icon:
- animation:
- rotating linear 0.8s infinite
- value: 'off'
color: grey
styles:
icon:
- animation:
- rotate 1s infinite