[FTUI 3] Charts

[OdfFhem]

@Stonemuc

FTUI2 verwendet die bei SVG übliche Vorgehensweise:
- der 1.Eintrag gibt die Spalte an, aus der der Wert entnommen werden soll
- der 2. Eintrag ist ein Teil eines regulären Ausdrucks und entspricht meist dem Readingnamen oder Gerätename.Readingname

Aus z.B.

Code Auswählen Erweitern


  [spec]="4:sGlobal | part(13)"

sollte demnach

Code Auswählen Erweitern


  spec="13:sGlobal"

werden ...

[Stonemuc]

Okay...ich bin bis jetzt davon ausgegangen, dass wenn ich z.B.:

Code Auswählen Erweitern

log="FileLog_TK_Naehzimmer" spec="4:temperature"

als Code schreibe, dass im Logfile die Spalte 4 nach "temperature" durchsucht wird und mir der Wert dahinter ausgegebn wird.
Funktioniert ja auch so bei all meinen anderen Charts die ich erstellt habe.

Ich versuch's mal mit deinem Tipp, denke du hast da bedeutend mehr Durchblick als ich.

[OdfFhem]

Ich versuch's mal mit deinem Tipp, denke du hast da bedeutend mehr Durchblick als ich.

Könnte sein, Fehleinschätzungen meinerseits sind aber nicht auszuschließen

... dass im Logfile die Spalte 4 nach "temperature" durchsucht wird und mir der Wert dahinter ausgegebn wird ...

Der reguläre Ausdruck (in Deinem Fall "temperature") wird auf die komplette Logzeile angewendet. Man kann also u.a. gemäß Readingnamen, Gerätenamen, Uhrzeit, Wertmuster, ... vorfiltern.

Im Folgenden ein kurzer Auszug aus einem Logfile:
- 1.Zeile entspricht einem typischen Eintrag
  - 1.Spalte enthält Datum und Uhrzeit
  - 2.Spalte enthält den Gerätenamen
  - 3.Spalte enthält den Readingnamen
  - 4.Spalte enthält einen einspaltigen Wert (daher ist 4 die am häufigsten verwendete Spaltennummer)
- 2.Zeile entspricht einem Eintrag, bei dem der Wert selbst aus mehreren Spalten besteht
  - "4" selektiert 703; "8" selektiert 9.00
- 3.Zeile entspricht einem (speziellen) Eintrag, der den state (ohne Readingnamen) darstellt
  - Tmin ist nicht der Readingname, sondern der erste Bestandteil vom Wert von state

Code Auswählen Erweitern


2022-03-24_05:38:09 Wetter temperature: 1.6
2022-03-24_05:38:09 Wetter lastConnection: 703 values captured in 9.00 s
2022-03-24_05:38:09 Wetter Tmin: 5 Tmax: 16 T: 1.6 H: 80.3 W: 0 P: 1029.7


[Stonemuc]

kurze Rückmeldung - ich kann deinen Durchblick nur bestätigen. Das Diagramm wird nun richtig angezeigt - TOP

[Stonemuc]

Hat jemand eine Idee wie ich die im Anhang gezeigte Funktion vom gplot File in's FTUI3 Chart umwandeln kann? Hab es mal selbst versucht, klappt aber nicht...

So klappt es nicht:

Code Auswählen Erweitern

<ftui-chart-data label="HC1Soll-HC1Ist" fill background-color="rgba(21,0,249,0.2)" color="rgba(21,0,249,1)" log="FileLog_Mythz" spec="17:sHC1:.*$val=($fld[16]-$fld[14])" [update]="Mythz:state:time"></ftui-chart-data>

[OdfFhem]

@Stonemuc

Gemäß Deinem Screenshot müsste spec in etwa so aussehen:

Code Auswählen Erweitern


spec="17:sHC1:0:$val=($fld[16]-$fld[14])"


Die 3.Spalte bzgl. ":" entspricht einem Initialwert (bei Dir 0)
Die 4.Spalte bzgl. ":" entspricht einer Art Funktion (bei Dir eher eine Zuweisung)

[Stonemuc]

Nochmald danke..klappt

[Sailor]

Siehe auch https://forum.fhem.de/index.php/topic,115259.msg1216689.html#msg1216689
Ein herzerfrischendes "Moin" vom achtern Diek vorweg.

Mein ftui3 - Frontend ist im laufe der Zeit immer mächtiger geworden.
Leider hat dies die Reaktionszeit erheblich in Mitleidenschaft gezogen.

Zur Probe habe ich mal die gesamten Charts auskommentiert und siehe da, die Sache läuft wieder flüssig.
Mir ist aufgefallen, dass die Charts laufend in Ihrem Anzeigebereich (in meinem Fall der aktive Tag) im Hintergrund aktualisiert werden, auch wenn diese aktuell gar nicht ausgewählt wurden.
Da die meisten Daten im 5-Minuten Intervall aufgenommen werden, kommt dort ein mächtiger Datenstrom zusammen der selbst die Video - Aufnahmen blockiert.

Meine Fragen daher:
a) Ist es möglich dem Server zu beizubringen, den Charts nur den neuen Datenpunkt zu übermitteln und in den Cache abzulegen so dass der Chart aus den akkumulierten Cache-Werten dargestellt wird?
b) Ist es möglich dem Server beizubringen, nicht jeden Datenpunkt zu übermitteln sondern nur sinnvoll sichtbare Änderungen?
c) Ist es möglich alle Charts im Hintergrund ruhen (einfrieren) zu lassen, bis das entsprechende Chart sich aktiv im Vordergrund (Sichtbereich) befindet und erst dann den Datenstream beginnen zu lassen?

