Dynamic icons based on percent


I’ve a setpint that manages when the heater should start and stop. That is working well.
Now I would like to map the Icon based on the min-max values.
The Sitemap contains:

Setpoint item=node30_sw1_setpoint label="Limiti [%.2f °C]" minValue=12 maxValue=26 step=0.5 icon="heating"

The item:

Number  node30_sw1_setpoint

I know the heating is changing from 0 to 100 by steps of 20. (heating-0, heating-20, …)

Actually it has always heating-0 or heating-20

How to change the icon based on the values that are allowed minValue=12 maxValue=26 ?

Thanks a lot!


You can create icons for heating-12 - heating-26 and it should work.


Well, that should work, I know, but isn’t there a better way?
I mean, if I have new min-max items I should recreate new icons every time.
Something that would create a percent based on min-max and that would be used to call the icon would be better.
I’ve tested this with no luck:

Looking on the icon image link I can see this:


It means it gets the right icon, BUT the “state=24&format=png” doesn’t allow the icon to be shown and it overrides the heating-80 transfoming it in heating-24 (->heating-20).

Maybe @sondi , the creator, has an Idea? The @rtvb suggestion is something I haven’t understood…

Thanks for any help!!


What exactly did you not understand?

Hi @rtvb, nice to meet you Robert.

In your example, the ‘Heating_WaterTemperaturePercent’ gets updated with the value in percent based on the item Heating_WaterTemperature as soon it receives an update. Until here ok.
In my example the node30_sw1_setpoint would be your Heating_WaterTemperature.
Well, my item is used as setpoint. How can I change the icon of my setpoint based on the Heating_WaterTemperaturePercent value? I’m missing the .sitemap part, maybe.
The value of my node30_sw1_setpoint is used then to check it against the temperature in the room to turn the heater on or off, so node30_sw1_setpoint should not alterated. I only need to know how associate the icon of node30_sw1_setpoint based on your rule, also based on the Heating_WaterTemperaturePercent.

Many thanks!


Hi @xefil,

because I am lately working with HABPanel my sitemaps are not up to date anymore, so it took me a while to test everything. You are totally right, that my old post isn’t working anymore in OH2. This is beacuse of the dynamically built svg icons.

After a little testing I’ve found an little “dirty” hack to get what you need/want :+1:

  1. I’ve called the heating-icons within the browser and saved them locally as svg-files. So the svg-files itself contain the correct state and colors. Just change the state-value in the URL (0,20,40,60,80,100) to get the different states.
    I’ve saved the icons as setpoint0.svg, setpoint20.svg, and so on

  2. Put these files in the icons/classic folder of you openHAB2 installation

  3. Create an additional Number Item for the icon (the other Item is your Setpoint)

Number	LivingroomSetpoint		"Livingroom [%.1f °C]"   {channel="homematic:HM-CC-RT-DN:ccu:MEQxxxxxxx:4#SET_TEMPERATURE" }
Number 	LivingroomIconSetpoint	"Icon Setpoint LivingRoom"
  1. Create a rule, that changes the state of your Icon-Item depending on the Setpoint Value
rule "ChangeLivingRoomSetpointIcon"
	Item LivingroomSetpoint received update
	if (LivingroomSetpoint.state >= 10 && LivingroomSetpoint.state <=12)  {postUpdate(LivingroomIconSetpoint, 0) }
	if (LivingroomSetpoint.state > 12 && LivingroomSetpoint.state <= 16)  {postUpdate(LivingroomIconSetpoint, 20) }
	if (LivingroomSetpoint.state > 16 && LivingroomSetpoint.state <= 22)  {postUpdate(LivingroomIconSetpoint, 40)  }
	if (LivingroomSetpoint.state > 22 && LivingroomSetpoint.state <= 25)  {postUpdate(LivingroomIconSetpoint, 60) }
	if (LivingroomSetpoint.state > 25 && LivingroomSetpoint.state < 35)   {postUpdate(LivingroomIconSetpoint, 80) }
    if (LivingroomSetpoint.state > 35 && LivingroomSetpoint.state < 50)   {postUpdate(LivingroomIconSetpoint, 100) }

