Hi, i need some help with making a expandable widget.
I reused some code from the forum but expanding the widget gives me some unexpected result the main part of the widget is scaling to the windows and looses the original px sizes.
What is the right way to expand the widget and keep the predefined sizes?
uid: semanticHomeMenu_RadiatorControl
tags:
props:
parameters:
- description: Item Name
name: itemname
required: true
type: TEXT
groupName: labeling
- description: Room Name
name: roomname
required: false
type: TEXT
groupName: labeling
- context: item
description: Switch Item
label: Item
name: switchitem
required: false
type: TEXT
groupName: items
- context: item
description: Dimmer Item
label: Item
name: dimmeritem
required: false
type: TEXT
groupName: items
- description: Icon name (Dynamic icons are supported)
name: icon
required: false
type: TEXT
groupName: icons
- description: OFF = Horizontal orientation | ON = Vertical orientation.
label: Vertical toggle orientation.
name: switchorientation
required: false
type: BOOLEAN
groupName: items
- description: Card background color | “ON” state
name: bgcolorON
required: false
type: TEXT
groupName: facecolors
- description: Card background color | “OFF” state
name: bgcolorOFF
required: false
type: TEXT
groupName: facecolors
- description: Switch backround color | “ON” state
name: switchONbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch background color | “OFF” state
name: switchOFFbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch handle color | “ON” state
name: switchhandleONcolor
required: false
type: TEXT
groupName: facecolors
- description: Switch handle color | “OFF” state
name: switchhandleOFFcolor
required: false
type: TEXT
groupName: facecolors
- description: Slider Color
name: sliderbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Slider label background color (dimmervalue background)
name: sliderlabelbgcolor
required: false
type: TEXT
groupName: facecolors
- description: Font color device name.
name: devicefontcolor
required: false
type: TEXT
groupName: fontcolors
- description: Font color room name.
name: roomfontcolor
required: false
type: TEXT
groupName: fontcolors
- description: Label font color (dimmervalue).
name: dimmerlabelfontcolor
required: false
type: TEXT
groupName: fontcolors
parameterGroups:
- name: labeling
label: Name definitions
description: Please enter a name for device and location.
- name: icons
label: Icon names.
description: Please enter an icon name, e.g., lightbulb. Move (dynamic) icons
into the conf/icons/classic/ directory.
- name: items
label: Widget Items
- name: facecolors
label: Face Colors
description: Please enter color informations for the indivual face elements. No
value = default widget element color. Use values like rgba(250, 0, 0, 1)
for red or simply use the color name, e.g., red,blue,pink.
- name: fontcolors
label: Font/Text Colors
description: Please enter color values for the indivual text element. No value =
default widget text color.
timestamp: Apr 24, 2024, 12:35:51 PM
component: f7-card
config:
class:
- card-expandable
expandable: true
backdrop: false
style:
height: 500px
margin: 5px
margin-top: 10px
swipeToClose: true
slots:
default:
- component: oh-slider
config:
class:
- card-prevent-open
item: =props.dimmeritem
label: true
max: 100
min: 0
releaseOnly: true
scale: false
step: 1
style:
–f7-range-bar-active-bg-color: ‘=props.sliderbgcolor ? props.sliderbgcolor : “rgba(120, 0, 120, 1)”’
–f7-range-bar-bg-color: ‘=!items[props.switchitem].state == “ON” ?
“transparent” : “transparent”’
–f7-range-bar-border-radius: 10px
–f7-range-bar-size: 120px
–f7-range-knob-color: transparent
–f7-range-knob-size: 20px
–f7-range-label-bg-color: ‘=!props.sliderlabelbgcolor == “” ?
props.sliderlabelbgcolor : “rgba(170, 0, 170, 0.5)”’
–f7-range-label-border-radius: 5px
–f7-range-label-font-size: 50px
–f7-range-label-font-weight: 400
–f7-range-label-padding: 10px 20px
–f7-range-label-size: 40px
–f7-range-label-text-color: ‘=props.dimmerlabelfontcolor ?
props.dimmerlabelfontcolor : “rgba(240, 210, 240, 1)”’
height: 120px
position: absolute
top: 0px
left: 0px
width: 90%
unit: “%”
visible: “=props.dimmeritem ? true : false”
- component: oh-toggle
config:
class:
- card-prevent-open
- ‘=props.switchorientation ? “large-vertical-toggle” : “”’
item: =props.switchitem
style:
–f7-theme-color: ‘=props.switchONbgcolor ? props.switchONbgcolor :
“rgba(170,0,170,1)”’
–f7-toggle-border-color: rgba(0,0,0,0.5)
–f7-toggle-handle-color: ‘=items[props.switchitem].state == “OFF” &&
!props.switchhandleOFFcolor ? “rgba(60,60,60,1)” :
items[props.switchitem].state == “OFF” && props.switchhandleOFFcolor
? props.switchhandleOFFcolor : items[props.switchitem].state == “ON”
&& !props.switchhandleONcolor ? “rgba(255,255,255,1)” :
items[props.switchitem].state == “ON” && props.switchhandleONcolor ?
props.switchhandleONcolor : items[props.switchitem].state == “OFF”
&& !props.switchhandleOFFcolor && !props.switchhandleONcolor ?
“rgba(60,60,60,1)” : items[props.switchitem].state == “ON” &&
!props.switchhandleOFFcolor && !props.switchhandleONcolor ?
“rgba(255,255,0,1)” : “”’
–f7-toggle-height: ‘=props.switchorientation ? “20px” : “40px”’
–f7-toggle-inactive-color: ‘=props.switchOFFbgcolor ? props.switchOFFbgcolor :
“rgba(20,20,20,1)”’
–f7-toggle-width: ‘=props.switchorientation ? “40px” : “80px”’
position: absolute
right: 10%
top: 35px
visible: “=props.switchitem ? true : false”
- component: f7-row
config:
style:
overflow: hidden
pointer-events: none
position: absolute
text-overflow: ellipse
top: 35px
user-select: none
white-space: nowrap
width: 100%
slots:
default:
- component: f7-col
config:
style:
left: 2%
position: relative
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
min-width: 50px
width: 10
slots:
default:
- component: oh-icon
config:
height: 55
icon: ‘=props.icon ? props.icon : “lightbulb”’
state: “=props.dimmeritem ? items[props.dimmeritem].state :
items[props.switchitem].state”
style:
left: calc(50% - 27px)
pointer-events: none
top: calc(50% - 27px)
user-select: none
- component: f7-col
config:
width: 40
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
id: itemdescfooter
slots:
default:
- component: Label
config:
style:
color: ‘=props.devicefontcolor ? props.devicefontcolor : “rgba(240, 210, 240,
1)”’
font-size: 30px
font-weight: 400
left: 0
line-height: 30px
mix-blend-mode: brighten
padding: 0px
text-shadow: 0px 2px 15px rgba(0, 0, 0,0.2)
user-select: none
text: ‘=props.itemname ? props.itemname : “Nazwa”’
- component: f7-row
slots:
default:
- component: f7-col
config:
id: itemdescfooter
slots:
default:
- component: Label
config:
style:
color: ‘=props.roomfontcolor ? props.roomfontcolor : “rgba(200,200,200,0.6)”’
font-size: 16px
left: 0
line-height: 16px
mix-blend-mode: brighten
padding: 2px
pointer-events: none
text-shadow: 0px 0px 10px rgba(0, 0, 0,0.2)
user-select: none
text: ‘=props.roomname ? props.roomname : “Lokalizacja”’
- component: f7-col
config:
id: spacer
width: 50
slots:
default:
- component: Label
config:
style:
color: rgba(250,250,250,0.6)
font-size: 25px
left: 0
line-height: 50px
pointer-events: none
text-align: left
text-shadow: 2px 2px 5px rgba(0,0,0,0.2)
user-select: none
- component: oh-button
config:
class:
- cell-open-button
- card-opened-fade-out
color: gray
iconF7: ellipsis
iconSize: 50px
style:
padding-bottom: 0px
padding-right: 0px
padding-top: 0px
position: absolute
right: 20px
top: 0px
z-index: 999
type or paste code here