!include needs the path to the file in your config folder, it has nothing to do with files downloaded by your browser which means that /local/... means the real /local folder on your server for !include
Eg: if your file is in /config/templates/file.yaml (with /config being your HA config directory), your include needs to be: !include templates/file.yaml
Thanks Bro, Iâll try as soon as I get home tonight, I appreciate your help!
Thank you for the tip. It worked after I corrected the path.
button_card_templates: !include www/custom-lovelace/button_card_templates.yaml
Im not sure where to place that.
- type: horizontal-stack
cards:
- type: "custom:button-card"
name: Family Location
icon: mdi:account-group
size: 30%
card_type: card
color: rgb(138,43,226)
tap_action:
action: navigate
navigation_path: /lovelace/17
layout: icon_name
styles:
card:
- height: 165%
background-color: rgba(255,0,0,0.0)In here:
styles:
card:
- height: 165%
- background-color: 'rgba(0,0,0,0.0)'
- box-shadow: 'rgba(0,0,0,0.0)'perfect Thanks! However it didnât like the quotes so I had to remove them. I appreciate your help
The quotes where fine, itâs because you are/where missing hypens. Each CSS entry needs to be prepended with a hypen as itâs an array.
Hey @jimz011 , have you also had any problems with the style of your entities since one of the updates to 1.10.x?
I use the same anchor code as you to set the style of my buttons, depending on the state of the entity.
Previously, for unavailable entities, the icon was hidden and they were âgrayed outâ. But since one of the updates only the icon is hidden and the background has the same color as the one of activated buttons.
Also the reachable, but not activated entities should be greyed out a bit. But since one of the updates they also have the background of activated buttons.
This is what it has looked like so far:
And thatâs how it looks now:
Have I unfortunately missed any change I need to make in the code for the style anchor?
I use this code for the style anchor:
light_button_state: &lightbuttonstate
state:
- value: "on"
styles:
name:
- color: black
state:
- color: gray
- value: "off"
style:
- opacity: 0.4
styles:
icon:
- color: gray
name:
- color: gray
state:
- color: gray
- value: "unavailable"
style:
- opacity: 0.2
- color: black
- --paper-item-icon-color: black
And this for the button:
- type: custom:button-card
entity: light.stehlampe_flur
name: Stehlampe
icon: "mdi:floor-lamp"
label_template: >
var bri = Math.round(states['light.stehlampe_flur'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
color: auto
size: 30%
<<: *lightbuttonstyle
<<: *showboth
<<: *lightbuttonstate
<<: *lightbuttonactions
Thanks in advance to all of you and especially to @RomRider for the great work!
Please read the changelogs and the breaking changes of releases here.
Especially style was deprecated and I had to change some CSS.
Thank you very much! That helped 
for several of my buttons, I changed the label template from reading a sensor in the backend, to calculating this in the frontend, (the number of lights being on)
label_template: >
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
if (count === entities.length) return 'All ' + entities.length + ' Hallway lights on';
if (count === 0) return 'No Hallway lights on';
return 'Hallway lights on: ' + count + ' of ' + entities.length;
I have several other buttons doing other live calucalations, instead of reading the state of existing sensors/entities.
It seems to me, (and to my vents) that this is rather processor intense, and takes a lot of the system. Being the HA or my devices, I am not sure. fact is I am experiencing more and more time outs on the full system, and my Hue lights are beyond stability. So much even, that with restarts, they will often not show up at all.
Ive had this unfortunate experience before with the card set to auto (for the light color). Since this also calculates the temp, the took a lot of the system, and resulted in the same lag and unresponsiveness. Changing to auto-no-temperature solved that. Which was immediate proof of the systems burden under that setting.
Id like to be advised about this matter, and hear why this is happeningâŚAnd, if some dedicated setting could prevent it, improve on it, or other tis you might have.
Thanks!
Interesting results. Out of curiosity, what sort of hardware are you using for HA? RPi? VM?
Again, everything in the button-card is calculated by your browser. Nothing (!!) happens on the HA instance.
However, the lag that you might feel probably comes from the fact that you use *_template everywhere (too much?). In that case, when a button uses a *_template, I donât have any other solution but to recalculate the entire button every time any entity from your whole HA instance is modified (because I donât know what you are using in the *_template). So for you, the browser is probably recalculating the entire display every half second.
This has nothing to do with anything related to LL
nothing special, a RPi 3B and Hassio.
that simply isnât true. But it is not only the button card causing it, it happens with the mini-graph card, and another custom card also. Lovelace itself apparently takes a lot of effort of the instance. Reported about that before and elsewhere.
its not that I feel it, it is the system hanging, hue lights showing unavailable (which is an indicator for internal issues) and many many timing warnings in the log.
I understand, and this is probably the culprit indeed. Which of course is an enormous issue⌠If the system has to recalculate the entire page constantly for only 1 template, and we are all showing the lights brightness eg on lights buttons etc etc, then where would this lead us?
Iâve asked/wondered before: before Lovelace, using regular HA, we were accused of overloading the frontend with niceties when using custom-ui. Now, with Lovelace, where all frontend niceties rely on (custom) cards this is built-in the system. Lovelace is only front-end as you said, and of course it is. But if the system canât handle that properly, what can we doâŚ
The button card doesnât do anything with HA. However the mini-graph-card calls the history API to retrieve the data (that is I/O heavy especially on a raspberry pi). So I can assure you that button-card doesnât introduce any load on your instance.
The browser (not HA) recalculates only the buttons with *_template not everything, but if all your buttons have a template, unfortunately I canât do anything (unless introducing a new parameter in wich youâll have to declare entities that will trigger a button update)
Hi all
I would like to reproduce this card, that actually uses mini-graph-card, with the button-card.
My goal is to have the same information, but to change the background color based on the temperature values.
Do you thing this is possible?
Thanks
Use card-modder to change the background color, config-template-card to do it based on the temperature. Youâll not be able to achieve the same thing with button-card.
You might be able to replicate this using multiple button cards within a vertical stack in card but it will take quite a bit of trial and error.
Something new that crossed my path today - all my Zwave devices entered into a ânot availableâ state and every button-card tied to a Zwave entity simply stopped working. No visual indication that something was amiss appeared aside from the buttons simply not responding. Other Lovelace cards, for example slider-entity-row, actually showed an âEntity not availableâ error.
Is this something I simply need to configure with my buttons or does this functionality not yet exist?
I have set my buttons so that whenever it becomes unavailable the opacity will be high. You can do this in the states config of the button.
It will look something like:
state:
- value: "unavailable"
styles:
card:
- opacity: 0.2
- color: black
- --paper-item-icon-color: black