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.
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.
Thanks again,
seems, that this works only while having the popover code directly within the “main”-widget and having the popover action part of an (direct) f7-component.
Same as Jan did:
So this works:
- component: f7-button
config:
action: popover
popoverOpen: .detailList
slots:
default:
- component: f7-popover
config:
class: detailList
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
--f7-popover-width: 400px
--f7-popover-border-radius: 4px
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
Means, I can’t leverage the oh-card’s design and mimic that by f7-components - well: fair enaugh
Thanks guys for your help!
HI @RGroll, I have a follow up question. If i have 2 or more similar widgets in a site with the same popup and only by clicking again it shows the right one. this is a repeatable story. Is there a way to prevent this behaviour?
what do you mean by this?
I thought, I stick with the predefined layout of the basic oh-cells/oh-cards, e.g.:
… and just bother with some “details-widgets” as popover or popup to get a simple but similar look of the “top-level” UI elements.
Therefore I had a oh-label-card component in the above example with popover action.
If I can’t do this (because the missing styling options for the popover) I can still build the same look using the native f7-grid components.
Not a big deal - but some more work
got it, true. I ended up in just using custom widgets :-), but i any way wanted more control over backgrounds, content and highlight colors… as well as usable for iphones
I think, I’ll follow this too though…
Some hidden limits with the oh-* components may cost more time than it saves - finally …
Even though I’ve managed the above task meanwhile:
I’ve put a f7-button over the oh-label-card:
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:
default:
- 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
- component: f7-button
config:
action: popover
popoverOpen: .detailList
style:
position: absolute
top: 0px
width: 100%
height: 100%
slots:
default:
- component: f7-popover
config:
class: detailList
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
--f7-popover-width: 320px
--f7-popover-border-radius: 4px
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
for: i
sourceType: itemsWithTags
itemTags: LowBattery
fetchMetadata: semantics,widgetOrder,uiSemantics
filter: loop.i.state != "OFF"
slots:
default:
- component: oh-label-item
config:
icon: f7:battery_25
iconColor: red
footer: =loop.i.label
title: =loop.i.metadata.uiSemantics.config.equipment + loop.i.metadata.uiSemantics.config.preposition + loop.i.metadata.uiSemantics.config.location
item: =loop.i.name
Can you please explain me how did you count the item state ( 0 von 17) ?
Sure
That’s a good question, since the solution is not that obvious in openHAB3
When checking the documentation for aggregation functions you may have noticed the COUNT()
aggregation:
Unfortunately, the COUNT() aggregator is not selectable in the MainUI of openHAB3.
BUT: You can work around that limitation by importing group items with COUNT() aggregators from textual configuration:
This essentially adds two groups where one counts for empty and another count for good batteries.
A third group simply sums up the both which provides me the total number of batteries:
NumOfEmptyBatts + NumOfGoodBatts = TotalNumOfBatts
All BatteryLow-items belong to both count-groups - that’s it
Thanks that works great with your popup widget
Nice trick. But how do you dynamically put your items into either of these groups, based their battery level ?
This works out of the box only with devices that support a low battery channel.
if they don‘t, you need to create a virtual lowBat switch item and set it to on or off according to your defined treshold.
Edit : As COUNT supports a regular expression, it is worth to try
COUNT(<20)
Edit2: Hmmm, not working, as the validator does not like the „<„, but also does not like a string, even the docs list it as possible.
Edit3:
It should work with a virtual Item with the hysterese profile, linked to the batterylevel channel. This usage is noted in the profiles docu section…
Thanks Markus.
I’ve put the lowbat items in both groups by hand… no fancy dynamic here
Yes, even including UoM i.e. you can set “3.0 V” as a limit. But you must select it to have a switch type, and it’s not a virtual item, it’s still bound to the channel that has the physical measurement (of battery voltage).
Sorry, you are wright, it is not a virtual item.
Let me come back to this post from you Rainer: What you are doing there is fine since you only have static text in the popover. As soon as you want to show some item related info or controls in the popup I can confirm now that this does not work reliably. I have the following scenario:
I have two instances of the same widget on the same page. Both widgets try to open a popover which in turn shows stepper controls for a number item (I’m talking about my light control widgets). Since the class of the popover is hard coded in the widget there is no way for the browser to determine which element in the DOM should be displayed when you click in the link that opens the popover. I just realised this today when I always saw the popover with the item that was configured in the other widget but not the one I was clicking on.
So the solution still has to be the separate widget then which should work in any case. However I don’t think that anyone has solved the positioning issue yet…
Oh and by the way I tried to work around that by using a dynamic classname by reusing your suggestion from here: New Stylesheet property - #5 by RGroll
Correction - It seems to work like this:
I use the name of the timer item as css class like shown in the code below:
- component: oh-link
config:
text: Timer
visible: "=props.shutdowntimer ? true : false"
action: popover
popoverOpen: '="."+props.shutdowntimer'
style:
position: absolute
bottom: 10px
slots:
default:
- component: f7-popover
config:
class: '=props.shutdowntimer'
slots:
default:
- component: oh-stepper-card
config:
item: =props.shutdowntimer
title: Ausschalten in Minuten
This way the class name may not necessarily be unique as you may use the same configuration in different widgets. However you would always open the control for the right item. This feels pretty hacky though since there may be problems when your item name is not a valid css class name or when you are using multiple items in your popover. In this case however you can always add a text property to the widget and leave the setting of a unique class name to the user. This is also not an excellent solution but should do in most setups.
Same workaround here:
I use a identifier to solve the task.
And for oh-repeater:
- component: oh-link
config:
iconMaterial: opacity
color: '=items[loop.item.name].state == "ON" ? "blue" : "gray"'
iconSize: 25px
action: popover
popoverOpen: ='.m'+loop.item.name
slots:
default:
- component: f7-popover
config:
class: ='m'+loop.item.name
slots:
default:
- component: f7-block
config:
style:
animate: true
align-self: center
justify-self: center
justify-content: center
text-align: center
slots:
default:
- component: Label
config:
text: Запуск вручную
- component: oh-button
config:
text: =items[loop.item.name].state
color: green
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =loop.item.name