[FHEM-Tablet-UI] Chart

[ChrisW]

Danke das klappt Werde ich mir mal anschauen.
Kann man nicht einfach den 31. da wegmachen ? Also das er auch erst 1.1. Anzeigt ?

[eki]

Versuche mal folgende beiden Einstellungen zusätzlich:

Code: [Auswählen]

data-timeformat="dd.MM"
data-xtext_offset="720"

Dadurch wird der Text auf die Mitte des Tages geschoben, und am Anfang und Ende sollte nichts mehr zusätzlich stehen.

[ChrisW]

ja nun schaut das schon ganz gut aus Nur halt der Anfang nicht so schön aber ich warte mal auf den nächsten Monat.

[curt]

@eki
Obwohl ich mit Deinem Chart-Modul inzwischen gut umgehen kann und fast alles mit Charts belegt habe, habe ich immer noch ein Verständnisproblem mit "data-columnspec". Vielleicht kannst Du an Hand des folgenden komplexen Beispiels kindgerecht (Die Sendung mit der Maus) erklären, wie man aus einem Log alles so rauspult und in data-columnspec umwandelt.

Es geht um meinen Mover, also einen Rasenmähroboter, der hat Wlan an Bord und ist gesprächig wie ein kleines Kind. Dafür sorgt das Modul 86_Robonect.pm.

Binär kommt der Zustand, es gibt ziemlich viele Zustände (schlafen, maehen, laden, viele weitere). Im Log ist addLog im Spiel. Daher gibt es keinen Kantenabbruch bei der Darstellung des aktuellen Zustands. Ein typisches SVGlog sieht so aus (unten).

Im Logfile passiert aber noch sehr viel mehr, im ersten Schritt geht es mir nur um Movie allgemein-status:
Ein Log-Auszug sieht so aus:

Code: [Auswählen]

2018-10-20_08:06:59 Movie allgemein-status: schlafen   << addLog
2018-10-20_08:06:59 Movie allgemein-batteriezustand: 100   << addLog
2018-10-20_08:06:59 Movie umwelt-temperatur: 35   << addLog
2018-10-20_08:06:59 Movie umwelt-feuchte: 21   << addLog
2018-10-20_08:08:04 Movie wlan-signal: -73
2018-10-20_08:08:04 Movie wlan-signal-prozent: 36
2018-10-20_08:11:05 Movie allgemein-status: maehen
2018-10-20_08:11:05 Movie maehen
2018-10-20_08:11:05 Movie allgemein-batteriezustand: 99
2018-10-20_08:11:05 Movie allgemein-dauer: 0
2018-10-20_08:11:05 Movie timer-status: aktiv
2018-10-20_08:11:05 Movie wlan-signal: -86
2018-10-20_08:11:05 Movie wlan-signal-prozent: 15
2018-10-20_08:11:59 Movie allgemein-status: maehen   << addLog
2018-10-20_08:11:59 Movie allgemein-batteriezustand: 99   << addLog
2018-10-20_08:11:59 Movie umwelt-temperatur: 35   << addLog
2018-10-20_08:11:59 Movie umwelt-feuchte: 21   << addLog
2018-10-20_08:12:34 Movie allgemein-batteriezustand: 98

Der aktuelle Status ist also Movie allgemein-status: maehen.

Ich weiß aber leider nicht, wie ich das in "data-columnspec" umwandle. Gleiches gilt für wlan-signal-prozent und allgemein-batteriezustand und so weiter. Irgendwie fehlt (mir) "Die Sendung mit der Maus" - also die kindgerechte allgemeingültige Erklärung, wie man das macht.

Und die müsste danach eigentlich auch ins Wiki. (Das würde notfalls ich übernehmen.)
 

[curt]

Nachtrag:
Vielleicht sollte ich noch zeigen, wie das in der SVG-Datei aussieht:

Code: [Auswählen]

#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"maehen"?0.9:0
#FileLog_Movie 4:Movie.allgemein-modus\x3a::$fld[3]=~"suche"?0.7:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"suche-base"?0.7:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"laden"?0.5:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"schlafen"?0.3:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"parken"?0.3:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"offline"?0.1:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"stoerung"?1.2:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"fehler"?1.2:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"schleife-fehlt"?1.2:0

