Hi there,
since 4.0.0 update i’m facing an ailgnment issue:
Do i need to add something to correct?
I need to try fix that in button card directly. Give me some time 
Can you share the code in an issue on GH, please
No problem 
Issue created:
Hello! I have encountered the same problem as everyone, and the Google Chrome F12 prompt is like this:
ButtonCardJSTemplateError:
button-card.js?hacstag=146194325411:426
TypeError: Cannot read properties of undefined (reading ‘state’) in ‘if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].stat…’
at Ti.eval (eval at _evalTemplate (button-card.js?hacstag=146194325411:434:2161), :4:97)
at Ti._evalTemplate (button-card.js?hacstag=146194325411:434:2257)
at Ti._getTemplateOrValue (button-card.js?hacstag=146194325411:434:2877)
at button-card.js?hacstag=146194325411:434:4913
at Array.forEach ()
at Ti._buildStyleGeneric (button-card.js?hacstag=146194325411:434:4890)
at Ti._gridHtml (button-card.js?hacstag=146194325411:506:795)
at Ti._buttonContent (button-card.js?hacstag=146194325411:506:454)
at Ti._cardHtml (button-card.js?hacstag=146194325411:486:18)
at Ti.render (button-card.js?hacstag=146194325411:426:19509)
Uncaught (in promise) TypeError:
button-card.js?hacstag=146194325411:426
e.setConfig is not a function
at Ti.render (button-card.js?hacstag=146194325411:426:19640)
at Ti.update (button-card.js?hacstag=146194325411:1:14818)
at Ti.performUpdate (button-card.js?hacstag=146194325411:1:6145)
at Ti.scheduleUpdate (button-card.js?hacstag=146194325411:1:5792)
at Ti._$Ej (button-card.js?hacstag=146194325411:1:5700)
ButtonCardJSTemplateError:
button-card.js?hacstag=146194325411:426
TypeError: Cannot read properties of undefined (reading ‘state’) in ‘if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].stat…’
at Ti.eval (eval at _evalTemplate (button-card.js?hacstag=146194325411:434:2161), :4:97)
at Ti._evalTemplate (button-card.js?hacstag=146194325411:434:2257)
at Ti._getTemplateOrValue (button-card.js?hacstag=146194325411:434:2877)
at button-card.js?hacstag=146194325411:434:4913
at Array.forEach ()
at Ti._buildStyleGeneric (button-card.js?hacstag=146194325411:434:4890)
at Ti._gridHtml (button-card.js?hacstag=146194325411:506:795)
at Ti._buttonContent (button-card.js?hacstag=146194325411:506:454)
at Ti._cardHtml (button-card.js?hacstag=146194325411:486:18)
at Ti.render (button-card.js?hacstag=146194325411:426:19509)
Uncaught (in promise) TypeError:
button-card.js?hacstag=146194325411:426
e.setConfig is not a function
at Ti.render (button-card.js?hacstag=146194325411:426:19640)
at Ti.update (button-card.js?hacstag=146194325411:1:14818)
at Ti.performUpdate (button-card.js?hacstag=146194325411:1:6145)
at Ti.scheduleUpdate (button-card.js?hacstag=146194325411:1:5792)
at Ti._$Ej (button-card.js?hacstag=146194325411:1:5700)
Hey guys,
I have a card that i am trying to fix the precision of the values can anyone help me?
Trying to display the temperature value like that ( 25.1 ) and the humidity Like that (55%). I have set the presicion from the entity settings.
This is my code
type: custom:button-card
entity: sensor.aqara_temp_office
show_icon: false
name: Γραφειό Θερμοκρασία
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.aqara_temp_office'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.aqara_humi_office'].state}%</span>`
]]]
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.aqara_temp_office
name: Temperature
color: '#ff33ff'
- entity: sensor.aqara_humi_office
name: Humidity
color: '#3399ff'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
border-style: none;
margin-top: -20px;
}
No cross posting please! 
It doesn’t give you a better or faster answer. It is even more likely, that other people refrain from answering… Just saying…
And the question is already answered in the other topic…
1 Like
Sorry, I didn’t do it on purpose, it just happened, and we talked about the button card on a mushroom card thread.
No need to be sorry, things happen, nobody is angry. 
It’s more for future reference, please don’t do this! No harm, no foul! 
1 Like
I have been unable to figure out how and where to define variables inside a template then subsequently use them either within the template itself and/or the dashboard card.
If someone will please point me to some docs on it or give me an example of those use cases that would be very helpful.
Thank you.
Hi folks!
Since I haven’t been working with homeassistant and custom button-cards for long, I’m facing some difficulties. I’m currently trying to create a dashboard for the iPhone and iPad and add a few button-cards in a grid. I want individual buttons to have a glowing effect, so there should be indirect light around the button outlines.
It looks good so far in the browser on my Windows notebook, but not on the iPad/iPhone. Somehow, the drop-shadow is getting cut off. This doesn’t look good, and that’s why I wanted to ask here if there’s a way to optimize this or if I have to live with it, or if there are alternative methods to achieve this lighting effect.
I’ve taken a screenshot of the dashboard on my PC. This is how it’s supposed to look:
And here’s the poor result on the iPhone/iPad. By the way, it doesn’t matter whether I open the dashboard in a browser or through the homeassistant app.
Here’s the code (although it’s ok so far):
type: vertical-stack
cards:
- type: custom:button-card
show_name: false
styles:
card:
- filter:
- drop-shadow(0px 0px 10px red)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px cyan)
aspect_ratio: 3/1
size: 50%
- type: horizontal-stack
cards:
- show_name: true
name: WZ<br/> AUS
styles:
card:
- filter:
- drop-shadow(0px 0px 10px red)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px cyan)
name:
- color: grey
- font-weight: bold
icon: mdi:power
show_icon: true
color: black
type: custom:button-card
aspect_ratio: 0.5/0.5
size: 50%
tap_action:
action: toggle
entity: scene.smoken_am_fenster
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:arrow-up-bold-hexagon-outline
size: 80%
styles:
card:
- filter:
- drop-shadow(0px 0px 10px yellow)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px blue)
color: black
- show_name: true
name: WZ<br/>gedimmmt
styles:
card:
- filter:
- drop-shadow(0px 0px 8px red)
- background-color: rgba(0, 0, 0)
name:
- color: grey
- font-weight: bold
show_icon: true
color: orange
type: custom:button-card
aspect_ratio: 1/1
tap_action:
action: toggle
entity: scene.neue_szene
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:arrow-left-bold-hexagon-outline
size: 80%
styles:
card:
- filter:
- drop-shadow(0px 0px 10px yellow)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px blue)
color: black
- show_name: true
name: fully<br/>warm
styles:
card:
- filter:
- drop-shadow(0px 0px 8px red)
- background-color: rgba(0, 0, 0)
name:
- color: grey
- font-weight: bold
icon: mdi:heat-wave
color: red
aspect_ratio: 1/1
size: 50%
show_icon: true
type: custom:button-card
tap_action:
action: toggle
entity: scene.fully_warm
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:arrow-right-bold-hexagon-outline
size: 80%
styles:
card:
- filter:
- drop-shadow(0px 0px 10px yellow)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px blue)
color: black
- type: horizontal-stack
cards:
- show_name: true
name: spider<br/> lights
styles:
card:
- filter:
- drop-shadow(0px 0px 8px red)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 15px cyan)
name:
- color: grey
- font-weight: bold
show_icon: true
icon: mdi:spider
color: black
type: custom:button-card
aspect_ratio: 1/1
size: 50%
tap_action:
action: toggle
entity: scene.smoken_am_fenster
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:arrow-down-bold-hexagon-outline
size: 80%
styles:
card:
- filter:
- drop-shadow(0px 0px 10px yellow)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px blue)
color: black
- show_name: true
name: fully warm<br/>arbeiten
styles:
card:
- filter:
- drop-shadow(0px 0px 8px red)
- background-color: rgba(0, 0, 0)
name:
- color: grey
- font-weight: bold
show_icon: true
color: yellow
aspect_ratio: 1/1
type: custom:button-card
tap_action:
action: toggle
entity: scene.fully_warm_gedimmt
- type: custom:button-card
show_name: false
styles:
card:
- filter:
- drop-shadow(0px 0px 10px red)
- background-color: rgba(0, 0, 0)
icon:
- filter:
- drop-shadow(0px 0px 10px cyan)
aspect_ratio: 3/1
size: 50%
Thank you very much for your help!
found your card again, I seem to have bumped the same wall in my search for a dynamic world clock card (which isnt available in either core entities, or Dashboard and even custom cards dont offer an option for external entities really)
Ive adapted your code a bit, so it retrieves the time of an external Time Zone completely, and doesn’t require an entity to provide that (or, so I understood your config)
below I tested a fixed timezone, and also a commented Time Zone attributes of our mobile_app devices.
The label uses the full object (I couldnt get it to work without explicitly mentioning those in the options, probably because I havent set an entity)
Anyways, a small variation, which might be handy for someone else too. Ofc, throw it in a template (like you did), use an auto-entities card/dec.uttering card etc etc to automate the Dashboard even further.
thanks for your original code!
- type: custom:button-card
name: Vietnam
variables:
language: nl-NL
timezone: Asia/Ho_Chi_Minh
# [[[ return states['sensor.marijn_geocoded_location'].attributes['Time Zone']; ]]]
label: >
[[[
return (new Date()).toLocaleDateString(variables.language, {
hour: '2-digit',
minute:'2-digit',
year: 'numeric',
day:'numeric',
month:'short',
timeZone: variables.timezone});
]]]
icon: >
[[[
var hourNamesIndexed =
["twelve", "one", "two", "three", "four", "five", "six",
"seven", "eight", "nine", "ten", "eleven", "twelve"];
var timeParts =
(new Date()).toLocaleTimeString(variables.language,
{timeZone: variables.timezone, hour12: true}).split(':');
var hour = parseInt(timeParts[0]);
var minute = parseInt(timeParts[1]);
return "mdi:clock-time-" + hourNamesIndexed[hour] + "-outline";
]]]
show_icon: true
show_label: true
show_name: true
color: var(--paper-item-icon-color)
styles:
grid:
- grid-template-areas: '"n" "i" "s" "l"'
name:
- color: var(--secondary-text-color)
- font-size: 1rem
state:
- color: var(--secondary-text-color)
- font-size: 0.8rem
label:
- color: var(--secondary-text-color)
- font-size: 0.8rem
tap_action: none
then uses
- type: grid
columns: 3
cards:
- type: custom:button-card
template: button_wereld_tijd
- type: custom:button-card
template: button_wereld_tijd
name: Vietnam
variables:
timezone: Asia/Ho_Chi_Minh
- type: custom:button-card
template: button_wereld_tijd
name: Marijn
variables:
timezone: >
[[[ return states['sensor.marijn_geocoded_location'].attributes['Time Zone']; ]]]
next: some formatting 
good for now, getting close to my regular layout of grids with 4 1/1 buttons:
took out the year, as that wont change often… the date is a fun aspect of time traveling, so kept that in for now
Ah, yes, that’s a nice tweak. One less thing to set. Yes, you understood the original correctly.
You’re welcome!
PS: You’ve been quiet on the forum. I was wondering what happened to you. 
haha, well, Ive moved attention a bit to Discord, and some private chatting on custom card improvement.
Still checking in daily, dont worry
Had to hold off the current beta, as ZWave is broken, so can not test any of the new stuff really, hope they push the fix before release tomorrow…
also, my setup would be practically finished, and I am mostly hoping for some FR’s to be acknowledged. Other than that, I cant fix a lot anymore. And button-card has been restored and improved beyond anything we could have wished for by Jerome lately, sow hat else to do… lol.
Anyways, enjoying your posts in the other threads, very to the point and relevant. Keep it up!
EDIT:
as I type this drops in: ZwaveJS fail to unload error on 2023.9.0b2 · Issue #99502 · home-assistant/core · GitHub
no such thing as coincidence…
1 Like
btw, what I would really love, is to get the time difference between the traveling timezone and home zone
could you help me out find the best js code for that.
consider a button in lets say Vietnam, so using eg
variables:
timezone: Asia/Ho_Chi_Minh
and compare that to my default, in this case
variables:
timezone: Europe/Amsterdam
I’d love to set eg the tooltip on that button to reveal the difference between the 2 being +5
hours
using these variables, because ultimately, Ill use dynamic states all over, except for Home. Otoh, I might also be using dynamic for that and see the difference between me and men siblings when we travel both
could find this Get difference between two timezones · GitHub
using:
tooltip: >
[[[ function getTZDiff(currentTz, otherTz) {
var selectedTz = new Date('January 1, 1970 00:00:00 ' + currentTz);
var targetTz = new Date('January 1, 1970 00:00:00 ' + otherTz);
var difference = selectedTz.getTime() - targetTz.getTime();
var hours = (difference / 3600000);
if (hours < 0) return Math.abs(hours) + " hours behind";
return Math.abs(hours) + " hours ahead";
}
getTZDiff(variables.homezone, variables.timezone); ]]]
but that does nothing yet…
Trying to not create a lights on count sensor for each area. Here’s the card where I use the value of lights on count to decide if I should turn off or turn on lights. This version uses a sensor for the lights on count and sets variables.lightState using a JS template and works just fine:
- type: custom:button-card
template: flash
variables:
lightState: '[[[ return (states[ ''{{ lightsOnCount }}'' ].state > 0 ? true : false); ]]]'
icon: mdi:lightbulb-group
styles:
icon:
- color: '[[[ return( variables.lightState ? variables.iconColorActive : variables.iconColorInactive ); ]]]'
name: Lights
hold_action:
action: more-info
tap_action:
action: call-service
service: '[[[ return( variables.lightState ? ''homeassistant.turn_off'' : ''homeassistant.turn_on'' ); ]]]'
service_data:
entity_id: >
[[[
let entityIds = [];
if (variables.lightState) {
{% for light in lightsOff %}
entityIds.push('{{ light }}');
{% endfor %}
}
else {
{% for light in lightsOn %}
entityIds.push('{{ light }}');
{% endfor %}
}
return entityIds.join(',');
]]]
if I replace the variables lightState template with this, the card simply stops displaying with no errors that I can find:
{% set lightsOff = ['light.kitchen_cabinet_light_left_light', 'light.kitchen_hue_color_1_2', 'light.kitchen_cabinet_light_right_light'] %}
variables:
lightState: |
[[[
let lit = 0;
{% for light in lightsOff %}
if (states['{{ light }}'].state == 'on')
lit++;
{% endfor %}
return lit;
]]]
Using the template tool, here is what that expands to and seems like valid JS template - but it does not work:
variables:
lightState: |
[[[
let lit = 0;
if (states['light.kitchen_cabinet_light_left_light'].state == 'on')
lit++;
if (states['light.kitchen_hue_color_1_2'].state == 'on')
lit++;
if (states['light.kitchen_cabinet_light_right_light'].state == 'on')
lit++;
return lit;
]]]
As you can tell I also combine jinja2 and JS template to list the entity_id list and that works just fine. But when I do the same for variables.lightState which is also supposed to support JS template the card displays as an empty card. The next card displays fine, just not this one.
Please help.
Thank you.
Hello all.
It’s possible to create something like that with button-card?
I also seem to be having issues with templating. I’m sure this used to work fine, but it’s stopped working correctly and I have no idea why.
I have a custom field I want to be at left: 88% when ‘on’ and 200% (off the card) when off.
According to developer tools my entity is off:
{{states['calendar.recycling_bin'].state}}
Result type: string
off
But when I put this into my custom-field entry:
recycling_bin:
- background-color: 'transparent'
- position: absolute
- top: -5%
- left: >
[[[
if (states['calendar.recycling_bin'].state == 'off')
return '200%';
return '88%';
]]]
It always returns ‘88%’.
As far as I can tell, that syntax is correct.
Any ideas?
Please post your whole style section. Did you put custom_fields: above?
Yes:
- type: custom:button-card
styles:
card:
- background-color: '#03A9F4'
grid:
- position: relative
custom_fields:
recycling_bin:
- background-color: 'transparent'
- position: absolute
- top: -5%
- left: >
[[[
if (states['calendar.recycling_bin'].state == 'off')
return '10%';
return '88%';
]]]
custom_fields:
recycling_bin:
card:
type: custom:button-card
entity: calendar.recycling_bin
show_icon: true
icon: mdi:recycle
show_state: false
show_name: false
color_type: card
color: 'white'
size: 80%
styles:
card:
- box-shadow: 0px 0px 0px 0px
- height: 30px
- width: 30px
- border-radius: 50%
Mmh… using your code the custom field “jumps” left and right depending on state. Are you running the latest button-card’s version?