Darstellung Sonnenbatterie

Shadow3561 · 24 Juni 2022, 17:46:17

Danke.

Leider funktioniert es bei mir nicht und ich habe keine Ahnung woran es liegen könnte.

FHEM und FTUI3 sind up to date

Ich habe deine ZIP entpackt und den pvvis-Ordner in den components-Ordner von FTUI3 kopiert.

dann habe ich folgende html-Datei

Code Auswählen

<ftui-grid-tile row="1" col="2" height="5" width="5" shape="round">
    <header>PV-Anlage / Strombedarf</header>
        		<ftui-pvvis
                	     [charge]="SE3500H:CHARGE"
                	     [discharge]="SE3500H:DISCHARGE"
                	     [feed]="SE3500H:Hausverbrauch"
                	     [produce]="SE3500H:AC_current_W"
                	     [pvmax]="SE3500H:3500"
                	     [receive]="SE3500H:Power"
                	     [soc]="SE3500H:SOC">
        		</ftui-pvvis>
</ftui-grid-tile>


<ftui-grid-tile row="6" col="2" height="5" width="10" shape="round">
	<header>PV-Anlage / Grafik</header>
     <ftui-chart height="320px" width="100%" popup-target="pvleistung">
         <ftui-chart-data  label="Verbrauch" log="logdb" file="HISTORY" spec="SE3500H:Hausverbrauch"
             fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data>  
         <ftui-chart-data label="PV-Leistung" log="logdb" file="HISTORY" spec="SE3500H:AC_current_W"
             fill background-color="#00cc3350" color="#00cc33" point-radius="0"></ftui-chart-data>
     </ftui-chart>
</ftui-grid-tile>
 
 
</ftui-grid-tile>

Das sieht dann bei mir so aus wie bei dem Bild im Anhang.
Das Grid bleibt leider leer.

Server wurde neu gestartet und den Cache im Browser habe ich ebenso geleert.

Woran es liegt, weiß ich wie gesagt nicht.
Die user_css liegt im ftui-theme-Ordner.

Schade

mr_petz · 24 Juni 2022, 18:32:46

@yersinia, @Shadow3561

Die Anzeige ist im nicht sichtbaren Bereich.
~~Ich habe mal die viewBox auf 100 100 100 100 gestellt und noch ein width="50px" in die Definition als styleAttribute zum Testen hinzugefügt.~~
Jetzt ist es sichtbar.

LG mr_petz

ps. @yersinia, schön das du dich jetzt auch ans proggen versuchst

Edit: Schneller Lösungsvorschlag in der css folgendes bei pvvisbox eintragen:

Code Auswählen


.pvvisbox {
    width: 200px;
}

oder halt deine Größe die du brauchst. Und dann ist es sichtbar(zumindest jetzt bei mir).

Das könnte @yersinia als Attribute mit reinnehmen in den Code...

@yersinia
Beispiel wie man es machen könnte:
in den super(Object.assign(FtuiPvvis.properties, properties)):

Code Auswählen


this.div = this.shadowRoot.querySelector('.pvvisbox');

in den static get properties():

Code Auswählen


width: '200px',

und im onConnected():

Code Auswählen


this.div.style.width = this.width;

Edit2: nur ein Hinweis. Den import fhemService
brauchst du hier nicht, da du ihn nicht verwendest.

Shadow3561 · 24 Juni 2022, 19:41:45

@mr_petz

ZitatEdit: Schneller Lösungsvorschlag in der css folgendes bei pvvisbox eintragen:
Code Auswählen Erweitern
.pvvisbox { width: 200px; }
oder halt deine Größe die du brauchst. Und dann ist es sichtbar(zumindest jetzt bei mir).

Das wars.
jetzt klappt es wie gewünscht.

@mr_pet , @yersinia

Vielen lieben dank euch beiden.

Shadow3561 · 25 Juni 2022, 11:57:57

Moin und einen schönen Samstag.

Ich benötige noch einmal eure Hilfe. Das ist mein erster Versuch mit Javascript, seid also bitte etwas nachsichtig mit mir.

Ich habe das Widget jetzt auf meine Bedürfnisse (habe keinen Akku) angepasst.

Die Sonne wechselt auf grau wenn keine PV-Produktion mehr stattfindet,
das Grid-Symbol wechselt die Farbe je nach Einspeisung oder Bezug
und natürlich sind der Akku und die dazu gehörenden Flusslinien weg.

