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

Offline ChrisW

  • Hero Member
  • *****
  • Beiträge: 1812
Antw:[FHEM-Tablet-UI] Chart
« Antwort #165 am: 08 November 2018, 12:43:41 »
Danke das klappt :) Werde ich mir mal anschauen.
Kann man nicht einfach den 31. da wegmachen ? Also das er auch erst 1.1. Anzeigt ?
Raspberry PI3 mit allem möglichen.

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 787
Antw:[FHEM-Tablet-UI] Chart
« Antwort #166 am: 08 November 2018, 15:21:23 »
Versuche mal folgende beiden Einstellungen zusätzlich:

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.

Offline ChrisW

  • Hero Member
  • *****
  • Beiträge: 1812
Antw:[FHEM-Tablet-UI] Chart
« Antwort #167 am: 08 November 2018, 15:30:02 »
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.
Raspberry PI3 mit allem möglichen.

Offline curt

  • Full Member
  • ***
  • Beiträge: 320
Antw:[FHEM-Tablet-UI] Chart
« Antwort #168 am: 09 November 2018, 03:32:37 »
@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:
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.)
 
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

Offline curt

  • Full Member
  • ***
  • Beiträge: 320
Antw:[FHEM-Tablet-UI] Chart
« Antwort #169 am: 09 November 2018, 06:26:15 »
Nachtrag:
Vielleicht sollte ich noch zeigen, wie das in der SVG-Datei aussieht:
#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
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 787
Antw:[FHEM-Tablet-UI] Chart
« Antwort #170 am: 09 November 2018, 11:01:45 »
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:
<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>

Offline ChrisW

  • Hero Member
  • *****
  • Beiträge: 1812
Antw:[FHEM-Tablet-UI] Chart
« Antwort #171 am: 09 November 2018, 11:41:10 »
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 ?
Raspberry PI3 mit allem möglichen.

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 787
Antw:[FHEM-Tablet-UI] Chart
« Antwort #172 am: 10 November 2018, 09:56:58 »
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).

Offline curt

  • Full Member
  • ***
  • Beiträge: 320
Antw:[FHEM-Tablet-UI] Chart
« Antwort #173 am: 10 November 2018, 23:32:16 »
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:
<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.

RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 787
Antw:[FHEM-Tablet-UI] Chart
« Antwort #174 am: Gestern um 11:25:26 »
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.
« Letzte Änderung: Gestern um 11:36:24 von eki »

Offline curt

  • Full Member
  • ***
  • Beiträge: 320
Antw:[FHEM-Tablet-UI] Chart
« Antwort #175 am: Gestern um 22:05:07 »
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?
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W

 

decade-submarginal