Help with a battery widget

Add-ons UIs
1

Hello community,

I created the following widget myself:

uid: Batterie_Status_v2
tags: []
props:
  parameters:
    - description: Eine Überschrift festlegen...(<u>Vorschlag:</u> <b>Batterie Status</b>)
      label: Batterie Status
      name: prop1
      required: true
      type: TEXT
    - description: Item-Bezeichnung oder leer wenn disabled (<u>Vorschlag:</u> Samsung Tablet</b>)
      label: Samsung Tablet
      name: prop2
      required: false
      type: TEXT
    - context: item
      description: Item wählen oder leer wenn disabled (<u>Beispiel:</u> <b>BatteryLevel</b>)
      label: BatteryLevel
      name: item2
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
component: oh-list-Card
config:
  title: =props.prop1
  simpleList: false
  mediaList: true
slots:
  default:
    - component: oh-label-item
      config:
        item: =props.item2
        title: =props.prop2
        icon: =props.icon4
        iconUseState: true

How do I configure iconcolor with f7-icons battery_0, battery_25 and battery_100 so that the color <=20% is red, <=50% is yellow and <=100 is green?

Thanks for your support.

2

If you are using OH Icons the icon selected is based on the file name.

If you are using icons from any other source, you have to use an expression in the icon color property. See Building Pages - Components & Widgets | openHAB and lots of additional examples are available on the marketplace.

3

I have now tried various options and had no success. Maybe another user has an idea what I’m doing wrong. Here is my last non-working code:

uid: Batterie_Status_v7
tags: []
props:
  parameters:
    - description: Eine Überschrift festlegen...(<u>Vorschlag:</u> <b>Batterie Status</b>)
      label: Batterie Status
      name: prop1
      required: true
      type: TEXT
    - description: Item-Bezeichnung oder leer wenn disabled (<u>Vorschlag:</u> Samsung Tablet</b>)
      label: Samsung Tablet
      name: prop2
      required: false
      type: TEXT
    - context: item
      description: Item wählen oder leer wenn disabled (<u>Beispiel:</u> <b>BatteryLevel</b>)
      label: BatteryLevel
      name: item2
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
component: oh-list-Card
config:
  title: =props.prop1
  simpleList: false
  mediaList: true
slots:
  default:
    - component: oh-label-item
      config:
        item: =props.item2
        title: =props.prop2
        icon: "=(props.icon4.state <= 20) ? 'f7:battery_0' : (props.icon4.state <= 50) ? 'f7:battery_25' : 'green'"
        iconColor: "=(props.icon4.state <= 20) ? 'red' : (props.icon4.state <= 50) ? 'yellow' : 'green'"
        iconUseState: true
4

An icon doesn’t have a state. An Item has a state. Your expression needs to test the state of the Item, not the icon.

5

Thanks for the support, the widget is working now. For anyone interested in the correct code, here it is:

uid: Batterie_Status_v7
tags: []
props:
  parameters:
    - description: Eine Überschrift festlegen...(<u>Vorschlag:</u> <b>Batterie Status</b>)
      label: Batterie Status
      name: prop1
      required: true
      type: TEXT
    - description: Item-Bezeichnung oder leer wenn disabled (<u>Vorschlag:</u> Samsung Tablet</b>)
      label: Samsung Tablet
      name: prop2
      required: false
      type: TEXT
    - context: item
      description: Item wählen oder leer wenn disabled (<u>Beispiel:</u> <b>BatteryLevel</b>)
      label: BatteryLevel
      name: item2
      required: false
      type: TEXT
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Apr 5, 2022, 2:49:38 AM
component: oh-list-Card
config:
  title: =props.prop1
  simpleList: false
  mediaList: true
slots:
  default:
    - component: oh-label-item
      config:
        item: =props.item2
        title: =props.prop2
        icon: '=(items[props.item2].state <= 20) ? "f7:battery_0" : (items[props.item2].state <= 50) ? "f7:battery_25" : "f7:battery_100"'
        iconColor: '=(items[props.item2].state <= 20) ? "red" : (items[props.item2].state <= 50) ? "yellow" : "green"'
        iconUseState: true