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"