Performance-Vergleich VIS HTML Binding vs. JS

WolfgangFB

Ich möchte mir in einer HTML Tabelle ca. 500 Datenpunkte (Stromverbrauch, Leistung, Kosten, Historie) anzeigen lassen.
Was belastet das System mehr? Die Tabelle bei jeder Datenpunktänderung per Javascript komplett neu zu erstellen, diese in einen Datenpunkt schreiben und dann per Basic String in VIS anzeigen zu lassen oder einmalig eine Tabelle zu erstellen bei der alle Zellen mit Bindings auf die Datenpunkte vershen ist?
Also entweder per JS eine Tabelle wie

<table>
	<tr>
		<td>1</tf>
		<td>2</tf>
	</tr>
		<td>3</tf>
		<td>4</tf>
	<tr>
	</tr>
</table>

aus den Datenpunkten erstellen (JS ist also für die Aktualisierung zuständig) oder einmalig

<table>
	<tr>
		<td>{Datenpunkt1}</tf>
		<td>{Datenpunkt2}</tf>
	</tr>
		<td>{Datenpunkt3}</tf>
		<td>{Datenpunkt4}</tf>
	<tr>
	</tr>
</table>

und VIS (oder wer auch immer) muss sich um die Aktualisierung kümmern.

OliverIO

@wolfgangfb
Es gibt in vis eine Grenze die mehr wie 50 bindings in einem Widget nicht erlaubt.
Vorteil von bindings sind, das bei Änderung,
Wirklich nur der konkrete wert im HTML geändert wird.
Wenn du nun eine Tabelle mit Javascript auf dem Server erstellt wird bei jeder Änderung die komplette Tabelle auf dem Client ersetzt.
Wie oft kommen den Änderungen tatsächlich vor?
Nur gelegentlich alle paar Minuten? Oder gar sekündlich?
Wenn sekündlich würde ich mir eine andere Ansicht überlegen.
Interessiert sich jemand zu jedem Zeitpunkt für alle Werte?
Evtl kann man das in verwcjieden3 Gruppen aufteilen.
Bspw nach Räume oder alle Temperaturen etc

WolfgangFB

@oliverio

Hallo

Die Änderungen kommen schon mehr oder weniger sekündlich.
Woher kommt die Begrenzung auf 50 Bindungs?

arteck

@wolfgangfb sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Die Änderungen kommen schon mehr oder weniger sekündlich.

und wozu braucht man das?? nur weil es geht heisst es nicht dass man damit direkt rumhampeln muss
ich kenne hier im Haus kein Fall wo ich diese Informationen in diesen Abständen bräuchte..

ok einer LUX Wert von dem Aussenmesser.. aber das wars auch schon

liv-in-sky

@wolfgangfb

so würde man das nicht machen

ein json erzeugen mit den datenpukten und dann ein json widget für die anzeige:

siehe:

so: https://forum.iobroker.net/post/883281

oder komplizierte - https://forum.iobroker.net/post/344576

WolfgangFB

@arteck sagte in Performance-Vergleich VIS HTML Binding vs. JS:

@wolfgangfb sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Die Änderungen kommen schon mehr oder weniger sekündlich.

und wozu braucht man das??

Na ja, das fällt eben quasi an. Manche Stromsensoren liefern nur die momentane Leistung, andere nur die Energiezuwächse (S0 Impulse), wenn ich von den Sensoren, die nur die Leistung liefern die Gesamtenergie haben will muss ich auf jede Änderung reagieren und kann nicht minütlich den aktuellen Wert abfragen.
Ob man das alles auch in Echtzeit anzeigen muss steht auf einem anderen Blatt.

Codierknecht

@wolfgangfb
Zum Berechnen kann man ja mit Selektoren arbeiten.
Und für die Anzeige das Ganze in einigen wenigen DP aggregieren.

Aber 500 Werte als Tabelle ... holla die Waldfee - das liest doch kein Mensch

WolfgangFB

@liv-in-sky sagte in Performance-Vergleich VIS HTML Binding vs. JS:

@wolfgangfb

so würde man das nicht machen

ein json erzeugen mit den datenpukten und dann ein json widget für die anzeige:

Was wäre der Vorteil davon ein json zu machen und nicht gleich die html Tabelle? In der Tabelle kann ich z.B. problemlos bestimmte Werte hervorheben (farblich oder über die Schrift, mir fällt jetzt nicht ein wie ich das in json machen könnte)

arteck

@wolfgangfb sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Manche Stromsensoren liefern nur die momentane Leistung

