CustomWidget PopOver - Item from parameter does not use the configuration of the specific widget, but the last widget

Tags: #<Tag:0x00007fc8f4045e60> #<Tag:0x00007fc8f4045d70>

Hello everyone,

I am quite new to OpenHab and try to setup my system with OpenHab3. For the heating control, I use a custom widget based on the tutorial from Mathew. Thanks a lot for that!

My widget uses a popover to set the target temperature.

Having one widget everything works fine, but with more than one instances of the widget, the popover just takes the last property definition for the popover. In the rest of the widget (not the popover) everything works fine and uses the specific configuration. Anyone has a tipp on how to set the popover to use the specific property of the widget?

uid: heatingWidget
tags: []
props:
parameters:
- description: Room Name
label: Room Name
name: room
required: true
type: TEXT
- context: item
description: Temperature item
label: roomtemperatur
name: itemRoomTemp
required: true
type: TEXT
- context: item
description: Humidity item
label: Humidity
name: itemHumidity
required: true
type: TEXT
- context: item
description: Target Temperature item
label: Target Temperature
name: itemTargetTemp
required: true
type: TEXT
- context: item
description: heat power state item
label: HeatPowerState
name: itemHeatpower
required: true
type: TEXT
- context: item
description: The remainding duration up to default schedule
label: TimerDuration
name: itemTimerDuration
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 10, 2021, 2:53:43 PM
component: f7-card
config:
title: = “Heating " + props.room
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: = props.itemTargetTemp
actionVariableValue: = props.itemTargetTemp
popoverOpen: .heatingTargetTemperaturePopover
style:
position: absolute
top: 0px
width: 100%
height: 100%
slots:
default:
- component: f7-popover
config:
class: heatingTargetTemperaturePopover
style:
max-width: 400px
min-width: 270px
slots:
default:
- component: oh-slider-card
config:
item: = props.itemTargetTemp
title: = “Heating " + (props.room)
min: 10
max: 25
step: 1
label: true
scale: true
unit: °
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- align-items-center
- display-flex
- justify-content-space-between
- align-content-stretch
slots:
default:
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemRoomTemp].displayState || items[props.itemRoomTemp].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: drop
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemHumidity].displayState || items[props.itemHumidity].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: decrease_quotelevel
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemTargetTemp].displayState || items[props.itemTargetTemp].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: gauge
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemHeatpower].state) + " %”
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: timer
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemTimerDuration].state) + " min”
style:
fontSize: 14px

Interesting that you (almost) achieved to do it like this.
I’d suggest another approach that is likely to work better:

Create a widget for the contents of your popover.
Define props for the title and the item.

uid: heating_control
props:
  parameterGroups: []
  parameters:
    - name: title
      label: Title
      type: TEXT
      description: The title
    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control
tags: []
component: oh-slider-card
config:
  title: =props.title
  item: =props.item
  min: 10
  max: 25
  label: true
  scale: true

Then on your button use a popover action to open your other widget.

component: oh-button
config:
  ...
  action: popover
  actionModal: widget:heating_control
  actionModalConfig:
    title: =props.room
    item: =props.itemTargetTemp
2 Likes

This is great! It worked. Thank you very much.

The popover now just pops up at a different place, but this is fine.

If someone is interested, here are the two widget configurations:

The popover widget

uid: heating_control
props:
  parameterGroups: []
  parameters:
    - name: title
      label: Title
      type: TEXT
      description: The title
    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control
tags: []
component: oh-slider-card
config:
  title: =props.title
  item: =props.item
  min: 10
  max: 25
  label: true
  scale: true
  unit: °

And the main widget

uid: heatingWidget
tags: []
props:
  parameters:
    - description: Room Name
      label: Room Name
      name: room
      required: true
      type: TEXT
    - context: item
      description: Temperature item
      label: roomtemperatur
      name: itemRoomTemp
      required: true
      type: TEXT
    - context: item
      description: Humidity item
      label: Humidity
      name: itemHumidity
      required: true
      type: TEXT
    - context: item
      description: Target Temperature item
      label: Target Temperature
      name: itemTargetTemp
      required: true
      type: TEXT
    - context: item
      description: heat power state item
      label: HeatPowerState
      name: itemHeatpower
      required: true
      type: TEXT
    - context: item
      description: The remainding duration up to default schedule
      label: TimerDuration
      name: itemTimerDuration
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 10, 2021, 2:53:43 PM
component: f7-card
config:
  title: = "Heating " + props.room
slots:
  default:
    - component: oh-button
      config:
        action: popover
        actionModal: widget:heating_control
        actionModalConfig:
          title: =props.room
          item: =props.itemTargetTemp
        style:
          position: absolute
          top: 0px
          width: 100%
          height: 100%
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-center
                - display-flex
                - justify-content-space-between
                - align-content-stretch
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemRoomTemp].displayState || items[props.itemRoomTemp].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemHumidity].displayState || items[props.itemHumidity].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: decrease_quotelevel
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemTargetTemp].displayState ||  items[props.itemTargetTemp].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: gauge
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemHeatpower].state) + " %"
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: timer
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemTimerDuration].state) + " min"
                          style:
                            fontSize: 14px
2 Likes

is there a way to control where the popover pop´s up and what the size looks like?

I just wanted to express my interest in this question as well. I could not yet figure out how to do this and I currently doubt that it is possible.

Not possible with the dynamic solution that Yannick mentioned afaik. It would work, if the contents of the popover were inside the same widget (like mentioned here)

