Custom Dynamic Icons for Number Items when mapped

I’ve been struggling with having custom dynamic icons for number items that i map their corresponding values, apparently the name of the icons has to be changed to the mapped value:

example.map
0=Normal
1=Alarm
-=Unknown
NULL=Unknown

//Not working
icon names:
icon.svg
icon-0.svg
icon-1.svg

//Not Working:
icon names:
icon.svg
icon-Alarm.svg
icon-Normal.svg

//Working:*
icon names:
icon.svg
icon-alarm.svg
icon-normal.svg

i had to change the mapping values to small letter:
0=normal
1=alarm
-=unknown
NULL=unknown

is this a bug ?

There was mention on a thread that the icons right now must be all lowercase. I’m not sure if that is a bug or by design though.

i don’t mind icon names lowecase, it just won’t change in the UI if the mapped value is in Upper case:

state = Alarm, icon name = icon-alarm.svg (or png) won’t work

if state = alarm it will work

What isn’t clear to me is whether you are applying the MAP on the label or the state of the Item. In OH 1.x at least, the icon was based on the state of the Item itself. So in a situation like this I would leave my Item as a Number, name the icons with icon1.svg etc., and use the MAP in the label:

"Alarm state [MAP(alarm.map)]"

This would let me have a nice human readable label but drive the automation and icons with the number.

So, either this isn’t how you are doing it or something has changed in OH 2.

i am applying it on the label, which confused me more, because naming the icons icon-0, icon-1 icon-2 (in addition to default icon) didn’t work for me…

here is my item definition

Number		local_pir				"Motion Sensor [MAP(pir.map):%s]"		<presence>			(gSecurity,pir,gIniClosed)		{mqtt="<[broker:/meshx86/ndw/pir_dht/out/0/3/1/0/16:state:default"}

That is odd behavior. I’m afraid I’ve no recommendations. Does if work the same in BasicUI and ClassicUI?

Ah ! i wasn’t paying attention on the classic UI, no with the current config it is working on HABDroid and Basic UI, bot not the classic UI

Hello all. I’m also seeing issues with the way dynamic icons behave, but with less luck than mohsh86. The icon is not set to the state of the item when the state changes until I refresh the web page. When I do, the expected icon is displayed.

When I use the Android app, the icon never changes. Admittedly, there is no equivalent to a page-refresh there.

1 Like

this sometimes happen to me, and it isn’t only the icons, it is the whole / some portionso f the basic UI interface, i value is changed and it does not reflect on the interface.

when you experience this issue, try changing an item number or state (that has nothing to do with icons) and see if it updates

I have been trying to get this to work also. It is more complex than it seems.

This is what I have found. @mohsh86 is correct. The icons map to the transformed value, not the underlying state of the item. I am transforming the label of my item, so that OPEN/CLOSED becomes OnLine/OfflLine. I have to create a network icon called network-online.png and one called network-offline.png. Using the iOS app, I have found that this only uses png icons, not svg icons. These icons go in /conf/icons/classic.

However, I have found that you also need to create an icon called network.png (a copy of the one built in to the OH2 icon set) or this still will not work. I did not find that case was an issue (other than the icon names all need to be lower case) - the transform can be upper case and it works.

In addition, I found that group icons use the underlying state of the icons in the group (not the transformed values), so the group icon is using OPEN/CLOSED, so for the group icon to change state I also need to create icons network-open.png and network-closed.png.

Also, I expect that the iOS interface will switch to svg icons at some point, so I also have to create the same icons in svg format.

So, for my network state icons to change state, using Contacts, not Switches, I have to create (in conf/icons/classic):
network.png
network.svg
network-online.png
network-online.svg
network-offline.png
network-offline.svg
network-open.png
network-open.svg
network-closed.png
network-closed.svg

This still gives inconsistent results between the different UI’s - basic, classic and iOS all display something slightly different. I believe that this is because you have to restart the runtime to clear out cached icons (which is why this is so hard to troubleshoot). I also have some network icons which are ON/OFF icons. These worked, but the group icons did not! I finally had to copy the network-on.png and network-off.png (and svg) icons to conf/icons/classic to get the whole thing to work.

So add to the above list:
network-on.png
network-off.svg
network-off.png
network-off.svg

restart the runtime, clear the cache on the ios app, and finally my network icons reflect the state correctly in basic and iOS UI’s the group icons still do not work in classic UI - but that I can live with.