5 Change the sitemap depending on the Icon-Item. Important is, that you use your new icons setpointx.svg and not the default openHAB Icon heating, because this is dynamically created depending on the item-state.

Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint0"   visibility=[LivingroomIconSetpoint==0]
Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint20"  visibility=[LivingroomIconSetpoint==20]
Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint40"  visibility=[LivingroomIconSetpoint==40]
Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint60"  visibility=[LivingroomIconSetpoint==60]
Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint80"  visibility=[LivingroomIconSetpoint==80]
Text item=LivingroomSetpoint label="Setpoint [%d °C]" icon="setpoint100" visibility=[LivingroomIconSetpoint==100]

Using the Setpoint item shows the correct value, while using you’re custom icons shows the correct depending icon

I hope this is what you wanted :slight_smile:


1 Like

Thanks @sondi but i got an error.
The rules are working (corrected some variables) but the icon doesn’t change, this because the “state” overrides the icon.
if I have the Icon (in your example ‘LivingroomIconSetpoint’) at 60% the icon url gets:


the state=23 overrides the icon setpoint-60 and forces it to set the setpoint-20 icon :frowning:

Ideas why?



Hey @xefil,

bad to hear it’s not working on your side. The difference I see, is that i’ve used svg instead of png. But that shouldn’t be the problem.

Maybe you can post your rule & item description here or send it to me directly, than I would take a look.

What openHAB Version are you running?


Hello @sondi
Of course here my setup on Openhab2 2.0.0~RC1-1

Number  node30_sw1_setpoint     "Bagno (limite termostato [%.2f °C]"   <setpoint>
Number  node30_sw1_setpointIcon "Icon Bagno"
rule "node30_sw1_setpointIcon"
                Item 	 received update

              if (node30_sw1_setpoint.state <= 12)  {postUpdate(node30_sw1_setpointIcon, 0) }
              if (node30_sw1_setpoint.state >= 15 && node30_sw1_setpoint.state < 18)  {postUpdate(node30_sw1_setpointIcon, 20) }
              if (node30_sw1_setpoint.state >= 18 && node30_sw1_setpoint.state < 21)  {postUpdate(node30_sw1_setpointIcon, 40) }
              if (node30_sw1_setpoint.state >= 21 && node30_sw1_setpoint.state < 24)  {postUpdate(node30_sw1_setpointIcon, 60) }
              if (node30_sw1_setpoint.state >= 24 && node30_sw1_setpoint.state < 26)  {postUpdate(node30_sw1_setpointIcon, 80) }
              if (node30_sw1_setpoint.state >= 26)  {postUpdate(node30_sw1_setpointIcon, 100) }

              logInfo("node30_sw1_setpointIcon", "node30_sw1_setpointIcon: " + node30_sw1_setpointIcon.state)
              postUpdate(node30_sw1_setpointIcon, node30_sw1_setpointIcon.state)
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-0"   visibility=[node30_sw1_setpointIcon==0]
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-20"  visibility=[node30_sw1_setpointIcon==20]
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-40"  visibility=[node30_sw1_setpointIcon==40]
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-60"  visibility=[node30_sw1_setpointIcon==60]
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-80"  visibility=[node30_sw1_setpointIcon==80]
Setpoint item=node30_sw1_setpoint label="Setpoint [%d °C]" icon="setpoint-100" visibility=[node30_sw1_setpointIcon==100]

The ‘node30_sw1_setpointIcon’ gets updated:

2017-02-07 17:17:42.434 [INFO ] [model.script.node30_sw1_setpointIcon] - node30_sw1_setpointIcon: 60

But it results in this image link:




Hi @xefil,

really strange, I’ve tested it here with one png file, and that also worked.
In the two screenshots below you can see how it looks like on my side.

The Link below shows you the icons I’ve used.

So you can see the links look the same like yours, but the correct image is used.

At the moment I’ve no idea why it’s not working on your side, maybe someone else has any idea or could test it???


Hello @sondi ,

Maybe the setting I’m using on the map that calls the icons in BITMAP (set-up in PaperUI -> Configuration -> Services -> UI -> Basic UI) ??

