How to fill background of image depending on level or percentage

Hello…I am trying that the background of an image change (filling) depending on the metric value (level or percentage for instance). i.e an thermometer that filled when the temperature is inceasing, or a tank that show his filling.
I tried with SVG plugin, but until i cant achieve it.

Anyone has a hint that can help me ??


Hello. Give a look at this: I used in the past

One more option two analyze (both are really good)

Thanks @mzazm and @gretamosa . I had used flowcharting, but not to this purpose, and I tried SVg panel, making an image with Inkscape and copy it in the plugin…but in both panels (Flowcharting and SVG), i dont know how to achieve that image change…i have to use different images whit differents levels overlapping each other ??..If you can give a hint, or show me an example, i will be very grateful

Ok, now I understand better your use-case. Have you tried disable_sanitize_html parameter, and code some javascript code for changing SVG images according with certain custom situations?

No, I havent…I will try that…but where do i put the javascript code ???, In the Events section of the svg plugin ( onHandleMetric and/or onInit)??.. Thanks

Sorry I forgot it! In a simple text panel with HTML.

For the SVG panel plugin this is an useful video I found online when I wanted to do some coloring of the svg elements. I believe you can change a property of the svg according to the result of the query thus changing the size of the colored area, but I am not an expert.

I have to say that there have not been many commits lately. So if I were you I would spend my time on FlowCharting as gretamosa is suggesting.

thank you very much mzazm.

I am a little confused…I could do what i want, using just text panel?? is not necessary to use flowcharting or svg panels??