[FHEM-Tablet-UI] Chart

Begonnen von RoBra81, 18 Dezember 2015, 13:42:10

Vorheriges Thema - Nächstes Thema

eki

Zitat von: Haecksler am 08 Februar 2016, 12:26:25
Hallo zusammen,
ist es mögllich beim CHART-Widget mit Dblog im columnspec Regex zu verwenden?

Ich habe folgenden Eintrag im Dblog und würden gerne den Gas Wert plotten.

2016-02-08 12:17:34: Energie_Zaehler, OWCOUNT, energy_act: Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW, energy_act, Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW,


Danke für eure Hilfe.
Gruß,
Stefan

Grundsätzlich geht das Chart auch mit dblog unter http://forum.fhem.de/index.php/topic,37378.msg355490.html#msg355490
ist ein Beispiel, einfach mal lesen, ich nutze dblog nicht und kann zu den Details leider nicht viel helfen.

eki

Zitat von: manne44 am 08 Februar 2016, 11:07:24
Ich habe nun mal auf eine Logdatei und einen Wert verkürzt --> kein Erfolg.
Wenn ich nun in data-minvalue und data-maxvalue statt "auto" feste Werte angebe, dann wird zumindest ein Raster gezeichnet und Cursor und Legende werden angezeigt, aber keine Kurve, egal was ich da hinein schreibe. Das scheint darauf hinzudeuten, daß die Werte nicht akzeptiert werden und es deshalb auch kein Raster geben kann, ohne Werte kein Maß für das Raster.
Auch gibt es keine Fehlermeldungen, keine Log-Einträge usw. Wie soll man denn da einen Fehler finden?

Insgesamt scheint mir diese Funktion wenig robust zu sein und kleinste Fehler führen zum NULL-Ergebnis. Schade.

Wenn Du in Deinem Browser die Konsole anschaust, solltest Du sehr wohl Nachrichten sehen. Dort könntest Du auch schauen, ob die Kommunikation mit dem Fhem Server klappt und der überhaupt Daten liefert. Bin mir ziemlich sicher dass da der Hund begraben ist.
Zu Deinem letzten Satz wollte ich eigentlich gar nichts sagen,  kann es jetzt aber doch nicht lassen. Das Ganze ist nicht so einfach wie es aussieht und hat jede Menge Abhaengigkeiten und Dinge, die aus der Ferne nur schwer einschätzbar sind, und all die Jungs, die hier daran arbeiten, dass Konsumenten wie Du sich schöne Dinge zusammen basteln können, leisten hier echt super Arbeit. Und wenn es mal nicht sofort klappt wird einem super geholfen. Das solltest Du vielleicht bedenken wenn Du nach ein paar Versuchen zu motzen anfängst. Ich werde Dir übrigens trotzdem versuchen weiter zu helfen, wenn Du das möchtest.

manne44

Das tut mir leid, wenn das als "motzen" verstanden wird. Das war niemals meine Absicht. Ich weiß, daß das alles sehr viel Arbeit macht und nicht komerziell ist, also die Leute in ihrer Freizeit daran arbeiten. Auch über die Hilfe, die hier geboten wird, bin ich sehr dankbar. Mit nicht robust habe ich gemeint, daß´Typen wie ich, die weder mit html noch Perl vertraut sind, hier Schwierigkeiten haben dürften. Um bei der 99_myUtil.pm gibt es Fehlermeldungen, die auch ein Laie interpretieren kann. Hier nicht. Deshalb mein Frust.
Ich werde mal versuchen die Konsolendaten zu interprtieren, vielleicht komme ich da weiter.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

eki

Na dann ist ja gut und Schwamm drüber.

Du kannst mal die Version unter
http://forum.fhem.de/index.php/topic,48450.msg404468.html#msg404468
Verwenden, die spuckt noch ein paar zusätzliche Infos aus, und mir diese Infos dann schicken, vielleicht finde ich ja was.

manne44