I’ll try with SVN instead.

…meanwhile… I’ve tried.
I’ve set the icons to SVG, but I cannot see the icons. In example, I’ve copied your icons here:

root@oh /etc/openhab2/icons/classic # pwd
root@oh /etc/openhab2/icons/classic # ls -al | grep setpoint
-rw-r--r-- 1 openhab openhab 1932 Feb  6 17:00 setpoint-0.png
-rw-r--r-- 1 openhab openhab 3470 Feb 13 15:37 setpoint-0.svg
-rw-r--r-- 1 openhab openhab 2226 Feb  6 17:01 setpoint-100.png
-rw-r--r-- 1 openhab openhab 3521 Feb 13 15:37 setpoint-100.svg
-rw-r--r-- 1 openhab openhab 2124 Feb  6 17:00 setpoint-20.png
-rw-r--r-- 1 openhab openhab 3450 Feb 13 15:37 setpoint-20.svg
-rw-r--r-- 1 openhab openhab 2234 Feb  6 17:01 setpoint-40.png
-rw-r--r-- 1 openhab openhab 3515 Feb 13 15:37 setpoint-40.svg
-rw-r--r-- 1 openhab openhab 1940 Feb  6 17:01 setpoint-60.png
-rw-r--r-- 1 openhab openhab 3023 Feb 13 15:38 setpoint-60.svg
-rw-r--r-- 1 openhab openhab 2308 Feb  6 17:01 setpoint-80.png
-rw-r--r-- 1 openhab openhab 3509 Feb 13 15:38 setpoint-80.svg
-rw-r--r-- 1 openhab openhab 1932 Feb  6 17:00 setpoint.png

Then, I’ve tried to open first this:


And I got the right image.




Problem accessing /icon/setpoint-40. Reason:

Not Found



Hi @xefil,

it worked here with my setup also with png. What I just saw is the difference in the filenames. Could you try to use names without ‘-’ like ‘setpoint40’ like I did. I think the minus could be a sort of indicator so the svg or png is created dynamically from openhab.


Hello @sondi ,
The “-” was the problem on the svg. Now I cannot test more, because I’m having strange issues. I’ve always edited the files manually. Now it seems the edit is not taken and it’s happened one time that my last changes were lost after a process restart. Is that possible?? :frowning:

Even editing a single string in the sitemap (/etc/openhab/configurations/sitemaps) and restarting the process, the modification is not taken :-/

Hey @xefil,

nice to hear that it seems to work. Not nice that you have such strange issues. Pressing my thumbs that you get that handled.


Hey, bring that man (@sondi) one beer!!
I’ve got it, it works!
What was the problem? Uhm… well, I was editing the openhab1 config files the last two hours!!! :’( :smiley:
Well it’s monday!!! :slight_smile:
Thanks a lot!


Thx for the beer :grin:
Glad to hear it’s working.


More to the subject!
I have a tank volume - max 1200 litre and want to how the content with an icon “humidity”. As the humidity icon varies from 0 to 100, I will see 100% from 100 litre to 1200 litre - this is not the purpose.
The suffix of the icon (humidity_0, humidity_10,…humidity_100) can be calulated as

suffix = (value/1200*10)*10

Can this be used to select the correct icon based on the value?

“New to openhab2”

Hey everyone and thanks for your efforts on this issue. But I think the solutions are all in fact only workarounds leading to really cluttered and messy configuration code.

For the specific issue, which I am also facing:
If I have somthing like Setpoint item=Thermostat_Temp_EG_WZ_Alle minValue=4 maxValue=30 step=0.5 label="Heizung [%.1f °C]" in my sitemap, would it not be the best to automatically map the current value to a percentage between minValue and maxValue in any case?

And in general:
I think there are many other cases where the state of the icon does not correspond to the actual item value. So maybe some general method of mapping the value to the item state would be useful, without having to define wrapper items and rules for it or even new icons. I guess that this is a rather big deal and maybe too complicated to be implemented at all…

I really would like to know that as well as the hell of a work from the above “rules version” isnt worth the effort (i got like 10 Valves…)…and i would really like to know the code for this…