Dynamic Icon with ItemValue

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 %%