I went through a while back and built icons for various elements within the UI I’m trying to build. For example, I created 100 .png images of an SD card, each with a number from 0 to 100. (I thought about trying to do it with text dynamically generated over a blank icon, but I was running into trouble getting it to align correctly between my computer, my iPad and my iPhone). The code I put in looks like this:
- entity: sensor.sd_card_full
state_image:
'0': /local/icons/sd00.png
'1': /local/icons/sd01.png
'2': /local/icons/sd02.png
'3': /local/icons/sd03.png
'4': /local/icons/sd04.png
…and so on for another 96 lines, up to 100.
Trouble is, I did this with some other elements as well–temperature sensors, battery sensors, etc. The end result is that while my UI is starting to come together, the code is now about 3,700 lines long, long enough to make the built-in editor too sluggish to use.
I’m pretty brand-new to Lovelace; is there a better way to do this sort of thing? Is there a way for me to tell it to take the value and incorporate it into the file path for the image? Am I better off just scrapping the images and using the built-in UI elements like gauges?
Thanks! (And apologies if this has been addressed before; I wasn’t quite sure what to search for…)