[OH3] How to create a drop-down-list as input in a ui-widget?

Setup, Configuration and Use Migration
1

Hi there,

I’m just slowly preparing for the update to OH3.
In this context, I am currently creating a widget for AVM thermostats. I’m already relatively far for my standards (see screenshot). But now I have no idea how I can implement a kind of shortlist. The thermostat has 2 modes, device and controller, each of which can and should assume different values.
Device can be AUTOMATIC, MANUAL, ON, OFF. The controller can be ECO, COMFORT, BOOST, ON, OFF. I would like to be able to select the mode from a kind of drop-down and assign it to the corresponding item. The current value should be displayed and this should be changeable. How do I do that??

The green AUTOMATIC and COMFORT on the screenshot are only for visualization at first. They should disappear later and make space for 2 additional items.Widget-AVM

2

Not sure this is what you’re expecting, but here is how I did something similar.

  1. You need to edit the item Metadata and in the State Description in the Options textbox you should put what you want to see in the list. Example:
AUTO=Auto
OFF=Off
ON=On
  1. On your widget the item that controls the operating modes should be like:
- component: oh-link
  config:
    text: =items[props.itemMode].displayState || items[props.itemMode].state
    action: options
    actionItem: =[props.itemMode]

itemMode should be replaced with the name of the variable you are using.

3

Hi Geo,

many thanks. Point 2 achieved the desired result. openHAB offers the options known to the item in the selection list. Point 1 therefore did not have to be implemented.

If I have further refined the widget, I can gladly make it available.

Thank you again and stay healthy. I wish you a happy new year.

4

can someone post a example of the item?

i dont understand how the item looks like with the options ?

5

Hi Heiko,

any Updates on your widget?
I upgraded to OH3 recently and was looking for any great widgets i could use.
Since I also use AVM thermostats, your widget would be just right for me.

Your version from last year looks promising in the picture. Even in case it is not 100% completed yet, it would be great if you could make your current version available.

Thank you very much.

6

Hi Patrick,

this is my actual widget code:

uid: AVM_Thermostat
tags:
  - Thermostat
  - Temperatur
  - SetPoint
props:
  parameters:
    - description: <b>Optional prefix</b> for item names.
      label: Item prefix
      name: itemPrefix
      required: false
      type: TEXT
    - description: <b>Optional</b> URL to background-image.
      label: Hintergrundbild-URL
      name: backgroundUrl
      required: false
      type: TEXT
    - context: item
      description: Aussentemperatur
      label: Aussentemperatur
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Fensterzustand
      label: Fensterzustand
      name: itemWindow
      required: false
      type: TEXT
    - context: item
      description: Raumtemperatur
      label: Raumtemperatur
      name: itemAmbientTemp
      required: false
      type: TEXT
    - context: item
      description: Solltemperatur
      label: Solltemperatur
      name: itemTargetTemp
      required: false
      type: TEXT
    - context: item
      description: Batterie
      label: Batterie
      name: itemBattery
      required: false
      type: TEXT
    - context: item
      description: Geraet
      label: Geraet
      name: itemGeraet
      required: false
      type: TEXT
    - context: item
      description: Regler
      label: Regler
      name: itemRegler
      required: false
      type: TEXT
    - context: item
      description: Naechster Sollwert
      label: Naechster Sollwert
      name: itemNextSoll
      required: false
      type: TEXT
    - context: item
      description: Naechste Temperatur
      label: Naechster Temperatur
      name: itemNextTemp
      required: false
      type: TEXT        
  parameterGroups: []
timestamp: Apr 16, 2021, 7:54:22 PM
component: f7-card
config:
  class:
    - padding
  style:
    background-image: ='url(' + props.backgroundUrl + ')'
    background-size: cover
    background-repeat: no-repeat
    background-position: 100% 100%
    border-radius: 5px
    overflow: hidden
    -ms-user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none
    --card-color: 255,255,255
    --card-text-color: rgba(var(--card-color),1)
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            config:
              visible: "(props.itemWindow === undefined) ? false : true"
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: rectangle_badge_checkmark
                    color: '=(items[props.itemWindow].state === "OPEN") ? "pink" : "green"'
                - component: Label
                  config:
                    text: '=(items[props.itemWindow].state === "OPEN") ? "Fenster offen" : "Ok" '
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      font-size: 18px
          - component: f7-col
            config:
              visible: "=(props.itemBattery === undefined)  ? false : true"
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: battery_100
                    color: green
                - component: Label
                  config:
                    text: =items[props.itemBattery].displayState
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      font-size: 18px
          - component: f7-col
            config:
              visible: "=(props.itemOutdoorTemp === undefined) ? false : true"
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: tree
                    color: green
                - component: Label
                  config:
                    text: =items[props.itemOutdoorTemp].displayState
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      font-size: 22px
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              min: 14
              max: 30
              stepSize: 0.5
              size: 200
              item: =props.itemTargetTemp
              primaryColor: green
              strokeWidth: "15"
          - component: f7-col
            config:
              class:
                - justify-content-center
              style:
                text-align: center
                margin-top: auto
                margin-bottom: auto
                width: 30%
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: house
                    color: green
                - component: Label
                  config:
                    text: =items[props.itemAmbientTemp].displayState
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      font-size: 32px
                      min-height: 2em
                - component: Label
                  config:
                    text: =items[props.itemGeraet].state
                    style:
                      text-align: center
                      margin-top: auto
                      margin-bottom: auto
                      min-height: 2em
                      color: '=(items[props.itemGeraet].state === "AUTOMATIC") ? "green" : "pink"'
                - component: Label
                  config:
                    text: =items[props.itemRegler].state
                    class:
                      - justify-content-center
                    style:
                      text-align: center
                      margin-top: auto
                      margin-bottom: auto
                      min-height: 2em
                      color: '=(items[props.itemRegler].state === "ECO") ? "blue" : "green"'
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            config:
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: power
                    color: '=(items[props.itemWindow].state === "OPEN") ? "pink" : "green"'
                - component: Label
                  config:
                    text: Power
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      color: green
                - component: oh-link
                  config:
                    text: =items[props.itemRegler].displayState || items[props.itemRegler].state
                    action: options
                    actionItem: =[props.itemRegler]
          - component: f7-col
            config:
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: minus_rectangle
                    color: '=(items[props.itemWindow].state === "OPEN") ? "pink" : "green"'
                - component: Label
                  config:
                    text: Modus
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      color: green
                - component: oh-link
                  config:
                    text: =items[props.itemGeraet].displayState || items[props.itemGeraet].state
                    action: options
                    actionItem: =[props.itemGeraet]
          - component: f7-col
            config:
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: clock
                    color: '=(items[props.itemWindow].state === "OPEN") ? "pink" : "green"'
                - component: Label
                  config:
                    text: n. Änderung
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      color: green
                - component: Label
                  config:
                    text: =items[props.itemNextSoll].displayState || items[props.itemNextSoll].state
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
          - component: f7-col
            config:
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: thermometer
                    color: '=(items[props.itemWindow].state === "OPEN") ? "pink" : "green"'
                - component: Label
                  config:
                    text: n. Sollwert
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
                      color: green
                - component: Label
                  config:
                    text: =items[props.itemNextTemp].displayState || items[props.itemNextTemp].state
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
1 Like