OH3 list item widget for UV index with dynamic F7 icon, color and badge

Hi all,

Here’s an example of a dynamic list widget that you can use to render the UV index:

The icon changes depending on the state of the UV Index item (e.g., returned from the OpenWeaherMap binding).

The color codes and levels have been retrieved from Ultraviolet index - Wikipedia

The widget code has been beautified for easier reading. You can paste it as is in the openHAB widget editor:

uid: uv_index_list
tags:
  - list
  - ultraviolet
props:
  parameters:
    - description: Widget title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Ultraviolet index item to display
      label: Item
      name: item
      required: true
      type: TEXT
  parameterGroups: []
timestamp: 'Jun 4, 2021, 12:33:54 PM'
component: oh-label-item
config:
  icon: >-
    =(!Number.isFinite(Number.parseFloat(items[props.item].state))) ?
    "f7:question_circle" : (Number.parseFloat(items[props.item].state) >= 8) ?
    "f7:sun_max_fill" : (Number.parseFloat(items[props.item].state) >= 6) ?
    "f7:sun_max" : "f7:sun_min"
  iconColor: >-
    =(!Number.isFinite(Number.parseFloat(items[props.item].state))) ? "gray" :
    (Number.parseFloat(items[props.item].state) >= 11) ? "violet" :
    (Number.parseFloat(items[props.item].state) >= 8) ? "red" :
    (Number.parseFloat(items[props.item].state) >= 6) ? "orange" :
    (Number.parseFloat(items[props.item].state) >= 3) ? "yellow" : "green"
  title: =props.title
  item: =props.item
  action: analyzer
  actionAnalyzerCoordSystem: time
  actionAnalyzerItems: '=[props.item]'
  badgeColor: >-
    =(!Number.isFinite(Number.parseFloat(items[props.item].state))) ? "gray" :
    (Number.parseFloat(items[props.item].state) >= 11) ? "violet" :
    (Number.parseFloat(items[props.item].state) >= 8) ? "red" :
    (Number.parseFloat(items[props.item].state) >= 6) ? "orange" :
    (Number.parseFloat(items[props.item].state) >= 3) ? "yellow" : "green"
  badge: >-
    =(!Number.isFinite(Number.parseFloat(items[props.item].state))) ? "error" :
    (Number.parseFloat(items[props.item].state) >= 11) ? "extreme" :
    (Number.parseFloat(items[props.item].state) >= 8) ? "very high" :
    (Number.parseFloat(items[props.item].state) >= 6) ? "high" :
    (Number.parseFloat(items[props.item].state) >= 3) ? "moderate" : "low"

This example illustrates how you can generate dynamic icons, use dynamic icon color and badge color and dynamically add badge text.

Have fun!

6 Likes

If you want to get rid of the item state next to the badge, you can use a oh-list-item instead of a oh-label-item. Gives your widget a better look IMHO.

Another approach to remove the state is to set the State Description pattern to " ". But that’s a less good solution from what Hans-Jörg suggests.

The following does the trick:

component: '=props.show_badge ? "oh-list-item" : "oh-label-item"'