Readability 
let is block scoped and var is function scoped. Better use let than var, itās cleaner and avoids strange stuffā¦
1 Like
BTW, itās call-service not call_service, Iāve updated the code above.
I did and saw the identical error it kept throwing when I was testing before:
as long as I am holding, it rapidly adds up the errorsā¦
using:
hold_action: >
[[[
let res;
if (window.location.pathname.split('lovelace/')[1] == 'home') {
res = {
action: "navigate",
navigation_path: "developer"
};
}
else {
res = {
action: "call_service",
service: "automation.trigger",
service_data: {
entity_id: entity.entity_id,
}
};
}
return res;
anything I can change in my button code, or would this require something on your side to fixā¦ or isnāt that even possible, in which case this has been an educational afternoon 
Iād probably need to modify somewhat the button-card code to make it work actually.
The alternative it to define every field independantly with several templates.
variables:
is_home: '[[[ return window.location.pathname.split('lovelace/')[1] == 'home'; ]]]'
hold_action:
action: '[[[ return variables.is_home ? "navigate" : call-service; ]]]'
navigation_path: '[[[ return variables.is_home ? "developer" : null; ]]]'
service: '[[[ return variables.is_home ? null : "automation.trigger"; ]]]'
service_data:
entity_id: '[[[ variables.is_home ? null : entity.entity_id ]]]'
2 Likes
Thats is something I can live with for the time beingā¦ 
magic, I find the addition of variable a major development in this great card.
do you need a FR on the modification in the repo?
edit
thereās a small hiccupā¦
this button is displayed on āhomeā and on ādeveloperā
when I hold the button on the home view, it correctly navigates to developer view. Only there to show this:
Ive used:
variables:
view: >
[[[ return window.location.pathname.split('lovelace/')[1] == 'home'; ]]]
hold_action:
action: >
[[[ return variables.view ? "navigate" : call-service; ]]]
navigation_path: >
[[[ return variables.view ? "developer" : null; ]]]
service: >
[[[ return variables.view ? null : "automation.trigger"; ]]]
service_data:
entity_id: >
[[[ variables.view ? null : entity.entity_id ]]]
You are missing some quotes and a return also 
variables:
view: >
[[[ return window.location.pathname.split('lovelace/')[1] == 'home'; ]]]
hold_action:
action: >
[[[ return variables.view ? "navigate" : "call-service"; ]]]
navigation_path: >
[[[ return variables.view ? "developer" : null; ]]]
service: >
[[[ return variables.view ? null : "automation.trigger"; ]]]
service_data:
entity_id: >
[[[ return variables.view ? null : entity.entity_id ]]]
fixed!
crosspost
sorry, and yes, it works now!
Hello, first of all, thank you for this great card, it is really very useful and configurable.
I have three buttons associated to the state of an input_select: input_select.escena_comedor. When the state of the input_select matchs, the icon turns to yellow. Since v109.XX I am experimenting a refresh issue, related (I guess) with the use of variables, because I have to refresh chrome browser in order to see the icon yellow.
Each button has this template code:
select_escena:
show_icon: true
show_label: false
show_name: false
variables:
input_select_escena: "input_select.escena_salon"
input_select_option: "Todo Apagado"
styles:
card:
- border-radius: 20%
- filter: opacity(80%)
- heigth: 7vmin
- width: 7vmin
icon:
- color: |
[[[
if (states[variables.input_select_escena].state == variables.input_select_option)
return "var(--state-icon-active-color)";
else;
return "var(--state-icon-color)";
]]]
- width: 90%
And each button:
- type: custom:button-card
template: select_escena
icon: 'mdi:lightbulb-group-off'
variables:
input_select_escena: "input_select.escena_comedor"
input_select_option: "Todo Apagado"
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.escena_comedor
option: "Todo Apagado"
Not using variables and harcoding the color icon in each button works well and refresh the color of the icons.
Anyone is experimenting something like this? Is it an issue or this is expected new behaviour of lovelace with variable?
Thank you very much,
This is expected. Check this section of the documentation on github. Also it was written in the release notes 
Thank you very much @RomRider, solved!!. It works like a charm!
Iāve read a lot of your documentation but completely overlooked this section.
sorry dont mean to hi-jack this thread.
Marius over the past year+ i have seen you with some of the best questions in regard to numerous different custom cards/etcā¦
Cant help but to wonder what your GUI actually looks like. Much respect in your efforts. im sure it looks great.
1 Like
Yes, add another custom field and play around with left and top values.
custom_fields:
notification:
- background-color: >
[[[
if (states['input_number.test'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
notification2:
- background-color: >
[[[
if (states['input_number.test'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 70%
- top: 70%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
custom_fields:
notification: >
[[[ return Math.floor(states['input_number.test'].state / 10) ]]]
notification2: >
[[[ return Math.floor(states['input_number.test'].state / 10) ]]]
Here is an example of my custom button with the same effect (just added the second field to show you how it looks)
Cool design, Would you mind posting the yaml for one tile please.
thanks Jim,
always trying to learn and make things better, leaner, fasterā¦
Iām nowhere in the crowd using things like lovelace_gen yet, or some of the other āthemesā floating around. Trying to make the interface me and my family suits best, which seems to be rather personal
As said, always changing, and right now eg I am minimizing my use of custom-ui, (which does make the Lovelace configs bigger and bloated with style mods etc unfortunately)
Secondly, and youāve read a bit about that in the above sequence of posts, I am further developing my multi language skillsā¦ Jinja, JS, Yaml, Html, and the multitude of combinations in the various custom-cards which nowadays are necessary for a great HA instance and accompanying Frontend.
Lastly, communicating on this great forum, asking And helping others! (still remember my first question to @RomRider about the option of templatingā¦ and his answer )
Not for the faint of heartā¦
Still, what else to do (now).
Carefully started my efforts in PRāing here and there, and proud to be listed here ā¦
Cheers!
1 Like
Iām having a problem with state_display.
I am trying to use state_display based on state:
- operator: template
value: >
[[[
return (entity.state === 'paused' ||
entity.state === 'idle');
]]]
state_display: >
[[[
return entity.state + ' (TV)';
]]]
icon: mdi:pause-circle-outline
But all I get returned is the state.
For testing this is the only state I have defined and I get the correct icon so I know it is going through this code.
What am doing wrong? It must be something obviousā¦
(Ignore the inconsistencies with wanting ā(TV)ā in the state when the media player is paused - this is just for testing )
As an aside (but this is probably unimportant for this specific query),
I have version 3.3.3 installed
but Chrome reports v3.3.2
Iāve tried uninstalling and reinstalling.
Iāve actually redone it all again since then as I found it slow to load. Unfortunately my backups donāt go back that far so I no longer have the complete yaml for it. It was essentially created with a vertical-stack-in-card with with 4 levels of horizontal-stack cards with 2 buttons per level. I think layout for lounge tile was:
- vertical-stack-in-card
- horizontal-stack
- light
- vertical-stack
- lux sensor
- fake button for spacing
-vertical-stack
- horizontal-stack
- motion sensor
- Light mode
- horizontal-stack
- door
- garage door
- horizontal-stack
- window 1
- window 2
Yes I have noticed the slow loading as well with lots of buttons.
Were they all button-cards?.
Yes, they were. My new one is still mostly button cards (only horseshoe & valetudo map arenāt) nested with hoizontal/vertical cards, but fewer of them. Now Iām using groups & labels to show which sensors & automations are on, and I have last changed for sensors showing on another view. Loads a lot faster.
Blockquote
Here is an example of my custom button with the same effect (just added the second field to show you how it looks)
Great, thank you.
is it also possible to show two different icons instead of the red circles?
Greetings Nic