I built the following shutter widget with 5 information fields myself. Now I would like to change this to save space so that the last 4 pieces of information can only be seen via a POPUP. If possible, this window should be opened via a button.
Unfortunately, I am currently reaching my limits with this. Can someone help me?
Thanks in advance.
Here is the previous code:
uid: shutter_widget_v5
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>Interne Temperatur</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>Firmware</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>_Geratetemperatur</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>_Firmwareaktualisierungvorhanden</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 9, 2021, 3:16:39 AM
component: f7-card
config:
style:
width: 250px
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
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
style:
width: 250px
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:
item: =props.control
dirIconsStyle: chevron_{dir}_square_fill
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:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title1
item: =props.item1
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
z-index: 1
title: =props.title2
item: =props.item2
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title3
item: =props.item3
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title4
item: =props.item4
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title5
item: =props.item5
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: