OH3: Toggle with 3 options

Setup, Configuration and Use Items & Sitemaps
1

I am trying to recreate the following as a widget:

Switch item=gBedroom_Lights icon="light" mappings=[0="Off",30="Dim",100="On"]

What I have gotten so far is:

uid: segmented-dimmer-control
props:
  parameters:
    - description: The label for the widget
      label: Title
      required: false
      type: TEXT
    - context: item
      description: The light switch Item
      label: Item
      name: item
      required: true
      type: TEXT
timestamp: Feb 13, 2021, 6:24:55 PM
component: f7-card
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-card-content
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: lightbulb
                          iconColor: yellow
                          style:
                            margin-right: 10px
                      - component: Label
                        config:
                          text: Lights
                          iconF7: lightbulb
          - component: f7-segmented
            config:
              raisedAurora: true
              style:
                margin-right: 5px
                min-width: 150px
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: OFF
                    text: Off
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: 30
                    text: Dim
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: ON
                    text: On

It looks pretty close to what I want in the widget builder, but when I actually try the widget out it looks all jumbled. Any help would be appreciated. I was trying to get close to the rollershutter widget look.

2

OH3 Widget : Four Button List Item Widget might be informative.

3

I actually just saw that one and it got me pointed in the right direction of using oh-list-item as my base instead of f7-card. I had tried that before, but was missing the “after” part. Here is my modified version if anyone else is looking to do something similar. A lot of times I find it easier to just have a set Dim value for lights instead of trying to find the right amount each time.

image

uid: segmented-buttons-2
tags: []
props:
  parameters:
    - description: The name to show
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 15, 2021, 2:21:34 PM
component: oh-list-item
config:
  icon: f7:lightbulb
  iconColor: '=(items[props.item].state.split(",")[2] === "0") ? "gray" : "yellow"'
  title: Light
slots:
  after:
    - component: f7-block
      config:
        style:
          margin-top: 0px
      slots:
        default:
          - component: f7-segmented
            config:
              raisedAurora: true
              style:
                min-width: 150px
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: OFF
                    text: Off
                    textColor: '=(items[props.item].state.split(",")[2] === "0") ? "" : "gray"'
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: 30
                    text: Dim
                    textColor: '=(items[props.item].state.split(",")[2] === "0" || items[props.item].state.split(",")[2] === "100") ? "gray" : ""'
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.item
                    actionCommand: 100
                    text: On
                    textColor: '=(items[props.item].state.split(",")[2]
1 Like