Hi all,
I’m really new to this topic, so please forgive my bad knowledge.
I tried to read to understand the collaboration of the cols and rows and the order and position of these items, without solution.
Can some help me?
I have following issues:
- move “f7-segmented” under oh-trend chart
- move the row with the 3 columns with slider, stepper and label under the oh-trend chart to bottom
- expand the oh trend chart to complete width
- bring the labels “Büro” and “Ergeschoss” closer to the icon (move left)
I would really like to understand how that works, to be able to create beautiful widget to share them with the community 
So if I have a complete wrong appraoch, please tell me
uid: Thermostat-Control-Test
tags: []
props:
parameters:
- description: Beschriftung des Raums
label: Raum Beschriftung
name: roomName
required: false
type: TEXT
- description: Beschriftung der Etage
label: Etagen Beschriftung
name: floorName
required: false
type: TEXT
- context: item
description: Ist-Temperatur des Raums, gemessen durch einen Sensor
label: Ist-Temperatur
name: itemTemperaturIst
required: false
type: TEXT
- context: item
description: Item des Sollwerts, welches im Widget eingestellt werden soll
label: Heizung Sollwert
name: itemTemperaturSollwert
required: false
type: TEXT
- context: item
description: Item des aktuellen Solwerts, welches vom Heizungsaktor gemeldet wird
label: Heizung Sollwert
name: itemTemperaturSollwertAktuell
required: false
type: TEXT
- context: item
description: Item des Stellwerts des Heizungsventils
label: Item
name: itemStellwertStatus
required: false
type: TEXT
- context: item
description: Betriebsart
label: Item
name: itemBetriebsart
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 13, 2021, 11:27:59 AM
component: f7-card
config:
style:
max-height: 400px
background-color: rgb(57,60,76)
border-radius: 15px
overflow: hidden
position: relative
noShadow: false
height: 20em
min-width: 20em
max-width: 100%
slots:
default:
- component: f7-card-content
config:
style:
height: 70px
slots:
default:
- component: f7-row
config:
style:
height: 50px
slots:
default:
- component: f7-col
config:
width: 5
style:
height: 100%
display: flex
justify-content: center
align-items: center
slots:
default:
- component: f7-icon
config:
f7: thermometer
color: white
size: 25px
- component: f7-col
config:
width: "75"
style:
height: 100%
slots:
default:
- component: Label
config:
propsParameterGroup: header
text: Büro
style:
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
display: block
color: white
letter-spacing: .75px
font-size: min(max(14px, 4vw), 21px)
font-weight: 600
- component: Label
config:
actionPropsParameterGroup: header
text: Erdgeschoss
style:
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
color: white
letter-spacing: .75px
font-size: min(max(9px, 2.5vw), 12px)
- component: f7-col
config:
width: "20"
style:
display: flex
justify-content: center
slots:
default:
- component: f7-chip
config:
bgColor: '=(Number.parseFloat(items[props.itemStellwertStatus].state.split(" ")[0]) > 0) ? "orange" : "green"'
text: =(Number.parseFloat(items[props.itemStellwertStatus].state.split(" ")[0]) * 100) + ' %'
iconF7: logo_apple
iconColor: white
style:
font-size: min(max(14px, 4vw), 18px)
color: white
border-radius: 25px 25px 25px 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
background: White
display: flex
justify-content: center
align-items: center
height: 150px
slots:
default:
- component: oh-trend
config:
trendItem: =[props.itemTemperaturIst]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
width: 100%
height: 150px
z-index: 1
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
background: gray
slots:
default:
- component: f7-segmented
config:
raised: false
round: false
strong: true
slots:
default:
- component: oh-button
config:
text: Ein
actionItem: =(props.itemBetriebsart)
actionCommand: Komfort
action: command
active: =(items[props.itemBetriebsart].state === 'Komfort')
- component: oh-button
config:
text: Nacht
actionItem: =(props.itemBetriebsart)
actionCommand: Nacht
action: command
active: =(items[props.itemBetriebsart].state === 'Nacht')
- component: oh-button
config:
text: Aus
actionItem: =(props.itemBetriebsart)
actionCommand: Frostschutz
action: command
active: =(items[props.itemBetriebsart].state === 'Frostschutz')
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
background: gray
slots:
default:
- component: oh-stepper
config:
item: =props.itemTemperaturSollwert
raised: true
buttonsOnly: true
small: true
min: 19
max: 25
step: 0.5
color: white
style:
align-self: flex-end
list-style-type: none
- component: f7-col
config:
style:
background: gray
slots:
default:
- component: oh-slider
config:
step: 0.5
min: 19
max: 25
item: =props.itemTemperaturSollwert
style:
align-self: flex-end
margin-left: 15px
font-color: yellow
- component: f7-col
config:
style:
background: gray
slots:
default:
- component: Label
config:
text: =(Number.parseFloat(items[props.itemTemperaturSollwert].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
style:
font-size: 25px
font-weight: 500
margin-left: 15px
margin-top: 0px
color: white