plot "<IN>" using 1:2 axes x1y2 title 'mähen' ls l1fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'suche' ls l3fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'suche-base' ls l3fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'laden' ls l4fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'schlafen' ls l2fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'parken' ls l5fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'offline' ls l0fill lw 1.5 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'störung' ls l0fill lw 1 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'fehler' ls l0fill lw 1 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'schleife-fehlt' ls l0 lw 1 with steps


[eki]

In https://forum.fhem.de/index.php/topic,57046.msg487056.html#msg487056 war so etwas ähnliches schon mal Thema. Dort habe ich auch ein bisschen versucht, den Armin oder Christoph (Sendung mit der Maus) zu geben . Wichtig ist das "ausmaskieren der Anführungszeichen und Sonderzeichen. Neben columnspec ist noch data-yticks wichtig um Werte statt Zahlen an der Y-Achse darzustellen.

In Deinem Fall würde das Ganze in etwa so aussehen:

Code: [Auswählen]

<div class="fitsize"
data-type="chart"
data-logdevice='["FileLog_partest"]'
data-columnspec='[
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"maehen\"?0.9:0",
"4:Movie.allgemein-modus\\x3a::$fld[3]=~\"suche\"?0.7:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"suche-base\"?0.7:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"laden\"?0.5:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schlafen\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"parken\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"offline\"?0.1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"stoerung\"?1.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"fehler\"?1.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schleife-fehlt\"?1.2:0"
]'
data-style='[
"ftui l0fill",
"ftui l1fill",
"ftui l2fill",
"ftui l4fill",
"ftui l5fill",
"ftui l0fill",
"ftui l1fill",
"ftui l2fill",
"ftui l3fill",
"ftui l4fill"
]'
data-ptype='["steps"]'
data-uaxis='["primary"]'
data-legend='[
"maehen",
"suche",
"suche-base",
"laden",
"schlafen",
"parken",
"offline",
"stoerung",
"fehler",
"schleife-feht"
]'
data-ytext=""
data-minvalue="0"
data-maxvalue="1.2"
data-yticks='[
[0.1,"offline"],
[0.3,"schlafen"],
[0.5,"laden"],
[0.7,"suche"],
[0.9,"mähen"],
[1.2,"fehler"]
]'
data-daysago_start="2018-10-20T00:00:00"
data-daysago_end="2018-10-21T00:00:00"
data-xticks="auto">
</div>


[ChrisW]

Achso noch etwas wie kann ich das Solar also den balken der aktuell im Hintergrund ist vor den anderen bekommen ?
Primary .. hab ich schon versucht kein erfolg. Oder muss ich wirklich die Werte/filelogs umdrehen oben ?

[eki]

Genau so ist es, Du musst den Graphen, der im Vordergrund stehen soll, immer an den Anfang der Liste setzen. Das primary sagt nur, auf welche Achse es gemappt wird (links ist primary).

[curt]

Suchbegriff: Robonect Modul FTUI Widget

@eki mit der Maus:
Wenn ich meinen goldenen Papp-Orden "Freundlicher Helfer" verleihen dürfte, heute würdest Du ihn bekommen: Danke!

Dein Chart-Widget ist derart mächtig, dass ... also ich habe ein Ergebnis. Und das möchte ich auch stolz vorführen, vielleicht hilft es ja auch anderen Rasenmährobotereigentümern (ein schönes Wort).

Ich habe mich übrigens nicht getraut, links mit rechts (primary, secondary) zu vertauschen. Zuerst sah das Ganze auch schwer nach Tuschkasten aus, also wechselte ich für Wlan-Signal und Akkuladestand auf dot. Lieber wäre mir ja eine schmale Linie. Ich hatte als ersten Eintrag an Stelle von "ftui l1dot" dann "ftui l1normal" genommen. Das ging aber fürchterlich schief (zweiter Screenshot): Ist das ein Bug oder soll er nach unten schwarz füllen? Bei Firefox kam übrigens (Screenshot) hinzu, dass er Sekunden später die rote Vollfläche auch noch wegschaltete. (Falls Du auf Bug testen willst, kann ich Dir gern das Movie-Log schicken.)

