MainUI under OH3.4 was able to show the correct dynamic icon when the item’s state has a value between to “state-icons”. For example when the rollershutter item state is 85(%), MainUI was showing up oh-rullershutter-80 icon.
However, that “magic” disappeared with OH4. Or is there anything I need to reconfigure?
I don’t think the UI has changed in this regard. I suspect this has to do with the new UoM. Your % values are probably being registered by the UI as decimals and so are all less than one.
When the rollershutters have states like 40, 60, 80 etc it is working as it should. It is just the values inbetween which cause the UI not to show up an icon.
Interesting enough, when looking at the items it is working as expected:
OK, that is odd. I know there were some updates to the icon server, maybe this is a regression in that part of the core and not the UI. What version of 4 are you now on?
v4.0.2.
This is a minor/unimportant problem. Don’t spend too much time on this.
Use the browser tools to inspect one of the icons that isn’t working. The html for the icon should look something like this:
<img onload="this.classList.remove('no-icon')" onerror="this.classList.add('no-icon')" src="/icon/rollershutter?format=svg&anyFormat=true&state=63&iconset=classic" class="" style="width: 32px; height: 32px;">
In the src attribute, check to make sure that the state is properly appended to the url (state=63 in the example above). That should tell us whether the state isn’t being properly sent or the icon server is not working.
Hi Justin,
this is the resulting code:
<img onload="this.classList.remove('no-icon')"
onerror="this.classList.add('no-icon')"
color=""
icon="oh:rollershutter-85"
src="/icon/rollershutter-85?format=svg&anyFormat=true&iconset=classic"
class="no-icon"
style="width: var(--my-icon-size); height: auto; -webkit-user-drag: none;
user-select: none; font-size: var(--my-icon-size); vertical-align: middle;">
Indeed, state=85 is not provided as I provided the state with the icon name like this:
icon: =(props.vIcon + '-' + @@props.vItem)
Obviously this workaround does not work anymore with v4. Do you know the correct syntax for providing the state for dynamic icons?
Ah yes, the ability to do that has specifically been removed. It is now only possible to get dynamic icons by using the state parameter:
You’ll have to modify your widget to use one of the components that has the ‘iconUseState’ or equivalent property.
That was not nice 
I have created all my widgets based on oh-button. Is there any chance to provide the state myself instead of rewriting all my widgets to oh-label-card/cell?
At that point, you probably have to move the icons from the button config to an oh-icon in the default slot. That will mess up the order of elements in the button, however, so you may also have to move the text to a label in the slot as well.
I already have the following structure and added iconUseState
component: oh-button
config:
...
actionItem: props.vItem
iconUseState: true
slots:
default:
- component: table
config:
slots:
default:
- component: tr
slots:
default:
- component: td
config:
slots:
default:
- component: oh-icon
config:
iconUseState: true (once more, just to be safe)
icon: props.vStateOff
but unfortunately not working. Or did I misunderstand your advice?
The oh-icon is different because 1) the oh-icon doesn’t already have an item associated with it, and 2) sometimes you need more fine-grained control over the state to send whatever state you want not just link it to an item.
Instead of iconUseState it just uses a state property where you pass the state you want to use:
- component: oh-icon
config:
icon: =props.vStateOff
state: =@@someItem
1 Like
You are truly a star! That worked.
No clue why you can know something like this