what do you mean with “the release”? Is the entity-button the same card? I’m missing a lot of options in the LoveLace documentation so doubting this is the same?
need some help creating a javascript template please…
have these buttons with entities, scripts, all in the form of
script.office_on, script.office_off, script_office_state
and
script.network_library_on, script.network_library_off, script.network_library_state
I need to format the buttons based on sensors with the name of the object_id’s of the above scripts, without the final _on, _off, _state bit.
sensor.network_library_state and sensor.office_state
to make an operator template like below using entity_id, or maybe even object_id (not sure if thats available in javascript), but cant find the way to only cut-off the final _ bit. All I manage for now is split at any _ but then the object Id is not correct…
I cant use the slice method, because the names are not of the same length…
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_')[0];
return 'sensor.' + id + '_state' == 'on';
]]]
to summarize: I need the var id to be either network_library, or office in the above examples. preferably with the same template of course, so I can use the same button templates for all entities
Please have a look @RomRider ?
thanks!
to give you an idea of what I am trying to create, below my current Tiles setup I want to rebuild using the button-card:
which has this as config:
type: custom:tiles-card
card_settings:
columns: 3
row_height: 50px
text_color_on: '#555B65'
text_color_off: '#F0C209'
color_on: '#F0C209'
color_off: '#555B65'
entities:
#Force switches
- entity: script.audio_auditorium_on
label_sec:
value: 'Audio Audit'
templates:
style: >
if (entities['sensor.audio_auditorium_state'].state === 'on') return 'background-color: #F0C209;--tiles-icon-color: #555B65; --tiles-label-sec-color: #555B65';
return 'background-color: #555B65;--tiles-icon-color: #F0C209; --tiles-label-sec-color: #F0C209; text-decoration: line-through';
icon: >
if (entities['sensor.audio_auditorium_state'].state === 'on') return 'mdi:music';
return 'mdi:music-off';
- entity: script.audio_auditorium_off
label_sec:
value: 'Audio Audit'
templates:
style: >
if (entities['sensor.audio_auditorium_state'].state === 'on') return 'background-color: #555B65;--tiles-icon-color: #F0C209; --tiles-label-sec-color: #F0C209';
return 'background-color: #F0C209;--tiles-icon-color: #555B65; --tiles-label-sec-color: #555B65; text-decoration: line-through';
icon: >
if (entities['sensor.audio_auditorium_state'].state === 'on') return 'mdi:music';
return 'mdi:music-off';
- entity: script.audio_auditorium_state
label_sec:
value: 'Audio Audit State'
color: '#555B65'
background:
value: '#E5E5E5'
update
closest I got for now is like this, with 2 separate templates for _on and _off:
button_force_switch_on:
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: 'red'
- operator: default
color: 'grey'
button_force_switch_off:
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_off')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: 'red'
- operator: default
color: 'grey'
never mind the color and other settings, its all about the template for now …
At least I can use these for all of my entities now, without having to hard code all buttons induvidually.
Still looking to further compact this into 1 template. So: how to have a string cutoff the last section after a split(’_’), no matter how many _'s there are in the entity_id
var id = entity.entity_id.split('.')[1].split("_").slice(0,-1).join("_");
return 'sensor.' + id + '_state' == 'on';
edit: more compact
var id = entity.object_id.split("_").slice(0,-1).join("_");
return 'sensor.' + id + '_state' == 'on';
1 Like
thanks Petro!
had been fiddling with the slope and join, but hadn’t found the correct order yet. Your first template is (almost) correct! The second using the object_if fails, as I already experienced, these javascript templates won’t accept object_id:
edited the first to read (note the second line which missed states[ ] .state :
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
and the basic full button_template to be for now:
button_force_switch:
template: button_force_body
show_label: true
label: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state;
]]]
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: 'red'
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: 'grey'
- operator: default
color: 'black'
Again, this is just for starters, but at least move made my day! thanks for that.
@petro, please help me with 1 extra:
if I need to select only the last part after the last _, in this case either ‘on’ or ‘off’ what would be the js code? Note again that the entity_id can have either 2 or 3 _'s , like before, so it needs to be intelligent, and not hardcoded…
I’ve tried:
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').slice(-1)[0] == 'on') return 'red';
return 'grey'; ]]]
and
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').pop() == 'on' )return 'red';
return 'grey'; ]]]
but that doesn’t work, no error, simply no result. Or would that simply be:
[[[ if (entity.entity_id.split('.')[1].split('_')[-1] == 'on' ) return 'red'; return 'grey'; ]]]
I need that to reverse colors depending on the state and script…
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: >
[[[ if (entity.entity_id.split('.')[1].split('_')[-1] == 'on') return 'red';
return 'grey'; ]]]
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: >
[[[ if (entity.entity_id.split('.')[1].split('_')[-1] == 'off') return 'red';
return 'grey';]]]
this doesn’t work though…
var state = entity.entity_id.split('.')[1].split('_').splice(-1,1)[0];
hmm, not really sure what you want me to do with this…?
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').splice(-1,1)[0] == 'off') return 'red';
return 'grey';]]]
yields no result. Maybe the syntax for the color setting isn’t correct in itself, it returns neither red nor grey color…
Should be working, works on my end.
could it be the fact that I use that template within the operator template…? so first select the correct state operator for the button, and then, based on the template, select the color.
If I simply set a color directly, it works fine.
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: red
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: >
[[[ if (entity.entity_id.split('.')[1].split('_')[-1] == 'off') return 'red';
return 'grey'; ]]]
above works if the state of the entity_id = ‘on’, color is set to red. But when the state is ‘off’, it should select the second template, with the templated color. and that simply renders a white color, not red, nor grey, as the template tells it to do…
ive also tried both of your variants for the template, same result. Which makes me wonder if this is a syntax issue for the button config
remember this template is to select the last text of the script entity_id, and not its state… script.audio_auditorium_on, script.audio_auditorium_off
If you want to install button-card manually you can use HACS or you can go to the github repositories release page: https://github.com/custom-cards/button-card/releases. Nothing to do with the core entity-button.
A single toggle button? No, not without making a custom card that wraps the core ha-switch or something. You could have a toggle button row, however
Uh, your color template is wrong. -1’s don’t work in JS inside getitems.
you need to use
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').splice(-1,1)[0] == 'off') return 'red';
return 'grey';]]]
just so you can see…
yes, thanks, I see indeed.
Still, it doesn’t make the color change to either red or grey…
could you please check if that happens on your side?
did you try the correct template, not the one you posted?
yess:
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: 'red'
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').splice(-1,1)[0] == 'off') return 'red';
return 'grey'; ]]]
- operator: default
color: 'yellow'
Toggle button row? Not sure what card you’d be referring too.
This is what I have now:
This is roughly what I was hoping to accomplish:
ui-lovelace.yaml:
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
template: main-view
entity: switch.livingroom_lamp_left
size: 24px
name: Left
- type: custom:button-card
template: main-view
entity: switch.livingroom_lamp_right
icon: 'mdi:lamp'
name: Right
template:
main-view:
size: 24px
layout: icon_name
styles:
card:
- border-radius: 15px
- border: solid 2px rgba(236, 239, 244, .1)
name:
- font-size: 14px
tap_action:
action: toggle
state:
- value: 'on'
styles:
card:
- border: solid 2px var(--accent-color)
1 Like
Just the core row in the entities card
custom:hui-toggle-entity-row if using inside the button-card
another challenge…
have these buttons, 12x2, so a lot of icon templates:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return 'mdi:music';
return 'mdi:music-off';
]]]
How can I write the icon template in my button-template, so that I only have to write the on and off icon in the actual button config:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
on-icon: 'mdi:music'
off-icon: 'mdi:music-off'
tried something like:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return 'id: on-icon';
return 'id: off-icon';
]]]
Would hope the id: on-icon and id: off-icon could be used, but don’t see how to do that in the template.
thanks for having a look?
That’s not possible, but I can add support for variables. Please create a feature request.
It would help also with templating and defining default properties that you could override.
I’m thinking about doing something like:
variables:
var1: value1
var2: value2
# Below would return 'value1 value2'
any_field_with_template: >
[[[ return `${variables.var1} ${variables.var2}` ]]]
ha, thanks for considering! SO cool.
would that work like this then?
button_force_switch_on:
template: button_force_body
show_label: true
label: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state;
]]]
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'on';
]]]
styles:
card:
- color: '#555B65'
- background: '#F0C209'
icon:
- color: '#555B65'
icon: variables.on-icon
- operator: default
styles:
card:
- color: '#F0C209'
- background: '#555B65'
icon:
- color: '#F0C209'
icon: variables.off-icon
and the button config itself:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
variables:
on-icon: 'mdi:music'
off-icon: 'mdi:music-off'
? if that would be possible… yes please!
sure beats what I must do now, which is repeating the state operators for all button configs:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'on';
]]]
id: on-icon
icon: 'mdi:music'
- operator: default
id: off-icon
icon: 'mdi:music-off'
instead of setting the icon in the state section, it could also be done in the global button section:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return `${variables.on-icon}`;
return`${variables.off-icon}`;
]]]
or even more compressed 
:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
var icon = 'variables.' + states['sensor.' + id + '_state'].state + '-icon';
return `${icon}`;
]]]
could I link to this post for the feature request? I just did https://github.com/custom-cards/button-card/issues/245
btw, could I ask you to have a look here Lovelace: Button card and check why the template for color won’t do anything, while the color name works as expected?
thanks a bunch!
Thank you. This would be used as a card on it’s own correct?