Aber bitte nicht falsch verstehen - so wie das jetzt (mit dot) ist, kann das eigentlich auch bleiben. Der zuständige Code - ich hoffe, das geht vor Deinen strengen Augen so durch:

Code: [Auswählen]

<div class="topspace"
data-type="chart"
  data-device='["Movie"]'
data-logdevice='["FileLog_Movie"]'
  data-logfile="-"
data-columnspec='[
"4:wlan-signal-prozent",
"4:allgemein-batteriezustand",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"maehen\"?0.4:0",
"4:Movie.allgemein-modus\\x3a::$fld[3]=~\"suche\"?0.5:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"suche-base\"?0.45:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"laden\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schlafen\"?0.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"parken\"?0.1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"offline\"?0.05:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"stoerung\"?1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"fehler\"?1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schleife-fehlt\"?1:0"
]'
data-style='[
"ftui l1dot",
"ftui l3dot",
"ftui l4fill",
"ftui l3fill",
"ftui l3fill",
"ftui l0fill","ftui l1dot" dann "ftui l1normal"
"ftui l6fill",
"ftui l5fill",
"ftui l1fill",
"ftui l2fill",
"ftui l2fill",
"ftui l2fill"
]'
data-height="240px"
data-ptype='["lines","lines","steps","steps","steps","steps","steps","steps","steps","steps","steps","steps"]'
data-uaxis='["secondary","secondary","primary","primary","primary","primary","primary","primary","primary","primary","primary"]'
data-legend='[
"Wlan",
"Akku",
"maehen",
"suche",
"suche-base",
"laden",
"schlafen",
"parken",
"offline",
"stoerung",
"fehler",
"schleife-feht"
]'
data-ytext=""
data-minvalue="0"
data-maxvalue="1"
data-yticks='[
[0.1,"offline"],
[0.2,"schlafen"],
[0.3,"laden"],
[0.45,"suche"],
[0.4,"mähen"],
[1.0,"fehler"]
]'
data-xticks="auto">
</div>

Der erste Screenshot ist das Ergebnis. Kann man mit leben, finde ich.
Der zweite Screenshot ist - wenn ich "ftui l1dot" durch "ftui l1normal" ersetze.

[eki]

ftui "l1normal" gibt es nicht das heißt einfach "ftui l1". Diese Stile sind alle im ftui_chart.css definiert (am Ende). Darüber hinaus kann man auch alle normalen SVG Stile aus FHEM verwenden dann muss da "SVGplot" statt "ftui" davor gestellt werden also z.B. "SVGplot l0fill_gyr".

