What's wrong with my icons on iOS?

Developer Programs Writing Device Types
1

Hi there,

I updated recently a DTH I made with some icons I store on my GitHub so that people using my DTH can enjoy them.
I just noted a ugly difference between iOS and Android: on Android my icons are well displayed inside a colored background based on value or a grey background for some. Nothing fancy here.

On iOS:

  1. Only the grey background shows up so it seems the “backgrounds” is not handled properly, only the “background” (without ‘s’) is working
  2. My personal icons are huge and the label is displayed across the icons while I can see ST icons (standard ones like st.Weather.weather12) are having the right size.

My icons are png files of 110x110px, just like some st.xxx icons I could find via the xml posted on this forum a while ago.

A typical tile code I have is like (the red VOC icon):

standardTile("tvoclevel", "device.tvoclevel", width: 2, height: 2, decoration: "flat",canChangeIcon: false) {

    state "default", label: '${currentValue}',  icon: "https://raw.githubusercontent.com/philippeportesppo/AirMentorPro2_SmartThings/new_icons/images/TVOC-Icon.png", backgroundColors:[
    [value: -1, color: "#1e9cbb"],
    [value: 0, color: "#1d9114"],
    [value: 340, color: "#f7f709"],
    [value: 530, color: "#f7a709"],
    [value: 800, color: "#f70909"],
    [value: 1600, color: "#5100a3"]]
 }

the grey big thermometer with the 3 drops with a grey background:

 standardTile("dewpointlevel", "device.dewpointlevel",  width: 2, height: 2, decoration: "flat",canChangeIcon: false) {

            state "default", label: '${currentValue}º',unit:'${currentValue}',icon: "https://raw.githubusercontent.com/philippeportesppo/AirMentorPro2_SmartThings/new_icons/images/dewpoint.png", backgroundColor:"#e5e9ea"}

Here is the result for Android and the ugly one for iOS. Apps are latest versions.

1600×2560 331 KB
899×1600 85.3 KB

Any idea what I am doing wrong?

Thanks!

2

Found a workaround by finding that on IOS, the icons are displayed entirely and the label is overwritten on it while on Android the label is displayed under the icon.
So basically the workaround is to have an image canvas of 214x214 having the icon bottom (yellow frame) at 100px from the canvas bottom.

icons
icons.png1428×856 22.2 KB

Regarding the black color to use for icons, I found on Updated: Device Name instead of an Icon, here's how I did it
The key is really to save the png with 30% opacity (if you use GIMP, that’s the opacity setting of the visible layer):
image.