Widget mit Trendline Label nicht im Vordergrund
Verfasst: 16. Okt 2024 11:16
Hallo zusammen,
ich bin gerade dabei ein Widget zu erstellen. Das Widget selbst funktioniert wie gewollt.
Über das Widget wird eine Trendline angezeigt, nun würde ich gerne wollen das der Text/Label über der Trendline zu sehen sind. Aber irgendwie schaffe ich das nicht. der z-index greift nicht. Hat jemand eine Idee wie ich das machen muss?
Danke Gruß
Lenschi
ich bin gerade dabei ein Widget zu erstellen. Das Widget selbst funktioniert wie gewollt.
Über das Widget wird eine Trendline angezeigt, nun würde ich gerne wollen das der Text/Label über der Trendline zu sehen sind. Aber irgendwie schaffe ich das nicht. der z-index greift nicht. Hat jemand eine Idee wie ich das machen muss?
Code: Alles auswählen
uid: Kachel_Trendline
tags:
- analyser
- florianh-widgetset
- lenschi.th
- status
- trendline
props:
parameters:
- description: kleiner Titel der Kachel
label: Title
name: title
required: false
type: TEXT
groupName: appearance
- description: Icon neben Titel (only f7 icons (ohne f7:)), z.B. thermometer
label: Icon
name: icon
required: false
type: TEXT
groupName: appearance
- description: Großes openHAB Icon, muss lokal auf dem OH Server liegen
label: Großes openHAB Icon
name: bigOhIcon
required: false
type: TEXT
groupName: appearance
- default: "0.5"
description: Transparenz großes openHAB Icon
label: Transparenz
name: opacity_ohicon
required: false
type: TEXT
groupName: appearance
- description: in rgba() oder HEX oder empty
label: Background Color
name: bgcolor
required: false
type: TEXT
groupName: appearance
- context: item
description: Schalter
label: Schalter
name: switch
required: false
type: TEXT
groupName: schalter
- description: F7 Icon für Schalter
label: F7 Icon
name: icon_button
required: false
type: TEXT
groupName: schalter
- description: Badge Textfeld
label: Info Badge
name: badge
required: false
type: TEXT
groupName: schalter
- description: Badge Color
label: Info Badge Color
name: badgecolor
required: false
type: TEXT
groupName: schalter
- description: Label vor dem Itemwert
label: Label
name: label
required: false
type: TEXT
groupName: trendlinesettings
- context: item
description: Item das angezeigt werden soll.
label: Item
name: item
required: false
type: TEXT
groupName: trendlinesettings
- context: item
description: Item das angezeigt werden soll. Als Trendline
label: Trenditem
name: trenditem
required: false
type: TEXT
groupName: trendlinesettings
- description: Trendline anzeigen und Analyzer aktivieren
label: Trendline & Analyzer
name: trendAnalyze
required: false
type: BOOLEAN
groupName: trendlinesettings
- default: =['red','orange','yellow','teal','aqua','navy','blue']
description: Farbverlauf Trendline
label: trendGradient
name: trendGradient
required: false
type: TEXT
groupName: trendlinesettings
- default: "5"
description: Strichstärke Trendline
label: trendStrokeWidth
name: trendStrokeWidth
required: false
type: TEXT
groupName: trendlinesettings
- default: ""
description: Breite der Trendline
label: TrendlineWidth
name: trendWidth
required: false
type: TEXT
groupName: trendlinesettings
- default: "60"
description: SamplingRate Trendline
label: TrendlineSampling
name: trendSampling
required: false
type: TEXT
groupName: trendlinesettings
- context: item
description: Item für Lauflicht
label: Item für Lauflicht
name: progressitem
required: false
type: TEXT
groupName: lauflicht
- default: multi
description: Farbe des Lauflichts
label: Farbe Lauflicht
name: lauflichtcolor
required: false
type: TEXT
parameterGroups:
- name: appearance
label: Grundeinstellungen
- name: schalter
label: Schalter
- name: trendlinesettings
label: Trendline Settings
- name: lauflicht
label: Lauflicht
timestamp: Oct 16, 2024, 9:26:41 AM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 130px
margin-left: 5px
margin-right: 5px
overflow: hidden
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: "=props.icon ? props.icon : 'thermometer'"
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
left: 17px
position: absolute
top: 45px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 24px
font-weight: 400
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: "=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'"
z-index: 10
text: "=props.item ? (props.label ? props.label + ' ' +
(items[props.item].displayState ? items[props.item].displayState
: items[props.item].state) : (items[props.item].displayState ?
items[props.item].displayState : items[props.item].state)) :
(props.label ? props.label : 'Set item or label!')"
- component: f7-block
config:
style:
height: 120px
left: 15px
position: absolute
top: 15px
width: 100%
z-index: 1
visible: =props.trendAnalyze === true
slots:
default:
- component: oh-trend
config:
style:
background: transparent
height: 100%
width: 100%
z-index: 1
trendGradient: =props.trendGradient
trendItem: =props.trenditem
trendSampling: =props.trendSampling
trendStrokeWidth: =props.trendStrokeWidth
trendWidth: =props.trendWidth
- component: oh-icon
config:
icon: =props.bigOhIcon
style:
opacity: =props.opacity_ohicon
position: absolute
right: 10px
top: 20px
width: 80px
visible: "=props.bigOhIcon ? true : false"
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: =[props.ChartType]
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.trenditem]
style:
height: 120px
position: absolute
right: 0px
top: 0px
width: "=props.widget_action ? '65%' : '100%'"
visible: "=props.trendAnalyze ? true : false"
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
style:
height: 120px
left: 0px
position: absolute
top: 0px
width: "=props.trendAnalyze ? '70%' : '100%'"
visible: "=props.widget_action ? true : false"
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switch
iconF7: =props.icon_button
iconSize: 40
style:
color: "=(items[props.switch].state === 'ON') ? 'green' : 'red'"
left: 1rem
opacity: "=(items[props.switch].state === 'ON') ? '0.7' : '0.9'"
position: absolute
top: 5rem
visible: "=props.switch ? true : false"
- component: f7-chip
config:
color: '=(props.badgecolor) ? props.badgecolor : "lime"'
style:
border-bottom-right-radius: 0px
border-top-right-radius: 0px
position: absolute
right: 0px
top: 280%
text: =props.badge
visible: "=props.badge ? true : false"
- component: f7-chip
config:
color: lightblue
style:
border-bottom-left-radius: 0px
border-top-left-radius: 0px
left: 0px
position: absolute
top: 280%
text: =props.badge2
visible: "=props.badge2 && !props.switch ? true : false"
- component: f7-progressbar
config:
color: '=items[props.progressitem].state === "ON" ? props.lauflichtcolor :
"green"'
infinite: =items[props.progressitem].state === "ON"
style:
height: 5px
left: 0
position: absolute
right: 0
top: 0px
width: 100%
visible: "=props.progressitem ? true : false"
Lenschi