[FHEM-Tablet-UI] Chart

eki · 07 März 2019, 16:28:15

Ich bin an dem Thema schon dran, das sollte eigentlich genau so gehen, wie Du sagst. Dazu habe ich das Clipping überarbeitet (SVGs und clipping Browser übergreifend hinzubekommen ist leider etwas kompliziert).

Allerdings habe ich eine etwas größere Baustelle angefangen (Unterstützung von Touch/Pinch zum interaktiven verschieben und Skalieren der Graphen innerhalb des Charts), bei der ich wohl noch ein paar Tage brauche.

curt · 07 März 2019, 21:30:14

Hallo @eki
ich habe auch noch was - in Form einer IP-Wetterstation ws980wifi. In der Grafik springen die Werte für temperature und humidity jeweils wild zwischen zwei Werten herum.

Das Device kennt u.a. folgende Readings:
* temperature
* temperatureInside
* humidity
* humidityInside

Ich will also temperature darstellen - recht gut erkennbar springt der Graph aber zwischen temperature und temperatureInside. Kann es sein, dass Du nur auf das Vorhandensein eines Strings in einem anderen String testest? Mir sieht das so aus.

Es wäre sehr schön, wenn Du das gelegentlich korrigieren könntest.

P.S: @choenig als Modulautor mit rein.

eki · 08 März 2019, 10:46:54

Das liegt mit ziemlicher Sicherheit an deiner Columnspec (die Daten werden über die Get Funktion der FileLog bzw. DbLog von FHEM geholt, das Chart stellt die dann nur so wie sie kommen dar). Im Log werden die Werte typischerweise so geschrieben, dass hinter dem Namen des Readings ein ':' steht und dann der eigentliche Wert kommt. In der Columnspec wird im zweiten Feld ein Suchstring eingegeben. Dort steht bei Dir wahrscheinlich nur 'temperature'. Das heißt dann dass FHEM das Logfile nach allen Zeilen Filtert, die 'temperature' enthalten. Dazu gehören dann sowohl solche mit 'temperature' als auch die mit 'temperatureInside'. Das Chart bekommt dann eine Liste mit den Werten für beides sortiert nach der Zeit und dadurch springt der Wert immer zwischen den beiden Readings hin und her.

Das Problem lässt sich dadurch lösen, dass Du nicht nur nach 'temperature' filterst sondern nach 'temperature:'. Da aber die ':' schon für die Columnspec als Trenner der einzelnen Felder vorgesehen sind, muss man den ':' noch speziell maskieren. Hier mal ein Beispiel:
aus data-columnspec="4:temperature:" müsstest Du data-columnspec="4:temperature\\x3a:" machen (3a ist der Hex Code für den ':')

curt · 08 März 2019, 21:15:12

Zitat von: eki am 08 März 2019, 10:46:54
Das liegt mit ziemlicher Sicherheit an deiner Columnspec
...
aus data-columnspec="4:temperature:" müsstest Du data-columnspec="4:temperature\\x3a:" machen (3a ist der Hex Code für den ':')

Danke-schön - habe verstanden.

Lichti · 09 März 2019, 08:43:43

Habe jetzt auch schon einige Zeit das Chart-Widget im Einsatz. Super Sache!

Jetzt hätte ich eine Frage, zu der ich hier leider nichts gefunden habe:

Ich zeige Wetterdaten an, und zwar Temperatur und Luftdruck.
Jetzt hätte ich gern noch den Windstärken-Verlauf drin.
Die Werte passen aber nicht zu den beiden vorhandenen Y-Achsen.
Kann ich eine dritte Kurve so skalieren, das diese auch dargestellt wird (ohne Zahlenwerte)?

eki · 09 März 2019, 10:22:01

Ja, das geht. Seit der hier https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935 beschriebennen Version, die auch mit dem normalen update mitkommt, kann man auf beiden Seite beliebig viele y-Achsen definieren. Wie es geht kannst Du unter dem Link oben nachlesen (das Wiki muss mal wieder überarbeitet werden, bin aber aktuell sowieso an einer neuen Version dran, die wieder eingiiges mehr kann, z. B. mit Touch Gesten und er Maus verschieben und zoomen)

Lichti · 09 März 2019, 12:00:59

Super !
Genau das, was ich gesucht habe.
Vielen Dank

curt · 11 März 2019, 19:13:46

@eki - ich schon wieder ...

Meine schicke neue Wetterstation liefert ja Unmengen an Primärdaten. So kam ich auf die Idee, mehrere Grafiken auf einer FTUI-Unterseite (PageButton) darzustellen - die Grafiken haben also die gleiche Datenquelle. Wenn ich testweise beide Grafiken identisch befülle, geht das auch ganz schön.

Wenn ich allerdings in der zweiten Grafik andere Werte der gleichen Device darstellen möchte, wird die zweite Grafik gar nicht gefüllt - zudem dauert der Aufbau der gesamten Seite extrem langsam.

Ist das (momentan) gar nicht möglich? Oder mache ich mal wieder einen Fehler?

eki · 15 März 2019, 15:48:43

Wie üblich brauche ich zum klären ein bisschen mehr Infos. Bitte schick mal ein HTML Deiner Webseite. Grundsätzlich sehe ich aktuell keinen Grund warum das nicht klappen sollte.

amenomade · 15 März 2019, 16:14:39

Hallo @eki

Vielleicht kannst Du diese Frage beantworten? https://forum.fhem.de/index.php/topic,98514.msg918653.html#msg918653

Vielen Dank im Voraus

curt · 16 März 2019, 06:09:56

@eki

