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