I will try to make a solution for myself from the example of @DrRSatzteil.
I would, however, welcome any other suggestions.
I now have a result that I am not entirely satisfied with. Here 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 29, 2022, 5:30:07 AM
component: f7-card
config:
style:
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
width: 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
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:
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-link
config:
action: popup
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
title6: ='weitere Daten:'
actionPosition: center
text: ='mehr...'
uid: infos_popup_v7
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Apr 29, 2022, 5:36:40 AM
component: f7-card
config:
style:
width: 250px
background: '=(props.background) ? props.background : ""'
color: peru
filter: brightness(95%)
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- 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
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
- component: oh-button
config:
class:
- margin-horizontal
fill: true
large: true
popupClose: true
round: true
text: ='Close'
Unfortunately, I haven’t managed to reduce the Image popup widget to a specific size yet.
Does anyone of you have a tip for me?
Thanks in advance!
You may want to try a popover instead. It only has the size of your components unlike the relatively big popup component.
I already had this idea. However, I didn’t manage to implement it. How does the code have to be structured then?
Could you help me with this?
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
uid: infos_popup_v7
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Apr 30, 2022, 5:00:35 AM
component: f7-card
config:
style:
position: absolute
background: '=(props.background) ? props.background : ""'
color: peru
filter: brightness(95%)
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
style:
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:
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:
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:
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title5
item: =props.item5
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).
Many thanks for the answer. I understood part of your solution. However, I have to deal with her example first, which will take me some time.
Sorry, this is very difficult for me, are there any other examples I could look at?
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.
- component: f7-popover
config:
class: some-unique-class-name
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 impressed how much effort they put into helping me. Thanks for that, but I can deal with that later.
I’ll get back…
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 ...
Thank you once again for your support. It seems as if I’m reaching my limits here as a layman.
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
Note:
May I send you a personal message?
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:
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
width: 250px
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:
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
width: 250px
slots:
default:
- component: oh-list
config:
simpleList: 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
...rest of the label items...
Of course.
I think everything is working very well now. Here is the result again:
and the 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, 5:54:09 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 / weniger ...
style:
position: absolute
top: 150px
left: 55px
text-align: center
- component: f7-popover
config:
class: info-pop
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
width: 250px
slots:
default:
- component: oh-list
config:
simpleList: true
slots:
default:
- component: oh-label-item
config:
style:
font-size: 14px
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: 14px
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: 14px
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: 14px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title5
item: =props.item5
I still have one question: how do you set the color of the item values?
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:
- component: oh-label-item
config:
style:
font-size: 14px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
-index: 1
title: =props.title5
item: =props.item5
stylesheet: >
.item-after div {
color: green
}
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.