Is there any way to fire a HA custom event when a button is pressed? I know that I can fire a call-service event using the tap_action of the button, but I am looking for a custom event and tap_action does not seem to give me that option.
make a script that has a custom event and fire the script.
Thanks Petro, yes I know. I was hoping that there would be a direct way. I can also use input_booleans (which I do right now).
I am actually looking for the most straight forward way to trigger Node RED events from HA buttons. A script or an input_boolean for each button unnecessarily bloats the setup, and spreads this rather simple functionality over Lovelace, YAML config and Node RED.
But I guess you are right – no more direct way in sight.
The most straight forward way to create custom events is through a script because buttons can only call services. Events are not services.
script:
event_maker:
sequence:
- event: custom_node_red_event
event_data:
x: {{ x }}
y: {{ y }}
z: {{ z }}
then use a service call
tap_action:
action: call-service
service: script.event_maker
service_data:
x: 'my x stuff'
y: 'my y stuff'
z: 'my z stuff'
That’s in fact a great idea! It did not occur to me that I could use one generic script that would tunnel ALL events into NR. The free parameters can be used to filter specific events. Thanks @petro.
Not sure if you want the background or the icon so I included both.
state:
- value: 'on'
styles:
icon:
- color: whateveryyouwant
card:
- background: whateveryyouwant
Plenty of what you want can be found in the README.md
Thank you, I changed the colors when the lights are on but my main problem is when the lights are off. Right now the background is white and the icon and letter light gray (almost white) and I can’t read them.
Alex first of all thanks a lot for this wonderful card that give a lot of possibility
I just want to make a newbie question…
Can I call 2 times services on tap-action event please ?
I make a volume button that must call one time in order to make the graphic
and second time must call for increment/decrement the volume:
If anyone want it here is the source… maybe the code can be made shorter
but like i said I’m new on lovelace story 
- type: custom:layout-card
gridcol: 2 / 3
gridrow: 3 / 4
cards:
#
- type: 'custom:button-card'
color_type: card
color: rgb(61, 183, 228)
icon: mdi:volume-plus
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.ghome1_vol
styles:
card:
- height: 80px
- width: 80px
#
- type: 'custom:button-card'
entity: input_number.ghome1_vol
icon: blank
show_name: false
show_icon: false
show_state: false
show_label: false
show_last_changed: false
styles:
card:
- height: 239px
- width: 80px
grid:
- grid-template-areas: '". v10 ."". v9 ." ". v8 ." ". v7 ."". v6 ." ". v5 ."". v4 ." ". v3 ."". v2 ." ". v1 ."'
- grid-template-columns: 7% auto 7%
- grid-template-rows: repeat(10, 30px);
- grid-row-gap: 2px
custom_fields:
v1:
- background-color: >
[[[ if (entity.state > 0) return "rgba(153, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v2:
- background-color: >
[[[ if (entity.state > 1) return "rgba(204, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v3:
- background-color: >
[[[ if (entity.state > 2) return "rgba(255, 255, 51)"; return "rgba(89, 89, 89)"; ]]]
v4:
- background-color: >
[[[ if (entity.state > 3) return "rgba(255, 204, 51)"; return "rgba(89, 89, 89)"; ]]]
v5:
- background-color: >
[[[ if (entity.state > 4) return "rgba(255, 153, 51)"; return "rgba(89, 89, 89)"; ]]]
v6:
- background-color: >
[[[ if (entity.state > 5) return "rgba(255, 102, 51)"; return "rgba(89, 89, 89)"; ]]]
v7:
- background-color: >
[[[ if (entity.state > 6) return "rgba(255, 51, 51)"; return "rgba(89, 89, 89)"; ]]]
v8:
- background-color: >
[[[ if (entity.state > 7) return "rgba(255, 31, 51)"; return "rgba(89, 89, 89)"; ]]]
v9:
- background-color: >
[[[ if (entity.state > 8) return "rgba(255, 11, 51)"; return "rgba(89, 89, 89)"; ]]]
v10:
- background-color: >
[[[ if (entity.state > 9) return "rgba(255, 0, 0)"; return "rgba(89, 89, 89)"; ]]]
custom_fields:
v1: >
[[[ return entity.state /10 ]]]
v2: >
[[[ return ' ' ]]]
v3: >
[[[ return ' ' ]]]
v4: >
[[[ return ' ' ]]]
v5: >
[[[ return ' ' ]]]
v6: >
[[[ return ' ' ]]]
v7: >
[[[ return ' ' ]]]
v8: >
[[[ return ' ' ]]]
v9: >
[[[ return ' ' ]]]
v10: >
[[[ return ' ' ]]]
#
- type: 'custom:button-card'
color_type: card
color: rgb(61, 183, 228)
icon: mdi:volume-minus
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.ghome1_vol
styles:
card:
- height: 80px
- width: 80px
#
Thanks all
Denis
3 Likes
Can I alter the format of the sensor.time within the card or is it better to do that as a sensor instead? The format that it returns is hh:mm (14:25). I would like to change it to 2:25 PM.
Sorry was away for some time, did you find a solution?
2 solutions:
- Move your code to a button-card variable (check the Readme on github)
- or assign the value to a css variable in the card style, and use that as the color
var(--your-css-color-variable)
Pull requests are welcome 
Why not use a script if you want to call 2 different services?
That should be based on your configured locale in your browser or language in home assistant (check in your account settings)
Na, but I have an acceptable work around. Still don’t see where the extra 4 pixels of padding are coming from. It must be built into polymer. 
I have managed all through Node-Red 
Is better also because I must manage 8 volumes of google home mini.
But just for curiosity… I can not call 2 services using “tap-action” ?
Thanks again
Denis
Hi
I have the following code in my card and I would like to change the color of the button when the binary sensor is on or off, but apparently the code is wrong (not working)
color: 'rgb(253, 106, 2)'
color_type: card
name: 'Off'
tap_action:
action: call-service
service: script.aircon_off
icon: 'mdi:power'
custom_fields: null
notification: null
background-color: |
[[[
if (states['binary_sensor.openclose_30'] == on)
return "green";
return "red";
]]]
type: 'custom:button-card'
Can someone help a little please?
I suggest you consult the docs before attempting to use this card. Specifically the styling section. Your yaml is not correct. There are examples in the docs that show how to style properly.
To be honest I tried hard to read them, but I can not understand most of the codes and explanations.
I will keep it as it is for the time being
Thanks a lot
I have this code that I am trying to use to change the icon based on the current_activity attribute of the remote.basement entity. When neither activity is current I correctly get the default icon. When either activity is on, I am getting the mdi:amazon icon. What do I have wrong?
- type: custom:button-card
entity: remote.basement
name: Basement
state:
state:
- operator: template
value: >
return states[remote.basement].attributes.current_activity === "Watch Fire TV"
icon: mdi:amazon
- operator: template
value: >
return states[remote.basement].attributes.current_activity === "Play Xbox One"
icon: mdi:microsoft-xbox
template: switch_homekit value: >
[[[ return states['remote.basement'].attributes.current_activity === "Play Xbox One"; ]]]
1 Like
As petro said, docs are important for this card.
For your question, this is the solution:
name: 'Off'
color_type: card
tap_action:
action: call-service
service: script.aircon_off
icon: 'mdi:power'
styles:
card:
- background-color: |
[[[
if (states['binary_sensor.openclose_30'].state == 'on')
return "green";
return "red";
]]]
type: 'custom:button-card'
1 Like