Nice Widget, just for fun i modified for dynamic icon. But now i do´nt have colored icon any more. I did´nt change the Code behind iconColor:
dynamic Icon´s in generall do´nt have colors? Or any chance to get them colored by iconColor:?
The icons were already dynamic. It shows a full green icon over 75%, orange partial icon between 25% and 75% and red empty under 25%.
These are not OH icons though. If you are using oh icons, the color is what ever the color is in the image file.
OK, in your widget you use F7 Icons. I have modified the F7:Iconfile to more segments/steps. But since i have to save them in openhab/icon folder and in code they have to be used like oh:icons 
they lost the ability to be colorized like F7.
OH will only colorize f7 icons - i have learned know, thanks
In the end i have also lerned, no need to make dynamic battery icons meself, OH allready have 
just learning OH-UI
I found the solution, thanks to nikos7179
badge: "=(items[loop.item.name].displayState === undefined) ? loop.item.state : items[loop.item.name].displayState"
Now, my displaystates are showed!
@rlkoshak I have another (maybe more general) question about a function I would like to add.
Let’s say I setup the variables so that it only shows battery levels below 50% (props.max). I would to like to be able to click somewhere in the widget so it shows all values, so it actually ignores the filter. This click can be on the title, oh-repeater component or footer (I use a footer in all my list widgets). I know there is a accordion component, but don’t know how to integrate this. Or maybe there is another better solution to show ALL items on demand, without setting up a different widget.
I’m sure something like that might be possible but I’m not wizard at UI Widgets and wouldn’t know how to make it happen.
Accordion will be 100% manually defined based on my experience. You can’t use it with a repeater and you have to manually add each Item to the list.
But you could create a container card that contains both the repeater and the accordion elements.
I guess you could create a switch item for that purpose and add a link or button to toggle it on or off. Based on this items state you may then show or ignore items on the list.
Continuing the discussion from Battery Level Status:
I am not a code expert but enjoy learning and I’ve reached a stop wall. A hand would be more than welcome. I have an accordion list with battery status, but I am not being able to remove the “null” state next to the badge that shows the right battery remaining.
This is the code for each battery element:
```yaml
component: oh-list-card
config:
accordionList: true
simpleList: false
outline: true
footer: estado de baterías..
slots:
default:
- component: oh-list-item
config:
title: BATERIAS
icon: =(items.gBatteries.state>20)?items.gBatteries.state>50?"f7:battery_100":"f7:battery_25":"f7:battery_0"
iconColor: =(items.gBatteries.state>20)?items.gBatteries.state>50?"green":"orange":"red"
iconUseState: true
badge: =items.gBatteries.state+' %'
badgeColor: =(items.gBatteries.state>20)?items.gBatteries.state>50?"green":"orange":"red"
listButton: false
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: oh-label-item
config:
title: Planta Alta
icon: =(items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>20)?items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>50?"f7:battery_100":"f7:battery_25":"f7:battery_0"
iconColor: =(items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>20)?items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>50?"green":"orange":"red"
style:
color: =(items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state >
20)?'white':'red'
badge: =items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state+' %'
badgeColor: =(items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>20)?items.ZWaveNode009PAZW100Multisensor6_BatteryLevel.state>50?"green":"orange":"red"
Set the state description pattern to a space and that will suppress showing the state.
Thanks a lot Rich,
In the end, changing the oh-label to oh-list in the header made the trick and stopped showing the state outside of the badge. Thanks!
I’m struggling a bit to show my items with this.
When I add the widget, and fill in the group_items, I see my batteries.
But looks like I can’t save the page? I’m just loosing all info.
When I save, go to the code tab, and return, the group_items are gone in the settings?
Guess I miss something, but not sure what.
config:
label: Batterijen
sidebar: false
blocks: []
masonry:
- component: oh-masonry
slots:
default:
- component: widget:rlk_battery_status
config: {}
grid: []
canvas: []
Some item examples:
grep ALL_bat items/*
items/default.items:Group:Number:MIN ALL_bat "Batterijen [%d %%]" <battery>
items/gardena.items:Number GardenaS1Battery "Grondsensor Moestuin [%s %%]" <battery> (ALL_bat, BU_bat) { channel="gardena:sensor:73f46e562b:92eb53ac-96c2-4193-a7c9-df1c4d8a578c:common#batteryLevel"}
items/ikea.items:Number Gordijn_AT_Bureau2ControlBat "Gordijncontrole Venster [%s %%]" <battery> (ALL_bat, AT_bat) { channel="tradfri:0203:gwd44da43c1dd9:65543:battery_level" }
items/netatmo.items:Number na_Outdoor_BatteryLevel "Weerstation Buiten [%.0f %%]" <battery> (ALL_bat, WO_bat) { channel = "netatmo:NAModule1:068acca6:0200003cf822:BatteryVP" }
items/netatmo.items:Number na_Rain_BatteryLevel "Regenmeter" <battery> (ALL_bat, WO_bat) { channel = "netatmo:NAModule3:068acca6:05000005f2b0:BatteryVP" }
items/shelly.items:Number Shelly001_Batterij "Patio bewegingssensor [%s %%]" <battery> (ALL_bat, WO_bat) { channel = "shelly:shellymotion:39e03af21b:battery#batteryLevel" }
items/shelly.items:Number Shelly006_Batterij "Voordeur bewegingssensor [%s %%]" <battery> (ALL_bat, WO_bat) { channel = "shelly:shellymotion:22145547c4:battery#batteryLevel" }
items/zwave.items:Number Water_Kelder_Batterij "Kelder Watersensor [%s %%]" <Battery> (ALL_bat, WO_bat) { channel = "zwave:device:30038385:node117:battery-level" }
items/zwave.items:Number Water_Bureau_Batterij "Bureau Water [%s %%]" <Battery> (ALL_bat, AT_bat) { channel = "zwave:device:2f4ef5d0:node100:battery-level" }
...
ctrl-s usually will save your progress. But that before going to the code tab or exiting the layout page.
What ever is going on is genetic to MainUI and not specific to this widget.
OK, found it!
Seems I was edeting the wrong data.
-
I clicked the icon for ’ Edit Repeater’.
I inserted the data over there in groupitem, and nothing was saved. -
When I click the main widget icon (?), I arrived on ‘Edit rlk_battery_status’.
Not so much options in here, and it works.
Great widget!
is it possible?
Maybe i have a Item like this
Group groupA "LabelA" (location) [Equipment]
Number ItemName "LabelB" <batterylevel> (groupA, groupB) [...] {channel="...}
and in Widget the item is just “loop.item”
default:
- component: oh-list-item
config:
title: = loop.item.label
loop.item.label = “LabelB”
but how to get “LabelA” of “groupA” of Item? i have tried loop.item.groups[0].label did´nt work
any clue?
You can find a discussion about how to get the equipment group of a point item in a widget here:
1 Like
I’m diving into the world of widgets since a couple of days and played with the filter.
I added an ‘eye’ button to display all battery levels. Pressing again will hide them again.
A different approach I tried was to open the battery levels group wel clicking on the icon, but I thing this is nicer.
The code of the button is added twice in the code, with the ony difference the icon… When I tried this whith iconF7: "=vars.filterOn == false ? eye_slash_fill : eye_fill", the icon dissapears completely. So this is a workaround.
uid: battery_status
tags: []
props:
parameters:
- context: item
description: Group:Number:MIN Item that aggregates all the battery levels
label: Minimum Battery Level Item
name: minLevel
required: true
type: TEXT
filterCriteria:
- value: Group
name: type
- default: "100"
description: Maximum percentage to show in the widget
label: Max Percent
name: max
required: false
type: INTEGER
min: 0
max: 100
- default: "60"
description: The percentage above which green is used
label: Green Level
name: green
required: false
type: INTEGER
min: 0
max: 100
- default: "30"
description: The percentage above which orange is used
label: Orange Level
name: orange
required: false
type: INTEGER
min: 0
max: 100
parameterGroups: []
timestamp: Dec 4, 2021, 11:29:59 AM
component: f7-card
config:
title: Battery status
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-block
config:
style:
position: absolute
top: 0px
right: 0px
flex-direction: row
display: flex
slots:
default:
- component: oh-button
config:
iconF7: eye_fill
outline: false
round: true
color: white
visible: "=vars.filterOn == false ? false : true"
action: variable
actionVariable: filterOn
actionVariableValue: "=vars.filterOn == false ? true : false"
style:
width: 50px
margin-top: 5px
margin-right: -10px
- component: oh-button
config:
iconF7: eye_slash_fill
outline: false
round: true
color: white
visible: "=vars.filterOn == false ? true : false"
action: variable
actionVariable: filterOn
actionVariableValue: "=vars.filterOn == false ? true : false"
style:
width: 50px
margin-top: 5px
margin-right: -10px
- component: oh-list
slots:
default:
- component: oh-repeater
config:
fragment: true
for: item
sourceType: itemsInGroup
groupItem: =props.minLevel
filter: 'vars.filterOn == false ? true : Number.parseFloat(items[loop.item.name].state) <= props.max'
slots:
default:
- component: oh-list-item
config:
icon: '=(Number.parseFloat(loop.item.state) > props.green) ? "f7:battery_100" : (Number.parseFloat(loop.item.state) > props.orange) ? "f7:battery_25" : "f7:battery_0"'
iconColor: '=(Number.parseFloat(loop.item.state) > props.green) ? "green" : (Number.parseFloat(loop.item.state) > props.orange) ? "orange" : "red"'
title: =(loop.item.label).replace('Battery level ','')
item: =loop.item.name
badge: "=(items[loop.item.name].displayState === undefined) ? loop.item.state + ' -' : items[loop.item.name].displayState"
badgeColor: '=(Number.parseFloat(loop.item.state) > props.green) ? "green" : (Number.parseFloat(loop.item.state) > props.orange) ? "orange" : "red"'
- component: f7-card-footer
slots:
default:
- component: Label
config:
text: '=(items[props.minLevel].state) > props.max ? "Battery levels are OK!" : "Minimum Battery Level: " + ((items[props.minLevel].displayState === undefined) ? items[props.minLevel].state : items[props.minLevel].displayState)'
The primary issue here is the two result options - you need quotes around them. When you start with = it’s an expression so the parser thinks that eye_slash_fill and eye_fill are variables (which are, of course, empty). If you use
"=vars.filterOn == false ? 'eye_slash_fill' : 'eye_fill'"
You should be able to get it back down to just one copy of the icon code without the visible workaround.
1 Like
Fantastic! 15 lines less code 
@jebro, to maximize the utility of this thread and in accordance with the rules of the marketplace I want to keep it strictly on topic. I would like to ask that you move your post to a new thread in the Addons-UI category or the Tutorials and Solutions category. If there is something specific you want to recommend to change in the original post, please send me a PM or make a suggestion as a reply to this thread.
@adm105, to maximize the utility of this thread and in accordance with the rules of the marketplace, I’ve moved your post to it’s own thread since it is asking for help with a widget you’ve written yourself and not the original posted widget.