na und.. wo ist das problem.. der wert wird einmal die stunde berechnet .. oder wenn du es schon magst dann einmal die minute..
mach ich mit meiner PV so.. mir eschliesst sich nicht nochmal warum man 500 Datenpunkte einmal die Sekunde berechnen muss

oder bin zu doof es zur verstehen

wer guckt sich eine Tabelle mit 500 Datenpunkten mit welchen mehrwert .. aber egal .. ist ja dein Ding..ich mein ja nur

OliverIO

@wolfgangfb

Die Begrenzung kommt vom Programmierer von vis
Die bindings sind aufgrund dem zusätzlichen Interpretationsbedarf auch intern etwas aufwändig gelöst.
Daher wahrscheinlich die Begrenzung

Du kannst das gerne probieren mit Bord Mittel umzusetzen, aber ich glaube nicht das du da glücklich wirst.
Das beste ist, wie von mir schon erwähnt, die Daten sinnvoll zu gruppieren und dann in verschiedenen views anzuzeigen.
Von der Datenmenge kann der Iobroker/Server die 500 werte locker verarbeiten.

Auch die Daten auf dem Server in ein json zu packen halte ich nicht sinnvoll, da dann sekündlich das neu erstellt wird und auf dem Client in eine Tabelle eingetragen wird. Auch das Widget json table erzeugt dann die komplette Tabelle immer wieder neu.
Ob der Client/Browser dabei schnell genug ist müsste man ausprobieren.
Ansonsten kann es sein das die Tabelle zum flackern anfängt.

liv-in-sky

@wolfgangfb sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Die Änderungen kommen schon mehr oder weniger sekündlich.

da unterstütze ich @arteck - sekündliche anzeige macht keinen wirklichen sinn

um die leistung/strom zu überwachen - falls man sorge hat, das ist zu hoch, würde ich ein extra script überlegen, was bei einem zu hohen wert einen alarm ausgibt

kosten und kWh reichen jede stunde und historie auch - habe ich ja erwähnt - json - man kann auch darin einzelne werte farblich anpassen, die entweder im script berechnet werden oder immer farblich markiert werden - dabei muss eigentlich nur auf die sortierung aufgepaßt werden - die funktioniert dann nicht mehr im widget, weil die zahlenwerte in html code angepaßt werden

auch das organisieren der tabelle ist schwieriger - normalerweise haben die ein struktur und können mit einer schleife ausgelesen werden - ein neues gerät wird so einfach in die tabelle integriert - ohne das widget angleichen zu müssen

bei sekundlicher messung - vermute ich - muss auch das tablet, welche die vis anzeigt - genug performance haben - wir haben das mal mit einem strommesser widget getestet, dort blieb das widget irgendwann stehen, weil die daten den cache crashten

WolfgangFB

@arteck sagte in Performance-Vergleich VIS HTML Binding vs. JS:

@wolfgangfb sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Manche Stromsensoren liefern nur die momentane Leistung

na und.. wo ist das problem.. der wert wird einmal die stunde berechnet .. oder wenn du es schon magst dann einmal die minute..
mach ich mit meiner PV so.. mir eschliesst sich nicht nochmal warum man 500 Datenpunkte einmal die Sekunde berechnen muss

Ich berechne nicht 500 Datenpunkte pro Sekunde. Es gibt insgesamt ca. 500 Datenpunkte. Pro Verbraucher einmal Momentanleistung, Gesamtenergieverbrauch, Verbrauch heute, Verbrauch gestern, Verbrauch letzter Monat, Verbrauch letzte Jahr. Macht bei ca. 70 Verbrauchern 420 Datenpunkte (OK, etwas weniger als 500).
Es kommt im Schnitt jede Sekunde irgendein Messwert an (Leistung oder Energie), d.h. ich berechne und schreibe dann die restlichen 5 Datenpunkte für diesen Sensor. Da ich die Werte eh alle in einem Array habe kann ich auch gleich eine Tabelle daraus basteln.

joergeli

@wolfgangfb
Ich weiß nicht genau, ob ich Dich richtig verstanden habe, jedenfalls bin ich bei meiner Tabellenerstellung mittels bindings wohl auch an die von @OliverIO erwähnte Begrenzung auf 50 Bindings/Widget gekommen.

Die untere, große Tabelle habe ich dehalb aus mehreren basic-HTML Widgets zusammengesetzt, d.h. die "Teiltabellen" entsprechend aneinander geschoben.
Der obere Teil dieser Gesamttabelle beinhaltet z.B. die nur Daten von "Waschmaschine" bis "Wetter-PC" und sieht als HTML/CSS so aus:

