OH3 Homekit Thermostat Control - Issue with PopOver

Hello,

I’m building widget which should be used for Homematic Thermostat Control.
Currently I’m stuck with the temperature control using a Popover.
As you can see in the screenshot, the temperature I set for one room is somehow “cloned” to the other rooms as well.
I have added a label for debugging the issue, and this clearly indicate that the item used in the Popover is not refreshed - its always for the same room.
Do I need to clear or reset this somewhere?

Thanks Stefan

Correct:

Wrong: The item still refers to the Widget of the previously opened Popover

uid: widget_HM_Thermostat_Ctrl_v1
tags: []
props:
  parameters:
    - description: Thermostat Location
      label: Thermostat Location
      name: propsLocation
      required: false
      type: TEXT
    - context: item
      description: Homematic Thermostat Item
      label: Item
      name: propsItemName
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 22, 2021, 9:24:44 PM
component: f7-card
config:
  title: =props.location
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    height: 120px
  class:
    - no-padding
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                margin-top: -3px
                flex-wrap: nowrap
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 25%
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-flex-start
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            flex-wrap: nowrap
                            white-space: nowrap
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: thermometer
                                size: 20
                                color: blue
                                style:
                                  z-index: 0
                                  opacity: 100%
                            - component: Label
                              config:
                                text: "=items[props.propsItemName] === undefined ? '' : items[(props.propsItemName + '_SetPointTemperature')].displayState.split(' ') [0]"
                            - component: Label
                              config:
                                text: °C
                                style:
                                  font-size: 8px
                      - component: f7-row
                        config:
                          style:
                            flex-wrap: nowrap
                            white-space: nowrap
                        slots:
                          default:
                            - component: oh-button
                              config:
                                color: blue
                                iconF7: "=(items[props.propsItemName] === undefined) ? '' : (items[(props.propsItemName + '_SetPointMode')].state === '2') ? 'airplane' : (items[(props.propsItemName + '_SetPointMode')].state === '1') ? 'dial' : (items[(props.propsItemName + '_SetPointMode')].state === '0') ? 'clock' : '' "
                                iconColor: blue
                                iconSize: 20
                                action: options
                                actionOptions: 0=AUTO, 1=Manuell, 2=Urlaub
                                style:
                                  padding-left: 0px
                            - component: f7-icon
                              config:
                                f7: "=(items[props.propsItemName] === undefined) ? '' : (items[(props.propsItemName + '_BoostMode')].state === 'ON') ? 'hare' : ''"
                                size: 20
                                color: blue
                                style:
                                  margin-top: 5px
                                  margin-left: -9px
                                  z-index: 0
                                  opacity: 100%
                      - component: f7-icon
                        config:
                          f7: "=(items[props.propsItemName] === undefined) ? '' : (items[(props.propsItemName + '_10_STATE')].state === 'ON') ? 'flame' : ''"
                          size: 20
                          color: blue
                          style:
                            z-index: 0
                            opacity: 100%
                      - component: oh-button
                        config:
                          text: "=(items[props.propsItemName] === undefined) ? '' : items[(props.propsItemName + '_ActiveProfile')].state"
                          color: blue
                          iconF7: calendar
                          iconColor: blue
                          iconSize: 20
                          action: options
                          actionOptions: 1=Wochenprofil 1,2=Wochenprofil 2,3=Wochenprofil 3,4=Wochenprofil 4,5=Wochenprofil 5,6=Wochenprofil 6
                          actionItem: =props.propsItemName + '_ActiveProfile'
                          style:
                            padding-left: 0px
                - component: f7-col
                  config:
                    style:
                      justify-content: center
                      align-self: center
                      width: 50%
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            white-space: nowrap
                            flex-wrap: nowrap
                        slots:
                          default:
                            - component: oh-button
                              config:
                                text: "=items[(props.propsItemName === undefined) ? '' : (props.propsItemName + '_ActualTemperature')].displayState.split(' ') [0]"
                                popoverOpen: .mySetTempPopover
                                action: popover
                                textColor: var(--f7-text-editor-text-color)
                                style:
                                  width: auto
                                  z-index: 1
                                  font-size: 25px
                                
                              slots:
                                default:
                                  - component: f7-popover
                                    config:
                                      class: mySetTempPopover
                                    slots:
                                      default:
                                        - component: f7-block
                                          config:
                                            style:
                                              text-align: -webkit-center
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: =props.propsItemName
                                              - component: oh-slider
                                                config:
                                                  item: =props.propsItemName + '_SetPointTemperature'
                                                  vertical: true
                                                  scale: true
                                                  scaleSteps: 5
                                                  scaleSubSteps: 4
                                                  max: 30
                                                  min: 5
                                                  step: 0.5
                                                  label: true
                                                  unit: °C
                                                  class:
                                                    - popover-close
                                                    - padding
                                                    - margin
                                                  style:
                                                    margin-left: 10px
                                                    height: 120px
                                                    --f7-range-label-font-size: 18px
                                                    --f7-range-scale-font-size: 12px
                                                    --f7-range-bar-size: 70px
                                                    --f7-range-bar-border-radius: 5px
                                                    --f7-range-knob-size: 0px
                                                    --f7-range-bar-bg-color: rgba(205,205,205,0.2)
                                                    --f7-range-bar-active-bg-color: linear-gradient(to top, rgba(20,20,255,0.8), rgba(255,20,20,0.8))
                                                    --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            - component: Label
                              config:
                                text: °C
                                style:
                                  margin-left: -10px
                                  font-size: 12px
                      - component: Label
                        config: {}
                      - component: f7-icon
                        config:
                          f7: thermometer
                          color: blue
                          size: 50
                          style:
                            position: absolute
                            width: 100px
                            z-index: 0
                            opacity: 20%
                - component: f7-col
                  config:
                    style:
                      width: 25%
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-flex-end
                      - align-self-stretch
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            white-space: nowrap
                            flex-wrap: nowrap
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=(props.propsLocation === undefined) ? '' : props.propsLocation"
                                style:
                                  font-size: 12px
                      - component: f7-row
                        config:
                          style:
                            white-space: nowrap
                            flex-wrap: nowrap
                            height: 20%
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: "=(items[props.propsItemName] === undefined) ? '' : (items[(props.propsItemName + '_HumidityAlarm')].state === 'ON') ? 'drop_triangle' : 'drop'"
                                size: 20
                                color: blue
                                style:
                                  z-index: 0
                                  opacity: 100%
                            - component: Label
                              config:
                                text: "=(items[props.propsItemName] === undefined) ? '' : items[props.propsItemName + '_Humidity'].displayState"


