[erledigt] fuip - chart widget

Thorsten Pferdekaemper · 14 November 2018, 16:48:10

Hi,
die timeranges mit 1,3,6,12 und 24 Stunden sind jetzt auch drin.
Gruß,
Thorsten

eki · 14 November 2018, 17:27:27

Das kann durch Verwendung von data-yticks_format vermieden werden (siehe https://forum.fhem.de/index.php/topic,48450.msg734787.html#msg734787). Das Problem hatte ich auch schon mal gesehen, hat mit js internen Rundungsfehlern zu tun.

TNT0068 · 14 November 2018, 18:25:21

Hallo zusammen,
auch ich konnte es mir nicht nehmen lassen die Chart Funktion zu testen. Bisher habe ich habe ich meine Plots mit dem Chart Widget nachgebaut. Ist natürlich mühsam das immer 2 mal zumachen.
Nachdem Update auf die neuste Fuip Version hatte ich folgenden Fehler:

Code Auswählen

 Can't locate DateTime.pm in @INC (you may need to install the DateTime module) (@INC contains: . /etc/perl /usr/local/lib/x86_64-linux-gnu/perl/5.26.1 /usr/local/share/perl/5.26.1 /usr/lib/x86_64-linux-gnu/perl5/5.26 /usr/share/perl5 /usr/lib/x86_64-linux-gnu/perl/5.26 /usr/share/perl/5.26 /usr/local/lib/site_perl /usr/local/lib/x86_64-linux-gnu/perl/5.26.0 /usr/lib/x86_64-linux-gnu/perl-base ./FHEM) at ./FHEM/lib/FUIP/View/Chart.pm line 9, <$fh> line 1712.
BEGIN failed--compilation aborted at ./FHEM/lib/FUIP/View/Chart.pm line 9, <$fh> line 1712.

apt-get install libdatetime-perl behebt da Problem, sollte vielleicht mit in die FUIP Doku dann

Nachdem ich dann den Chart erstellt habe wrden mir leider keine Daten angezeigt. Siehe Screenshot
oben ist das Chart Widget unten FUIP Widget basieren auf den selben Daten
Anbei noch als Bild meine DBlog Definition

Mein Fhem und MariaDBlaufen auf 2 getrennten Ubuntu Servern in einem ESXi Host. Der Esxi ist per Iscsi an einer Synology angeschlossen und nutzt für FHEM und MariaDB ein SSD Raid, also an der Perfomance kann es nicht liegen.

Thorsten Pferdekaemper · 14 November 2018, 21:25:54

Zitat von: TNT0068 am 14 November 2018, 18:25:21Nachdem Update auf die neuste Fuip Version hatte ich folgenden Fehler:
Code Auswählen Erweitern
Can't locate DateTime.pm ...

Das war ein Überbleibsel von etwas, das ich dann doch anders gelöst hatte. Ich hab's entfernt. Jetzt müsste es auch ohne DateTime gehen.

Zitat
Nachdem ich dann den Chart erstellt habe wrden mir leider keine Daten angezeigt.

Das Problem war, dass Du alles an die rechte Y-Achse gebunden hast. Daraus wird dann im chart Widget "secondary". Das chart Widget zeigt aber nichts an, wenn nicht mindestens ein "primary" dabei ist. Ich hänge jetzt ein Dummy-"primary" an data-uaxis dran. Das wird dann zwar auch nicht perfekt (die yticks sind komischerweise links), aber es wird wenigstens was angezeigt. (@eki: Vielleicht kann das auch auf Deine Liste.)
D.h. es funktioniert jetzt, aber besser ist es, im SVG nur "left" zu verwenden, wenn man nur eine Y-Achse hat.

Gruß,
Thorsten

Thorsten Pferdekaemper · 14 November 2018, 21:35:08

Zitat von: eki am 14 November 2018, 17:27:27
Das kann durch Verwendung von data-yticks_format vermieden werden

Das hatte ich auch gefunden, aber ich weiß nicht, wie ich im Allgemeinen das Format ermitteln soll. Wenn jemand das Werteintervall (also minvalue/maxvalue) angibt, dann kann man ja noch was orakeln, aber bei "auto" wird es schwierig. Da müsste man erst einmal die Daten analysieren.
Gruß,
Thorsten

eki · 16 November 2018, 07:58:15

Zitat von: Thorsten Pferdekaemper am 14 November 2018, 21:25:54
... @eki: Vielleicht kann das auch auf Deine Liste.

Klar, dazu wäre es aber super, wenn Du die Chart Definition hier posten könntest, das macht das Nachstellen leichter.

the ratman · 16 November 2018, 11:29:14

hihi, hier wird ja still und heimlich gewerkelt ...

ich merk eben, dass bis auf meine "spezialfarben" mittlerweile so gut wie alles rennt. nicht mal mehr logeinträge kommen.

vielen dank mal für das alles - langsam wirds echt waf-fähig *g*

Thorsten Pferdekaemper · 16 November 2018, 16:08:23

Zitat von: eki am 16 November 2018, 07:58:15
Klar, dazu wäre es aber super, wenn Du die Chart Definition hier posten könntest, das macht das Nachstellen leichter.

Ok, hier sind die HTMLs:
Als "primary":

Code Auswählen


<div data-type="chart"
	data-device='["HM_21F923"]'
	data-logdevice='["FileLog_HM_21F923"]'
	data-columnspec='["4:desired-temp::"]' 
        data-daysago_start="2018-01-01"
        data-daysago_end="2018-03-15"  
        data-style='["ftui l0"]'
	data-ptype='["lines"]'
	data-uaxis='["primary"]'
	data-legend='["Soll"]';
	data-title="Heizung"
	data-width="100%" data-height="100%"
	style="width:100%;height:100%;"></div>

...und als "secondary":

Code Auswählen


<div data-type="chart"
	data-device='["HM_21F923"]'
	data-logdevice='["FileLog_HM_21F923"]'
	data-columnspec='["4:desired-temp::"]' 
        data-daysago_start="2018-01-01"
        data-daysago_end="2018-03-15"  
        data-style='["ftui l0"]'
	data-ptype='["lines"]'
	data-uaxis='["secondary"]'
	data-legend='["Soll"]';
	data-title="Heizung"
	data-width="100%" data-height="100%"
	style="width:100%;height:100%;"></div>

Das Ergebnis siehst Du im Anhang.
Im "secondary" Chart sind die Monate nach oben gerutscht, es werden gar keine YTicks angezeigt und auch keine Linie.

Gruß,
Thorsten

Thorsten Pferdekaemper · 17 November 2018, 21:24:48

Zitat von: the ratman am 16 November 2018, 11:29:14ich merk eben, dass bis auf meine "spezialfarben"

Ich habe jetzt dafür auch was gebastelt. Das FUIP-Device hat jetzt zwei neue Attribute: userCss und userHtmlBodyStart:

userCss: Hier kann man eine css-Datei eintragen, die dann in jede Seite aufgenommen wird. Die Datei wird möglichst weit "hinten" reingeschrieben, sodass man das meiste damit überschreiben kann. Die Datei muss im Verzeichnis <fhem>/FHEM/lib/FUIP/config liegen und die Endung ".css" haben.
Für Dich speziell: Kopiere die ratbrightsvg_style.css in das oben genannte Verzeichnis und ändere sie so ab, dass es zu den FUIP-Klassen passt. Du kannst in der Datei <fhem>/FHEM/lib/FUIP/css/fuipchart.css nachsehen, wie das ungefähr aussehen muss.

userHtmlBodyStart: Hier kann man eine HTML-Datei eintragen, deren Inhalt dann in jeder Seite direkt nach dem <body> Tag reinkopiert wird. Die Datei muss im Verzeichnis <fhem>/FHEM/lib/FUIP/config liegen und die Endung ".html" haben.
Für Dich speziell: Kopiere die Datei ratbrightsvg_defs.svg in das oben genannte Verzeichnis und ergänze folgendes als erste Zeile:

Code Auswählen


<svg style="position:absolute;height:0px;">

...und entsprechend als letzte Zeile:

Code Auswählen


</svg>

Die beiden Dateien kannst Du dann entsprechend den beiden Attributen zuordnen und Deine Spezialfarben sollten erscheinen.

Gruß,
Thorsten

the ratman · 18 November 2018, 09:32:45

wird gemacht ...

ich denke, ich muß noch mal die style durchgucken - geht dann am nachmittag.
scheint mir jetzt aber keine unlösbare aufgabe zu sein - und wenns ich schaff, schaffts hier jeder *g*.

Thorsten Pferdekaemper · 18 November 2018, 10:08:06

Naja, Du hast das ja auch für die FHEMWEB-SVGs hinbekommen...
Heute Nacht hat allerdings mein Unterbewusstsein anscheinend an der Sache weitergearbeitet. Möglicherweise kriege ich da doch noch einen Automatismus hin, der das ganze zumindest Teilweise von der FHEMWEB-Definition übernimmt. Das wird aber wahrscheinlich heute nichts mehr.
Ich denke, dass ich aber trotzdem die neuen Attribute drinlasse. D.h. wenn Du das jetzt benutzt, dann wird es auch in Zukunft funktionieren.
Gruß,
Thorsten

the ratman · 18 November 2018, 11:14:05

wunderbar - ich werd aber zumindest die svg/css-files raus nehmen wieder - nicht dass dann was geht/nicht geht, wenn du das umstellst.
sonst gibts wieder blöde sucherei nach dem bösen fehlerteufelchen.

Thorsten Pferdekaemper · 18 November 2018, 14:30:51

Hi,
nochmal eine Frage dazu: Wie genau hast Du das mit dem eigenen Style gemacht? Ich finde da kein Attribut oder so im SVG Device.
Gruß,
Thorsten

the ratman · 18 November 2018, 16:14:15

hast vielleicht übersehen, weil ichs mitten reingeschrieben hab.
ich hab also die original-files nur erweitert und unter "meinen" namen abgespeichert.
beim svg_devs.svg:

Code Auswählen

  <linearGradient id="gr_7" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#808080; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#707070; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_8" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#FFFF00; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#EEEE00; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_9" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#FFA500; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#EE9400; stop-opacity:.4"/>
  </linearGradient>

und beim svg_style.css

Code Auswählen

.SVGplot.l9     { stroke:orange;  }
...
.SVGplot.l7fill { stroke:gray; fill:url(#gr_7);   }
.SVGplot.l8fill { stroke:yellow; fill:url(#gr_8); }
.SVGplot.l9fill { stroke:orange; fill:url(#gr_9); }
...
text.SVGplot.l9     { stroke:none; fill:orange;  }
...
text.SVGplot.l7fill { stroke:none; fill:gray;    }
text.SVGplot.l8fill { stroke:none; fill:yellow;  }
text.SVGplot.l9fill { stroke:none; fill:orange;  }

angehängt

Thorsten Pferdekaemper · 18 November 2018, 16:24:49

Zitat von: the ratman am 18 November 2018, 16:14:15
hast vielleicht übersehen, weil ichs mitten reingeschrieben hab.
ich hab also die original-files nur erweitert und unter "meinen" namen abgespeichert.

Was denn nun? Die Original-Files geändert oder in eigene Files (also mit Deinen Namen) kopiert? Ich glaube, Du hattest vorher erwähnt, dass die Dinger eigene Dateinamen haben. Wie findet FHEM das dann?
Gruß,
Thorsten