Hauptmenü

[FTUI 3] Charts

Begonnen von grossmaggul, 15 Januar 2021, 10:23:02

Vorheriges Thema - Nächstes Thema

Wolfgang Hochweller

#15
Darf ich den Code zu diesem Beispiel mal sehen ?

Wenn ich das so hinkriegen wuerde, waere ich schon sehr weit.

Das sieht ja anders aus als auf GitHub.

StephanFHEM

#16
das klappt soweit schon alles super. Danke dafür!

ich möchte jetzt gerne für bestimmte Charts noch folgendes einstellen, weiß aber nicht wie:

- Navigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag
- Die Farbe der Achsenbeschriftung etc. auf weiß ändern

Gibt es dafür Attribute?

edit (hier noch zwei Bugs?):
- wenn ich Attribut fill setze dann füllt er immer von 0 aus... bei dem Gefrierschrank lasse ich mir von -30 bis -10 anzeigen. Die Füllung kommt dann von oben was komisch aussieht. Kann das geändert werden? Bei FTUI2 war das anders
- wenn in dem Log-Device zum Beispiel %Y-%m-%d definiert habe wird in dem Device jeden Tag eine neue Log-Datei geschrieben. Es wird im Chart dann immer nur die aktuelle angezeigt. Wenn ich einen Tag zurückgehe hat er die Daten nicht

OdfFhem

@StephanFHEM

ZitatNavigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag
Vermutlich reicht der Verzicht auf ftui-chart-controls ...

setstate

Farben werden per Theme festgelegt. Man sollte vermeiden, Farben direkt auf die Elemente zu setzen. Wenn man dann Tag/Nacht Umschaltung realisieren will oder den Style ändern möchte, würde man anfangen, alles wieder von Hand zu suchen und zu ersetzen.
Für eine gute Usability sollte man eh nur wenige Grundfarben benutzen, sonnst leidet die Übersichtlichkeit.
Im Theme-File gibt es dafür

  --primary-color:
  --secondary-color:

  --success-color:
  --info-color:
  --warning-color:
  --danger-color:
  --light-color:
  --medium-color:
  --dark-color:

Light, Medium, Dark sind Grauabstufungen

Diese 9 Grundfarben werden dann auf die Funktions-Variablen angewendet:

  --checkbox-off-color: var(--dark-color);

Dort sollten dann keine zusätzlichen Farben benutzt werden.

Für Chart kann man im Theme-File folgende Variablen benutzen:

--chart-legend-font-size
--chart-legend-color
--chart-title-color
--chart-title-font-style
--chart-text-color
--chart-grid-line-color
--chart-tick-font-size
--chart-font-style
--chart-font-family

Man kann die Variablen auch nur in einem HTML File direkt per style Tag setzen:

  <style>
    #mychart1 {
      --chart-text-color: #ffdd44;
    }
  </style>


Das gilt dann für ein Chart mit ID=mychart1


<ftui-chart id="mychart1"


Oder mit

  <style>
    ftui-chart {
      --chart-text-color: #ffdd44;
    }
  </style>


für alle Charts auf der Seite.

StephanFHEM

Danke für die ersten Antworten:

- den Tag ftui-control wegzulassen sorgt tatsächlich dafür, dass die komplette Navigation nicht mehr angezeigt wird. Super!
- Farbe funktioniert für alle Charts wenn ich es in style/body packe. Wenn ich das mit der Chart-ID versuche geht es leider nicht. Da ich es auch nur für einen sehr kleinen Anteil meiner Charts gebraucht hätte und es bei den anderen bescheiden aussieht lass ich es jetzt wie es ist:-)

@setstate: ich arbeite auch mit wenigen Farben damit es stimmig ist aber es sind halt nicht die selben die du bei dir benutzt hast... halt ein anderes Design:-) schaust du dir die von mir genannten Probleme/Bugs auch noch an? Gerade der Fill im Minus-Bereich ist zwar mathematisch richtig, sieht aber komisch aus.. die Tages-Logs könnte ich notfalls FHEM-seitig auch auf wöchentliche Log-Dateien umstellen. Ich glaube auch so ein Thema gab es damals schonmal bei FTUI2