Ich verstehe das mal so, daß ich die herunter geladene Datei "widget_chart.js" in das Verzeichnis /opt/fhem/www/tablet/js/ kopieren soll, wobei die vorhandene umbenannt wird. Wenn ich das mache, dann wird bei meinem Testchart mit einer Datenreihe nichts angezeigt. Bei der originalen js-Datei aber ein Diagramm ohne Kurve. Ich habe testweise folgende Daten:

Logdatei:

2016-02-07_20:43:47 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:44:08 ActLuftTemp temperature: 6.625 alarm: 1
2016-02-07_20:44:32 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:48:33 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:48:52 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:49:12 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:54:03 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:54:22 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:55:08 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:58:18 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_20:58:43 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:59:04 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_21:04:08 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:04:33 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_21:05:17 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:07:48 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:08:54 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:09:17 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:10:23 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:11:03 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:20:48 ActLuftTemp temperature: 6.1875 alarm: 1
2016-02-07_21:21:08 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:21:28 ActLuftTemp temperature: 6.1875 alarm: 1
2016-02-07_21:26:58 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:31:59 ActLuftTemp temperature: 6.0625 alarm: 1
2016-02-07_21:32:23 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:33:08 ActLuftTemp temperature: 6.0625 alarm: 1
2016-02-07_21:33:28 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:33:48 ActLuftTemp temperature: 6.0625 alarm: 1


HTML-Code:

<li data-row="1" data-col="2" data-sizex="20" data-sizey="4">
<header class="semitransparent">SingleTest</header>
<div class="normal"
    data-type="chart"
    data-height="200"
    data-device='["luft.temperatur"]'
data-logdevice='["luft-temperatur.log"]'
data-columnspec='["4:ActLuftTemp.temperature.:0:int"]'
data-style='["ftui l0fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["Luft"]'
data-yunit="C"
data-ytext="Temperature"
data-minvalue="0"
data-maxvalue="10"
data-yticks="auto"
data-daysago_start="0"
    data-daysago_end="-1"
    data-crosshair="true"
    data-cursorgroup="1"
    data-scrollgroup="1"
    data-showlegend="true"
data-nofulldays="true"
data-xticks="auto">
</div>
</li>
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

eki

