1 Like
Many thanks! 
not sure if this a custom button thing or a me thingā¦but im trying to build out a remote using Harmony commandsā¦using a normal button works fine with this code -
- type: button
icon: mdi:television
name: Watch TV
show_state: true
show_name: true
show_icon: true
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Harmony Watch TV
target:
entity_id: remote.harmony_hub
entity: remote.harmony_hub
However, using custom button card with this code throws this error -
Failed to call service remote/turn_on. Must contain at least one of entity_id, device_id, area_id
And I cant for the life of me see why is different between the actions. Do we need to use different syntax on custom button cards?
- type: custom:button-card
name: Watch TV
color_type: card
icon: mdi:television
color: rgb(181, 100, 1)
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- color: ivory
- font-size: 16px
- text-transform: capitalize
- height: 100px
show_name: true
show_icon: true
show_state: false
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Harmony Watch TV
target:
entity_id: remote.harmony_hub
entity: remote.harmony_hub
Blue one doesnāt work , grey one does
Try removing the target key word - as far as I am aware, this is not accepted by the custom button card.
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Harmony Watch TV
entity_id: remote.harmony_hub
1 Like
ahhhhā¦ill give it a go and report back 
thanks
hoping you figured this out already, incase others want to know this worked for me
tap_action:
action: navigate
navigation_path: '[[[window.history.back()]]]'
1 Like
Is it possible to read the area name of an entity, e.g. Livingroom?
Something like (this doesnāt work 
):
[[[ return area_name(entity.entity_id); ]]]
Is it possible to force a page reload x seconds after the button was pushed?
I use the button to update the preview of a camera, but the live view doesnāt update until the page is reloadedā¦
Hi friends. I want to make a panel and I see that some of you have a type of button that I would like to put on my lovelace. Could you tell me the code for this type of button and how it would be placed in HA or what card would I have to download? Iām new to this topic and Iām learning. Thank you very much.
@ * Message
- Normal
ā
@sobrarbe, hereās one that I haveā¦
entity: counter.homeassistant_errors
icon: mdi:home-assistant
name: Home Assistant Version
aspect_ratio: 1/1
styles:
card:
- border-radius: 5%
- padding: 5%
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i err" "n n" "ver ver" "new new" "null null"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 18px
- color: white
- align-self: middle
- justify-self: middle
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state < 5) return 'lime';
if (entity.state >= 5 && entity.state < 20) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-10%'
custom_fields:
err:
- align-self: start
- justify-self: end
ver:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- padding-bottom: 22px
- align-self: middle
- justify-self: start
'null':
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
err: |
[[[
return `<ha-icon
icon="mdi:alert-circle-outline"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon> Errors - <span> ${entity.state}</span>`
]]]
ver: |
[[[
return `<ha-icon
icon="mdi:home-assistant"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> Current: <span style="color: var(--text-color-sensor);">${states['sensor.current_version'].state}</span></span>`
]]]
new: |
[[[
return `<ha-icon
icon="mdi:home-assistant"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> Latest: <span style="color: var(--text-color-sensor);">${states['sensor.home_assistant_versions'].state}</span></span>`
]]]
'null': ''
hold_action:
action: call_service
service: script.homeassistant_reset_error_counter
type: custom:button-card
This should ne a decent example to get you startedā¦
1 Like
Hello, the example you give me when you put it on the card. Burton card should already work or do I have to create some kind of sensor? Thank you.
Ok Button Card gurus! I need some helpā¦Iāve just started tinkering with the card and managed to hack enough together out of this thread to make it workā¦almost!
lolā¦The card functions perfectly with the exception of the ālockā featureā¦I canāt get it to work across the entire button cardā¦As I tried to illustrate below, the lock feature works only if you press the actual lock area (red highlight), if you press anywhere else on the card (yellow highlight) if executes the button action. What am I doing wrong? Or how do I extend the lock āzoneā to cover the entire card?
My Code:
- type: custom:button-card
color_type: icon
entity: input_select.devicelist
show_state: false
show_name: true
name: Settings
show_icon: true
icon: mdi:cog
size: 50%
lock:
enabled: true
unlock: hold
duration: 5
tap_action:
action: navigate
navigation_path: //192.168.1.253:8123/
styles:
grid:
- grid-template-areas: '"i n check_box"'
- grid-template-columns: 20% auto 15%
- grid-template-rows: 1fr
img_cell:
- padding: 0em
card:
- top: 110px
- padding: 0em
- height: 2.8em
- font-size: 18px
- border-radius: 5px
name:
- justify-self: start
lock:
- top: 140px
- justify-content: flex-end
- align-items: flex-end
No matter what Iāve tried, my icon is horizontally centered in its cell. I want it left-justified. What am I missing?
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 30px 20px
- grid-template-columns: 1fr
img_cell:
- align-self: start
- text-align: start
- justify-self: start
- place-self: start
icon:
- align-self: start
- justify-self: start
Thats a great card you made there, could you share the whole yaml so I can reproduce it?
1 Like
Could someone help me with the following? I want a button to change color based of an attribute of an entity which contains the time. I use scheduler component for planning. I want a button card to light up when the itās 24 hours before the time in the attribute. I donāt need help with the styles etc, but with the Javascript part.
So I have this attribute: next_trigger: '2022-05-09T07:00:00+02:00' and I want the the icon at a color when the current time is 24 hour before the time in the next_trigger attribute. I think I need to use a Javascript Template here as the state operator. I have a hard time coming up with a code for this however.
Can anyone help me/point me in the right direction?
From memory, but should give an idea:
[[[ return ((new Date() - Date.parse(entity.attributes.next_trigger) < (24*60*60*1000)) ? āgreenā : null ]]]
Did you place your elements with px or %?
Your config code might give some hints
Iām setting styles like this:
name:
- top: 59.7%
- left: 10.1%
- line-height: 2vw
- position: absolute
state:
- top: 74%
- left: 11%
- line-height: 2vw
- position: absolute
card:
- font-family: Sf Display
- letter-spacing: 0.05vw
- font-weight: 400
- font-size: 1.2vw
- border-radius: 0.8vw