Hi @JustinG,
lots of things happen behind the scene - next version will be shown soon - but as you know me - there are still some questions open.
At the moment I am struggling with the height of f7-block.
We use a more or less generic template to create the different cards.
The template contains of three blocks. Header and Footer are absolutely sized (50px and 60px). But the content is at the moment depending of it content. The radiator card uses a oh-trendline and therefore the height is a bit more height then for example the roller-shutter-card that has no trendline.
How could we achieve that the card in sum has every time the same size - equal if there is a trend line or any other component? And is there a chance to make header and footer also relative height?
uid: main_widget_RadiatorControl_Card
tags: []
props:
parameters:
- description: Title of the card
label: Title
name: Title
required: false
type: TEXT
- context: item
description: Temperature Equipment Group
label: Temperature Equipment Group
name: groupItem
required: false
type: TEXT
timestamp: Oct 21, 2022, 2:41:03 PM
component: f7-card
config:
style:
background: "#F7F7F7"
border-bottom-left-radius: var(--f7-card-expandable-border-radius)
border-bottom-right-radius: var(--f7-card-expandable-border-radius)
border-top-left-radius: var(--f7-card-expandable-border-radius)
border-top-right-radius: var(--f7-card-expandable-border-radius)
padding: 0px
margin: 15px
slots:
default:
- component: f7-block
config:
style:
align-items: center
background: transparent
display: flex
flex-direction: row
height: 60px
slots:
default:
- component: oh-icon
config:
icon: iconify:ion:flame-sharp
style:
color: rgb(106,106,106)
padding-right: 15px
width: 40px
- component: f7-row
config:
style:
display: flex
flex-direction: column
flex-wrap: nowrap
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.title.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: title
itemTags: Measurement,Temperature
sourceType: itemsWithTags
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 400
padding-top: 10px
text: =props.Title
- component: f7-row
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: tempItem
itemTags: Measurement,Temperature
sourceType: itemsWithTags
slots:
default:
- component: f7-chip
config:
style:
background-color: "#6a6a6a"
color: white
font-size: 16px
font-weight: 200
justify-content: flex-end
text: "=items[loop.tempItem.name].displayState ? items[loop.tempItem.name].displayState : items[loop.tempItem.name].state"
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.setpointItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: setpointItem
itemTags: Setpoint,Temperature
sourceType: itemsWithTags
slots:
default:
- component: f7-chip
config:
style:
background: none
color: red
font-size: 18px
font-weight: 300
text: "=items[loop.setpointItem.name].displayState ? items[loop.setpointItem.name].displayState : items[loop.setpointItem.name].state"
- component: f7-block
config:
style:
align-items: center
background: transparent
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: tempItem
itemTags: Measurement,Temperature
sourceType: itemsWithTags
slots:
default:
- component: oh-trend
config:
trendGradient:
- "#E74239"
trendItem: =loop.tempItem.name
trendSampling: 5
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.setpointItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: setpointItem
itemTags: Setpoint,Temperature
sourceType: itemsWithTags
slots:
default:
- component: f7-row
config:
style:
align-self: flex-end
display: flex
flex: 1 1 auto
flex-direction: row
flex-wrap: nowrap
justify-content: flex-end
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) + 0.5
actionItem: =loop.setpointItem.name
iconColor: "#E74239"
iconF7: arrow_up_circle
iconSize: 35
style:
align-self: flex-end
background: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
height: 35px
justify-content: flex-end
- component: oh-button
config:
action: command
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) - 0.5
actionItem: =loop.setpointItem.name
iconColor: "#E74239"
iconF7: arrow_down_circle
iconSize: 35
style:
align-self: flex-end
background: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
height: 35px
justify-content: flex-end
- component: f7-block
config:
style:
--f7-card-footer-border-color: transparent
align-items: center
background: "#F2F2F2"
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
display: flex
flex-direction: row
height: 50px
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: '((loop.modeItem.groupNames.indexOf(props.groupItem) >= 0) && (loop.modeItem.type=="String")) ? true : false'
for: modeItem
itemTags: Control,Temperature
sourceType: itemsWithTags
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-link
config:
action: options
actionItem: =loop.modeItem.name
slots:
default:
- component: f7-chip
config:
text: "=items[loop.modeItem.name].displayState ? items[loop.modeItem.name].displayState : items.items[loop.modeItem.name].state"
uid: main_widget_Rollershutter_Card
tags: []
props:
parameters:
- description: Title of the card
label: Title
name: Title
required: false
type: TEXT
- context: item
description: Item to control
label: Rollershutter Item
name: RollerItem
required: true
type: TEXT
timestamp: Oct 21, 2022, 8:12:02 PM
component: f7-card
config:
style:
background: "#F7F7F7"
border-bottom-left-radius: var(--f7-card-expandable-border-radius)
border-bottom-right-radius: var(--f7-card-expandable-border-radius)
border-top-left-radius: var(--f7-card-expandable-border-radius)
border-top-right-radius: var(--f7-card-expandable-border-radius)
padding: 0px
margin: 15px
slots:
default:
- component: f7-block
config:
style:
align-items: center
background: transparent
display: flex
flex-direction: row
height: 60px
slots:
default:
- component: oh-icon
config:
icon: iconify:mdi:window-shutter-alert
style:
color: rgb(106,106,106)
padding-right: 15px
width: 40px
- component: f7-row
config:
style:
display: flex
flex-direction: column
flex-wrap: nowrap
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 400
padding-top: 10px
text: =props.Title
- component: f7-row
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: f7-chip
config:
style:
background-color: "#6a6a6a"
color: white
font-size: 16px
font-weight: 200
justify-content: flex-end
text: =items[props.RollerItem].state + "% " + " close"
- component: f7-block
config:
style:
align-items: center
background: transparent
display: flex
flex-direction: row
min-height: 81px
slots:
default:
- component: f7-row
config:
style:
align-self: flex-end
display: flex
flex: 1 1 auto
flex-direction: row
flex-wrap: nowrap
justify-content: flex-end
slots:
default:
- component: oh-button
config:
action: command
actionCommand: UP
actionItem: =props.RollerItem
iconColor: "#E74239"
iconF7: arrow_up_circle
iconSize: 35
style:
align-self: flex-end
background: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
height: 35px
justify-content: flex-end
- component: oh-button
config:
action: command
actionCommand: STOP
actionItem: =props.RollerItem
iconColor: "#E74239"
iconF7: stop_circle
iconSize: 35
style:
align-self: flex-end
background: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
height: 35px
justify-content: flex-end
- component: oh-button
config:
action: command
actionCommand: DOWN
actionItem: =props.RollerItem
iconColor: "#E74239"
iconF7: arrow_down_circle
iconSize: 35
style:
align-self: flex-end
background: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
height: 35px
justify-content: flex-end
- component: f7-block
config:
style:
--f7-card-footer-border-color: transparent
align-items: center
background: "#F2F2F2"
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
display: flex
flex-direction: row
height: 50px
slots:
default:
- component: Label
config:
style:
color: white
position: absolute
top: 5%
text: "Preset positions:"
- component: oh-button
config:
action: command
actionCommand: UP
actionItem: =(props.RollerItem)
class:
- margin
- display-flex
- flex-direction-column
round: true
style:
background: '=items[props.RollerItem].state == "0" ? "teal" : "gray"'
color: white
height: 24px
left: 20%
position: absolute
top: 63%
width: 10px
z-index: 98
text: "0"
- component: oh-button
config:
action: command
actionCommand: 50
actionItem: =(props.RollerItem)
class:
- margin
- display-flex
- flex-direction-column
round: true
style:
background: '=items[props.RollerItem].state == "50" ? "teal" : "gray"'
color: white
height: 24px
left: 33%
position: absolute
top: 63%
width: 10px
z-index: 98
text: 50
- component: oh-button
config:
action: command
actionCommand: 75
actionItem: =(props.RollerItem)
class:
- margin
- display-flex
- flex-direction-column
round: true
style:
background: '=items[props.RollerItem].state == "75" ? "teal" : "gray"'
color: white
height: 24px
position: absolute
right: 33%
top: 63%
width: 10px
z-index: 98
text: 75
- component: oh-button
config:
action: command
actionCommand: DOWN
actionItem: =(props.RollerItem)
class:
- margin
- display-flex
- flex-direction-column
round: true
style:
background: '=items[props.RollerItem].state == "100" ? "teal" : "gray"'
color: white
height: 24px
position: absolute
right: 20%
top: 63%
width: 10px
z-index: 98
text: 100