I have an empty png file and want to change the background color based on the battery level of an entity. What should the condition look like to make it work? The way I tried it does not work.
I’m using dynamic background for my person card. I use for this custom-config-template card with variable that changes name of picture de[pending on conditions (in my case name of zone). Here is part of card code responsible for this:
- type: custom:config-template-card
variables:
# this is name of zone from iclud3 integration, it is later referred to as vars[0].
# It could be 'Home', 'Mirek work', etc
- states['sensor.mirek_icloud_iphone_zone_name'].attributes.zone_fname
entities:
- device_tracker.mirek_icloud_iphone
card:
type: picture-elements
# this is backgroud picture element name defined using zone name defined previously
# So this line will return '/local/Home.jpg' and such picture need to exist in www folder. Case sensitive!
image: ${'/local/' + vars[0] + '.jpg'}
elements:
So you can define several images with different colors and use them as background of picture element card. Tricky part probably would be to define additional template sensor, that would give this color name based on some battery level treshold, to be used as variable.
Placing a whole picture-elements inside config-template-card (CTC) is a very bad practice. Place a particular element (image overflowing the whole card) inside CTC instead.
Impossible, if background image is templated. Or element would need to be created, that covers entire area of the card, which might in return create issues with z-order of elements.
Otherwise I have several cards configured like that and have no problems whatsoever. What might be the implications of such setup?
As I already said - an element overflowing the whole card; ofc with a proper z-index (depends on you only).
Funny, I said clearly about an element and yet you say “impossible”.
Guess why this is not recommended by the author of CTC? Because changing of any of monitored entity will cause flickering of whole card.
But may be you have not declared ALL inner entities as monitored - then no wonder that you do not see a flickering; or these entities change rarely.
I had in mind very backgroung picture… responding too fast, thinking about alternatives later
Well, I do observe some redraws of entire card (if this is what you mean by flickering) once in a while, but indeed data displayed in overlay elements is changing not too frequently, so not a big issue. Perhaps’ i’ll do some test rewriting my card and check the difference…
Was the image element selected over a state-badge for a specific reason?
The following code would produce this and eliminate the sensor label overlay. I included code to change the background color to red if the sensor drops below 5%
I just rtied to rewrite the card following your suggestion, but it does not work. Image is just element of picture element card, not the card itself, so seems cannot be templated with CTC Or I’m doing it wrong:
This method though (templating other individual elements, like markdown) works fine (though does not makes sense, as markdown can take jinja templates directly).
wow, super cool. Thanks. Works great. I tried to also change the code to only have a colored circle without the badge and the “%” behind the number to make it look like the rest and turn the border red when battery percentage is low. I failed yet. What should it look like? Also, how can I change the circle size? It does not work with height and width.
Or I’m doing it wrong:
