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
Resources
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!