Zitat von: eki am 15 März 2019, 15:48:43
Grundsätzlich sehe ich aktuell keinen Grund warum das nicht klappen sollte.

Das hört sich grundsätzlich gut an.

Erste FTUI-Zeile wird korrekt dargestellt:

Code Auswählen


<li data-row="2" data-col="1" data-sizex="7" data-sizey="2">
<div class="top"
      data-type="chart"
      data-device='["ws980wifi","ws980wifi"]'
      data-logdevice='["FileLog_ws980wifi","FileLog_ws980wifi"]'
      data-logfile="CURRENT"
      data-columnspec='["4:temperature\\x3a:","4:humidity\\x3a:"]'
      data-style='["ftui l2","ftui l6"]'
      data-height="175px"
      data-uaxis='["primary","secondary"]'
      data-legend='["Temperatur","Luftfeuchtigkeit"]'
      data-ptype='["lines","lines"]'
      data-yunit="°C"
      data-ytext="Temperatur"
      data-minvalue="-15"
      data-maxvalue="40"
      data-yunit_sec="%"
      data-ytext_sec="Luftfeuchtigkeit"
      data-yticks="5"
      data-minvalue_sec="0"
      data-maxvalue_sec="100"
      data-cursorgroup="1"
      data-scrollgroup="1">
 </div>
</li>

Dann möchte ich eine Zeile darunter auch füllen - das Diagramm wird aufgebaut - es wird aber nichts dargestellt. Die Variablen für Readings sollten koorekt sein: Wenn ich die testweise in die obere Grafik übernehme, werden sie dargestellt. So sieht die zweite, nicht funktionierende aus (wie auch die dritte, die auch nicht funktioniert):

Code Auswählen


<li data-row="4" data-col="1" data-sizex="7" data-sizey="1">
<div class="top nobuttons"
      data-type="chart"
      data-device='["ws980wifi","ws980wifi","ws980wifi"]'
      data-logdevice='["FileLog_ws980wifi","FileLog_ws980wifi","FileLog_ws980wifi"]'
      data-logfile="CURRENT"
      data-columnspec='["4:windkmh\x3a","4:windGustskmh\x3a","4:windDirection\x3a]'
      data-style='["ftui l0","ftui l2","ftui l6dot"]'
      data-height="85px"
      data-uaxis='["primary","primary","secondary"]'
      data-legend='["Wind","Spitzen","Richtung"]'
      data-ptype='["lines","lines","steps"]'
      data-yunit="x"
      data-ytext="Wind"
      data-minvalue="0"
      data-maxvalue="20"
      data-yunit_sec="x"
      data-yticks="90"
      data-minvalue_sec="0"
      data-maxvalue_sec="360"
      data-cursorgroup="1"
      data-scrollgroup="1">
 </div>
</li>

Wenn Du einen Auszug des Logfiles brauchst, lasse es mich bitte wissen.

eki · 18 März 2019, 09:43:25

Zitato sieht die zweite, nicht funktionierende aus (wie auch die dritte, die auch nicht funktioniert):

Schau Dir bitte mal die Columnspec für die zweite Zeile an (fehlendes " am Ende, \\ statt \, ...).

Statt:

Code Auswählen

data-columnspec='["4:windkmh\x3a","4:windGustskmh\x3a","4:windDirection\x3a]'

sollte dort so etwas wie:

Code Auswählen

data-columnspec='["4:windkmh\\x3a","4:windGustskmh\\x3a","4:windDirection\\x3a"]'
stehen

eki · 18 März 2019, 09:50:54

Zitat von: amenomade am 15 März 2019, 16:14:39
Hallo @eki

Vielleicht kannst Du diese Frage beantworten? https://forum.fhem.de/index.php/topic,98514.msg918653.html#msg918653

Vielen Dank im Voraus

Ist beantwortet.

curt · 18 März 2019, 22:52:34

Zitat von: eki am 18 März 2019, 09:43:25
Schau Dir bitte mal die Columnspec für die zweite Zeile an

Das ist so peinlich ... je mehr man schaut, desto weniger sieht man.

Danke @eki !

P.S: Reine Punkte - wie geht das? Ich versuchte "ftui l6plot" in Verbindung mit "cubic", so genau sind die Parameter leider nicht erklärt. Ist jedenfalls noch nicht so, wie ich mir das vorstelle.

Hintergrund: Windrichtung. Auf der y-Achse sind 0-360 (jaja, 359). Ein Graph macht bei Windrichtung wenig Sinn, da die Messerwerte ja diskret sind. Es müssten also schon Punkte sein, damit entsteht eine Punktwolke.

eki · 19 März 2019, 08:32:58

Wenn Du die Werte als Punkte darstellen willst, dann solltest Du beim data-style irgendetwas mit ..sym verwenden (also z.B. "ftui l6sym" sonst werden die Punkte sehr klein.
Beim Plottyp (data-ptype) musst Du anstatt eines Linientyps (lines, steps, cubic ...) ein beliebiges Symbol (unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')) verwenden als Beisiel könntest Du also folgendes machen:

Code Auswählen

data-style='["ftui l6sym"]'
data-ptype='["fa-star"]'

dann werden die Symbole als blaue Sterne dargestellt.Ein normaler Punkt geht mit "fa-circle". Wenn die Symbole gefüllt werden sollen, dann musst Du beim data-style noch " fas" dahinter setzen. Ein gefüllter Kreis wäre dann:

Code Auswählen

data-style='["ftui l6sym fas"]'
data-ptype='["fa-circle"]'

Leider kann das Chart aktuell noch nicht die neuesten font awesome symbole, das muss ich mir noch mal anschauen, aber es werden eine ganze Menge unterstützt, einfach mal probieren.