Nur leider stimmt irgend etwas mit der Berechnung nicht, der Eigenverbrauch hat manchmal mehrer Nachkommastellen obwohl in den Readings des Wechselrichter-Device (FHEM) nur eine Nachkomma-Stelle vorhanden ist.

EDIT: Ich habe mir jetzt in FHEM Ganzzahlen als userreadings erstellt. Jetzt scheint es zu funktionieren.

Ich habe zu Verdeutlichung mal Bilder angehängt und die Widget Datei. Die css ist unangetastet.

Definiert ist das Widget so:

Code Auswählen

	<ftui-pvvis
                	     
                	     [feed]="SE3500H:Momentanleistung_Einspeisung"
                	     [produce]="SE3500H:AC_current_W" 
                	     [pvmax]="SE:3500H:3500"
                	     [receive]="SE3500H:Momentanleistung_Bezug"
                	     [home]="SE3500H:Hausverbrauch"
                	     
        		</ftui-pvvis>

Mit freundlichen Grüßen

mr_petz · 25 Juni 2022, 12:29:11

@Shadow3561
Schau dir toFixed() an:
https://www.w3schools.com/jsref/jsref_tofixed.asp

Hier sollte aber @yersinia die Zügel weiter in der Hand halten.
Er könnte die Batterie/Speicher auch mit einem Attribute anzeigen bzw. entfernen.

LG mr_petz

Shadow3561 · 25 Juni 2022, 12:32:54

Zitat von: mr_petz am 25 Juni 2022, 12:29:11
@Shadow3561
Schau dir toFixed() an:
https://www.w3schools.com/jsref/jsref_tofixed.asp

Hier sollte aber @yersinia die Zügel weiter in der Hand halten.
Er könnte die Batterie/Speicher auch mit einem Attribute anzeigen bzw. entfernen.

LG mr_petz

Das habe ich bereits getan, ebenso Math.round()

Aber wie gesagt, es war das ersten mal js.
Habe es jetzt erst mal anders gelöst.

Wäre schön wenn sich yersinia des Widgets annehmen würde damit auch andere die Vorzüge eine schönen Darstellung in FTUI3 genießen dürfen.

Mit freundlichen Grüßen

yersinia · 26 Juni 2022, 16:28:08

Hi mr_petz & Shadow3561,
vielen Dank fürs Testen und das Feedback. Ich habe eure Vorschläge und Adaptionen übernommen:
- Werte werden gerundet (ohne Nachkommastelle)
- Grid wechselt die Farbe je nachdem ob man bezieht oder abgibt (Code von Shadow3561)
- wenn soc nicht definiert oder 0 ist, bleibt der Akku ausgegraut
- wenn es keinen Akku gibt, kann man über has-no-battery den Akku-Strang ausblenden
- die Breite ist nun auch definiert bzw definierbar über width="xxx" (Voreingestellt sind 200px)
- lasst die Werte, die ihr nicht habt, einfach weg (zB wenn kein Akku/Batterie vorhanden ist, muss auch [soc] nicht definiert werden)

Sieht, soweit ich das mit meinem Dummy testen kann, erst mal ganz gut aus.

mr_petz · 26 Juni 2022, 16:58:03

Hi yersinia,

Sieht soweit gut aus.
Du könntest noch aus:

Code Auswählen


    let sunOpacity = 0.2 + (0.8 * (this.produce / this.pvmax));
    this.shadowRoot.getElementById('pvvissun').style.opacity = sunOpacity.toFixed(3);

einen Einzeiler machen:

Code Auswählen


    this.shadowRoot.getElementById('pvvissun').style.opacity = (0.2 + (0.8 * (this.produce / this.pvmax))).toFixed(3);

1. Hinweis:
hier muss man nur mit dem addieren aufpassen, weil + ist auch zum anhängen gedacht.

2. Hinweis:
let nimmt man für flexibel veränderbare Variablen und
const für feste konstante Variablen

Die Hinweise sind nur meine Erfahrungen...
Ok das war es von meiner Seite.

LG mr_petz

yersinia · 26 Juni 2022, 17:02:38

Danke fürn x-check, das hilft.

Zitat von: mr_petz am 26 Juni 2022, 16:58:03einen Einzeiler machen:
Code Auswählen Erweitern
this.shadowRoot.getElementById('pvvissun').style.opacity = (0.2 + (0.8 * (this.produce / this.pvmax))).toFixed(3);

Ich könnte noch ein

Code Auswählen


    this.sun.style.opacity = (0.2 + (0.8 * (this.produce / this.pvmax))).toFixed(3);

daraus machen, da wir ja sun schon als objekt deklariert haben...

