All i have created following widget for my weather station. The problem is when the popup is shown i have to be able to scroll to bottom and top and i only want to close the popup window when im back at the top and swiping down (same effects as some refresh screens but instead of refreshing closing the popup) Is there any way to do this. Now the swiping closes the popup window to soon
uid: Huis_Screens2
tags: []
props:
parameters:
- description: Titel
label: Titel
name: title
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 27, 2025, 8:56:36 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark'
? 'DimGrey' : 'GhostWhite'"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: auto
max-width: 300px
min-width: 273px
noShadow: false
width: auto
slots:
default:
- component: oh-button
config:
action: popup
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: doc_plaintext
iconSize: 40px
popupOpen: .weerstationDetails
style:
padding-bottom: 40px
padding-right: 5px
padding-top: 3px
position: absolute
right: 5px
top: 0
z-index: 998
- component: f7-card-content
slots:
default:
- component: f7-row
config:
style:
height: 30px
position: relative
slots:
default:
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: alarm
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisObservationTime.displayState
- component: f7-col
slots:
default:
- component: oh-link
config:
action: command
actionCommand: "=items.davisLiveData.state === 'ON' ? 'OFF' : 'ON'"
actionItem: davisLiveData
style:
margin-left: 60px
slots:
default:
- component: oh-icon
config:
color: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
height: 30px
icon: "=items.davisLiveData.state === 'OFF' ? 'material:replay_30' :
'material:replay_circle_filled'"
width: 30px
- component: f7-row
config:
style:
height: 30px
position: relative
slots:
default:
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: thermometer
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideTemperature.displayState
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: drop
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideHumidity.displayState
- component: f7-row
config:
style:
height: 30px
position: relative
slots:
default:
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: cloud_drizzle
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideRainFallToday.displayState
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: cloud_drizzle
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideRainItensity.displayState
- component: f7-row
config:
style:
height: 30px
position: relative
slots:
default:
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: wind
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideWindSpeed.displayState
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: wind
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideWindSpeedHi10Min.displayState
- component: f7-col
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: compass
iconSize: 20
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 16px
margin-bottom: 10px
text: =items.davisOutsideWindDirection.displayState
- component: f7-popup
config:
class: weerstationDetails
swipeToClose: true
style:
overflow-y: scroll
slots:
default:
- component: oh-button
config:
action: popup
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
iconF7: clear_fill
iconSize: 40px
popupClose: .weerstationDetails
style:
height: 50px
position: absolute
right: 10px
top: 20px
z-index: 99999999
- component: f7-card
slots:
default:
- component: Label
config:
style:
font-size: 20px
margin-bottom: 10px
margin-top: 20px
text: Druk / Luchtvochtigheid
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisInsidePresssure
badge: =items.davisInsidePresssure.displayState
icon: f7:speedometer
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Druk
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisInsideHumidity
badge: =items.davisInsideHumidity.displayState
icon: f7:drop
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Rel luchtvocht binnen
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideHumidity
badge: =items.davisOutsideHumidity.displayState
icon: f7:drop
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Rel luchtvocht buiten
- component: Label
config:
style:
font-size: 20px
margin-bottom: 10px
margin-top: 20px
text: Temperatuur
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- THBinnenCT
badge: =items.THBinnenCT.displayState
icon: f7:thermometer
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Binnen
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideTemperature
badge: =items.davisOutsideTemperature.displayState
icon: f7:thermometer
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Buiten
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideTemperatureDewPoint
badge: =items.davisOutsideTemperatureDewPoint.displayState
icon: f7:thermometer
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Dauwpunt
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideTemperatureWindChill
badge: =items.davisOutsideTemperatureWindChill.displayState
icon: f7:thermometer
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Gevoels
- component: Label
config:
style:
font-size: 20px
margin-bottom: 10px
margin-top: 20px
text: Neerlag
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideRainItensity
badge: =items.davisOutsideRainItensity.displayState
icon: f7:cloud_drizzle
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Huidige intensiteit
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideRainItensityHi15min
badge: =items.davisOutsideRainItensityHi15min.displayState
icon: f7:cloud_drizzle
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Max intenisteit 15'
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideRainFallToday
badge: =items.davisOutsideRainFallToday.displayState
icon: f7:drop
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Neerslag vandaag
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideRainFallLast24u
badge: =items.davisOutsideRainFallLast24u.displayState
icon: f7:drop
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Neerslag 24u
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideRainFallMonth
badge: =items.davisOutsideRainFallMonth.displayState
icon: f7:drop
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Neerslag maand
- component: Label
config:
style:
font-size: 20px
margin-bottom: 10px
margin-top: 20px
text: Wind
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideWindSpeed
badge: =items.davisOutsideWindSpeed.displayState
icon: f7:wind
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Huidig
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideWindSpeedAvg10Min
badge: =items.davisOutsideWindSpeedAvg10Min.displayState
icon: f7:wind
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Gemiddelde 10 min
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideWindSpeedHi10Min
badge: =items.davisOutsideWindSpeedHi10Min.displayState
icon: f7:wind
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Max 10 min
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- davisOutsideWindDirection
badge: =items.davisOutsideWindDirection.displayState
icon: f7:compass
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: Windrichting
header:
- component: Label
config:
style:
font-size: 20px
margin-top: 0px
text: "=props.title ? props.title : ''"