[OH3] Custom Widget with Knob (min/max as prop)

Add-ons UIs
, ,
1

Hi to all,

i have tried to create a widget with a knob. No problem, but how i get the min/max value for the knob as a prob?

If i define as prob min/max-values and use this for the knob, the knob isn’ work correct. :frowning:

Any ideas?
Maybe can @ysc or @RGroll help me to find the hint?

grafik

uid: widget_KnobTest
tags: []
props:
  parameters:
    - description: A text prop
      label: minTemp
      name: minTemp
      required: true
      type: TEXT
    - description: A text prop
      label: maxTemp
      name: maxTemp
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: Jan 6, 2021, 12:58:24 PM
component: f7-card
config:
  title: ="Prop minTemp "+props.minTemp+" Prop maxTemp "+ props.maxTemp
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: ="Value of the Knob "+vars.minTemp
          - component: f7-row
            config:
              class: justify-content-center align-items-center
            slots:
              default:
                - component: oh-knob
                  config:
                    variable: minTemp
                    title: Temperatur
                    item: set_temp_Test
                    min: =props.minTemp
                    max: =props.maxTemp
                    stepSize: 0.5
                    size: 300
                    primaryColor: "#26BF75"
                    secondaryColor: "#DCDFE6"
                    disabled: false
                    style:
                      z-index: 2
2

Hey @Nico_R

you have to set the min/max props as a number, as the knob min/max properties can’t handle strings as values. Something like this should work:

                - component: oh-knob
                  config:
                    variable: minTemp
                    item: set_temp_Test
                    min: "=!props.minTemp ? 0 : Number(props.minTemp)"
                    max: "=!props.maxTemp ? 100 : Number(props.maxTemp)"
                    stepSize: 0.5
                    size: 300
                    primaryColor: "#26BF75"
                    secondaryColor: "#DCDFE6"
                    disabled: false
                    style:
                      z-index: 2

just FYI - the title prop won’t work on the base knob component.

1 Like
3

Hi @RGroll,

thanks a lot for your help! :slightly_smiling_face:
I should have figured that out myself :face_with_monocle: I’m sorry

all the best,

Nico

4

No problemo - don’t hesitate to ask if you’ve further questions. It just may take a while for me to answer. :slight_smile:

1 Like