No need, I was wrong as @iantrich pointed out. Though I still wonder if a spinning icon would be possible to template
Feature requests on github is the way to go so that I can track that down. I’ll take some time to deliver them in the future but I have so much work right now it’s just not possible. I’m almost never at home and traveling all the time for work. Right now I’m in Austin, TX for example
Don’t worry, no hurries. I will open another feature request for it. Take your time, you have already put in so much time for us. I can hardly complain!
Thanks again @RomRider
Guess this is what it’s all about, and I agree with your remarks on frontend vs backend. Still, although using js templates in customize is fast and trouble free as one could wish, using js in custom Lovelace cards can bog the system significantly. Can’t explain it, it simply does.
I wonder if you can explain what you say here: ‘what is taking time is all the JS around’
(must stress that on my new RPi4, this is much less obvious, and my Hue config stays online much of the time, which is something to hurray about. Before, even reloading Lovelace would make the Hue lights of unavailable signaling capacity issues on the system)
Using the states of backend jinja template sensor can relieve that, let alone make the configs of these Lovelace cards much simpler, which is a feat on its own.
Now this sounds like music to my ears. Though I am far from capable to create a PR as such, I would gladly offer my time and assistance in testing and aiding such a development.
Since it apparently is feasible, looking at ThomasLovens cards, why wouldn’t it be for the other cards I wonder.
This might depend on the technique used though. Using Customizing entities - Home Assistant isn’t the same as using the custom-ui js templates, which would be done in the frontend, or as people sometimes say, on the fly, in browser. Which is rather fast with modern day devices.
And, of course, its is not only icons we can customize…
All in all, your mileage may vary
might I ask you to hop over here, and see if you can help me out with some niftier nested JS templates then Ive been able to come up with…
apreciated if you would
Can someone tell me why this configuration template is not working?
ciabatte_1:
entity: '[[entity]]'
icon: >
[[[
if (entity.state === 'on')
return "mdi:power-socket-eu";
else
return "mdi:power-socket-eu";
]]]
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: '[[entity_id]]'
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (entity.state === 'on')
return "red";
else
return "green";
]]]
It gives me error about data [entity_id]…
well, we cant cause we dont know what you’re feeding it…or what the template config looks like
btw, you’ve got [[entity]] and [[entity_id]] in this config, are they pointing to the same entity_id?
also your template for the icon seems unnecessary since in all cases you want the same icon ? no need for a template then
You should share the decluttering-card that you use with this that gives this error. A logical thing to me would be that you have set the entity in your variables, but not set the entity_id. If you want them to be the same you won’t need a service-call. A tap_action toggle would do exactly that.
Edit: and @Mariusthvdb is correct, you seem to use the exact same icon in both the ‘on’ state and any other state. Again if you want them to be the same just put the icon instead of a template. So icon: mdi:power-socket-eu
.
Ok, about the icon you’re right, it’s my fault.
About the decluttering-card (if with this you mean the original card without configuration template), it’s this:
- type: custom:button-card
name: Ciabatta 1
entity: switch.ciabatta1
icon: mdi:power-socket-eu
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.ciabatta1
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (states['switch.ciabatta1'].state == 'on')
return "red";
else
return "green";
]]]
The entity and the entity_id point to the same entity, but i think the entity: switch.ciabatta1
is not so necessary as the entity_id: switch.ciabatta1
in the toggle action.
Ok thanks, but the icon it’s not a problem, my problem is about the template not working as i coded it…
your code is using the format using a decluttering-template with variables in [].
see GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace configuration with the help of this card for documentation on that card.
You should post that decluttering template for us to be able to check why it doesn’t work (what does that actually mean, do you get errors, do you get a button at all etc etc)
if you don’t have a decluttering template, the code unposted will never work, and you should write a full button card config first to see what you want.
since you’re new to HA, you better start getting a more fundamental understanding of the inner workings, before using something as complex, and simply copying other configs, or parts of it. It wont work like that
Hmmm… i don’t have a decluttering template and the full button card config is what i posted in my last message. Or am i wrong? I have others configuration templates without the [[ ]] variables, so i tried to learn putting those variables but at the actual state i am wrong.
Is it possible to have a config template for that button-card without the [[ ]] variables?
yes, read the docs at: button-card/README.md at master · custom-cards/button-card · GitHub
and then try:
- type: custom:button-card
name: Ciabatta 1
entity: switch.ciabatta1
icon: mdi:power-socket-eu
tap_action:
action: toggle
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (entity.state == 'on') return "red";
return "green";
]]]
Maybe i am not so clear, but i already coded some configuration templates and all are working as i expected.
Now i am having troubles as never did a config template with a toggle action and with an entity_id inside it. I have many button-card like that i posted, so i was thinking to create a config template to use with those card to avoid to repeat every code inside every card like i did with other card but without toggle actions… Hope to be more clear now about what i would like to have…
you don’t need that if using a switch and toggling that. See my post above. In fact, you dont even need to define the tap-action since toggle is default for entities in these domains
Ok, so for every similar card i must put the same in every card? Is there a way/option to create something inside button_card_templates
to avoid to repeat the same in every card?
For example i have this template:
mio_header:
color_type: label-card
color: rgb(44, 109, 214)
styles:
name:
- font-size: 14px
- font-weight: bold
- font-family: 'Times New Roman'
- color: white
And i use this for every similar card:
- type: "custom:button-card"
template: mio_header
name: Salotto Yeelight
Is it possible with that card?
if you want something like this:
- type: custom:button-card
template: switch_regular
entity: switch.sw_tv_auditorium_template
name: Tv Aud.
you define a button-template (named ‘switch-regular’ here) like this:
switch_regular:
label: >
[[[
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
]]]
template: button_body_alt
which uses yet another template button_body_alt
button_body_alt:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
lock:
- color: red
card:
- border-radius: 6px
- padding-left: 5px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
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
state:
- value: 'on'
styles:
card:
# - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
# - box-shadow: 0px 0px 2px 1px rgb(85, 91, 101)
# - box-shadow: 0px 0px 2px 1px var(--paper-item-icon-active-color)
- background-color: '#F0C209'
name:
- color: '#555B65'
state:
- color: gray
label:
- color: red
icon:
- color: '#555B65'
id: on-icon
- value: 'off'
styles:
card:
- color: '#F0C209'
- background-color: '#555B65'
# - box-shadow: 0px 0px 2px 1px
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: '#F0C209'
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.6
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
you then can reference this method on all switches you like to have that config for.
Yes, ok that’s what i wanted since the beginning of our conversation… Now i’ll study your config and make for my needed… thanks again for your support!
Can you explain me what the switch_regular template does? It shows the label of the card, but cannot understand how the var works here…