@Kelvin, your best bet is to look into the styles property. Specifically, the card property under styles. You can do quite a lot of styling with CSS there. If there is a way to make a button look like a hexagon with CSS, then that is where you can do it. See here for styles documentation.
Keith, Thanks for the reply.
I’ve tried to incorporate all of your suggestions, the card doesn’t throw up any syntax errors, I can see the green fan icon rotating when the pump is on, but no power display below.
type: custom:button-card
name: Pool Pump
state:
- value: 'on'
color: green
spin: true
tap_action:
action: null
double_tap_action:
action: toggle
entity: switch.shelly_shsw_pm_a4cf12f3d92a
state_display: >
[[[ if (entity.state != 'on') return 'Off' ; else return
sensor.shelly_shsw_pm_a4cf12f3d92a_current_consumption.value]]
icon: mdi:fan
I’m struggling with tap_action. I have an input_boolean that is turned on when a security alarm state is triggered. I am trying to add a button that will show the state and trigger a script to turn off the alarm when it is tapped. The state is shown perfectly, but I cannot get the tap_action to trigger the script. I know the script works as expected. And I can check on its last_triggered value to determine whether any action triggers the script. The tap_action below does not trigger the script.
- entity: input_boolean.acknowledge_alarm
show_state: true
show_last_changed: false
state:
- value: 'on'
color: red
id: value_on
icon: mdi:bell
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call_service
service: script.alarm_standby
- value: 'off'
color: green
id: value_off
icon: mdi:bell-off
tap_action:
service: input_boolean.turn_off
service_data:
entity: input_boolean.security_alarm
template: standard
color_type: icon
name: Security Alarm
type: custom:button-card
In fact the tap_action for the ‘off’ state is also not being triggered because if I tap on the button when it is ‘off’/green, it turns to ‘on’/red.
I presume it is something obvious.
Ok, I’ve worked it out. tap_action cannot be specified per state of the button. Instead tap_action can call a script which then checks the state and calls the appropriate action.
1 Like
I’m at my keyboard this time rather than my phone, so I can be more detailed.
Put states['...'].state around your sensor name, and use 3 ]]] at the end to close the script. I like to put the opening [[[ and closing ]]] on separate lines and indent to make them stand out better. To explain further, entity is an object you can use directly (a shortcut for the main entity of the card), but your sensor is just a name, so you have to fetch the sensor object from the states array by passing the sensor name as a string.
state_display: |
[[[
if (entity.state != 'on') return 'Off' ;
return states['sensor.shelly_shsw_pm_a4cf12f3d92a_current_consumption'].state ;
]]]
1 Like
Hey Guys,
can anyone help me out with this card:
How can i center those buttons.
Code looks like this:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.pm_stecker_geschirrspuler
icon: mdi:dishwasher
name: Geschirrspüler
label: |
[[[
return states['sensor.power_17'].state + " Watt";
]]]
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: bold
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- type: custom:button-card
entity: switch.subwoofer_steckdose
icon: mdi:smoke-detector
name: Subwoofer
label: |
[[[
return states['sensor.subwoofer_steckdose_power'].state + " Watt";
]]]
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 0px
- font-weight: bold
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- type: custom:button-card
entity: input_boolean.subwoofer_automatik
icon: mdi:smoke-detector
name: Subwoofer
label: Automatik
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 0px
- font-weight: bold
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.smart_plug_34
icon: mdi:audio-video
name: TV / Stereo
label: |
[[[
return states['sensor.zwischenstecker_multimedia'].state + " Watt";
]]]
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 0px
- font-weight: bold
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- type: custom:button-card
entity: switch.smart_plug_41
icon: mdi:desk
name: Schreibtisch
label: |
[[[
return states['sensor.zwischenstecker_schreibtisch'].state + " Watt";
]]]
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 0px
- font-weight: bold
- font-size: 12px
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- type: custom:button-card
entity: switch.smart_plug_33
icon: mdi:lava-lamp
name: Lavalampe
label: |
[[[
return states['sensor.power_33'].state + " Watt";
]]]
show_label: true
color: rgb(28, 128, 199)
state:
- value: 'off'
color: firebrick
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
color: lawngreen
styles:
card:
- width: 100px
- height: 100px
label:
- color: gray
- font-size: 12px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 0px
- font-weight: bold
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
Keith
Thanks for the help and education!!! all working now!!!
Alan
1 Like
Trying to call a script
The script works fine in dev tool and if I call it, but it don’t work from a button?
Hear is my code can you see anything wrong?
- type: custom:button-card
entity_picture: /local/PNGS/youtube.png
tap_action:
action: call-service
service: script.turn_on
service_data:
enitiy_id: script.youtube
service: script.youtube
Thanks a lot
easy when you no how. lol
Also, it might have worked if you’d indented the lines as follows and used target instead of service_data.
- type: custom:button-card
entity_picture: /local/PNGS/youtube.png
tap_action:
action: call-service
service: script.turn_on
target:
enitiy_id: script.youtube
Thanks for this powerfull custom card !
I have nearly finished my Phone dashboard and Im pretty proud of it!
2 Likes
Is it possible to have conditional name (label, state…) ? My situation: i have shutter on my window. For this i use esphome on shelly module. So, i HA i get cover sensor, which reports state of cover: from 0 to 100%.
Now… i’d like name (or label…) to show:
- word “UP” when cover is at 100% (fully up)
- word “DOWN” when cover is at 0% (fully down)
- percentage when position is in the middle.
For this i need if—else for cover attribute “current_position”, but i’m searching and trying for two days now with no luck. i tried countless options…
So i created an additional sensor with if–else sentence for that. But, i’d like to know if it’s possible with direct use of if - else in a style:
[[[
if (state_attrib['cover.kitchen', 'current_position']....="100"
return "UP"
elseif .... ="0"
return "DOWN"
else
return ... (percentage)
endif
]]]
i know that command above is totally off, it’s just for example what i want. As i said: i tried countless variants, no-one works…
Here’s what I did to return not only conditional text, but also an icon that changes (color and image) in response to an attribute.
[[[
var fan_mode = entity.attributes['fan_mode'];
var fan_action = entity.attributes['fan_action'];
var color = "lightGrey";
if (fan_mode == "on")
if (fan_action == "running")
color = "lightSkyBlue";
else
color = "white";
else if (fan_mode == "auto")
if (fan_action == "running")
color = "lightSkyBlue";
else
color = "white";
return `<ha-icon icon="mdi:fan"
style="width: 14px; height: 14px; color: ${color};"></ha-icon>
${fan_mode}/${fan_action}`
]]]
1 Like
Uau… thanks a lot! It “kinda” works… i managed to correct your code to get correct word for fully-up and fully-down, but i still can’t get to show attribute value in between (in percents). I just can’t get to the point to have any attribute value to be shown. When moving code "return state_attr(…) results in an error…
EDIT: yeah!! It works. I replaced “return state_attr(“cover.kitchen” , “current_position”)” with "return cover_mode + “%” (silly me…)
Many thanks again!!!
It seems that i’ll have to learn to use variables…
[[[
type: custom:button-card
entity: cover.kitchen
attribute: current_position
show_state: false
icon: mdi:stop-circle-outline
show_name: false
show_label: true
label: |
var cover = entity.attributes['current_position'];
if (cover_mode == "100")
return 'OPEN';
else if (cover_mode == "0")
return 'CLOSED'
else
return state_attr("cover.kitchen" , "current_position")
]]]
Hi everyone
following “template: alerter-dual”
I have managed to make the button blink when it is turned on, but how is it done so that it only blinks when it is “unknown”?
Thank you so much
@neo2angel, answered in your duplicate post here: Dual-entity flashing button template for custom:button-card
Hello, I was using some button-card with a sensor that was reading the value from History Stats attribute (In that way I was able to format the time in a readable way).
This attribute was removed with the last core update and now I can only display the time using the History Stats state but is repoted like 8,5h, is there a wa to convert this value in something like 08:12 (HH:MM) or 8h 12m (XXh YYm) for expample?
1 Like
try templating it with timestamp_custom like this:
"{{ whatever_the_state_is | timestamp_custom('%Hh %Mm') }"