Noch ein Vorschlag (ist natürlich Geschmackssache). Wenn Du die Höhe für alle Deine States gleich setzt, dann sieht das Ganze nicht so wild aus (Du kannst z.B. überall den Maximalwert setzten, dann sagt Dir sozusagen die Hintergrund Farbe des Plots den Status. Nachteil wäre, dass Du dann die Legende anstatt die Y-Achse als "Erklärung" der Farben einblenden müsstest.

[curt]

ftui "l1normal" gibt es nicht das heißt einfach "ftui l1".

<lacht> Ich hatte die Doku so verstanden. Stand der Hinweis wirklich schon da oder hast Du ihn jetzt über "kleine Änderung" ergänzt? - Aber künstlerisch wertvoll ist "ftui l1normal" schon ...

Noch ein Vorschlag (ist natürlich Geschmackssache). Wenn Du die Höhe für alle Deine States gleich setzt, dann sieht das Ganze nicht so wild aus

Das ist so die Frage. Ich habe da auch schon überlegt. Ansich fand ich das so sehr aussagekräftig, allerdings waren da die weiteren Graphen noch nicht darübergelegt. Wenn ich alle Balken auf 100% ziehe, wird es ohne SVGplot-Farben nicht gehen. Ja, das ich die nutzen kann hatte ich schon an Hand der Doku verstanden.

Aber mal eine völlig andere Frage: Doku sagt: zwei Y-Achsen. Hmmm. Ich hätte aber (neben den Status-Balken) noch Ladezustand 0-100, Wlan-Zustand 0-100 (real 0-55!), Temperatur IM Gerät (geschätzt -5 - 50), Feuchte 0-100. Das sind vier Y-Achsen, ganz unabhängig davon ob ich die über die bunten Balken nagele oder in ein zweites Diagramm packe.

Bei SVGplot weiß ich (theoretisch, nur gelesen), dass das geht. Das geht zwar nicht mit dem SVGplot-Editor, aber schon, wenn man direkt an die SVG-Conf-Datei geht. (Den zugehörigen Thread müsste ich im Forum suchen.)

Es geht mir beim Chart-Widget primär gar nicht um die BESCHRIFTUNG der Y-Achsen. Sondern um die unterschiedliche Normierung: 0-100 / 0-55 / -5 - 40. Ist das darstellbar oder winkst Du mit dem nun-übertreibe-mal-nicht-Blick ab?

[eki]

Du kannst sowohl rechts wie links so viele Y-Achsen definieren wie Du willst. Irgendwann ist dann halt kein Platz mehr für den Plot 

Siehe https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935

[fruemmel]

Hallo Allerseits,

ich habe eine kurze Frage zum Thema der Linien. Ich habe in der Doku keinen direkten Weg gefunden, um die Liniendicke anzugeben, außer mittels Gradienten im data-style.
Das funktioniert auch bei normalen Plots, aber anscheinend nicht bei Verwendung von ConstY über logProxy. Wenn ich den Style im Gradientenarray auf "fill" setze, ist die Linie incl. gefülltem Bereich zu sehen. Setze ich aber nur eine Zahl für die Liniendicke ein, ist die Linie verschwunden.
Sitzt das Problem vor oder hinter dem Bildschirm?

Unabhängig davon: Ich baue mir horizontale Hilfslinien ein, um z. B. bei Temperaturen einen Mindestbereich von 0-10 Grad darzustellen, auch wenn die Temperatur an einem Tag z. B. nur zwischen 5 und 7 Grad pendelt. Wenn ich das über data-minvalue und data-maxvalue steuere, dann bleibt der Maßstab starr, auch wenn die Temperatur über 10 Grad geht, richtig? Bleibt also nur der Weg über die besagten Hilfslinien oder über data-minvalue mit hinterlegtem dynamischem Reading, oder?
Vielen Dank im Voraus für jegliche Hilfestellung,

Gruß fruemmel

[fruemmel]

ich habe eine kurze Frage zum Thema der Linien. Ich habe in der Doku keinen direkten Weg gefunden, um die Liniendicke anzugeben, außer mittels Gradienten im data-style.
Das funktioniert auch bei normalen Plots, aber anscheinend nicht bei Verwendung von ConstY über logProxy. Wenn ich den Style im Gradientenarray auf "fill" setze, ist die Linie incl. gefülltem Bereich zu sehen. Setze ich aber nur eine Zahl für die Liniendicke ein, ist die Linie verschwunden.
Sitzt das Problem vor oder hinter dem Bildschirm?

Das Problem saß wohl vor dem Bildschirm, mittels Gradienten geht es jetzt mit der Liniendicke auch bei ConstY.

Liege ich richtig, dass man bei Verwendung von ConstY nach wie vor nicht auf die Max- und Min-Werte der Graphen zugreifen kann (so wie mit $data{max1} im logProxy direkt)?

[Marsupilami]

Ich hätte da mal eine Frage:

Wenn ich ein Chart darstelle und z.B. die y-Achse skaliert ist von 0 bis 100, der darzustellende Wert dann aber größer als 100 ist, verlässt der Graph das Chart. Malt also oben drüber.

Lässt sich das unterdrücken, dass z.B. der Graph dann nur "oben anstößt" ?


Diesen Fehler macht er aber nur, wenn FHEM das Chart im Hintergrund updatet. Wenn ich im Browser einen Refresh anstoße, wird der Graph oben gekappt (so wie ich mir das auch vorstelle),

Gruß
Siggi