I might be wrong but as far as I remember all you need to do is change the popup action to a popover action.
I don’t know if this works with a f7-card component. Maybe you could drop the card and use a block component instead of the card-content. But I would also need to try this. Maybe someone else knows a definite answer?!
That may be, but I’m really overwhelmed with it. In the meantime, however, I have also made a little progress with a popover campaign. However, the output is always displayed at the top left of the screen. Maybe someone else can tell me how to place the “infos_popup_v7” widget in the middle of the screen.
Here are the pictures:
… and here the code:
uid: shutter_widget_v7
tags: []
props:
parameters:
- description: Title of the card (blank for none)
label: Title
name: title
required: false
type: TEXT
- description: The card footer (no footer!!)
label: Footer
name: footer
required: false
type: TEXT
- description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
label: Info1
name: title1
required: true
type: TEXT
- description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
label: Info2
name: title2
required: true
type: TEXT
- description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
label: Info3
name: title3
required: true
type: TEXT
- description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
label: Info4
name: title4
required: true
type: TEXT
- description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
label: Info5
name: title5
required: true
type: TEXT
- context: item
description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
label: Item
name: item1
required: true
type: TEXT
- context: item
description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
label: Item
name: item2
required: true
type: TEXT
- context: item
description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
label: Item
name: item3
required: true
type: TEXT
- context: item
description: Item for info 4 (<u>Example:</u> <b>_Gerätetemperatur</b>)
label: Item
name: item4
required: true
type: TEXT
- context: item
description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
label: Item
name: item5
required: true
type: TEXT
- context: item
description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
label: Item
name: control
required: true
type: TEXT
- description: Set background color (blank for none)
name: background
required: false
type: TEXT
- description: Set text color (blank for none)
name: color
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: Apr 30, 2022, 3:15:15 PM
component: f7-card
config:
style:
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
width: 250px
height: 250px
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex flex-direction-row
- justify-content-space-evenly
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- justify-content-center
- align-items-center
style:
height: calc(100% - 30px)
- component: oh-rollershutter-card
config:
dirIconsStyle: chevron_{dir}_square_fill
item: =props.control
stopIconStyle: stop_circle_fill
style:
background-color: rgba(246, 158, 81, 0.2)
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
item: =props.item1
style:
font-size: 13px
margin-bottom: 0px
margin-left: 0px
margin-top: 5px
width: 220px
z-index: 1
title: =props.title1
- component: f7-row
config:
class:
- display-flex
- justify-content-space-evenly
- align-items-center
style:
height: 25px
slots:
default:
- component: oh-button
config:
title0: Something
outline: true
action: popover
actionModal: widget:infos_popup_v7
actionModalConfig:
item2: =props.item2
item3: =props.item3
item4: =props.item4
item5: =props.item5
title: =props.title
title2: =props.title2
title3: =props.title3
title4: =props.title4
title5: =props.title5
fill: true
text: mehr ...
style:
position: absolute
top: 160px
left: 15px
text-align: center
popoverOpen: .popOver
- component: f7-popover
config:
class: popOver
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
vertical-align: center
horizontal-align: center
The position of the popover is determined by the popover’s parent, I believe. In the case where you use the built-in OH popover action, that parent is the window and therefore the popover is aligned with the window. To make the popover aligned with some part of your widget, the popover has to be built inside the widget.
This is not as bad as it sounds, and, in fact, you’re most of the way there already. While you’re using the OH popover action, all these lines:
- component: f7-popover
config:
class: popOver
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
vertical-align: center
horizontal-align: center
are not doing anything. They do not reference the widget that you just happen to be opening as a popover. They are however, exactly what you want if you are incorporating your own popup into the widget. Just take all the components from your infos_popup and place them in the default slot of the f7-popup component.
Then you can just get rid of all the action based keys in the oh-button and just keep the popoverOpen key. You may want a more descriptive class name than just ‘popOver’ the element will already have that class. But if you use something like class: info-pop and just set the popoverOpen and popoverClose properties to .popover.info-pop you should be well on your way.
If you want to see an example you can just look at the code for my widget here (use the link at the bottom - the same widget also has built-in popups if you’re rather use that instead of a popover).
No worries, building the popups/popovers in the widgets does get a little involved. The basics are as follows:
In your widget you need an f7-popup or f7-popover component as a child of the main widget component. In your case, that main component is the f7-card, so your basic structure is something like this:
component: f7-card
config:
...card config
slots:
default:
- component: f7-card-content
...all your basic visible components as you're already laid out
- component: f7-popover
config:
...popover configurations
slots:
default:
...all the components for your popover
The only other step is to make sure that you have at least one component on the widget that can open the popover and some way to close the popover once it’s open. For this you have to use the f7 built-in popoverOpen and popoverClose properties; you can’t use the oh specific actions. Using popoverOpen and popoverClose, is however pretty easy. Each of them just take a css identifier that points to the element you want opened/closed. For reasons specific to css in this case it is best just to stick to css classes (which are identified with a ‘.’ in front of them). First then, you have to assign a fairly unique class name to your popover. Every popup automatically gets a class of popup and every popover gets popover, but you don’t want it to be one of these generic names in case your widget gets more complicated because then there might be some confusion as to which element you are trying to open. So, best to just add your own additional class.
Second, once you have a unique class name, then you just use that for the popoverOpen and popoverClose values. If you want to be even more precise about what you are identifying, then you can included the generic class as well by chaining together the css class names.
- component: some-widget-component
config:
popoverOpen: .popover.some-unique-class-name
...rest of the component config
If you want the popover to automatically close when you’ve interacted with it, then you just use popoverClose on any of the components in the popover that your likely to click on or specifically add a close button.
- component: f7-popover
config:
...popover configurations
slots:
default:
- component: oh-button
config:
popoverClose: .popover.some-unique-class-name
text: Close popover
...rest of popover
I’m sorry, I’m throwing in the towel - I’m giving up. Many hours spent on this now and no result. Here is my last code, maybe someone will succeed and have more success than me:
uid: shutter_widget_v9
tags: []
props:
parameters:
- description: Title of the card (blank for none)
label: Title
name: title
required: false
type: TEXT
- description: The card footer (no footer!!)
label: Footer
name: footer
required: false
type: TEXT
- description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
label: Info1
name: title1
required: true
type: TEXT
- description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
label: Info2
name: title2
required: true
type: TEXT
- description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
label: Info3
name: title3
required: true
type: TEXT
- description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
label: Info4
name: title4
required: true
type: TEXT
- description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
label: Info5
name: title5
required: true
type: TEXT
- context: item
description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
label: Item
name: item1
required: true
type: TEXT
- context: item
description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
label: Item
name: item2
required: true
type: TEXT
- context: item
description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
label: Item
name: item3
required: true
type: TEXT
- context: item
description: Item for info 4 (<u>Example:</u> <b>_Gerätetemperatur</b>)
label: Item
name: item4
required: true
type: TEXT
- context: item
description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
label: Item
name: item5
required: true
type: TEXT
- context: item
description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
label: Item
name: control
required: true
type: TEXT
- description: Set background color (blank for none)
name: background
required: false
type: TEXT
- description: Set text color (blank for none)
name: color
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: May 1, 2022, 3:36:16 AM
component: f7-card
config:
style:
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
width: 250px
height: 250px
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex flex-direction-row
- justify-content-space-evenly
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- justify-content-center
- align-items-center
style:
height: calc(100% - 30px)
- component: oh-rollershutter-card
config:
dirIconsStyle: chevron_{dir}_square_fill
item: =props.control
stopIconStyle: stop_circle_fill
style:
background-color: rgba(246, 158, 81, 0.2)
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
item: =props.item1
style:
font-size: 13px
margin-bottom: 0px
margin-left: 0px
margin-top: 5px
width: 220px
z-index: 1
title: =props.title1
- component: f7-row
config:
class:
- display-flex
- justify-content-space-evenly
- align-items-center
style:
height: 25px
slots:
default:
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
- component: f7-row
config:
class:
- display-flex
- justify-content-space-evenly
- align-items-center
style:
height: 25px
slots:
default:
slots:
default:
- component: oh-list
slots:
default:
- component: f7-list-item
slots:
default:
- component: oh-button
config:
popoverOpen: .popover.info-pop
popoverClose: .popover.info-pop
outline: true
action: popover
fill: true
text: mehr ...
Sorry, you got very close. I see from what you put here where my previous post was a little confusing. If you wish to come back to this at some point, here’s what I would do with what you’ve posted. Really I’ve just changed the level of the popover and moved the button to the body of the widget so that it’s there to allow you to open the popover:
uid: shutter_widget_v9
tags: []
props:
parameters:
- description: Title of the card (blank for none)
label: Title
name: title
required: false
type: TEXT
- description: The card footer (no footer!!)
label: Footer
name: footer
required: false
type: TEXT
- description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
label: Info1
name: title1
required: true
type: TEXT
- description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
label: Info2
name: title2
required: true
type: TEXT
- description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
label: Info3
name: title3
required: true
type: TEXT
- description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
label: Info4
name: title4
required: true
type: TEXT
- description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
label: Info5
name: title5
required: true
type: TEXT
- context: item
description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
label: Item
name: item1
required: true
type: TEXT
- context: item
description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
label: Item
name: item2
required: true
type: TEXT
- context: item
description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
label: Item
name: item3
required: true
type: TEXT
- context: item
description: Item for info 4 (<u>Example:</u> <b>_Gerätetemperatur</b>)
label: Item
name: item4
required: true
type: TEXT
- context: item
description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
label: Item
name: item5
required: true
type: TEXT
- context: item
description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
label: Item
name: control
required: true
type: TEXT
- description: Set background color (blank for none)
name: background
required: false
type: TEXT
- description: Set text color (blank for none)
name: color
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: May 1, 2022, 3:36:16 AM
component: f7-card
config:
style:
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
width: 250px
height: 250px
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex flex-direction-row
- justify-content-space-evenly
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- justify-content-center
- align-items-center
style:
height: calc(100% - 30px)
- component: oh-rollershutter-card
config:
dirIconsStyle: chevron_{dir}_square_fill
item: =props.control
stopIconStyle: stop_circle_fill
style:
background-color: rgba(246, 158, 81, 0.2)
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
item: =props.item1
style:
font-size: 13px
margin-bottom: 0px
margin-left: 0px
margin-top: 5px
width: 220px
z-index: 1
title: =props.title1
- component: oh-button
config:
popoverOpen: .popover.info-pop
outline: true
action: popover
fill: true
text: mehr ...
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
slots:
default:
- component: Label
config:
text: replace this label component with the heirarchy of components from your popup widget
@JustinG you are the greatest for me! Of course, I must continue with your submission. Take a look at what has become of it:
However, I would like to make the popover a little larger so that it at least covers part of the base widget. I would also be interested in how the titles and items are displayed in a row in the popover. Can you give me any tips on this?
Here is the current code:
uid: shutter_widget_v9
tags: []
props:
parameters:
- description: Title of the card (blank for none)
label: Title
name: title
required: false
type: TEXT
- description: The card footer (no footer!!)
label: Footer
name: footer
required: false
type: TEXT
- description: Description Info 1 (<u>Suggestion:</u> <b>Firmware</b>)
label: Info1
name: title1
required: true
type: TEXT
- description: Description Info 2 (<u>Suggestion:</u> <b>Total kWh</b>)
label: Info2
name: title2
required: true
type: TEXT
- description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
label: Info3
name: title3
required: true
type: TEXT
- description: Description Info 4 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
label: Info4
name: title4
required: true
type: TEXT
- description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
label: Info5
name: title5
required: true
type: TEXT
- context: item
description: Item for info 1 (<u>Example:</u> <b>_Firmwareaktualisierungvorhanden</b>)
label: Item
name: item1
required: true
type: TEXT
- context: item
description: Item for info 2 (<u>Example:</u> <b>_Gesamtverbrauch</b>)
label: Item
name: item2
required: true
type: TEXT
- context: item
description: Item for info 3 (<u>Example:</u> <b>_Signalstarke</b>)
label: Item
name: item3
required: true
type: TEXT
- context: item
description: Item for info 4 (<u>Example:</u> <b>_Gerätetemperatur</b>)
label: Item
name: item4
required: true
type: TEXT
- context: item
description: Item for info 5 (<u>Example:</u> <b>__Steuerung0offen100geschlossen</b>)
label: Item
name: item5
required: true
type: TEXT
- context: item
description: Item for Rollershutter Control (<u>Example:</u> <b>_Steuerung0offen100geschlossen</b>)
label: Item
name: control
required: true
type: TEXT
- description: Set background color (blank for none)
name: background
required: false
type: TEXT
- description: Set text color (blank for none)
name: color
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: May 2, 2022, 4:14:58 PM
component: f7-card
config:
style:
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
width: 250px
height: 230px
title: =props.title
left: center
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex flex-direction-row
- justify-content-space-evenly
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- justify-content-center
- align-items-center
style:
height: calc(100% - 30px)
- component: oh-rollershutter-card
config:
dirIconsStyle: chevron_{dir}_square_fill
item: =props.control
stopIconStyle: stop_circle_fill
style:
background-color: rgba(246, 158, 81, 0.2)
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
style:
font-size: 13px
margin-bottom: 0px
margin-left: 0px
margin-top: 5px
width: 220px
z-index: 1
title: =props.title1
item: =props.item1
- component: oh-button
config:
popoverOpen: .popover.info-pop
outline: true
raised: true
action: popover
fill: true
text: mehr ...
style:
position: absolute
top: 150px
left: 90px
text-align: center
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
slots:
default:
- component: oh-label-item
config:
style:
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title2
item: =props.item2
- component: oh-label-item
config:
style:
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title3
item: =props.item3
- component: oh-label-item
config:
style:
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title4
item: =props.item4
- component: oh-label-item
config:
style:
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title5
item: =props.item5
This is fairly easy. You can add style settings directly to the popover component. In this case the default width of the popover seems to be 200px so if you want to make it a little wider, you would do something like this:
You’re oh-label-items are not displaying the way you intend because they are not inside a list at the moment. All the components that end in -item are built to be the child components of a list; usually either a basic oh-list or a standalone oh-list-card. So in this case you want the fist component of your popover to be an oh-list and make all the label items children of that list, like this:
That is a little tricky. The oh-label-item is made of of several different pieces, and the only way to change the styles on the item state label part is to access it directly with css. You do this using a special property tag stylesheet and putting a full css declaration in that (this is similar to, but not the same as the style property, and you can use both in one component)… To change the text color that would look like this:
I know CSS declarations in dealing with HTML files. Some.css data had to be created and made available in specific directories.
But how does that work under Openhab 3, how is one structured and where is it stored?
When you’re working with the widgets, you don’t have to worry at all about separate css files. You can just use the stylesheet property demonstrated above and the css will be applied at that level of the page/widget (i.e., the new declarations will be applied to the widget and any of its direct descendants). Many of the page types can also take advantage of this stylesheets property as well so you can customize the look of an entire page easily if that is your desire.
The way to make this work is actually a two part process. The problem is that the stylesheet property does not get processed by the expression parser that allows for things like the x == y ? if true : if false ternary expressions. So the stylesheet property is just going to be a static string no matter what. The properties under the style heading, on the other hand, do get processed by the expression parser so we can make those dynamic, but we can’t use those to access the label text for formatting. The solution is to combine the two using css variables. We can set a variable in the style property to a dynamic expression and then reference just the static name of the variable in the stylesheet.
But that is very complicated and without their help I would never have gotten it off the ground on my own.
Once again I am very impressed and once again I say: thank you very much