Hello all,
I generated an overview Widget for my weather and when I click on the widget it should navigate to the subpage Temperatures.
Here is my Code of the widget
uid: widget_temperatureoverviewlink
tags:
- Soll Tag
- homekit-look
- in use
props:
parameters:
- description: Location?
label: Prop 1
name: prop1
required: false
type: TEXT
- description: Thermostate icon f7
label: f7 icon name
name: icon1
required: false
type: TEXT
- description: Humidity icon f7
label: f7 icon name
name: icon2
required: false
type: TEXT
- context: item
description: A Temperature item to display
label: Item
name: itemTemp
required: false
type: TEXT
- context: item
description: A Set-Temperature item to display
label: Item
name: itemTempSoll
required: false
type: TEXT
- context: item
description: An Humidity item to display
label: Item
name: itemHum
required: false
type: TEXT
- context: item
description: the valve state
label: Item
name: itemValve
required: false
type: TEXT
- context: item
description: Item for temperature channel
label: Ambient temperature
name: itemAmbientTemp
required: false
type: TEXT
- context: item
description: Item for outdoor temperature channel
label: Outdoor temperature
name: itemOutdoorTemp
required: false
type: TEXT
- context: item
description: Item for target temperature channel
label: Target temperature
name: itemTargetTemp
required: true
type: TEXT
- context: item
description: Item for operation mode channel
label: Operation mode
name: itemMode
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 13, 2023, 5:34:19 PM
component: f7-card
config:
action: navigate
actionPage: page:temperatures
actionPageTransition: f7-circle
class:
- card-expandable-animate-width
expandable: true
noShadow: false
style:
--f7-card-expandable-margin-horizontal: 5px
--f7-card-expandable-margin-vertical: 10px
--f7-card-expandable-tablet-border-radius: 2px
--moz-user-select: none
--ms-user-select: none
--webkit-user-select: none
background-color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "white" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "white" : "rgba(228,228,228,0.9)"'
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
display: flex;
flex-direction: column
height: 120px
justify-content: space-between
max-height: 120px
max-width: 400px
min-height: 120px
min-width: 110px
slots:
default:
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-block
config:
class:
- no-padding
style:
margin: -4px
slots:
default:
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
class:
- align-self-center
f7: =props.icon1
size: 22
style:
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
margin-left: -6px
margin-top: 0px
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
font-size: 14px
font-weight: 500
margin-left: -4px
margin-top: 0px
text: =props.prop1
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "red" : "black"'
font-size: 40px
font-weight: 350
line-height: 1.1
margin-left: -2px
margin-top: 20px
text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: =props.icon2
size: 16
style:
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
left: 0px
top: 0px
visible: =props.itemHum !== undefined
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
font-size: 13px
font-weight: 500
left: 0px
margin-top: 0px
text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%'
visible: =props.itemHum !== undefined
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: arrowshape_turn_up_right
size: 16
style:
color: rgb(0,0,0,0.5)
opacitiy: 0.5
padding-right: 0px
padding-top: 83px
position: absolute
right: 0
top: 0
z-index: 999
- component: f7-chip
config:
bgColor: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"'
style:
border-radius: 25px 25px 25px 25px
color: white
margin-top: -7px
position: absolute
right: -3px
size: 20
top: 8px
z-index: 2
text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0)
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
height: 100%
left: 2
position: absolute
top: 0
width: 100%
z-index: 1
trendItem: =[props.itemTemp]
- component: oh-link
config:
action: group
actionGroupPopupItem: =[props.itemGroup]
class:
- card-prevent-open
style:
height: 100%
left: 0
position: absolute
top: 0
width: 100%
z-index: 1
but actually there is a popup openning and not a navigation to the supbage. Where is the correct position to use the action configuration?
action: navigate
actionPage: page:temperatures
actionPageTransition: f7-circle
Thank you
