Hi!
How can I convert this jinja template value into javascript for custom button card?
value: "{{ state_attr('switch.adaptive_lighting_home', 'brightness_pct')|int }}"
value: "[[[ return state['switch.adaptive_lightning_home'].attributes.brightness_pct ]]]"
But the code doesnât typecast/filter to/for int. This is something different and you should do these checks afterwards for yourself, if really necessary. Or just leave it as is, I doubt youâll ever stumble over this. 
Entity object always refers to most parent card.
In example below you can see card (some custom code removed to improve readability), with entity defined, but also with embeded another custom button card
type: custom:button-card
entity: binary_sensor.cube_door_garden
show_name: true
custom_fields:
window:
card:
type: custom:button-card
show_name: true
entity: binary_sensor.cube_window
name: |
[[[ return (entity.attributes.friendly_name) ]]]
In the example above, name of sub-card is filled with name of entity assigned to parent card.
I would say itâs the bug. But want to confirm first if Iâm not doing anything wrong. If so, how can I reference in the template a card the template belongs to?
Thatâs by design. All variables get passed to the entire parent card configuration, which includes the child card. Hardcode the name or use a button card variable.
As a side remark, name already returns the friendly name. That code is redundant, unless you were just using it as an example.
Yes, I exploited name attribute just to quickly display the value.
Thank you for the answer. Documentation is lacking of that fact. Unfortunately It effectively disables part of templating features for embedded cards. but yeah⊠It can be somehow resolved with use of template variables.
I use lovelace gen for most of this stuff to get around things like this. However making the leap to lovelace gen is time consuming. It removes the need for decluttering card, and you can build single templates and extend them anywhere by accessing them with a small config. Took my 100K+ lines down to ~5000ish.
Actually templates for custom button cards are very usefull and helped me also to minimize code repetition a lot.
The reason I asked for that was that the card should react on tap_action only for particular state of its entity. And behave ânot clickableâ otherwise (simply button to disable something, without option to enable). This makes relation to the entity assigned to the card. Obviously I can repeat entity name on both places (entity and tap_action template) but wanted to avoid this redundancy.
And because of chosen graphical design of cards Iâm using embedded custom cards for that. As simply as that.
Can you elaborate? Iâm not following what you mean. There are ways to stop click events on elements using CSS.
This is the card:
Those icons represent binary sensors (not switches) representing trashcan has to be pulled out for trash collection. The role of UI is to inform trash has to be pulled out and allow confirmation of this action. But it should not react on click otherwise.
The icons are nested custom button cards inside parent custom button card. Code of top-right button is listed bellow.
type: custom:button-card
template: subsection_window
entity: binary_sensor.garbage_mixed
tap_action:
confirmation:
text: Confirm pulling MIXED container out
action: >
[[[ return (states['binary_sensor.garbage_mixed'].state ==
'off' ? 'none' : 'call-service') ]]]
service: svc2evnt.fire_event
service_data:
event_type: garbage
data:
domain: mixed
action: PULLEDOUT
As you can see see it requires to use binary_sensor.garbage_mixed in the code twice. Once for regular entity, and second time in template condition.
If it was most top card I could use instead:
action: >
[[[ return entity.state == 'off' ? 'none' : 'call-service' ]]]
1 Like
Hi, I have a question about one of my cardâŠ
In the PC browser I see it in one way, from a smartphone in another way. The icon on the middle of the card is not in the center, but the same card and the same icon on my smartphone it is centered.
there is something wrong? How can I correct? thanks
Code:
type: grid
cards:
- type: custom:button-card
aspect_ratio: 1.1/1.5
styles:
custom_fields:
thermo:
- align-self: start
- position: absolute
- left: 0px
- top: 130px
- height: 100%
- width: 100%
- line-height: 0px
- z-index: auto
accendi:
- align-self: start
- position: absolute
- left: 15px
- top: 25px
- height: 70px
- width: 80px
- line-height: 15px
spegni:
- align-self: start
- position: absolute
- right: 15px
- top: 25px
- height: 70px
- width: 80px
- line-height: 15px
- border-radius: 100%
caldaia:
- align-self: start
- position: absolute
- right: 35%
- top: 13px
- height: 100px
- width: 100px
- line-height: 15px
- border-radius: 100%
custom_fields:
thermo:
card:
type: custom:thermostat-card
title: Thermo
entity: climate.termostato
no_card: true
step: 1
accendi:
card:
type: button
tap_action:
action: toggle
entity: switch.riscaldamento_20_on
icon: hass:fire
name: 20° / ON
style: |
ha-card {
box-shadow: none;
spegni:
card:
type: button
tap_action:
action: toggle
entity: switch.riscaldamento_00_off
icon: hass:fire-off
name: SPEGNI
style: |
ha-card {
box-shadow: none;
caldaia:
card:
type: custom:button-card
aspect_ratio: 2/2
name: CALDAIA
styles:
card:
- font-size: 10px
- border-radius: 100%
icon:
- width: 65px
name:
- font-weight: bold
- font-size: 17px
- line-height: 28px
entity: sensor.stato_riscaldamento
color: rgb(128, 128, 128)
state:
- value: IN FUNZIONE
color: rgb(255, 0, 0)
show_state: true
show_name: true
show_label: true
style: |
ha-card {
box-shadow: none;
columns: 1
square: false
PC
Smartphone
You could solve that one by using variables in the âtopâ card. Set a variable there and use it throughout the cards.
- type: custom:button-card
variables:
var_entity: blub
In the second level card you can use it as is. I had the problem, that sometimes a card one level deeper (third level) doesnât recognize the variable. I think, that may be kind of a bug, but canât say for sure. If this happens to you as well, set the variable again in the second level. Then you can reach it in the third for sure.
Second level card:
variables:
var_entity_again: "[[[ return variables.var_entity; ]]]"
And in the third level use it as usual. 
Not the best way, but it def. works. 
I havenât investigated it further, and it only happens on some cards, not on others.
1 Like
Ok, to remove the click action, in your style area for the custom_fields, add the following css property
- pointer-events: none
That will remove all âclicks from the itemâ.
You can also just place an icon anywhere on the button without it being a card as well. I have examples of this in my configuration. This is the only one I can think of off the top of my head:
Example of the overview in action
The info custom_fields builds icons and displays them based on light counts etc. You can use this chunk of code to place any icon you want with any color:
info: |
[[[
color = 'var(--paper-item-icon-active-color)';
icon = 'mdi:eye';
return `<ha-icon
icon="${icon}"
style="width: 1.4em; height: 1.4em; color: ${color};">
</ha-icon>`;
]]]
Just fill out the info based on the entity state and youâre good to go.
2 Likes
guys, i need a little help please. i want adopt this little javascript to button-card, but i have no clue howâŠ
let hour = new Date().getHours()
let h = hour.toString().padStart(2, "0") // current hour in format 08, 09, 10, 11
if (binary_sensor["kute_tana_" + h] == hour){
// do something
}
return msg;
so basically i have sensors like binary_sensor.kute_tana_00, binary_sensor.kute_tana_01, binary_sensor.kute_tana_02, until binary_sensor.kute_tana_23. my goal with javascript is get true/false when ending number of sensor is same as hour number and change background color of button depending value - 15.00 is true binary_sensor.kute_tana_15, 22.00 is true binary_sensor.kute_tana_22 etc.
Hi,
maybe this example helps:
I change the Icon color in dependency of the state value and a binary_sensor:
icon:
- color: |
[[[
if (entity.state == 'on' & states['binary_sensor.display_night_view'].state == 'off') return 'RGB(194,149,27)';
if (entity.state == 'on' & states['binary_sensor.display_night_view'].state == 'on' ) return 'RGB(99, 75, 10)';
if (entity.state == 'off' & states['binary_sensor.display_night_view'].state == 'on') return 'RGB(80, 10, 10)';
else return 'RGB(200, 15, 15)';
]]]
Important: You should use the âcustom:button-cardâ. Its a front end add on installed via HACS.
You can do something like this as well:
name: |
[[[
var street = states['sensor.yvonnes_location'].attributes.street
var number = states['sensor.yvonnes_location'].attributes.street_number
street = street.substring(0,30)
if (states['sensor.yvonnes_location'].attributes.devicetracker_zone == 'not_home')
return street + ' ' + number;
else return states['person.yvonne'].state;
]]]
Slightly off topic but does all the templating at the top of the file cause loads of wavy red lines in VSC or is it just that I have something missing/mis-set in mine?
(Seeing as I only know the rudiments of Javascript I could well be using your config for reference but I was just wondering, how many octopi do you have in your config 
)
That code uses lovelace_gen, so it wonât work in your setup if you donât use lovelace gen. Also, thereâs
a lot of âwizardyâ in that code, so stripping out the lovelace_gen stuff will be a chore. It basically uses lovelace_gen to generate a static js object for use.
In general, I would avoid using this card if you canât read code. But you can use it to get the styling and the code snipit I supplied should properly create an icon for you if you fill in color and icon.
Yeah, I use lovelace_gen a lot, I just wondered if there was a way to get VSC to not think that jinja templates at the top of the file were errors.
That looks more like the spell checker from the browser, doesnât it? With only that little piece of code shown on the image, Iâd try to disable spell check in the browser and see what happens.
You can change your language mode for that file to yaml & jinja in the lower right corner. You may need to install an extension to get that file type.