<style type="text/css">
table.quer_oben {
table-layout: fixed;
width: 1047px;

  font-family: Arial, Helvetica, sans-serif;
  /* border: 2px solid #6a6a6a; */
  	border-top: 2px solid #6a6a6a;
	border-right: 2px solid #6a6a6a;
	border-left: 2px solid #6a6a6a;
  background-color: #e3e3e3;
  text-align: right;
  border-collapse: collapse;
}
table.quer_oben td, table.quer_oben th {
  padding: 1px 8px;
}
table.quer_oben tbody td {
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  border-top: 1px solid #8a8a8a; 
  border-bottom: 1px solid #8a8a8a; 
}
table.quer_oben td:nth-child(even) {
  background: #EEF0F3;
}
table.quer_oben thead {
  background: #ffEAEA;
  border-bottom: 2px solid #000000;
}
table.quer_oben thead th {
  font-size: 11px;
  font-weight: bold;
  color: #bb0000;
  /* background: #ffe4c4; */
  background: #f2fdff;
  text-align: center;
  border-left: 1px solid #000000;
  border-bottom: 2px solid #7a7a7a;  
}
table.quer_oben thead th:first-child {
  border-left: none;
}


</style>


<table class="quer_oben">
<thead>
<tr>
<th colspan="2" style="color: #bb0000; border-right: 2px solid #7a7a7a;">Energieverbrauch</th>
<th>Heute</th>
<th>Gestern</th>
<th>Woche</th>
<th>Monat</th>
<th>Jahr</th>
<th>Vorwoche</th>
<th>Vormonat</th>
<th style="border-right: 2px solid #7a7a7a;">Vorjahr</th>
<th width="150px">akt. Leistung</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" style="background: #f2fdff; color: #bb0000; font-size: 11px; font-weight: bold;">Waschmaschine</td>
<td align="center" style=" background: #f2fdff; border-right: 2px solid #7a7a7a;"><img src="/vis.0/Virtuelles Haus/waschmaschine.png" width="43px" height="20px"></td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.heute} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.gestern} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.woche} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.monat} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.jahr} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.vorwoche} Wh</td>
<td>{javascript.0.ShellyVerbrauchSummen.Waschm.vormonat} Wh</td>
<td style="border-right: 2px solid #7a7a7a;">{javascript.0.ShellyVerbrauchSummen.Waschm.vorjahr} Wh</td>
<td style="background: #f2fdff;"></td>
</tr>
<tr>
<td align="left" style="background: #f2fdff; color: #bb0000; font-size: 11px; font-weight: bold;">W&auml;schetrockner</td>
<td align="center" style=" background: #f2fdff;border-right: 2px solid #7a7a7a;"><img src="/vis.0/Virtuelles Haus/waesche-trockner.png" width="22px" height="20px"></td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.heute} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.gestern} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.diese_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.dieser_monat} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.dieses_jahr} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.letzte_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.letzter_monat} Wh</td>
<td style="border-right: 2px solid #7a7a7a;">{javascript.0.ShellyVerbrauch.SHPLG-S#5A565A#1.Relay0.letztes_jahr} Wh</td>
<td style="background: #f2fdff;"></td>
</tr>

<tr>
<td align="left" style="background: #f2fdff; color: #bb0000; font-size: 11px; font-weight: bold;">Geschirrsp&uuml;ler</td>
<td align="center" style="background: #f2fdff; border-right: 2px solid #7a7a7a;"><img src="/vis.0/Virtuelles Haus/geschirrspueler.png" width="22px" height="20px"></td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.heute} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.gestern} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.diese_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.dieser_monat} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.dieses_jahr} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.letzte_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.letzter_monat} Wh</td>
<td style="border-right: 2px solid #7a7a7a;">{javascript.0.ShellyVerbrauch.SHPLG2-1#284757#1.Relay0.letztes_jahr} Wh</td>
<td style="background: #f2fdff;"></td>
</tr>

<tr>
<td align="left" style="background: #f2fdff; color: #bb0000; font-size: 11px; font-weight: bold;">Arbeits-PC</td>
<td align="center" style="background: #f2fdff; border-right: 2px solid #7a7a7a;"><img src="/vis.0/Virtuelles Haus/computer-monitor.png" width="23px" height="20px"></td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.heute} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.gestern} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.diese_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.dieser_monat} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.dieses_jahr} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.letzte_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.letzter_monat} Wh</td>
<td style="border-right: 2px solid #7a7a7a;">{javascript.0.ShellyVerbrauch.SHPLG-S#5AD270#1.Relay0.letztes_jahr} Wh</td>
<td style="background: #f2fdff;"></td>
</tr>
<tr>
<td align="left" style="background: #f2fdff; color: #bb0000; font-size: 11px; font-weight: bold;">Wetter-PC</td>
<td align="center" style="background: #f2fdff; border-right: 2px solid #7a7a7a;"><img src="/vis.0/Virtuelles Haus/computer-monitor.png" width="23px" height="20px"></td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.heute} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.gestern} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.diese_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.dieser_monat} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.dieses_jahr} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.letzte_woche} Wh</td>
<td>{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.letzter_monat} Wh</td>
<td style="border-right: 2px solid #7a7a7a;">{javascript.0.ShellyVerbrauch.SHPLG-S#3A44AC#1.Relay0.letztes_jahr} Wh</td>
<td style="background: #f2fdff;"></td>
</tr>


</tbody>
</table>

Die Werte werden "live" aktualisiert, d.h. je nachdem, welcher Datenpunkt sich ändert.
Ich wollte halt auch gerne die Verbrauchsdaten (größtenteils mit Shellys geloggt) unserer Haushaltsgeräte in nur einer View zusammengefasst haben.

Evtl. hilft Dir das weiter?

liv-in-sky

@joergeli hast du bei der aktuellen leistung auch einen dauernden abgleich in der tabelle ? oder ist es wie bei den sonoffs, wo die aktuelle leistung über teleperiod eingestellt wird - bedeutet: die aktuelle leistung kommt je nach eingestellter zeit - z.b alle 15 sek

picky

@joergeli Das sieht ja wirklich super aus, würdest Du vielleicht auch den Code von einer oberen Tabelle teilen
Ich habe auch 2 Javascripte laufen für Sonoff und Shelly, die alle 15 Minuten die Werte fast so wie bei Dir zusammenfassen und in die Datenpunkte schreiben

Jey Cee

@wolfgangfb um die Frage kurz und knapp zu beantworten:
Bindings sind die schlechteste Wahl wegen dem Overhead der da dran hängt. Davon abgeshen das jeder Wert einzeln Übertragen werden muss.

Die JSON variante ist deutlich besser, hat aber den Nachteil das die Daten noch in HTML gewandelt werden. Hier wird nur eine abfrage gemacht und die Menge an Daten spielt eine kleine Rolle.

Die HTML variante wird performance mässig im Browser am besten sein. Der Browser muss hier nicht mehr viel verarbeiten. Dafür ist die Erstellung im Backend etwas Aufwändiger.

Homoran

Außerdem greift ein Binding in der vis auf die Ressourcen des meist deutlich schwächeren Frontends zu, während js auf dem Server läuft.

OliverIO

@jey-cee
Der Mechanismus von Iobroker jeden datenpunkt einzeln zu übertragen finde ich per websocket eigentlich schon effizient
Sonst müssten ja alle 500 Daten jedesmal auch wenn nur einer sich davon ändert in Summe übertragen werdeb

OliverIO

@homoran sagte in Performance-Vergleich VIS HTML Binding vs. JS:

Außerdem greift ein Binding in der vis auf die Ressourcen des meist deutlich schwächeren Frontends zu, während js auf dem Server läuft.

Das ist korrekt
Aber das muss er ausprobieren wieviel sein endgerät schafft.
So schlimm ist es mit dem binding jetzt auch nicht, aber bei 500
Und sekündlicher Aktualisierung könnte man zu Problemen kommen.

Es geht ja hier darum ihm evtl eine Menge Arbeit zu ersparen.
Wenn er es dennoch ausprobieren möchte dann gerne.

joergeli

@liv-in-sky
Die Leistungsdaten von "Energieverbrauch Haus" kommen über einen Hichi-Leskopf rein, d.h. über den Sonoff-Adapter.
Da greift dann die TelePeriod, welche ich auf 30 Sekunden eingestellt habe.

Bei den restlichen Leistungsdaten, die mittels Shelly-Adapter (COAP) ermittelt werden, kann ich es nicht sagen, da bei den Shellys ja meines Wissens nicht so etwas wie TelePeriod eingestellt werden kann.
"Gefühlt" werden diese Leistungsdaten aber sehr schnell aktualisiert.

NEWS

Performance-Vergleich VIS HTML Binding vs. JS

Support us

947
Online

31.9k
Users

80.2k
Topics

1.3m
Posts

NEWS

Performance-Vergleich VIS HTML Binding vs. JS

Support us

947Online

31.9kUsers

80.2kTopics

1.3mPosts

947
Online

31.9k
Users

80.2k
Topics

1.3m
Posts