OH3 item/widget: switch with multiple buttons?

Tags: #<Tag:0x00007fc91dad1ef0> #<Tag:0x00007fc91dad03e8> #<Tag:0x00007fc91dacf240>

Sure. :wink:

That’s the current look, slightly modified to grey stepper controls:

… and the widget code:

uid: Thermostat-Control
tags: []
props:
  parameters:
    - description: Thermostat to control
      label: Description
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Das Item für die gemessene Temperatur
      label: Ist Temperature Item
      name: tempItem
      required: true
      type: TEXT
    - context: command
      description: Unterer Preset
      label: Temperatur kalt
      name: tempKalt
      required: true
      type: TEXT
    - context: command
      description: Normaler Preset
      label: Temperatur normal
      name: tempNorm
      required: true
      type: TEXT
    - context: command
      description: Oberer Preset
      label: Temperatur warm
      name: tempWarm
      required: true
      type: TEXT
    - context: item
      description: Das Item mit dem die Solltemperatur eingestellt wird
      label: Setpoint Item
      name: setpointItem
      required: true
      type: TEXT
timestamp: Feb 5, 2021, 1:04:45 PM
component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
slots:
  content:
    - component: oh-label-card
      config:
        noShadow: true
        trendItem: =(props.tempItem)
        action: analyzer
        actionAnalyzerItems: =[props.tempItem,props.setpointItem]
        item: =(props.tempItem)
        title: =(props.Title)
        icon: f7:thermometer
        actionAnalyzerCoordSystem: time
        vertical: false
    - component: oh-stepper-card
      config:
        noShadow: true
        color-theme: gray
        item: =(props.setpointItem)
        large: false
        autorepeat: true
        fill: false
        noBorder: true
        raised: true
        small: true
        round: true
        min: =(props.tempKalt-1)
        max: =(props.tempWarm+1)
        step: 0.5
    - component: f7-row
      config:
        class:
          - padding-bottom
          - padding-right
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Kalt
                    action: command
                    actionItem: =(props.setpointItem)
                    actionCommand: =(props.tempKalt)
                    iconF7: thermometer_snowflake
                    iconColor: blue
                    textColor: blue
                    text: min
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Normal
                    action: command
                    actionItem: =(props.setpointItem)
                    actionCommand: =(props.tempNorm)
                    iconF7: thermometer
                    iconColor: orange
                    textColor: orange
                    text: ok
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Warm
                    action: command
                    actionItem: =(props.setpointItem)
                    actionCommand: =(props.tempWarm)
                    iconF7: thermometer_sun
                    iconColor: red
                    textColor: red
                    text: max
3 Likes