Wechselrichter Widget
-
- Beiträge: 94
- Registriert: 16. Dez 2021 11:02
Re: Wechselrichter Widget
Hallo Udo ich hatte die Icons vergessen danke dafür.
Kann man bei dem Yaml Code auch eine Hintergrund Farben Änderung einbauen?
Danke euch
Kann man bei dem Yaml Code auch eine Hintergrund Farben Änderung einbauen?
Danke euch
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Wechselrichter Widget
Das geht sicherlich. Es kommt nur darauf an, ob du variabel über die Konfiguration oder fix im Widget-Code verändern willst.
du hast jetzt folgendes in den Zeilen 43 u. 44 stehen:
Für eine fixe Änderung des Hintergrundes erweiterst du einfach um den Background-Parameter, also so (natürlich mit dem Farbverlauf/Farbe, die du haben willst):
oder mit einem änderbaren Hintergrund (mit Defaultwert):
Dazu brauchst du natürlich auch noch eine Eingabe-Maske (Eingabe-Parameter):
In dem "gepimpten" Inverter-Widget findest du diese Vorgehensweise auch in einer ähnlichen Variante (props.bg_color1).
Soweit ich weiss, sind diese Parameter im Kontext mit der "f7-Card" zu sehen.
Das Ganze könnte dann etwa so aussehen: ...oder, wenn du den Parameter height: 383px durch den Parameter height: auto, dann evtl. auch so: Wie gesagt, ich habe das Ganze nicht in "echt" sondern nur im Editor simuliert und weiss deshalb nicht so genau, wie das in eine Seite dargestellt wird.
du hast jetzt folgendes in den Zeilen 43 u. 44 stehen:
Code: Alles auswählen
style:
height: 383px
Code: Alles auswählen
style:
height: 383px
background: linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)
Code: Alles auswählen
style:
height: 383px
background: '=(props.background1) ? props.background1 : "linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
Code: Alles auswählen
- description: Widgetbackground e.g. "transparent" or "blue" or "linear-gradient(to bottom right,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
label: Background
name: background1
required: false
type: TEXT
In dem "gepimpten" Inverter-Widget findest du diese Vorgehensweise auch in einer ähnlichen Variante (props.bg_color1).
Soweit ich weiss, sind diese Parameter im Kontext mit der "f7-Card" zu sehen.
Das Ganze könnte dann etwa so aussehen: ...oder, wenn du den Parameter height: 383px durch den Parameter height: auto, dann evtl. auch so: Wie gesagt, ich habe das Ganze nicht in "echt" sondern nur im Editor simuliert und weiss deshalb nicht so genau, wie das in eine Seite dargestellt wird.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Wechselrichter Widget
Ich hab mich noch mal an den Yaml-Code des Wechselrichter gewagt und ein paar Layout-Änderungen vorgenommen. Die Ecken sind nun abgerundet und der Hintergrund kann im Dialog angepasst werden.
Der Yaml-Code für das Custom-Widget sieht dann so aus:
Der Yaml-Code für das Custom-Widget sieht dann so aus:
Code: Alles auswählen
uid: test_SMA_widget
tags: []
props:
parameters:
- context: item
label: Netzeinspeisung
name: netzeinspeisung
required: true
type: TEXT
- context: item
label: Netzbezug
name: netzbezug
required: true
type: TEXT
- context: item
label: Gesamtverbrauch
name: gesamtverbrauch
required: true
type: TEXT
- context: item
label: PV Leistung
name: pv_leistung
required: true
type: TEXT
- context: item
label: Batterieleistung
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie Ladezustand
name: batterylevel
required: true
type: TEXT
- description: e.x. linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%), red, transparent or hex or rgb
label: Background-Color
name: bg_color1
required: false
parameterGroups: []
timestamp: Aug 24, 2022, 6:49:44 PM
component: f7-card
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
height: auto
background: '=(props.bg_color1) ? props.bg_color1 : "linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
border-radius: var(--f7-card-expandable-border-radius)
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
padding-bottom: 30px
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: oh-icon
config:
height: 110px
icon: sma_grid_2
- component: Label
config:
style:
color: red
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzbezug].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) == 0) ? true : false'
- component: Label
config:
style:
color: green
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzeinspeisung].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: bold
text-align: center
width: 100px
text: =items[props.pv_leistung].displayState
- component: oh-icon
config:
height: 110px
icon: sma_pv_2
style:
margin-top: -20px
- component: f7-block
config:
style:
display: flex
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
width: auto
tag: svg
viewBox: 0 0 100 100
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M60 -5 v10 c0 30 10 35 30 35 h20
fill: none
id: path1
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
fill: none
id: path2
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) == 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) == 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M50, 0 v100
fill: none
id: path3
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
fill: none
id: path4
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
fill: none
id: path5
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -10px
width: 110px
slots:
default:
- component: oh-icon
config:
color: orange
height: 110px
icon: sma_consumption_2
- component: Label
config:
style:
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
white-space: nowrap
text: =items[props.gesamtverbrauch].displayState
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -40px
width: 110px
slots:
default:
- component: oh-link
config:
iconColor: red
iconF7: battery_0
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 10) ? true : false'
- component: oh-link
config:
iconColor: orange
iconF7: battery_25
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 10 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
- component: oh-link
config:
iconColor: green
iconF7: battery_100
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
- component: oh-icon
config:
height: 110px
icon: sma_battery_2
style:
margin-top: -20px
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? "red" : "green"'
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
white-space: nowrap
width: 100px
text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) !== 0) ? true : false'
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian
-
- Beiträge: 94
- Registriert: 16. Dez 2021 11:02
Re: Wechselrichter Widget
Hallo Peter sehr schön
Vielen Dank auch
Kanns erst morgen testen.
Mfg
Vielen Dank auch
Kanns erst morgen testen.
Mfg
-
- Beiträge: 94
- Registriert: 16. Dez 2021 11:02
Re: Wechselrichter Widget
Hallo Peter
Das Widget sieht jetzt viel besser aus..dürft ich die bitten da noch einzubauen das man die gesamte größe des Fensters ändern kann.
Also das gesamte Widget würd ich gerne grösser machen wollen.
Das Widget sieht jetzt viel besser aus..dürft ich die bitten da noch einzubauen das man die gesamte größe des Fensters ändern kann.
Also das gesamte Widget würd ich gerne grösser machen wollen.
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Wechselrichter Widget
Das hängt von verschiedenen Parametern ab, bzw. vom Aufbau deiner Seite (Page) und eigentlich nichts (oder fast nichts) mit der Grössenbestimmung im Widget zu tun.
Deshalb solltest du noch ein oder zwei oder drei Spalten(Columns) anlegen, dort kannst du dann weitere Widgets kreieren oder diese Spalten "blind" lassen. Die Spalten dienen dann sozusagen als Auffüllbereich.
Das sieht dann in etwa so aus, wie im nachstehenden Screeshot zu sehen: Das gilt übrigens für alle Widgets, nicht nur in diesem Fall.
Wie im o.g. Screenshot zu sehen, musst du zuerst eine neue Reihe (Row) und dann eine neue Spalte (Column) anlegen. In dieser Spalte kannst du nun dein Widget laden. Dann wird dein Widget aber die ganze Seitenbreite einnehmen.Deshalb solltest du noch ein oder zwei oder drei Spalten(Columns) anlegen, dort kannst du dann weitere Widgets kreieren oder diese Spalten "blind" lassen. Die Spalten dienen dann sozusagen als Auffüllbereich.
Das sieht dann in etwa so aus, wie im nachstehenden Screeshot zu sehen: Das gilt übrigens für alle Widgets, nicht nur in diesem Fall.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian
-
- Beiträge: 221
- Registriert: 16. Dez 2017 10:49
Re: Wechselrichter Widget
Hallo.
Ich habe mal das Ursprungswidget bei mir auf der Übersichtsseite eingefügt, aber ich habe noch einige "Problemchen".
1.: Wo verschiebe ich den Strommasten nach rechts?
2.: Wie bekomme ich es hin, das mir die Einspeisung/Bezug aus dem Netz angezeigt wird? - Ich habe leider nur 1 Item welches negative oder positive Werte liefert
3.: Wieso werden mir so viele Nachkommastellen bei der Batterie angezeigt, obwohl ich das Item per State Description auf 2 Nachkommastellen begrenzt habe.
Hier mal ein paar Screenshots und der Code: Mhh, bekomme die Item-Übersicht leider nicht eingefügt, mache ich also in einem 2. Beitrag.
Ich habe mal das Ursprungswidget bei mir auf der Übersichtsseite eingefügt, aber ich habe noch einige "Problemchen".
1.: Wo verschiebe ich den Strommasten nach rechts?
2.: Wie bekomme ich es hin, das mir die Einspeisung/Bezug aus dem Netz angezeigt wird? - Ich habe leider nur 1 Item welches negative oder positive Werte liefert
3.: Wieso werden mir so viele Nachkommastellen bei der Batterie angezeigt, obwohl ich das Item per State Description auf 2 Nachkommastellen begrenzt habe.
Hier mal ein paar Screenshots und der Code: Mhh, bekomme die Item-Übersicht leider nicht eingefügt, mache ich also in einem 2. Beitrag.
Code: Alles auswählen
uid: SMA_widget
tags: []
props:
parameters:
- context: item
label: Netzeinspeisung
name: netzeinspeisung
required: true
type: TEXT
- context: item
label: Netzbezug
name: netzbezug
required: true
type: TEXT
- context: item
label: Gesamtverbrauch
name: gesamtverbrauch
required: true
type: TEXT
- context: item
label: PV Leistung
name: pv_leistung
required: true
type: TEXT
- context: item
label: Batterieleistung
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie Ladezustand
name: batterylevel
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 7, 2022, 9:17:18 AM
component: f7-card
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
height: 383px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: oh-icon
config:
height: 110px
icon: sma_grid_2
- component: Label
config:
style:
color: red
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzbezug].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) == 0) ? true : false'
- component: Label
config:
style:
color: green
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzeinspeisung].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: bold
text-align: center
width: 100px
text: =items[props.pv_leistung].displayState
- component: oh-icon
config:
height: 110px
icon: sma_pv_2
style:
margin-top: -20px
- component: f7-block
config:
style:
display: flex
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
width: auto
tag: svg
viewBox: 0 0 100 100
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M60 -5 v10 c0 30 10 35 30 35 h20
fill: none
id: path1
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
fill: none
id: path2
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) == 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) == 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M50, 0 v100
fill: none
id: path3
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
fill: none
id: path4
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
fill: none
id: path5
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -10px
width: 110px
slots:
default:
- component: oh-icon
config:
color: orange
height: 110px
icon: sma_consumption_2
- component: Label
config:
style:
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.gesamtverbrauch].displayState
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -40px
width: 110px
slots:
default:
- component: oh-link
config:
iconColor: red
iconF7: battery_0
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 10) ? true : false'
- component: oh-link
config:
iconColor: orange
iconF7: battery_25
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 10 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
- component: oh-link
config:
iconColor: green
iconF7: battery_100
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
- component: oh-icon
config:
height: 110px
icon: sma_battery_2
style:
margin-top: -20px
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? "red" : "green"'
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
white-space: nowrap
width: 100px
text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) !== 0) ? true : false'
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home
-
- Beiträge: 221
- Registriert: 16. Dez 2017 10:49
Re: Wechselrichter Widget
Ach so, als Wechselrichter habe ich einen Fronius Symo Gen24 Hybrid mit Byd Batterie (Habe ich im Rahmen eines anderen Beitrags herausgefunden )Hoggle hat geschrieben: ↑7. Nov 2022 09:50 Hallo.
Ich habe mal das Ursprungswidget bei mir auf der Übersichtsseite eingefügt, aber ich habe noch einige "Problemchen".
1.: Wo verschiebe ich den Strommasten nach rechts?
2.: Wie bekomme ich es hin, das mir die Einspeisung/Bezug aus dem Netz angezeigt wird? - Ich habe leider nur 1 Item welches negative oder positive Werte liefert
3.: Wieso werden mir so viele Nachkommastellen bei der Batterie angezeigt, obwohl ich das Item per State Description auf 2 Nachkommastellen begrenzt habe.
Hier mal ein paar Screenshots und der Code:
PV Widget.png
Page Entwurf.png
PV Widget Items.png
Mhh, bekomme die Item-Übersicht leider nicht eingefügt, mache ich also in einem 2. Beitrag.
...
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Wechselrichter Widget
Du musst den "style-Parameter" und darunter die Verschiebung mit "margin-left" einsetzen. Das Ganze sieht dann so aus:
Code: Alles auswählen
- component: oh-icon
config:
height: 110px
icon: sma_grid_2
style:
margin-left: 20px
Ich bin mir nicht sicher, da ich keine Anlage habe, aber ich könnte mir vorstellen, dass es da Zusammenhänge gibt.
Wenn ich mir die Logik des Scripts beider Items anschaue, wird einmal auf "0" und einmal auf " > 0" abgefragt.
Code: Alles auswählen
- component: Label
config:
style:
color: red
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzbezug].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) == 0) ? true : false'
- component: Label
config:
style:
color: green
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzeinspeisung].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0) ? true : false'
Du kannst die vorletzte Zeile im Script um ein Statement ".toFixed(2)" ergänzen, also so:
Code: Alles auswählen
text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])).toFixed(2) + ' ᵂ'
Vielleicht findest du ja im Original-Post noch einen Hinweis.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian
-
- Beiträge: 221
- Registriert: 16. Dez 2017 10:49
Re: Wechselrichter Widget
Hallo.
Ich bin jetzt einen "kleinen" Schritt weiter.
Mir wird jetzt angezeigt, wie meine PV-Anlage arbeitet, also der Ertrag der PV, der Ladezustand der Batterie, der aktuelle Lade-/Endladewert in Watt, mein momentaner Verbrauch und wie viel Watt eingespeist, bzw bezogen wird. Jetzt gibt es noch ein paar "Schönheitsfehler, die ich trotz mehrfachen durchscheuen des Codes nicht gefunden habe:
1. Bei der Batterieleistung wird beim laden die Wattzahl in grün und beim endladen in rot angezeigt. Bei dem Wert am Strommast passt die Farbe (Hab ich geändert im Code), aber das Minuszeichen stört mich, denn Minus ist für mich immer negativ, obwohl Einspeisung mir ja Geld bringt.
Das mit dem Minus ist auch bei dem Stromverbrauch meines Hauses. Vielleicht gleiche Lösung?
2. Das Thema mit den Pfeilen und der dazugehörigen Animation. Das hat bestimmt etwas mit dem YALM-Blöcken um die Zeilen 193-224 zutun, oder? Leider bin ich, was die Programmierlogik angeht falsch gepolt im Kopf, so das ich das nicht verstehe. Bei der Batterie klappt das super.
Wenn die Batterie von der PV-Anlage geladen wird (Wert ist "grün"), dann ist ein animierter Pfeil von der PV zur Batterie und wenn die Batterie Strom ins Haus einspeist (Wert ist "rot"), dann verschwindet der Pfeil von der PV und es erscheint ein Pfeil von der Batterie zum Haus ("unteres Icon mit dem Auto).
Ich denke mir, das da etwas mit der Prüfung <=0 oder so nicht passt, aber was?
Es fehlen übrigens beide Pfeile, der von der PV zum Stromnetz und vom Stromnetz zum Haus.
Lt. meiner APP geht machmal auch Strom aus dem öffentlichen Netz zur Batterie und machmal von der Batterie zum Netz (Wahrscheinlich hat das irgend etwas mit dem Umschaltzeiten im Wechselrichter zu tun oder mit einer Pufferung).
Hier mal mein aktueller Code des Widgets, so wie es im Moment im Betrieb ist:
Einfache Tutorials zur Bedeutung der einzelnen YAML Blöcke habe ich leider nicht gefunden. In der Openhab-Doku wird auf das F7-Framework verwiesen, aber da ist die Sprache eine Barriere, die ich nur schwerlich überwinden kann.
Vielleicht kann mir ja jemand "aufs Pferd" helfen.
Ich bin jetzt einen "kleinen" Schritt weiter.
Mir wird jetzt angezeigt, wie meine PV-Anlage arbeitet, also der Ertrag der PV, der Ladezustand der Batterie, der aktuelle Lade-/Endladewert in Watt, mein momentaner Verbrauch und wie viel Watt eingespeist, bzw bezogen wird. Jetzt gibt es noch ein paar "Schönheitsfehler, die ich trotz mehrfachen durchscheuen des Codes nicht gefunden habe:
1. Bei der Batterieleistung wird beim laden die Wattzahl in grün und beim endladen in rot angezeigt. Bei dem Wert am Strommast passt die Farbe (Hab ich geändert im Code), aber das Minuszeichen stört mich, denn Minus ist für mich immer negativ, obwohl Einspeisung mir ja Geld bringt.
Das mit dem Minus ist auch bei dem Stromverbrauch meines Hauses. Vielleicht gleiche Lösung?
2. Das Thema mit den Pfeilen und der dazugehörigen Animation. Das hat bestimmt etwas mit dem YALM-Blöcken um die Zeilen 193-224 zutun, oder? Leider bin ich, was die Programmierlogik angeht falsch gepolt im Kopf, so das ich das nicht verstehe. Bei der Batterie klappt das super.
Wenn die Batterie von der PV-Anlage geladen wird (Wert ist "grün"), dann ist ein animierter Pfeil von der PV zur Batterie und wenn die Batterie Strom ins Haus einspeist (Wert ist "rot"), dann verschwindet der Pfeil von der PV und es erscheint ein Pfeil von der Batterie zum Haus ("unteres Icon mit dem Auto).
Ich denke mir, das da etwas mit der Prüfung <=0 oder so nicht passt, aber was?
Es fehlen übrigens beide Pfeile, der von der PV zum Stromnetz und vom Stromnetz zum Haus.
Lt. meiner APP geht machmal auch Strom aus dem öffentlichen Netz zur Batterie und machmal von der Batterie zum Netz (Wahrscheinlich hat das irgend etwas mit dem Umschaltzeiten im Wechselrichter zu tun oder mit einer Pufferung).
Hier mal mein aktueller Code des Widgets, so wie es im Moment im Betrieb ist:
Code: Alles auswählen
uid: SMA_widget
tags: []
props:
parameters:
- context: item
label: Netzeinspeisung
name: netzeinspeisung
required: true
type: TEXT
- context: item
label: Netzbezug
name: netzbezug
required: true
type: TEXT
- context: item
label: Gesamtverbrauch
name: gesamtverbrauch
required: true
type: TEXT
- context: item
label: PV Leistung
name: pv_leistung
required: true
type: TEXT
- context: item
label: Batterieleistung
name: batterieleistung
required: true
type: TEXT
- context: item
label: Batterie Ladezustand
name: batterylevel
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 11, 2022, 11:55:58 AM
component: f7-card
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
height: 383px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: oh-icon
config:
height: 110px
icon: sma_grid_2
style:
margin-left: 20px
- component: Label
config:
style:
color: green
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzbezug].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) <= 0) ? true : false'
- component: Label
config:
style:
color: red
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.netzeinspeisung].displayState
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: 0
width: 110px
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: bold
text-align: center
width: 100px
text: =items[props.pv_leistung].displayState
- component: oh-icon
config:
height: 110px
icon: sma_pv_2
style:
margin-top: -20px
- component: f7-block
config:
style:
display: flex
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
width: auto
tag: svg
viewBox: 0 0 100 100
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M60 -5 v10 c0 30 10 35 30 35 h20
fill: none
id: path1
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
fill: none
id: path2
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) <= 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0 && Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) <= 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M50, 0 v100
fill: none
id: path3
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) - (Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) + Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]))) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
fill: none
id: path4
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.netzbezug].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
fill: none
id: path5
stroke: rgba(100, 150, 200, 0.8)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
- component: f7-row
config:
fill: rgba(100, 150, 200, 0.8)
r: 6
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? true : false'
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 4s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -10px
width: 110px
slots:
default:
- component: oh-icon
config:
color: orange
height: 110px
icon: sma_consumption_2
- component: Label
config:
style:
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
width: 100px
text: =items[props.gesamtverbrauch].displayState
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: row
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 110px
justify-content: center
margin-top: -40px
width: 110px
slots:
default:
- component: oh-link
config:
iconColor: red
iconF7: battery_0
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 10) ? true : false'
- component: oh-link
config:
iconColor: orange
iconF7: battery_25
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 10 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
- component: oh-link
config:
iconColor: green
iconF7: battery_100
iconSize: 33px
style:
font-size: 25px
font-weight: bold
white-space: nowrap
text: =items[props.batterylevel].state
visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
- component: oh-icon
config:
height: 110px
icon: sma_battery_2
style:
margin-top: -20px
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 0) ? "red" : "green"'
font-size: 25px
font-weight: bold
margin-top: -10px
text-align: center
white-space: nowrap
width: 100px
text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])).toFixed(2) + ' ᵂ'
visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) !== 0) ? true : false'
Vielleicht kann mir ja jemand "aufs Pferd" helfen.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home