I’m not sure if it’s possible with the oh-label card or without very much effort, but I’d like to
Use the space better, so there’s more for the graph-line. Thus I’d like a descriptive text INSIDE the object, not above as a separate title.
Is there a setting to change the color of the line, e.g. to black?
component: oh-label-card
config:
trendItem: NetatmoEsszimmer_Temperatur
action: analyzer
actionAnalyzerItems:
- NetatmoEsszimmer_Temperatur
item: NetatmoEsszimmer_Temperatur
title: Temperatur Esszimmer
stateAsHeader: true
expandable: false
icon: oh:temperature
background: "linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%)"
outline: true
trendStrokeWidth: 5px
slots: null
this might help for using the space better in case you want to continue to use a oh-label-card instead of switching to a f7-card
The background slot will have the width of the cell (so you can set width: 100% to elements in that slot) while the header slot will have the width of the expanded cell (even when it’s not expanded).
Normally the background slot is only used for non-interactive elements to put behind the elements in header but you probably still can add interactive stuff anyway.
See [Main UI] Cell Widgets by ghys · Pull Request #317 · openhab/openhab-webui · GitHub
in case of adding e.g. a trend line to a f7-card, you have various styling options, not sure how this works with an oh-label-card, if you can overwrite it:
- component: oh-trend
config:
trendItem: =[props.itemTemp]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(20%)
position: absolute
width: 100%
height: 100%
top: 0
left: 2
z-index: 1
Thanks to the example of your first link I can change the color now.
component: oh-label-card
config:
trendItem: NetatmoEsszimmer_Temperatur
trendGradient:
- yellow
action: analyzer
actionAnalyzerItems:
- NetatmoEsszimmer_Temperatur
item: NetatmoEsszimmer_Temperatur
title: Temperatur Esszimmer
stateAsHeader: true
expandable: false
trendStrokeWidth: 5px
icon: oh:temperature
style:
--f7-theme-color-bg-color: transparent
background: transparent
filter: opacity(100%)
position: absolute
width: 100%
height: 100%
top: 0
left: 2
z-index: 1
slots: null
those oh cards do have pre-defined header / footer / background slots
i understand from the solution i posted from the discussion that you need to put the trend item within the OH-label-card slot “background” and set this to 100%, but i have not tested it
the same counts for the headline. you need to place this into the the main card section, whatever this is called but i might be not the best person to ask here.
given you want to change the oh-label-card that much, i would recommend to switch to an f7-card and define everything yourself.
This is an f7-card e.g i am using
could you post the code of your f7-card, please? So I could adapt it to my needs
sorry i missed this post, Holger. Here is the YAML:
uid: widget_f7-card_Temp_V1
tags:
- homekit-look
- Soll Tag
- 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: Mar 19, 2021, 8:02:15 AM
component: f7-card
config:
expandable: true
noShadow: false
class:
- card-expandable-animate-width
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
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)"'
height: 120px
max-height: 120px
min-height: 120px
min-width: 110px
max-width: 400px
--f7-card-expandable-tablet-border-radius: 2px
--f7-card-expandable-margin-horizontal: 5px
--f7-card-expandable-margin-vertical: 10px
--webkit-user-select: none
--moz-user-select: none
--ms-user-select: none
display: flex;
flex-direction: column
justify-content: space-between
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:
f7: =props.icon1
size: 22
class:
- align-self-center
style:
margin-left: -6px
margin-top: 0px
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)"'
- component: Label
config:
text: =props.prop1
style:
font-size: 14px
font-weight: 500
margin-left: -4px
margin-top: 0px
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)"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
style:
font-size: 40px
line-height: 1.1
font-weight: 350
margin-left: -2px
margin-top: 20px
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "red" : "black"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: =props.icon2
visible: =props.itemHum !== undefined
size: 16
style:
top: 0px
left: 0px
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
- component: Label
config:
visible: =props.itemHum !== undefined
text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%'
style:
margin-top: 0px
left: 0px
font-size: 13px
font-weight: 500
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: arrowshape_turn_up_right
size: 16
style:
opacitiy: 0.5
position: absolute
top: 0
right: 0
padding-top: 83px
padding-right: 0px
z-index: 999
color: rgb(0,0,0,0.5)
- component: f7-chip
config:
bgColor: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"'
text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0)
style:
color: white
size: 20
z-index: 2
border-radius: 25px 25px 25px 25px
position: absolute
top: 8px
right: -3px
margin-top: -7px
- component: oh-trend
config:
trendItem: =[props.itemTemp]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
position: absolute
width: 100%
height: 100%
top: 0
left: 2
z-index: 1
- component: oh-link
config:
action: group
actionGroupPopupItem: =[props.itemGroup]
style:
position: absolute
z-index: 1
width: 100%
height: 100%
top: 0
left: 0
class:
- card-prevent-open
2 Likes
