Hallo,
ich habe dann mal auf der Basis des Widgets von CharlyT etwas probiert um die statische Anzeige der Linien (aktualisieren sich nur bei refresh) in dynamische Anzeigen zu wandeln. Wenn sich jetzt einer der Werte Temperatur oder Luftfeuchtigkeit ändert wird auch das Diagramm angepasst.
Außerdem habe ich einige Dinge entfernt die ich nicht benötige. Das Ergebnis sieht dann bei mir so aus:
Und hier der Code:
Code
uid: Cell_Temp_Card_Michael
tags: []
props:
parameters:
- description: Small title on top of the card
label: Ort
name: title
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 16, 2023, 4:35:53 PM
component: f7-card
config:
key: =items[props.temp_item].state + items[props.humidity_item].state
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: 180px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
width: 370px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 10px
position: absolute
top: 0px
slots:
default:
- component: Label
config:
style:
font-size: 16px
margin-left: 10px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 10px
position: absolute
top: 35px
slots:
default:
- component: oh-icon
config:
icon: temperature
style:
margin-top: 20px
visible: "=props.temp_item ? true : false"
width: 25px
- component: Label
config:
style:
font-size: 18px
margin-left: 3px
margin-top: 35px
text: =items[props.temp_item].displayState
visible: "=props.temp_item ? true : false"
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 10px
position: absolute
top: 90px
slots:
default:
- component: oh-icon
config:
icon: humidity
style:
margin-top: 30px
visible: "=props.humidity_item ? true : false"
width: 25px
- component: Label
config:
style:
font-size: 18px
margin-left: 7px
margin-top: 40px
text: =items[props.humidity_item].displayState
visible: "=props.humidity_item ? true : false"
- component: f7-block
config:
style:
height: 120px
left: 0px
position: absolute
top: 35px
width: 100%
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(80%)
height: 50%
left: 90px
position: absolute
top: 20px
width: 75%
z-index: 1
trendGradient:
- red
- orange
- green
- blue
trendItem: =[props.temp_item]
- component: f7-block
config:
style:
height: 120px
left: 0px
position: absolute
top: 100px
width: 100%
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(80%)
height: 50%
left: 90px
position: absolute
top: 20px
width: 75%
z-index: 1
trendGradient:
- red
- green
- blue
trendItem: =[props.humidity_item]Ich hoffe damit kann jemand etwas anfangen.
Danke an FMMephisto für die Unterstützung........