Hintergrund:
Ich habe 12 Räume
Jeder Raum verfügt über einen Chart mit 7 Graphen (Soll-Temperatur, Ist-Temperatur, Heizkörper-Ventil - Position, Feuchtigkeit, Licht, Rolladen, Fensteroeffnung).
Die Datenpunkte werden laut Homematic alle 5min gesammelt bzw, ins Log abgelegt => 20 Datenpunkte pro aufgezeichnete Stunde und 480 Datenpunkte pro Tag.

12 * 7 * 20 = 1680 Datenpunkte bei jedem kleinen Update im Chart.

Danke für Eure Hilfe

Gruß
    Sailor

[papa]

Mit Chart.js (was hier glaube ich verwendet wird) ist es möglich, neue Daten hinzuzufügen und den Chart zu aktualisieren. Ich hatte das mal ohne FTUI-Anbindung ausprobiert und konnte einen Chart mit den über das Websocket gesendeten Updates aktualisieren. Wegen Mangels an Zeit liegt das ganze aber brach.
Falls Interesse besteht, kann ich den Proof-Of-Concept Code gerne zur Verfügung stellen.

[Sailor]

Mit Chart.js (was hier glaube ich verwendet wird) ist es möglich, neue Daten hinzuzufügen und den Chart zu aktualisieren. Ich hatte das mal ohne FTUI-Anbindung ausprobiert und konnte einen Chart mit den über das Websocket gesendeten Updates aktualisieren. Wegen Mangels an Zeit liegt das ganze aber brach.
Falls Interesse besteht, kann ich den Proof-Of-Concept Code gerne zur Verfügung stellen.

Wenn das nur die "Updates" waren, dann ist das ja o.k., aber zur Zeit kommen laut Debugging-Mode meines FirefoxBrowsers jedes mal bei einem Update der komplette Satz an Daten erneut durch und nicht nur der neue Datenpunkt. Was ja das eigentliche Problem für die Datenauslastung ist.

Gruss
    Sailor

[Sailor]

Nachtrag

Habe alle Charts raus geschmissen und siehe da, alle Videos laufen wieder flüssig.
Nehme ich auch nur einen Chart wieder auf, egal wie viele Datenpunkte dieser enthält, geht alles wieder in die Knie...

Ich glaube die Charts holen sich laufend neue Daten, ob neue Datenpunkte vorhanden sind oder nicht...
Gibt es eine Option die Daten ausschließlich auf Button-Klick erneut vom Server zu holen - Quasi ein Update Button?

Gruß
    Sailor

[setstate]

[update]="Mythz:state:time"

rauswerfen.

[BigGB]

Hallo zusammen,
ich  habe 2 Charts in meiner Index.html wie folgt eingebunden:

Code Auswählen Erweitern

<!--Stromverbrauch Haus-->
      <ftui-grid-tile row="7" col="6" height="4" width="12" color="secondary" shape="round">
    <header>Stromverbrauch</header>
<ftui-row>
<ftui-column width="90%">
          <ftui-chart y-label="W">
             <ftui-chart-data label="Verbrauch" fill stepped background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog"  file="history" spec="HM_Strom_IEC_01:W"
                          type="line" point-radius="0">
         </ftui-chart-data>
          </ftui-chart>
</ftui-column>
        <ftui-column width="10%" color="secondary">
<ftui-row height="20%">
  <ftui-label [text]="HM_Strom_IEC_01:W | round(1)| fix(1)" decimals="1" size="2"><span slot="unit"> W</span></ftui-label>
</ftui-row>
        <ftui-row height="80%">
          <ftui-slider style="height:90%;" class="size-2" tick="200" wide-tick="1000" has-ruler has-wide-ticks
                       [value]="HM_Strom_IEC_01:W" min="0" max="6000" is-vertical handle="none" readonly
                       [color]="HM_Strom_IEC_01:W | step('0:my_darkred, 2000:my_signalorange, 4000:my_signalgreen')">
          </ftui-slider>
        </ftui-row>
</ftui-column>
</ftui-row>
      </ftui-grid-tile>
<!--Internet-->
      <ftui-grid-tile row="11" col="8" height="4" width="10" color="secondary" shape="round">
    <header>Internet</header>
        <ftui-chart y1-max="200" y-label="Mb/s" y1-label="Ping ms">
          <ftui-chart-data label="DL" fill background-color="#d6305650" color="#d63056" log="myDbLog"  file="history" spec="Internetspeedtest:download"
                       type="line" point-radius="0">
      </ftui-chart-data>
          <ftui-chart-data label="UL" fill background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog"  file="history" spec="Internetspeedtest:upload"
                       type="line" point-radius="0">
      </ftui-chart-data>
          <ftui-chart-data y-axis-id="y1" label="Ping" color="warning" log="myDbLog"  file="history" spec="Internetspeedtest:ping"
                       type="line" point-radius="0">
      </ftui-chart-data>
        </ftui-chart>
     </ftui-grid-tile>

Leider findet da so gut wie keine Aktualisierung der Charts statt.
Woran kann das liegen?
VG Gerald.

[OdfFhem]

Leider findet da so gut wie keine Aktualisierung der Charts statt.
Woran kann das liegen?

Vermutlich liegt es an dem fehlenden [update]-Attribut ...

[BigGB]

Vermutlich liegt es an dem fehlenden [update]-Attribut ...

Danke, das war's