Hi folks,
I am currently writing my own widget for displaying the DWDUnwetter warnings.
For this I created a card widget which displays the relevant data:
uid: UnwetterCard_v1
tags: []
props:
parameters:
- context: item
description: Warning "Headline"
label: Item
name: headline
required: false
type: TEXT
- context: item
description: Warning "Type"
label: Item
name: type
required: false
type: TEXT
- context: item
description: Warning "Severity"
label: Item
name: severity
required: false
type: TEXT
- context: item
description: Warning "Severity color"
label: Item
name: severityColor
required: false
type: TEXT
- context: item
description: Warning "Valid from"
label: Item
name: validFrom
required: false
type: TEXT
- context: item
description: Warning "Valid to"
label: Item
name: validTo
required: false
type: TEXT
- context: item
description: Warning "Description"
label: Item
name: description
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 20, 2022, 1:02:43 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
title: =items[props.headline].state
slots:
content:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-list-item
config:
title: =items[props.type].state
icon: f7:wind
iconColor: =items[props.severityColor].displayState
badgeColor: =items[props.severityColor].displayState
badge: =items[props.severity].displayState
- component: oh-label-item
config:
title: "von:"
item: =props.validFrom
- component: oh-label-item
config:
title: "bis: "
item: =props.validTo
- component: f7-card
config:
content: =items[props.description].state
I want to display up to 3 warnings within an oh-swiper-card
:
Corresponding code:
component: oh-swiper-card
config:
scrollbar: false
pagination: true
navigation: true
footer: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'
noBorder: false
noShadow: false
outline: false
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline1
type: DWDUnwetterWarnungen_Type1
severity: DWDUnwetterWarnungen_Severity1
severityColor: DWDUnwetterWarnungen_SeverityColor1
validFrom: DWDUnwetterWarnungen_ValidFrom1
validTo: DWDUnwetterWarnungen_ValidTo1
description: DWDUnwetterWarnungen_Description1
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline2
type: DWDUnwetterWarnungen_Type2
severity: DWDUnwetterWarnungen_Severity2
severityColor: DWDUnwetterWarnungen_SeverityColor2
validFrom: DWDUnwetterWarnungen_ValidFrom2
validTo: DWDUnwetterWarnungen_ValidTo2
description: DWDUnwetterWarnungen_Description2
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline3
type: DWDUnwetterWarnungen_Type3
severity: DWDUnwetterWarnungen_Severity3
severityColor: DWDUnwetterWarnungen_SeverityColor3
validFrom: DWDUnwetterWarnungen_ValidFrom3
validTo: DWDUnwetterWarnungen_ValidTo3
description: DWDUnwetterWarnungen_Description3
The invalid warnings are filled with UNDEF, this status can be queried by the “warning” channel of the DWDUnwetter binding :
In my first euphoria I thought I can just set the widgets on the slides to invisible:
- component: widget:UnwetterCard_v1
config:
visible: =items.DWDUnwetterWarnungen_Warning3.state==false
but that didn’t work well as the slide is still present but only blank
Is there any way to conditonally exclude the slide component from rendering based on an item’s state?
Thanks for your help!
Cheers
Jonathan
fregger65
(Frans)
February 20, 2022, 12:59am
2
Not sure if it helps, but I’m using this for something similar:
visible: =items.GenericMQTTThing_PumpStatus.state === ‘Failure’
JustinG
(JustinG)
February 20, 2022, 2:31am
3
The only way I have found to get the swiper to recalculate the number of slides is to force it to refresh. Read about using the key
property here (you only need to force a refresh on item change, you obviously don’t need the section on the automatic timed refresh):
As people migrate over to OH3 and the MainUI from other UIs, many are surprised to find that MainUI charts are static on a loaded page and won’t refresh unless the page is reloaded. Here I’m providing a fairly simple solution that allows you to set up timed, automatic refreshes for charts on a page (or another widget that you have configured with custom content that doesn’t refresh).
When Do Widgets Refresh?
So many of the standard widgets and components do respond to changes in item states …
Just add a ‘key’ property to the base of your swiper and ‘visible’ properties to each of the slides. As long as the key is populated with the same item states that determine the slide visibility, when that item changes, the swiper will refresh with only the visible slides.
Hi @JustinG ,
unfortunately I was not able to get the swiper to hide the invisible pages.
Did you really use the oh-swiper-card in your setup?
But : Meanwhile I was doing some searching for the underlaying f7 and vue features and found the solution in building the swiper with native f7 parts:
(this is only an excerpt from a page, actually not a full widget code - if anyone wants to use it rightaway )
- component: f7-card
config: {}
slots:
default:
- component: f7-card-header
config:
visible: false
slots:
default:
- component: Label
config:
text: ""
- component: f7-card-content
slots:
default:
- component: f7-swiper
config:
scrollbar: false
pagination: true
navigation: true
noBorder: false
noShadow: false
outline: false
params:
slidesPerView: 1
observer: true
observeParents: true
observeSlideChildren: true
watchSlidesProgress: true
slots:
default:
- component: f7-swiper-slide
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline1
type: DWDUnwetterWarnungen_Type1
severity: DWDUnwetterWarnungen_Severity1
severityColor: DWDUnwetterWarnungen_SeverityColor1
validFrom: DWDUnwetterWarnungen_ValidFrom1
validTo: DWDUnwetterWarnungen_ValidTo1
description: DWDUnwetterWarnungen_Description1
- component: f7-swiper-slide
config:
visible: =items.DWDUnwetterWarnungen_Warning2.state=="ON"
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline2
type: DWDUnwetterWarnungen_Type2
severity: DWDUnwetterWarnungen_Severity2
severityColor: DWDUnwetterWarnungen_SeverityColor2
validFrom: DWDUnwetterWarnungen_ValidFrom2
validTo: DWDUnwetterWarnungen_ValidTo2
description: DWDUnwetterWarnungen_Description2
- component: f7-swiper-slide
config:
visible: =items.DWDUnwetterWarnungen_Warning3.state=="ON"
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline3
type: DWDUnwetterWarnungen_Type3
severity: DWDUnwetterWarnungen_Severity3
severityColor: DWDUnwetterWarnungen_SeverityColor3
validFrom: DWDUnwetterWarnungen_ValidFrom3
validTo: DWDUnwetterWarnungen_ValidTo3
description: DWDUnwetterWarnungen_Description3
- component: f7-swiper-slide
config:
visible: =items.DWDUnwetterWarnungen_Warning4.state=="ON"
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline4
type: DWDUnwetterWarnungen_Type4
severity: DWDUnwetterWarnungen_Severity4
severityColor: DWDUnwetterWarnungen_SeverityColor4
validFrom: DWDUnwetterWarnungen_ValidFrom4
validTo: DWDUnwetterWarnungen_ValidTo4
description: DWDUnwetterWarnungen_Description4
- component: f7-swiper-slide
config:
visible: =items.DWDUnwetterWarnungen_Warning5.state=="ON"
slots:
default:
- component: widget:UnwetterCard_v1
config:
headline: DWDUnwetterWarnungen_Headline5
type: DWDUnwetterWarnungen_Type5
severity: DWDUnwetterWarnungen_Severity5
severityColor: DWDUnwetterWarnungen_SeverityColor5
validFrom: DWDUnwetterWarnungen_ValidFrom5
validTo: DWDUnwetterWarnungen_ValidTo5
description: DWDUnwetterWarnungen_Description5
- component: f7-card-footer
config:
config: {}
slots:
default:
- component: Label
config:
text: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'
The used widget “UnwetterCard_v1” is this one (not completely finished, e.g. the icons for the different types of warnings - currently only “wind” is displayed):
uid: UnwetterCard_v1
tags: []
props:
parameters:
- context: item
description: Warning "Headline"
label: Item
name: headline
required: false
type: TEXT
- context: item
description: Warning "Type"
label: Item
name: type
required: false
type: TEXT
- context: item
description: Warning "Severity"
label: Item
name: severity
required: false
type: TEXT
- context: item
description: Warning "Severity color"
label: Item
name: severityColor
required: false
type: TEXT
- context: item
description: Warning "Valid from"
label: Item
name: validFrom
required: false
type: TEXT
- context: item
description: Warning "Valid to"
label: Item
name: validTo
required: false
type: TEXT
- context: item
description: Warning "Description"
label: Item
name: description
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 20, 2022, 3:26:29 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
margin-left: 5px
margin-right: 5px
title: =items[props.headline].state
slots:
content:
- component: oh-list-card
config:
noBorder: false
noShadow: true
outline: false
slots:
default:
- component: oh-list-item
config:
title: =items[props.type].state
icon: f7:wind
iconColor: =items[props.severityColor].displayState
badgeColor: =items[props.severityColor].displayState
badge: =items[props.severity].displayState
- component: oh-label-item
config:
title: "von:"
item: =props.validFrom
- component: oh-label-item
config:
title: "bis: "
item: =props.validTo
- component: f7-card
config:
noBorder: false
noShadow: true
outline: false
content: =items[props.description].state
For now, there is no automatic refresh active - I do not need it as the page is not the frontpage and gets usually reloaded when opened on demand. But many thanks for the hint with the key property. I will think about that later.
There is one glitch with the automatic refresh is: When you are just looking on the screen maybe on slide 3 and in that moment the data gets updated (because item refreshed, …) the slides will jump back to slide 1 .
Cheers
Jonathan
JustinG
(JustinG)
February 23, 2022, 1:30am
5
No, I use the base f7 components, but I’m surprised to hear that it doesn’t work with the swiper card, the key change should impact children of the refreshed element as well, as I understand it.
Glad to hear you found a suitable workaround.