Dracolein

Gibt es Möglichkeiten, die Bezüge z.B. zur X-Achse zu konfigurieren?
Beispielsweise möchte ich meinen Gasverbrauch über die letzten 30 Tage darstellen.

In FTUI 2 lief das über

                                data-daysago_start="30d"
                                data-daysago_end="-1"
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

grossmaggul

Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.

<ftui-chart unit="month">
   <ftui-chart-data>....</ftui-chart-data>
   <ftui-chart-control>...</ftui-chart-control>
</ftui-chart>
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate

#22
Ich probiere gerade eine unit="30d" einzubauen

<ftui-chart unit="30d">
   <ftui-chart-data>....</ftui-chart-data>
</ftui-chart>


Teste noch etwas und laden das dann hoch.

Edit: unit=30d und 24h ist jetzt verfügbar.

Dracolein

Zitat von: grossmaggul am 05 November 2021, 08:58:23
Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.

<ftui-chart unit="month">
   <ftui-chart-data>....</ftui-chart-data>
   <ftui-chart-control>...</ftui-chart-control>
</ftui-chart>


Prima, das funktioniert. Zwar ist das Diagramm jetzt zum Monatsbeginn erstmal leer, aber ich könnte die "Vorspulen / Zurückspulen"-Knöpfe unter dem Diagramm einbinden, um rückwirkenden Content zu betrachten. Ich probier das später sofort nochmal aus.

Ansonsten sehen meine ersten "Prototypen" schon zufriedenstellend und hübsch aus.


by the way:
Wie wärs mit einem Thread über FTUI3, wo jeder mal ein paar Screenshots seiner eigenen Schöpfungen zeigt? Ich wäre total gespannt, um coole Ideen zu übernehmen. (oder gibts so einen Thread vll. schon?)
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

grossmaggul

ZitatIch probiere gerade eine unit="30d" einzubauen
Jetzt sehen "week" und "month" aber ein wenig seltsam aus.
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

LuGu

Ich habe Probleme mit den Charts und hoffe auf eure Hilfe.
Immer wenn ich meine FTUI3 Seite mit Charts öffne, erhalte ich folgende Logeinträge:

2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 28.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 33.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Klima_2_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 31.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Klima_1_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 33.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 26.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 27.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 29.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 30.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 34.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.


Wenn ich <ftui-chart> ... </ftui-chart> lösche, ist im Log wieder alles ok.
Hier das Konstrukt für die Seite:

<ftui-chart title="Temperatur (Innen)" height="250px" prefetch="86400" extend>
  <ftui-chart-data label="Flur" point-radius="0" color="green" log="FileLog_eg_th_Heizung" spec="eg_th_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="WC" point-radius="0" color="blue" log="FileLog_eg_wc_Heizung" spec="eg_wc_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Küche" point-radius="0" color="red" log="FileLog_eg_ku_Heizung" spec="eg_ku_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Heizung_2" spec="eg_wz_Heizung_2_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Wohnen" point-radius="0" color="violet" log="FileLog_eg_wz_Heizung_1" spec="eg_wz_Heizung_1_HM:actTemp"></ftui-chart-data>
  <ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>


Die gleichen Filelogs benutze ich auch in fhem für Plots. Dort gibt es keine Logeiträge.

Ich hoffe mich kann jemand in die richtige Richtung schubben!

Gruß Lutz
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

grossmaggul

Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.

Beispiel, im Logfile hat man folgende Zeile:

2021-01-01_00:02:02 wz.heizkoerper desired-temp: 16.0

Position 1 ist die Timestamp
Position 2 das Device
Position 3 desired-temp
Position 4 ist der Wert den Du darstellen möchtest.

FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

LuGu

Zitat von: grossmaggul am 05 November 2021, 22:51:07
Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.

Danke grossmoggul,

das hat gepasst. Wieder was gelernt. ;-)

Gruß Lutz
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

setstate

Zitat von: grossmaggul am 05 November 2021, 20:29:17
Jetzt sehen "week" und "month" aber ein wenig seltsam aus.

week ist jetzt wieder gut, bei month sehe ich keinen Fehler

Dracolein

Klappt perfekt, dankeschön  8)
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;