Dynamic Icon with ItemValue

You can do it in PaperUI as well… Just cant remember how. I think its the label as well. Give it a try.

You can use PaperUI as well as items files at the same time.
Why it´s no recommended is due to the bad overview… Having tons of items there is no easy way to spot if its a PaperUI or a manual created items. Thats why the recommendation is, either use PaperUI or manual items files.

i try it, but id didn’t work, are u sure that the option is possible?
maybe i did it wrong but it think the Dimension Drop-down menu is for that grafik
But it don’t allow to add some own definition.

Its just a small thing, but its such a pain in the ***! :rage:
I can not believe that there is no solution with the item created with PaperUI
he Binding is correct, the Things and Items are correct, just the value isn’t in the right format for dynamic icon… I surely not the only one with this Problem, but i can’t write it right down, that somebody can help me… :pensive:

But I’m at the point to give up… :sob:

Dynamic Icons work fine with numeric Item states, decimal places or not.
If you have images like -20,-40,-60 a value 55.25 will produce image 40

You do have to follow the rules, for example there must be a batterylevel.png (or svg) default, even if you don’t expect to use it, or it all doesn’t work.

Your problem is about using HABpanel, I can’t help with that.

I use the given iconsets so there are there, a default an the other ones.

But thx for this hint

So there must be a other reason why it won’t work.
With the RF-Signal_item and the qualityofservice icon (also out of the box) work fine…

EDIT:

conset="'eclipse-smarthome-classic'" icon="'soundvolume-<battery_item>'

Out of despair I tried another icon with 0-100 scaling (sound volume) with the same item as before and lo and behold, it works! This means that something is wrong with the Battery icon and Battery-level icon.
Therefore, no one could help me.
The display works perfectly with the sound icon and my code … so it should also work with the battery icon.

fif anyone has any ideas, I would be glad. :thinking:
But think it’s really not my code … or does someone disagree?

I thank you all for the support… really great this forum. Will improve my skills and hope to help other users (in the future). If only 1st level support :blush:

Create a small sitemap and test it… If it works using basicUI, then it should work with happanel as well. If not, there iare some issue og setup in habpanel which is wrong somewhere.
I always use BasicUI (sitemap) to test my stuff, even dynamic icons. Its a bit doubble work ofcouse, but it can be worth.

I suppose you might check the filename.
I don’t see any Battery battery_item Battery-level or batterylevel icons in the default set, and now you’ve told us you’re not using a custom icon set.
https://docs.openhab.org/v2.1/addons/iconsets/classic/readme.html
Hover for image names

grafik
https://www.openhab.org/docs/configuration/iconsets/classic/
i use this one… i also got the soundvolume icon from there…


i double checked the names…

Well, batterylevel does not appear in this set
https://docs.openhab.org/v2.1/addons/iconsets/classic/readme.html

Humour me and try with icon set battery

grafik same result… i restart oh and cleared cache but didn’t help

div class="col-xs-3"><span ><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-<battery_item>'" size="25" /></span></div>

Thats spacial? Who can correct the doc?

Is this how it usually works in HABpanel? Seems odd. In other UIs you just give the root filename for iconset e.g. battery, and its the iconpicker at OH that supplies battery-20.png instead.

The icon name is batterylevel
And it does indeed work fine. I´m using it on my sitemaps.

Whats your code?
Or do you have a idea why it wont work

Seems not a logical to me🙄

It’s an old docs page. From what @Kim_Andersen says, both battery and batterylevel icon sets exist now.

Gave you my code a few posts back. But here you are again, (remember, I said Sitemaps).

Number 	XiaomiTempHumidityBattery      "Xiaomi Temp/fugt Batteri Niveau [%.0f %%]"         <batterylevel>     (BatteriLevel)          { channel="mihome:sensor_ht:158d0002090115:batteryLevel" }

See I use the batterylevel icon. And its working dynamic in my sitemaps just fine.

Ohh sorry🙈 , you are right😉
But it should work on HABPanel as well.

I have no idea where to search the problem… but all other icon work… may something in my database have an issue…

I will try habpanel later tonight and have a go at it… It has been a long time since I used it, but I´m almost possitive it worked back then.

I am sure that it has to work somehow. Unfortunately, I don’t have the necessary experience with OH to find a solution quickly.
If it is really my system, I will probably solve it through NgIf. But 10 ngif for an icon is not very “nice”.
I would like to make my widget available to others, I think they are not that bad in terms of design :blush:
grafik

For Beginners like me are some Templates very helpful and i really like to share if i have something that someone can use

So I gave up :pensive:and now I have my quick and dirty solution working. Unfortunately not elegant but at least it works. If someone still has a proposal, I would still be very interested, since this solution cannot be in the spirit of the inventor :roll_eyes:

<div class="row">
    <div class="col-xs-6"><span style="color: ORANGE; font-size: 6pt"></span></div>
   				<div ng-if="itemValue(config.Battery_item)>=94.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-100'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=84.5 && itemValue(config.Battery_item)<94.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-90'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=74.5 && itemValue(config.Battery_item)<84.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-80'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=64.5 && itemValue(config.Battery_item)<74.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-70'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=54.5 && itemValue(config.Battery_item)<64.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-60'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=44.5 && itemValue(config.Battery_item)<54.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-50'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=34.5 && itemValue(config.Battery_item)<44.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-40'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=24.5 && itemValue(config.Battery_item)<84.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-30'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=14.5 && itemValue(config.Battery_item)<24.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-20'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)>=4.5 && itemValue(config.Battery_item)<14.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-10'" size="25"/></span></div>
          </div>
  				<div ng-if="itemValue(config.Battery_item)<=4.5">
             <div class="col-xs-3"><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'battery-0'" size="25"/></span></div>
          </div>

Thats my how dynamic icon works now :rofl: :rofl: :rofl:

Hello everybody

Finally I have the solution! :relaxed: :blush: :smiley:
For everyone who is still looking for the “correct” solution for dynamic icons, I would like to leave the solution here.
Think that’s the elegant and correct way to implement it.
Unfortunately, I am not the hero in programming and maybe that’s logical for many, but nobody pointed out to me that the state attribute was used to directly select the icon dynamically.
With this line you can use your own dynamic icons in the HABPanel.

<widget-icon iconset="'custom-icon'" icon="'youriconname'" size="25" state="itemValue(config.your_item)"/>  
// Your Icon Name without the -Value. So if you`ll use a Icon like battery-0 until battery-100 you have just to write  icon='"battery'"

This reduces the code enormously and there is no need for the IF loops.
In many widgets that can be downloaded from the gallery, this is also solved with if loops, which would not be necessary. :face_with_raised_eyebrow:
Apparently the [state] variant does not seem familiar to many. :thinking:

I would close my question and thank everyone who tried to help me. :hugs:

Hi,
Is it possible to use dynamic icons with decimal values? I need it to reflect LiFePO4 cell voltage. (e.g cell.svg, cell-2.50.svg, cell-3.20.svg… etc.) Would be great if possible to do without converting these values to %%