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