OH4 Dynamic Icons

Setup, Configuration and Use Migration
, , , ,
1

Hello everyone,

I know how important it is to be clear when asking questions in the forum, so I’ll try to be the most precise I can. Excuse me in advance if I omit anything or if sometimes my explanations are not super clear, as english is not my native tongue.

This morning, I updated Openhabian in my RPi 4 from OH3 to OH4. Then, I install the JS scripting add on to recover my notifications and debounce features.

Now almost everything seems to work in correct order.
Except the dynamic icon that I expect to show the item state (as it used to do in OH3). I have only 3 of them : 2 for garage doors and 1 for a light.

Let’s focus on that last one : in the Overview page of the Main UI, the bulb icon used to be white when the light is off and yellow when the light is on. But, since I upgraded to OH4, it stays white whatever the light is lit or not.
The toggle switch widget works correctly (the light goes on and off) but the icon does not change state.

Here is the widget code :

component: oh-toggle-item
config:
  color: yellow
  icon: https://www.openhab.org/iconsets/classic/light.png,
    https://www.openhab.org/iconsets/classic/light-on.png,
    https://www.openhab.org/iconsets/classic/light-off.png
  iconUseState: true
  item: Proj_Garage_Switch_1
  title: Projecteur Garage

Can someone help me ?
Best regards !

2

I’ve never seen an icon field used like that. The standard would be

icon: oh-light
iconUseState: true

The built in OH icons are fixed so the color field isn’t doing anything to the icon here. You cannot change their color using an expression like you can with the f7, material, and iconify icons. If you use those other icon sources, to change the icon you need to use an expression to set the icon and color.

3

Thank you Rich for the quick answer.

I didn’t write the code myself, it’s openhab 3 who did it… I’m not an advanced user enough to do it. I just filled the “edit toggle list item” form in accordance with the OH3 online documentation… And everything worked fine until OH4 migration (that I didn’t expect by the way).

OH icons are not that fixed, if you let the pointer of your touchpad some time upon the icons (here Icons | openHAB), you’ll see all variations they allow (light.png, light-on.png, light-off.png … for example). And the former documentation explained how to use these variations.

Obviously OH4 is more for advanced users than the 3rd version was. Sad for small users like me.
Let’s see half glass full and think about all the new skill I’m going to learn… If only I have time for it.

Anyway, thank you for making openhab alive. Using Open Source software is a hard work, but that’s the price for privacy and emancipation from Big Tech and its data collections.

4

There were lots of activity here on the forum about it. There was an announcement weeks and days before the release. And there is always a new release sometime in July and December. This should not have been a surprise and I’m not sure what else we could do to make it not a surprise. Even if you don’t read the forum, we have a six month release cycle.

I don’t know what to say. I’ve never seen anything like that in all the time I’ve used OH 3 or 4. The doc under the icon field says:

Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName (Iconify icon, requires being online if not in cache)

and under icon color it says

Not applicable to openHAB icons

and under icon depends on item state it says

Use the state of the Item to get a dynamic icon (enabled by default for Contact , Dimmer , Rollershutter & Switch Item types) (for openHAB icons only)

image
image1478×612 49.2 KB

When you don’t enter anything, the code tab says

value: ""
config: {}

Only if you supply values in the form different from the default doe anything appear in the code tab which means at some point you had to enter that stuff, whether you remember it or not. This isn’t new in OH 4, it’s how it’s worked since OH 3.0.

So I still have no real idea how those URLs ended up in the icon property of the widget, nor how it ever worked in OH 3 that way, let alone OH 4.

By fixed I mean that list of icons is all you get. You can’t do something like:

  icon: '=(items[props.item].state == "ON") ? "f7:hand_thumbsup_fill" : "f7:exclamationmark_circle"'
  iconColor: '=(items[props.item].state == "ON") ? "red" : "green"'

Where I set both the icon and the color of that icon dynamically based on the Item states. For OH Icons I’d have to create each combination of icon and color as static files.

OH 4 is mostly just additions. It’s no more or less advanced than OH 3. In a lot of ways it’s simpler as now everything can be configured through the UI where 3 required some things to be configured in files (e.g. transformation, persistence config, logging level of add-ons, etc.). Blockly is much more complete now.

But really, it’s all pretty much the same.

Anyway, if listing these URLs to the icons worked in OH 3, it was an undocumented feature. To use the built in OH icons, it has always been the documented and supported case to use oh:light to reference the light.png, light-on.png and light-off.png icons (for example) and you’d have to set the useItemState to true for the icon to change based on the Item’s state.

5

Thank you Rich. I went with a fresh OH4 install and, after 2 days resetting everything, all is working fine. Except one little stuff, but I’m going to open a new thread for that.