I’m not sure if this is really an issue but I had the impression that the latter solution is not ideal if you want to use this widget more than once on the same page. At least I had some strange behaviour when I tried this before but I couldn’t really pinpoint where it was coming from. In fact, I think popovers should be defined only once in the DOM (by giving it a unique class name) but there seems to be no way to dynamically assign a class name through the yaml.

I saw a discussion about that some time ago, but I think this behaviour was fixed afaik?! It works fine here at least…

dual_popover

Or did I misunderstood your comment here?

No you got me absolutely right! As I said I don’t really know if I my problems were related to this… In your example it seems to work well so I might give it another try at some point, thank you!

1 Like

Thanks for the link to a possible solution. For my case it works.

image

i am still not sure if this popover window applies to the size of the content, e.g. suitable for a larger widget. I will test this and also look into the f7 description in more detail.

One thing i figured out is that i am using Homematic blinds which state 0 if they are up and 100 if they are down. The slider is indicating this the other way around. Any tip how i can address this? The slider needs to have a 180 turn around. The buttons are working as expected with up and down.

The popover sets it height depending on its content - It’s width is limited to 200px by default, which you can overwrite by adding --f7-popover-width: 300px to the popover style.

image

This question is more related to the rollershutter-widget, but to give a quick assessment here… there is no build-in and clean way to achieve what you’d like to do.

The easiest workaround would be to create a rule, which will calculate the right values and forward it to the desired item (which involves the use of a proxy-item for the widget commands in the first step).

Hi Rainer,

i looked into the documentation of the f7 range slider framework Range Slider | Framework7 Documentation and it shows a great feature:

verticalReversed: true

This changes the direction of the slider :slight_smile:

image

The open blind is now with slider on top… no need to code rules which is very helpful.

With the feature of manipulating the size of the popup box i can now work nicely on some of my projects, like door - opener / garagedoor opener showing button on popup to avoid click by mistake.

I know this feature, but it only inverts the slider and not the logic itself afaik - so I’m a bit astonished, that it inverts the logic in your case. But hey, if it works for you, everything is fine! :slight_smile:

it it indeed just for cosmetic purposes, with the vertical slider the slider should be on the top position if the blind is open and on the bottom position if the blind is closed. this is achieved with adding the revert tag.

i don’t have any other problems with the blinds, they are showing correctly in OH and the homekit as well.

Thank you very much Jan, this is the solution for my problem too. I have several Homatic-IP HmIP-BROLL installed to operate our shutters via CCU3 (pivCCU3). The WebUI shows a value of 100% if the blind is UP, and 0% if it is DOWN.
The value of Channel 3, which is the status of a BROLL, is just reverse. 100% if it is closed and 0% if it is open.
If the BROLL is attached to a Homatic-IP Accespoint then this is shown in the same way. I found a post were one assumed this could be a bug of the CCU3 Code. Nevertheless your solution is very simple!

component: oh-slider-card
config:
  footer: Rollladen
  item: HmIPBROLL001118A98BC44CBuro_Level_4_Steuerung
  vertical: 1
  verticalReversed: true
  limitKnobPosition: true
  label: true
  scale: true
  scaleSteps: 5
  scaleSubSteps: 4
  unit: "%"
  outline: true
  step: 5
  style:
    --f7-range-bar-size: 60px
    --f7-range-bar-border-radius: 15px
    --f7-range-knob-size: 20px
    --f7-range-knob-color: red
    --f7-range-bar-active-bg-color: gray
    --f7-range-bar-bg-color: orange
    --f7-range-scale-font-size: 16px
    --f7-range-scale-text-color: gray
  title: Beschattung

Where I have to apply this to? Inside the popover widget or in the component which opens the popover?

i integrated the popover component into the „main widget“ and applied this in the popover component

- component: f7-popover
  config:
    class: popOver
    closeByBackdropClick: true
    closeByOutsideClick: true
    backdrop: false
    closeOnEscape: true
    style:
      --f7-popover-width: 120px
      --f7-popover-border-radius: 4px

Hey @curlyel

you have to add it to the styles of the f7-popover component.

Thanks Jan, Rainer,
unfortunately, I’m still not able to increase the width…

This was my recent attempt:

timestamp: Feb 14, 2021, 4:37:00 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
    --f7-popover-width: 400px
slots:
  default:
    - component: f7-popover
      config:
        class: popOver
        closeByBackdropClick: true
        closeByOutsideClick: true
        backdrop: false
        closeOnEscape: true
        style:
          --f7-popover-width: 400px
          --f7-popover-border-radius: 4px
    - component: oh-label-card
      config:
        title: =(props.titel) || (props.mainItem) || "Set properties.. "
        icon: =(props.icon || "f7:battery_25")
        label: = (items[props.mainItem].state + " " + props.delimiter + " " + items[props.secItem].state)
        footer: =props.footerText
        noBorder: true
        noShadow: true
        action: popover
        actionModal: widget:Repeater_Test
        actionModalConfig:
          semTag: =props.tag
          listIcon: =props.icon

As you see, I#ve applied the --f7-popover-width: 400px on the f7-card level as well as on a f7-popover component - but without effect :frowning:

Is it a problem, that I’ve been using a oh-label-card (which should open the popover) within a f7-card?

Hey @curlyel

Sry for giving you a wrong advise here - it won’t work in the root component or the page-config. You have to set it inside your popover style, as you also did here as I see… so it should work like this and it does in my setup.

1 Like