It would seem that the only way to get this working is to copy the entire icon set to conf/icons/classic, then add icons to reflect both the underlying and transformed state for icons that do not have a state that you want (both png and svg versions).

I’m not sure that this is what was intended though.

For completeness, here are my items, transforms etc:

/* Lighting Controllers */
Switch back_garden_network  "LED wifi [MAP(network.map):%s]" <network>   (gLightControllers) { nh="192.168.100.158" }
Switch back_garden_network_master  "LED Master wifi [MAP(network.map):%s]" <network>   (gLightControllers) { nh="192.168.100.159" }
Switch back_garden_network_slave  "LED Slave wifi [MAP(network.map):%s]" <network>   (gLightControllers) { nh="192.168.100.164" }

/* Cameras */
Switch back_garden_camera  "Back Garden Camera [MAP(network.map):%s]" <network>   (gCameras) { nh="192.168.100.140" }
Switch side_garden_camera  "Side Garden Camera [MAP(network.map):%s]" <network>   (gCameras) { nh="192.168.100.130" }
Switch porch_camera  "Porch Camera [MAP(network.map):%s]" <network>   (gCameras) { nh="192.168.100.120" }
Switch hallway_camera  "Hallway Camera [MAP(network.map):%s]" <network>   (gCameras) { nh="192.168.100.110" }

/* fake Bluetooth switch */
Contact Nick_Bluetooth_Test "Nicks Bluetooth [%s]" <network> (gPeople) {mqtt="<[proliant:bluetooth/Nick_Bluetooth:state:default"]}
Contact Nick_Bluetooth "Nicks Bluetooth [MAP(contact_network.map):%s]" <network> (gPeople) {mqtt="<[proliant:bluetooth/Nick_Bluetooth:state:default"]}
Contact Jill_Bluetooth "Jills Bluetooth [MAP(contact_network.map):%s]" <network> (gPeople) {mqtt="<[proliant:bluetooth/Jill_Bluetooth:state:default"]}
Contact Francesca_Bluetooth "Francesca Bluetooth [MAP(contact_network.map):%s]" <network> (gPeople) {mqtt="<[proliant:bluetooth/Francesca_Bluetooth:state:default"]}
Contact Chris_Bluetooth "Chris Bluetooth [MAP(contact_network.map):%s]" <network> (gPeople) {mqtt="<[proliant:bluetooth/Chris_Bluetooth:state:default"]}

/* TVs */
Switch TVON "Family Room TV [MAP(network.map):%s]" <network> (GF_Family) { nh="192.168.100.116"}
Switch GC100Network "GC100 IR Interface [MAP(network.map):%s]" <network> (GF_Family) { nh="192.168.100.124"}

/* WD My Cloud */
Switch WD_My_Cloud_reboot "WD My Cloud Reboot" <reboot> (gB) //fake switch to reset WD My cloud server
Switch WD_My_Cloud "WD My Cloud Power [%s]" <shutdown> (gB) { wol="192.168.100.255#00-90-A9-F2-ED-27", exec=">[OFF:sudo sshpass -p waterrat ssh sshd@192.168.100.137 /usr/sbin/shutdown.sh]"}
Switch WD_My_Cloud_Status  "WD My Cloud [MAP(network.map):%s]" <network>   (gB) { nh="192.168.100.137" }

network.map:
OFF=OffLine
ON=OnLine
-=Unknown
NULL=Unknown
contact_network.map:
CLOSED=OnLine
OPEN=OffLine
-=Unknown
NULL=Unknown


There may still be more to this, as my group icons still behave oddly sometimes, but this is some progress.

Also, just FYI, Sitemap mappings work the same way, ie on the transformed value, not the underlying value. this is also different from OH1.

1 Like

I will be sure to add this difference to the Migration document.

I’d suggest filing an Issue with the inconsistent behavior with the Group icons. They should work the same for Groups and Items (i.e. either both should use the original state or both should use the transformed state).

You can set the icon types to only use png for through PaperUI by setting the BasicUI and ClassicUI to use Bitmap icons. By default they use svg. I do not know whether there are plans to move the phone apps to using svg icons or not.

as for struggling with svg / png, i usually drop off the svg files to the icons/classic folder then use rsvg-convert to convert every svg to png through a script.

@Nicholas_Waterton if you’re kind enough and created an issue on this, can you please link it to this post ?

cheers