Autor Thema: [FHEM-Tablet-UI] Chart  (Gelesen 71037 mal)

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #180 am: 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.

Offline curt

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:[FHEM-Tablet-UI] Chart
« Antwort #181 am: 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.
« Letzte Änderung: 08 März 2019, 05:13:49 von curt »
RPI 4 - Jeelink HomeMatic Z-Wave

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #182 am: 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 ':')

Offline curt

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:[FHEM-Tablet-UI] Chart
« Antwort #183 am: 08 März 2019, 21:15:12 »
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.
RPI 4 - Jeelink HomeMatic Z-Wave

Offline Lichti

  • Full Member
  • ***
  • Beiträge: 319
Antw:[FHEM-Tablet-UI] Chart
« Antwort #184 am: 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)?

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #185 am: 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)

Offline Lichti

  • Full Member
  • ***
  • Beiträge: 319
Antw:[FHEM-Tablet-UI] Chart
« Antwort #186 am: 09 März 2019, 12:00:59 »
Super  !
Genau das, was ich gesucht habe.
Vielen Dank  :)

Offline curt

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:[FHEM-Tablet-UI] Chart
« Antwort #187 am: 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?
RPI 4 - Jeelink HomeMatic Z-Wave

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #188 am: 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.

Offline amenomade

  • Developer
  • Hero Member
  • ****
  • Beiträge: 7449
Antw:[FHEM-Tablet-UI] Chart
« Antwort #189 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 :)
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Offline curt

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:[FHEM-Tablet-UI] Chart
« Antwort #190 am: 16 März 2019, 06:09:56 »
@eki
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:
<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):

<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.
RPI 4 - Jeelink HomeMatic Z-Wave

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #191 am: 18 März 2019, 09:43:25 »
Zitat
o 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:
data-columnspec='["4:windkmh\x3a","4:windGustskmh\x3a","4:windDirection\x3a]'
sollte dort so etwas wie:
data-columnspec='["4:windkmh\\x3a","4:windGustskmh\\x3a","4:windDirection\\x3a"]'stehen
« Letzte Änderung: 18 März 2019, 09:51:45 von eki »

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #192 am: 18 März 2019, 09:50:54 »
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.

Offline curt

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:[FHEM-Tablet-UI] Chart
« Antwort #193 am: 18 März 2019, 22:52:34 »
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.
« Letzte Änderung: 18 März 2019, 23:18:36 von curt »
RPI 4 - Jeelink HomeMatic Z-Wave

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1469
Antw:[FHEM-Tablet-UI] Chart
« Antwort #194 am: 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:

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:

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.

 

decade-submarginal