Shadow3561 · 26 Juni 2022, 17:33:32

Moin,
habe es auch gerade probiert.
has-no-battery funktioniert perfekt.
die grid färbe ändert sich bei mir leider nicht und das sun icon ist zu dunkel.

ich hänge mal meine version an, kannst ja mal rüber schauen ob du etwas daraus gebrauchen kannst.

Mit freundlichen Grüßen

yersinia · 26 Juni 2022, 20:16:24

Mmmh, dies kann ich nicht nachvollziehen. Ich muss aber gestehen, dass ich keine Hardware zum Nachstellen habe. Es würde sehr helfen wenn du zum einen Device-List(s) (anonymisiert) und die HTML Einbindung posten würdest. So ist es schwer, das ganze aus der Ferne nachzustellen.

Hast du mal ein list der typischen Werte von

Zitat[feed]="SE3500H:Hausverbrauch"
[produce]="SE3500H:AC_current_W"
[pvmax]="SE3500H:3500"
[receive]="SE3500H:Power"

Meines Verständnis nach sind
- feed => Einspeisung PV ins Stromnetz
- receive => Entnahme aus dem Stromnetz
- produce => aktuell generierte Energie PV Anlage
- pvmax => ist die Maximalleistung der PV Anlage

Demnach müsste doch eigentlich sich die Einspeisung/Verbrauch aus dem Stromnetz aus (receive - feed) ergeben und ist nur dann negativ, wenn man mehr einspeist als verbraucht, korrekt? Dann würde ich die Farbe eher aus der Differenz ableiten, in etwa so:

Code Auswählen

  colorGrid() {
    let gridconsumption = this.receive - this.feed;
    if(this.gridconsumption > 0 ) { this.grid.style.fill = "red"; } else { this.grid.style.fill = "yellow"; }
  }

Rot wenn positiv (Verbrauch), gelb wenn 0 oder negativ (Einspeisung)

Im Übrigen ist dies falsch, wenn das Device SE3500H kein Reading '3500' hat:

Code Auswählen

[pvmax]="SE3500H:3500"
Wenn du einen statischen Wert für die Maximalleistung haben möchtest, nimm

Code Auswählen

pvmax="3500"
Möglicherweise ist dies der Grund, dass deine Sonne zu dunkel bleibt. Die Helligkeit errechnet sich aus dem Verhältnis von aktueller Leistung (produce) zu Maximalleistung (pvmax).

Die eckigen Klammern benötigst du bei FTUI3 (und ins hier) nur wenn du Readings aus einem Device auslesen möchtest. Statische Werte definierst du dann einfach ohne eckige Klammern.

Der Vollständigkeit-halber ein paar Beispieldefinitionen von pvvis in FTUI3. Wobei gilt:

Code Auswählen

receive - Verbrauch Haus
feed - Einspeisungs in Netz
produce - Production PV-Anlage
charge - Ladung Akku
discharge - Entladung Akku
soc - Ladezustand Battery
pvmax - Maximale Leistung PV
width - Breite des Widget (opptional; standard ist 200px)
has-no-battery - kein Akku vorhanden (optional)

Alle Werte aus Devicen ausgelesen über FTUI3 typische [parameter]="DEVICE:READING" Notation mit eckigen Klammern.

1. mit Batterie und alle Werte liegen als Reading vor - Breite ist auf 200px festgelegt

Code Auswählen

<ftui-pvvis
  [charge]="DEVICE:CHARGE"
  [discharge]="DEVICE:DISCHARGE"
  [feed]="DEVICE:FEED"
  [produce]="DEVICE:PRODUCE"
  [pvmax]="DEVICE:PVMAX"
  [receive]="DEVICE:GET"
  [soc]="DEVICE:SOC">
</ftui-pvvis>

2. ohne Batterie und pvmax wird mit 3500 fix vorgegeben - Breite ist auf 200px festgelegt

Code Auswählen

<ftui-pvvis
  [feed]="DEVICE:FEED"
  [produce]="DEVICE:PRODUCE"
  pvmax="3500"
  [receive]="DEVICE:GET"
  has-no-battery>
</ftui-pvvis>

3. mit Batterie und alle Werte liegen als Reading vor - Breite ist auf 65% begrenzt

Code Auswählen

<ftui-pvvis
  [charge]="DEVICE:CHARGE"
  [discharge]="DEVICE:DISCHARGE"
  [feed]="DEVICE:FEED"
  [produce]="DEVICE:PRODUCE"
  [pvmax]="DEVICE:PVMAX"
  [receive]="DEVICE:GET"
  [soc]="DEVICE:SOC"
  width="65%">