#35
Genau so war es gedacht, aber wie in der Nachricht die ich verlinkt hatte beschrieben, musst Du den Parameter Debug in der Index.html auf 1 setzen und noch auf die Beschriftung der Achse klicken (falls keine Achsenbeschriftung gemalt wird, kannst Du das .js file in einem Editor oeffnen und den Parameter Logtype auf "console" ändern, dann wird die Ausgabe auf der Browser Konsole ausgegeben.

Alternativ kannst Du auch mal ein Stueck Deiner fhem.cfg Datei Posten wo das log File und Device definiert wird.

manne44

Ich habe alles so gemacht - Debug stand auf 1,  Logtype auf "console" geändert, aber ich habe nichts interessantes gesehen. Vielleicht fehlt mir auch der Blick dafür. Aber einen Fehler habe ich bei mir noch festgestellt: Es muß bei data-logdevice selbstverständlich das Log-Device aus der fhem.cfg und nicht der Name der Logdatei angegeben werden. Fehler beseitigt und siehe da, wie von Geisterhand wurde ein Diagramm gezeichnet. Ich hatte mehrere Log-Devices, die ich in einem Diagramm ausgeben wollte. Das hat nicht geklappt, vielleicht habe ich da wieder was falsch geschrieben. Also habe ich mein Log-Device so geändert, daß alle Werte der 6 Sensoren in einem Logfile eingetragen werden. Das Ergebnis war ein vollständig richtiges und komplettes Diagramm mit allen 6 Kurven. Ich bin damit zufrieden und werde mich in Zukunft auf ein Log-Device pro Diagramm beschränken. Den vorhandenen Datenbestand werde ich in eine Datei zusammenführen, kein Problem, entweder mit Excel oder ich mache mir ein kleines C-Programm, C und Java kann ich sehr gut, im Gegensatz zu HTML und Perl.
Aber eine Frage habe ich noch: Es wird beim Start immer der aktuelle Tag angezeigt. Mit den +/- Tasten kann man die Bereiche vergrößern und verkleinern. Ich es denn möglich, daß beim Start schon der ganze Monat sofort angezeigt wird? Und wo finde ich denn die Bezeichnungen für die data-styles?
Vielen Dank schon mal.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

eki

#37
Na super, dass es geklappt hat. Mehrere Devices gehen auch, aber wenn es so für Dich OK ist ist auch gut. Die Styles findest Du im ftui_chart.css file im entsprechenden css Directory parallel zum .js Directory. Immer den aktuellen Monat ganz anzeigen geht direkt noch nicht. Du kannst über die Parameter data-daysago-start und data-daysago-end einen Bereich festlegen, der mehr als einen Tag lang ist. Vielleicht ist da ja das was Du wolltest.

Marekh

Ich habe in der ftu_charts.css die Farbe blau (#0000FF) für die Luftfeuchtigkeit hinzugefügt und die wird in meinem Chart auch angezeigt, leider nicht in der Legende.

/* Definition for styles to be used for graphs (as alternative to the standard FHEM plot styles */
.ftui.l0 { stroke:#DDA400; stroke-width:2px; fill:none; }
.ftui.l1 { stroke:#BBBBBB; stroke-width:2px; fill:none; }
.ftui.l2 { stroke:#CC0000; stroke-width:2px; fill:none; }
.ftui.l3 { stroke:#CCCC00; stroke-width:2px; fill:none; }
.ftui.l4 { stroke:#33CC33; stroke-width:2px; fill:none; }
.ftui.l5 { stroke:#0000FF; stroke-width:2px; fill:none; }

/* Normal lines */
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }
.ftui.l5sym { stroke:#0000FF; stroke-width:12px; fill:none; }

/* Dashed lines */
.ftui.l0dash { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l1dash { stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l2dash { stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l3dash { stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l4dash { stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l5dash { stroke:#0000FF; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }

/* Dotted lines */
.ftui.l0dot { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l1dot { stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l2dot { stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l3dot { stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l4dot { stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l5dot { stroke:#0000FF; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }

/* Filled graphs */
.ftui.l0fill { stroke:#DDA400; fill:url(#gr_ftui0); stroke-width:2px; fill-opacity:0.8 }
.ftui.l1fill { stroke:#BBBBBB; fill:url(#gr_ftui1); stroke-width:2px; fill-opacity:0.8 }
.ftui.l2fill { stroke:#CC0000; fill:url(#gr_ftui2); stroke-width:2px; fill-opacity:0.8 }
.ftui.l3fill { stroke:#CCCC00; fill:url(#gr_ftui3); stroke-width:2px; fill-opacity:0.8 }
.ftui.l4fill { stroke:#33CC33; fill:url(#gr_ftui4); stroke-width:2px; fill-opacity:0.8 }
.ftui.l5fill { stroke:#0000FF; fill:url(#gr_ftui5); stroke-width:2px; fill-opacity:0.8 }

/* additional settings for the text (mainly for legend window) */
text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; }
text.ftui.l1, text.ftui.l1sym, text.ftui.l1dot, text.ftui.l1dash, text.ftui.l1fill { stroke:none; fill:#BBBBBB; }
text.ftui.l2, text.ftui.l2sym, text.ftui.l2dot, text.ftui.l2dash, text.ftui.l2fill { stroke:none; fill:#CC0000; }
text.ftui.l3, text.ftui.l3sym, text.ftui.l3dot, text.ftui.l3dash, text.ftui.l3fill { stroke:none; fill:#CCCC00; }
text.ftui.l4, text.ftui.l4sym, text.ftui.l4dot, text.ftui.l4dash, text.ftui.l4fill { stroke:none; fill:#33CC33; }
text.ftui.l5, text.ftui.l5sym, text.ftui.l5dot, text.ftui.l5dash, text.ftui.l5fill { stroke:none; fill:#0000FF; }


Kann man der Legende einen festen Platz zuteilen?
Wie kann ich das Hintergrundbild auf einfarbig ändern? In der ftui....css steht eine url für das Hintergrundbild.
.chart-background {
        fill:url(#gr_bgftui);
        fill-opacity: 1;


Danke
Marek


(http://up.picr.de/24542651pg.jpg)

eki

#39
Für die Legende ist der Text Eintrag ziemlich weit unten im css File relevant, du muesstest also dort entsprechend noch einen Eintrag machen. Das url steht im Fall des Hintergrundes für einen Farbverlauf. Ob Du da auch ein Bild hinterlegen kannst weiß ich nicht genau, probiers doch einfach mal. Die Position der Legende ist im Moment am Anfang fest, werde ich mal als Feature für eine nächste Version vorsehen.

Marekh

ZitatFür die Legende ist der Text Eintrag ziemlich weit unten im css File relevant, du muesstest also dort entsprechend noch einen Eintrag machen.

Hatte ich gemacht, aber ohne Erfolg.

/* additional settings for the text (mainly for legend window) */
text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; }
text.ftui.l1, text.ftui.l1sym, text.ftui.l1dot, text.ftui.l1dash, text.ftui.l1fill { stroke:none; fill:#BBBBBB; }
text.ftui.l2, text.ftui.l2sym, text.ftui.l2dot, text.ftui.l2dash, text.ftui.l2fill { stroke:none; fill:#CC0000; }
text.ftui.l3, text.ftui.l3sym, text.ftui.l3dot, text.ftui.l3dash, text.ftui.l3fill { stroke:none; fill:#CCCC00; }
text.ftui.l4, text.ftui.l4sym, text.ftui.l4dot, text.ftui.l4dash, text.ftui.l4fill { stroke:none; fill:#33CC33; }
text.ftui.l5, text.ftui.l5sym, text.ftui.l5dot, text.ftui.l5dash, text.ftui.l5fill { stroke:none; fill:#0000FF; }


Danke
Marek

Marekh

#41
Jetzt gehts, einmal alles neu geladen.
Und gleich das nächste Problem, an der 2. y-Achse kommen sich die Skala und die Bezeichnung "Luftfeuchtigkeit" in die Quere.

(http://up.picr.de/24543072sl.jpg)

Danke
Marek

eki

Das Problem habe ich bei mir auch schon manchmal gesehen, habe aber noch keine Loesung, die immer passt.

bjoernbo

Hat jem. das Problem, dass das Chart nicht angezeigt wird? Ich muss auf dem Tablet die Seite einmal schließen und neu starten. Dann wird mir das Chart angezeigt. Wechsel ich die Seite und kehre zurück wird es mir wieder nicht angezeigt ! :-/
Raspberry Pi 3 - FB6490C - Synology NAS DS916+ - NETATMO - HUE - SIEMENS G-Tag'S - FTUI - EchoDOT -

Haecksler

Hallo,
habe mir gerade meinen ersten Chart zusammengebaut, klappt soweit ganz gut ohne Popup.
Aber mit Popup kommt nichts habe es auch schon irgendwo gelesen, dass es da Probleme gibt finde es allerdings nicht mehr.

Hier meine Definition:
<div data-type="popup" data-draggable="true" data-height="700px" data-width="850px">
<div data-type="label" class="wider green"><br>Temperaturverlauf</div>
<div class="dialog semitransparent">
<header>Temperaturverlauf</header><br>
<div class="fullsize"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["Temp_Kueche:temperature","Temp_Wohn:temperature","Heizung:Heizintervall"]'
data-legend='["Küche","Wohnzimmer","Heizung AN"]'
data-style='["ftui l5fill","ftui l6fill","ftui l7dash"]'
data-ptype='["lines","lines","steps"]'
data-uaxis='["primary","primary","secondary"]'
data-yunit="°C"
data-ytext="Temp"
data-yunit_sec=""
data-ytext_sec="Heizung"
data-title="Temperaturverlauf"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"></div>
</div></div>


Am wo wird eigentlich der "data-title" angezeigt den sehe ich nirgends.

Gruß,
Stefan