I’m lost - I created a standalone Slider widget and added this 6 times to a page for the different thermostats and it works fine.

I also modified my previously attached code and removed the f7-slider block. Instead I’m calling the standalone Widget inside the main widget - same strange behavior.

Is anything missing in my code, or is this a bug?

uid: widget_Slider_Vertical_Thermostat
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: ThermostatItem
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 23, 2021, 7:53:12 PM
component: f7-card
config:
  style:
    width: 130px
  class:
    - padding
    - margin
slots:
  default:
    - component: f7-row
      config:
        style:
          justify-content: center
          padding-left: 15px
      slots:
        default:
          - component: oh-slider
            config:
              item: =props.ThermostatItem + '_SetPointTemperature'
              vertical: true
              scale: true
              scaleSteps: 5
              scaleSubSteps: 4
              max: 30
              min: 5
              step: 0.5
              label: true
              unit: °C
              class:
                - popover-close
                - padding
                - margin
              style:
                margin-left: 10px
                height: 120px
                --f7-range-label-font-size: 18px
                --f7-range-scale-font-size: 12px
                --f7-range-bar-size: 70px
                --f7-range-bar-border-radius: 5px
                --f7-range-knob-size: 0px
                --f7-range-bar-bg-color: rgba(205,205,205,0.2)
                --f7-range-bar-active-bg-color: linear-gradient(to top, rgba(20,20,255,0.8), rgba(255,20,20,0.8))
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)


This is the code I replaced in my original widget:

- component: oh-button
  config:
    text: "=items[(props.propsItemName === undefined) ? '' : (props.propsItemName + '_ActualTemperature')].displayState.split(' ') [0]"
    popoverOpen: .mySetTempPopover
    action: popover
    textColor: var(--f7-text-editor-text-color)
    style:
      width: auto
      z-index: 1
      font-size: 25px
  slots:
    default:
      - component: f7-popover
        config:
          class: mySetTempPopover
        slots:
          default:
            - component: widget:widget_Slider_Vertical_Thermostat
              config:
                ThermostatItem: =props.propsItemName

1 Like

i have similar issues when having more than one popover widget in one site. what works with me is to click again on the popover, then it changes to the right one. my current workaround is using popup instead of popover, but this is just second best.

Clicking twice doesn’t work with with popover :frowning: the popover is always inheriting the wrong item. I suppose this is a bug. Maybe @ysc can advise?

here are two screenshots with the behaviour i see with more than one popover in a page:

a click on the widget opens the popover. the right popover appears: correct!

if i now click again on the right widget, the left the popover from the other, from the left widget appears.

image

clicking again on the widget, the correct popover appears and so on.

As said, for now i workaround with popup but i am sure there is a point somewhere to get this sorted.

Avoid f7-popovers in your widget, it doesn’t work well.
Instead isolate the contents of the popover in a separate widget, define props, and use the popover action to display it.

1 Like

Other way is to define a popover class with a identifier. Like item name or something.
Look at my heating widget.

2 Likes

Hi @Nico_R - thanks for the hint - this solved the problem :slight_smile:

Hi @stefan13 ,

your welcome! :slight_smile:

all the best,

Nico

@Nico_R great i will have a look into that!