I looked at the scripts document more closely and realized my mistake. I needed to use “data_template:” instead of “data:” in the YAML when supplying the channel number in the script. So this works:
script_great_room_channel:
sequence:
- service: remote.turn_on
entity_id: remote.great_room
data:
activity: "Television"
- service: remote.harmony_change_channel
entity_id: remote.great_room
data_template:
channel: '{{ channel_num }}'
Thank you. I just realized that as well. It is working now with that change.
Icon size is relative to what?
This code gives me an icon about a third of the height of the card. How can I make it bigger?
- type: custom:button-card
icon: 'mdi:home'
name: Home
show_name: false
color_type: icon
size: 100%
color: white
styles:
card:
- height: 60px
- background-color: '#4cd137'
I’ve also tried changing size to 50px, and I’ve tried styling the icon like this:
- type: custom:button-card
icon: 'mdi:home'
name: Home
show_name: false
color_type: icon
color: white
styles:
card:
- height: 60px
- background-color: '#4cd137'
icon:
- height: 50px
Found solution in topic. However cant get 3 colors to function correctly. Always get RED color.
- type: "custom:button-card"
entity: sensor.speedtest_ping
show_state: true
- type: "custom:button-card"
entity: sensor.speedtest_ping
show_state: true
show_label: false
show_icon: false
show_entity_picture: true
name: "Ping"
# name: '[[[ if (sensor.speedtest_ping > 25) return "Above 25"; else return "Below 25" ]]]'
color_type: card
entity_picture: /local/png_logo/ping1.png
state:
- operator: template
value: return sensor.speedtest_ping.state > 20
styles:
card:
# - color: '#bf4040'
- background-color: '#bf4040' #RED
- operator: template
value: return entity.state > 8
styles:
card:
# - color: '#bf4040'
- background-color: '#c78822' # ORANGE
- operator: template
value: return entity.state < 7
styles:
card:
# - color: '#bf4040'
- background-color: '#819662' # GREEN
Hi
I am trying to setup button card for sensor.speedtest_ping (numeric state).
NB: also cant get ICON template name and Icon template color… - If I enable commented icon template Name - my card disappears from UI.
try:
name: '[[[ if (entity.state > 25) return "Above 25"; return "Below 25"; ]]]'
as for all the state templates: you need to enclose these in the square brackets. [[[ ]]]
label: >
[[[ return entity.state; ]]]
Marius, thanks for Name solution! Worked fine.
Petro, could you please be more specific - I am tooo nubie for templates…
How can I switch betwwen 2 background colors? where should i place " < number" ?
That reply was for @sparkydave.
in regards to the value? It wouldn’t be a template, it would be a style based on state. Don’t use template, just use operator as greater than or less than. If you use a template, you need to convert the state to a number.
Ok. - style based on state
How to mention “> 8” , “>20”, “<6” for states? I need just an example of correct state condition with < or >
state:
- operator: template
value: return sensor.speedtest_ping.state > 20
styles:
card:
- background-color: '#bf4040' #RED
- operator: template
value: return sensor.speedtest_ping.state > 8
styles:
card:
- background-color: '#c78822' # ORANGE
- operator: template
value: sensor.speedtest_ping.state < 7
styles:
card:
- background-color: '#819662' # GREEN
operator: ">"
value: 8
You’re over thinking it. It’s all covered in the docs for the card. No templates required.
Ok… only now I got what is exactly “>” in operator… Thanks !
Just happy) It works.
Petro is right, you’re using incorrect operators and templates are not required to get what you want.
still, templates can come in quite handy and make the button config much shorter:
styles:
card:
- background-color: >
[[[ var state = entity.state;
if (state > 20) return '#bf4040';
if (state > 8) return '#c78822';
return '#819662'; ]]]
as you noticed I made the template work out the else for itself, being below or equal to 8.
In your setup you wouldnt have a value between 7 and 8… unless you’d define a default value, which, again, is totally possible, and explained in the docs.
Love the versatility of this card. So of course I’ve come up with a use-case that requires yet another option 
Here’s my current situation:
I’ve got a 4-relay ESP device, flashed with Tasmota and connected back to home assistant via mqtt. The relays are attached to motors of an adjustable bed: Head Up, Head Down, Foot Up, Foot Down. The original wired remote just required you to hold down a button for as long as you wanted to raise or lower the head or foot of the bed, and (thankfully) there was built-in circuitry to stop the motors from running when reaching the highest or lowest positions.
Everything is working great to just send an mqtt on or off (or toggle) command via a tap_action, but I wanted to replicate the experience of the original remote as closely as possible: holding a button down until the bed reaches a position I desire. Tasmota has a PulseTime option, and that seemed promising in combination with button-card’s hold_action and repeat: Pulsetime in tasmota will switch the relay off after a programmed duration, unless an On command is received before the duration expires. So if I set the pulsetime to 250ms and repeat a switch.turn_on command every 100ms, the motor continues running until the last On command is received (+250ms).
While not ideal, a 250ms lag before shutting off would be acceptable, except what actually happens quite frequently(but not always) is that it gets confused and some late On commands arrive after I let go of the button. This causes the bed to continue rising or lowering in a jerky fashion until the last command gets through…definitely not the experience I was going for and even more importantly simply unacceptable to my wife 
. I’m assuming it’s down to wireless and tcp latency issues that are simply out of my control, my network is not overly complicated and I don’t have any other issues with it that I can ascribe this problem to. Or possibly Tasmota or mosquitto can’t keep up with the commands coming through that fast.
What would be ideal, is that instead of using repeat, if hold_action also (or alternatively) supported a release_action that would follow the same format as the other action commands (allowing for call-service, etc.). That would allow me to do away with pulsetime in tasmota, be less spammy on the network (just an ON command when hold is initiated, and an OFF when it is released), and should be more accurate about stopping the motors at the precise time (+/- a couple ms) you release the hold of the button.
I see this being useful for other projects as well, for instance to open or close curtains to an arbitrary position using the same principals.
Hey there!
I was wondering if I could drop in and get some advice around something I’ve been trying to setup. I want to create a button card, of an image (Xiaomi Temp Sensor) mainly filling if not centered with the battery level info (binary sensor) in the top right. My attempts so far have taken several hours and many head bangs …
- type: custom:button-card
name: false
entity: sensor.back_door_battery_level
show_name: false
show_entity_picture: true
entity_picture: /local/aba.png
styles:
card:
- background-color: '#4c566a'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram"'
- grid-template-columns: auto
- grid-template-rows: auto auto
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: center
- align-items: center
- margin: none
icon:
- width: 70%
- margin-top: -10%
custom_fields:
temp:
- align-self: start
- justify-self: end
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
End result:
Great card! I have just one bug to report - confirmation popup is not working in Home Assistant app, neither on iOS nor Android…
Has anyone been able to put a mini-graph card inside the button card?
If so, can you share your code please?
@kuuji thank you for your amazing card.
Hi need some help with displaying both last changed and lights percentage at the same time.
This is my code for button card:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
hold_action:
action: more-info
haptic: success
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
# - background-color: '#fff5bc'
- background-color: 'rgb(100,100,100)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: AliceBlue
icon:
- color: AliceBlue
name:
- color: AliceBlue
state:
- color: AliceBlue
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
and this is the result:
when i comment the show_last_changed, i’m getting the following :
# show_last_changed: true
i would like to display both last changed and lights percentage at the same time.
i want the percentage be at the top right corner:
is it possible? can someone help me with the code.
Thanks!
Thanks for the reply, that works perfectly!
Hi there!
I’m sure this was discussed a while ago but this thread is already so long I have to ask again…
Every time I press the Button in the new iOS app it presses “double”.
It turns on and directly off.
Is there any fix for this behavior?
Thanks a lot.
Got this issue too and am reading through the summer posts since one hour without luck
Using tap_action of v3.0.0 toggle triggers the button twice on an iPad 2019 iPadOS 13.2.3 in safari and the app. In chrome the issue does not occur
- type: custom:button-card
entity: light.balkon_shelly
tap_action:
action: toggle
hold_action:
action: more-info
name: Balkon