Can you share the code?
HI @RomRider
would a template on the action fields be possible? To be able to template the following hard-coded button:
I did manage to switch.toggle with this:
- type: custom:button-card
template: button_motion
name: Corridor <br> office
entity: binary_sensor.corridor_office_motion_sensor
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.corridor_office_motion_sensor_switch
we would need something like this:
- type: custom:button-card
template: button_motion
name: Corridor
entity: binary_sensor.name
tap_action:
action: call-service
service: switch.toggle
service_data_template:
entity_id: >
'switch.' + entity.object_id + '_switch'
# switch.{{entity.object_id}}_switch in Jinja
hold_action:
action: more-info
or , if object_id wouldn’t be available:
service_data:
entity_id: >
var id = entity.entity_id.split('.')[1];
'switch.' + id + '_switch'
or have it work on action: toggle?
tap-action:
action: toggle
entity_id: switch.corridor_office_motion_sensor_switch
and templated:
tap-action:
action: toggle
data_template:
entity_id: >
'switch.' + entity.object_id + '_switch'
We could of course hard code this, if the secondary entity_id would be allowed on action: toggle, (it isn’t yet is it?) but that would require doing so on each button.
Enabling this in an action_template would allow for setting it up in the button template once, and leave the button config simple as can be.
thanks for considering
Loving the button card, using it for camera controls!
Quick question, is there a way of quickly blinking the button to simulate the button being pressed? In my example, I want the card to change colour when I click it to run a script, or to send mqtt messages.
Thanks!
Add a little delay at the end of your script.
- delay:
milliseconds: 500
Worked a treat, thanks very much!
There’s already a haptic option if you use the IOS beta app. I’m not sure that sound is a good idea but maybe vibrate for other phones could be interesting. Could you open a feature request on Github please?
I’ll have a look into this, please open a feature request. In the meantime, I think you can use config-template-card
Try this:
styles:
name:
- text-overflow: unset
- white-space: unset
- word-break: break-word
2 Likes
yes, that works, thank you! tried it with only word-break: ( since i had word-wrap before and hadn’t seen than yet), but that wouldn’t work. Now Ill check why it needs text-overflow and white-space: unset …
will do, referring to this thread, thanks for considering! see: add external entity in action:, preferably with templatable entities · Issue #187 · custom-cards/button-card · GitHub
have you given the icon_template some thought? Seems to good to miss out on. (appreciate your remarks on javascript and doubling features…)
I tried but I do not know if I did it right
Is it possible to specify a maximum size for a button while using aspect_ratio:? The idea being a button cannot exceed a specific dimension when viewed on larger screens.
Case in point - when I load my homekit-like buttons, which leverage a 1/1 aspect ratio, they look normal on my iPad Air 2 but are gigantic on my iPad Pro. Being able to specify something like max_size:xxx or max_height/width:xxx in conjunction with aspect_ratio: would be awesome.
2 Likes
yes, that would indeed be very nice!
When using the original Tiles custom html card we have this option:
column_width: minmax(75px, 75px)
which could of course be set to the specific demands. Maybe this could be translated to Button requirements?
Hi,
is there a way to make a tapaction to an external website (link) ?
navigation_path: '' seems to work only for internal navigation.
I didnt find any other information. Any help where i could change myself? Thanks!
Sorry if this has already been asked, but i can’t find anything.
This is my first attempt with configuration templates.
I have a template:
mcp_left:
show_label: true
label: '-'
color_type: card
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--paper-card-background-color)
grid:
- grid-template-areas: '"i s" "i l" "i n"'
- grid-template-columns: 40% 1fr
name:
- justify-self: end
- padding-right: 15px
label:
- justify-self: end
- padding-right: 15px
state:
- value: 'on'
styles:
icon:
- color: var(--paper-card-background-color)
name:
- color: var(--paper-card-background-color)
label:
- color: var(--paper-card-background-color)
- value: 'off'
styles:
card:
- background-color: var(--primary-background-color)
(same with other styles config for the right button)
and want to change the icon in the button-card by the state:
- type: custom:button-card
template: mcp_left
entity: switch.m2_b7_out
label: OG Bad
state:
- value: 'on'
icon: mdi:arrow-up-thick
- value: 'off'
icon: mdi:arrow-down-thick
- type: custom:button-card
template: mcp_right
entity: switch.m2_a0_out
but it only shows the default flash icon.
If i comment out the state config in the template, it works as expected.
I could be wrong but shouldn’t there be a styles: in your button config?
label: OG Bad
state:
- value: 'on'
styles:
icon: ...
Thanks for your reply, but how do i define an icon in the state/value/styles option?
If i define the icon in the template, it works, but then i can’t use the template for other buttons,
state:
- value: 'on'
icon: mdi:arrow-up-thick
styles:
icon:
- color: var(--paper-card-background-color)
name:
- color: var(--paper-card-background-color)
label:
- color: var(--paper-card-background-color)
- value: 'off'
icon: mdi:arrow-down-thick
styles:
card:
- background-color: var(--primary-background-color)
Here is an interesting problem I have with my config.
My blind open/ closed button does not seem to obey the theme that has been applied to each button. You can see from the following two pictures that the on/ off - open/ closed states are completely different - the blind produces a black icon and black border where it should be yellow ?!?!
Is this because the button card is reading the states on/ off only and does not understand the open/ closed states?
States:
Anchor:
standard_button_style2: &standardbuttonstyle2 type: "custom:button-card" color: auto show_label: true show_state: true show_name: true styles: card: - border-radius: 12px - height: 63px - width: 63px - margin: 8px 8px 4px 0px label: - font-size: 9px - font-family: Helvetica - padding: 0px 6px - justify-self: start state: - font-size: 9px - font-family: Helvetica - justify-self: start - text-transform: capitalize - padding-left: 6px 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 - margin-right: 25% name: - justify-self: start - padding-left: 6px - font-weight: bold - font-family: Helvetica - font-size: 9px icon: - align-self: flex-start - height: 62% - width: 62% state: - value: "closed" styles: card: - box-shadow: 0px 0px 10px 3px var(--button-card-light-color) hold_action: action: more-info tap_action: action: call-service service: script.turn_on service_data: entity_id: script.lounge_blind_toggle
1 Like
To merge states when using templates you have to declare an id, see documentation and an example here
Yes it’s only on/off, you can use the state object to do what you want, see here
And you have lots of examples here in the forum also.
1 Like
Yeah, i saw this, but to be honest, it took some time for me to understand it. 
Got it now, thanks alot!
1 Like
Yes it’s only on/off, you can use the state object to do what you want, see here
And you have lots of examples here in the forum also.
Thank you for the response and understood - the problem that ‘I think I have’ is that the inherited style from the master theme is being ignored - for example when I apply a box shadow color directly as below this works:
state:
- value: "closed"
operator: '=='
styles:
card:
- box-shadow: 0px 0px 10px 3px blue
state:
- value: "open"
operator: '=='
styles:
card:
- box-shadow: 0px 0px 10px 3px red
…but when I apply a variable to match the currently applied theme as below:
state:
- value: "closed"
operator: '=='
styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
This is being ignored.
Is this because the variable that is being applied does not match the entity type i.e. a switch?
You have 2 state objects in your config, but it’s an array. See here for an example: https://github.com/custom-cards/button-card/blob/master/README.md#with-operator-on-state