</ftui-pvvis>

Shadow3561 · 27 Juni 2022, 17:49:04

Moin,
du hast recht,
die Sonne hat ihre Farbe nicht verändert weil ich [pvmax] falsch definiert habe.

Jetzt funktioniert es wie du es möchtest, jedenfalls bei mir.
Die Änderung der colorGrid() kann ich mittels fehlender Produktion gerade nicht testen. Werde ich die Tage dann nachholen.

Wenn ich

Code Auswählen

width="65%"
angebe, bekomme ich kein Widget mehr angezeigt.
ändere ich es in

Code Auswählen

width="300px"
dann funktioniert die Grössenänderung.

Meine Readings im Device sind analog zu der Bezeichnung.

Code Auswählen

[feed]="SE3500H:Momentanleistung_Einspeisung"
                	     [produce]="SE3500H:Produktion"
                	     [pvmax]="3500"
                	     [receive]="SE3500H:Momentanleistung_Bezug"
                	     [home]="SE3500H:Hausverbrauch"

yersinia · 28 Juni 2022, 07:42:28

Zitat von: Shadow3561 am 27 Juni 2022, 17:49:04Wenn ich
Code Auswählen Erweitern
width="65%"
angebe, bekomme ich kein Widget mehr angezeigt.
ändere ich es in
Code Auswählen Erweitern
width="300px"
dann funktioniert die Grössenänderung.

Ah, danke für das Feedback - die 65% hier beziehen sich afaik auf das Elternelement und wenn dort nichts definiert ist, sind 65% von nichts immer noch nichts. Aber gut wenn es mit fester px-Angabe funktioniert.

Zitat von: Shadow3561 am 27 Juni 2022, 17:49:04Meine Readings im Device sind analog zu der Bezeichnung.
Code Auswählen Erweitern
[feed]="SE3500H:Momentanleistung_Einspeisung" [produce]="SE3500H:Produktion" [pvmax]="3500" [receive]="SE3500H:Momentanleistung_Bezug" [home]="SE3500H:Hausverbrauch"

Spar' dir die [] bei pvmax, da es kein Reading aus einem FHEM-Device ist:

Code Auswählen

[feed]="SE3500H:Momentanleistung_Einspeisung"
[produce]="SE3500H:Produktion"
pvmax="3500"
[receive]="SE3500H:Momentanleistung_Bezug"
[home]="SE3500H:Hausverbrauch"

yersinia · 28 Juni 2022, 11:13:48

~~Anbei eine neue Version.~~

mr_petz hat eine dynamischere Batterieladestandanzeige beigesteuert - die natürlich nur dann angezeigt wird, wenn eine Batterie vorhanden ist. Die Batterieladestandanzeige richtet sich im Standard an der Prozentangabe:
0 - Batterie ist ausgegraut
1 bis 24 - kein Balken
25 bis 49 - ein Balken
50 bis 74 - zwei Balken
75 bis 94 - drei Balken
ab 95 - vier Balken

Diese Wertegrenzen können manipuliert werden durch das optionale Attribut battstep. Die oben genannten Wertegrenzen entsprechen:

Code Auswählen

battstep="24,49,74,95"
Es werden also vier Werte erwartet - ansonsten fallen die Werte auf den Standard zurück. Wird battstep nicht gesetzt bleibt es bei oben genannten Grenzwerten.

Weiterhin wird die Animation der Ladeflüsse in Abhängigkeit der Leistung der PV Anlage berechnet. Vorher gab es feste Werte: inaktiv bei 0, bis 1000 langsame Animation, bis 2000 mittlere Animation, über 2000 schnelle Animation. Der Grenzwert 1000 wird durch 1/3 von pvmax, der Grenzwert 2000 durch 2/3 von pvmax ersetzt. Setzt also pvmax (als Beispiel mit 3500):

Code Auswählen

pvmax="3500"

yersinia · 30 Juni 2022, 12:30:31

~~Anbei eine neue Version.~~

mr_petz hat die Auswertung von battstep robuster gestaltet. Danke dafür.
Der Parameter battstep erwartet genau vier Werte - mehr oder weniger werden einfach ignoriert.

Weiterhin verfärbt sich die Batterie grün wenn geladen und rot wenn entladen wird. Die Batteriebalken (Ladestandsanzeige) sind animiert und zeigen an, dass die Batterie Ge/Entladen wird.

Die Farben sind dem FTUI3 Farbschema angepasst worden.