Hey there,
I would like to create my own page. Therefore I am looking for a widget that looks like the widgets in the built-in locations tab.
I mean this:
and when clicking on it this appears with an “smooth effect” :
How could I achieve the same or at least similar when creating a own page?
Could you experts give me a hint?
Greetings Nic
Depending on your needs you can e.g. link you model.
You can have a look at this, there are some examples:
Hmmm. First of all: thank you.
I think, what I am looking for is a expandable card. I tried several ones - but the only thing I get is a blurred screen:
I used this code (found in the forum):
uid: widget_heating-TRVControls
tags: []
props:
parameters:
- description: Location
label: Location
name: location
required: false
type: TEXT
- context: item
label: Humidity
name: humid
required: false
type: TEXT
- context: item
label: Temperature
name: temp
required: false
type: TEXT
- context: item
label: Target Temperature
name: targetTemp
required: false
type: TEXT
- context: item
label: Heating Power
name: heatP
required: false
type: TEXT
- context: item
label: Zone Operation Mode
name: zoneOp
required: false
type: TEXT
- context: item
label: HVAC Mode
name: hvac
required: false
type: TEXT
- context: item
label: Timer Duration
name: timerD
required: false
type: TEXT
- context: item
label: Overlay End Time
name: oETime
required: false
type: TEXT
- context: item
label: Battery Low Alarm
name: battery
required: false
type: TEXT
- context: item
label: Contact Sensor 1
name: open1
required: false
type: TEXT
- context: item
label: Contact Sensor 2
name: open2
required: false
type: TEXT
timestamp: Jan 24, 2022, 8:23:19 PM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- card-expandable-animate-width
style:
background: '=(items[props.temp].state < "17") ? "linear-gradient(to bottom, hsla(207, 90%, 54%, 1), hsla(207, 90%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "17" && items[props.temp].state < "18") ? "linear-gradient(to bottom, hsla(130, 65%, 57%, 1), hsla(130, 65%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "18" && items[props.temp].state < "19") ? "linear-gradient(to bottom, hsla(66, 70%, 54%, 1), hsla(66, 70%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "19" && items[props.temp].state < "20") ? "linear-gradient(to bottom, hsla(48, 100%, 50%, 1), hsla(48, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "20" && items[props.temp].state < "22") ? "linear-gradient(to bottom, hsla(35, 100%, 50%, 1), hsla(35, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "22" && items[props.temp].state < "23") ? "linear-gradient(to bottom, hsla(20, 100%, 57%, 1), hsla(20, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "23" && items[props.temp].state < "24") ? "linear-gradient(to bottom, hsla(349, 100%, 59%, 1), hsla(349, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "24") ? "linear-gradient(to bottom, hsla(3, 100%, 59%, 1), hsla(3, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": "white"'
height: 170px
width: auto
margin: 5px
margin-top: 10px
slots:
default:
- component: oh-button
config:
iconF7: ellipsis
iconSize: 30px
color: gray
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-right: 15px
padding-bottom: 40px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
config:
style:
padding-top: 30px
slots:
default:
- component: f7-icon
config:
material: '=(items[props.heatP].state > 0 ) ? "local_fire_department": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "sensor_window" : "power_settings_new"'
size: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "48px" : (items[props.heatP].state == 0) ? "50px" : 40 ++ items[props.heatP].state + "px"'
color: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "lightblue" : (items[props.heatP].state == 0) ? "red": (items[props.heatP].state >= 1 && items[props.heatP].state < 20) ? "lightblue": (items[props.heatP].state >= 20 && items[props.heatP].state < 40) ? "teal": (items[props.heatP].state >= 40 && items[props.heatP].state < 60) ? "yellow": (items[props.heatP].state >= 60 && items[props.heatP].state < 80) ? "orange": (items[props.heatP].state >= 80 && items[props.heatP].state <= 100) ? "red": "white"'
style:
opacity: '=(items[props.heatP].state > 0 ) ? items[props.heatP].state * 1.5 + "%": "100%"'
position: absolute
top: '=(items[props.heatP].state > 0 ) ? 120 + -items[props.heatP].state + "px": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "95px" :"95px"'
right: '=(items[props.heatP].state > 0 ) ? 40 + -items[props.heatP].state * 0.5 + "px": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "16px" : "15px"'
- component: f7-chip
config:
text: '=(items[props.heatP].state >= 0) ? items[props.heatP].displayState : "error"'
color: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "black" : (items[props.heatP].state == 0) ? "black": (items[props.heatP].state >= 1 && items[props.heatP].state < 20) ? "lightblue": (items[props.heatP].state >= 20 && items[props.heatP].state < 40) ? "teal": (items[props.heatP].state >= 40 && items[props.heatP].state < 60) ? "yellow": (items[props.heatP].state >= 60 && items[props.heatP].state < 80) ? "orange": (items[props.heatP].state >= 80 && items[props.heatP].state <= 100) ? "red": "white"'
style:
position: absolute
top: 140px
right: 20px
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 30px
color: black
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: oh-link
config:
class:
- cell-open-button
- card-opened-fade-out
- justify-content-flex-end
style:
width: auto
height: auto
position: absolute
top: 0
left: 0
z-index: 0
- component: f7-block
config:
class:
- no-padding
style:
margin: 0px
height: 200px
width: auto
slots:
default:
- component: f7-row
config:
style:
height: 65px
width: 100%
white-space: nowrap
flex-wrap: nowrap
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =props.location
style:
font-weight: 600
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-chip
config:
text: =items[props.temp].displayState
color: '=(items[props.temp].state > "1" && items[props.temp].state < "17") ? "blue": (items[props.temp].state >= "17" && items[props.temp].state < "18") ? "green": (items[props.temp].state >= "18" && items[props.temp].state < "19") ? "lime": (items[props.temp].state >= "19" && items[props.temp].state < "20") ? "yellow": (items[props.temp].state >= "20" && items[props.temp].state < "22") ? "orange": (items[props.temp].state >= "22" && items[props.temp].state < "23") ? "deeporange": (items[props.temp].state >= "23" && items[props.temp].state < "24") ? "pink": (items[props.temp].state >= "24") ? "red": "white"'
- component: f7-row
config:
visible: true
style:
height: auto
width: 100%
overflow: hidden
margin-bottom: 5px
slots:
default:
- component: f7-col
config:
style:
flex-wrap: nowrap
align-self: flex-end
slots:
default:
- component: f7-row
config:
class:
- justify-content-flex-start
style:
flex-wrap: nowrap
slots:
default:
- component: f7-icon
config:
f7: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "power" : "arrow_up_to_line"'
color: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "red" : (items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "gray"'
size: 18px
- component: Label
config:
text: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "OPEN WINDOW" : (items[props.hvac].state == "OFF") ? "OFF": items[props.targetTemp].state'
style:
margin-left: 8px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-row
config:
visible: '=(items[props.timerD].state > "0") ? "true": "false"'
style:
white-space: nowrap
flex-wrap: nowrap
height: auto
class:
- justify-content-flex-start
slots:
default:
- component: f7-icon
config:
f7: timer
size: 20px
color: blue
- component: Label
config:
text: =items[props.timerD].displayState
style:
margin-left: 6px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-block
config:
style:
width: auto
class:
- card-prevent-open
- card-content-padding
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
title: On/Off
icon: f7:power
iconColor: '=(items[props.hvac].state == "HEAT") ? "green": "red"'
actionItem: =props.hvac
action: toggle
actionCommand: HEAT
actionCommandAlt: OFF
badge: '=(items[props.hvac].state == "HEAT") ? "ON" : "OFF"'
badge-color: '=(items[props.hvac].state == "HEAT") ? "green" : "red"'
- component: oh-slider-item
config:
title: Target Temperature
item: =props.targetTemp
icon: f7:arrow_up_to_line
iconColor: '=(items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "white"'
iconUseState: true
color: '=(items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "white"'
min: 15
max: 25
label: true
scale: true
scaleSteps: 10
visible: '=(items[props.targetTemp].state == "NULL") ? "false": "true"'
- component: oh-list-item
config:
title: Mode
icon: f7:app_badge
iconColor: '=(items[props.zoneOp].state == "SCHEDULE") ? "green" : (items[props.zoneOp].state == "UNTIL_CHANGE") ? "yellow" : (items[props.zoneOp].state == "MANUAL") ? "red" : (items[props.zoneOp].state == "TIMER") ? "blue" : "white"'
badge: =items[props.zoneOp].displayState
badge-color: '=(items[props.zoneOp].state == "SCHEDULE") ? "green" : (items[props.zoneOp].state == "UNTIL_CHANGE") ? "yellow" : (items[props.zoneOp].state == "MANUAL") ? "red" : (items[props.zoneOp].state == "TIMER") ? "blue" : "white"'
action: options
actionItem: =props.zoneOp
- component: oh-stepper-item
config:
title: Timer Duration
footer: in Minutes
item: =props.timerD
icon: f7:timer
iconColor: '=(items[props.timerD].state > "0") ? "blue": "gray"'
iconUseState: true
color: '=(items[props.timerD].state > "0") ? "blue": "gray"'
step: 30
fill: true
round: true
autorepeat: true
autorepeatDynamic: true
small: true
Do you have an idea, what’s going wrong here?