[erledigt] fuip - chart widget

the ratman · 03 November 2018, 12:50:29

hiho,

zum chartwidget.

ich hab jetzt mal ein einfaches widget nach https://wiki.fhem.de/wiki/FTUI_Widget_Chart probiert (das scheint mir das brauchbarste widget für charts zu sein).

beim aufruf der entsprechenden seite kommt 2 mal der fehler

Code Auswählen

Error
widget_chart.js:3082
TypeError: style_array_prep.clone is not a function

mein html-widget dazu:

Code Auswählen

<div data-type="chart"
 data-device="netatmo_drinnen"
 data-logdevice="logdb"
 data-logfile="HISTORY"
 data-columnspec='["netatmo_drinnen:temperature","netatmo_drinnen:humidity"]'>
</div>

Thorsten Pferdekaemper · 03 November 2018, 17:39:05

Hi,
ich denke mal, dass das nicht an FUIP liegt. Es scheint mir eher so, dass es das chart-Widget übel nimmt, wenn data-style fehlt. Du müsstest wahrscheinlich sowas wie das hier einfügen:

Code Auswählen


data-style='["ftui l2","ftui l4"]'

Gruß,
Thorsten

the ratman · 03 November 2018, 23:13:29

werd ich morgen probieren - thx

so n chart-widget ist halt ned unwichtig in meinen augen. wundert mich fast, dass du dir da noch nix selber gebastelt hast ... wenn ich mir sowas mit deiner üblichen "häckchen-auswahl" vorstell fang ich an, leicht zu sabbern.

Thorsten Pferdekaemper · 04 November 2018, 14:06:30

Hi,
ich habe da schon ein Beispiel bei mir laufen, aber halt auch mit dem HTML-Widget:

Code Auswählen


<div data-type="chart"
	 data-device="og_wg_Heizung_Clima"
	 data-logdevice="FileLog_og_wg_Heizung"
	 data-logfile="-"
	 data-columnspec='["4:T","6:T","8:T"]'
         data-style='["ftui l2","ftui l4","ftui l6"]'
 data-uaxis='["primary","primary","secondary"]'
data-legend='["Soll-Temperatur","Ist-Temperatur","Ventil"]'
data-minvalue="10" data-maxvalue="30"
data-minvalue_sec="0", data-maxvalue_sec="100"
data-width="580" data-height="310">
</div>

...das sieht dann so aus wie im Anhang.
Ich hatte ich schon einmal angefangen, mir das als View zu überlegen, aber das ist ganz schön schwierig. Es gibt da doch ziemlich viele Parameter. Ich bin mir nicht sicher, ob ich dazu eine Klickibunti-Version hinbekomme, die einfacher zu bedienen ist als einfach HTML zu tippen.

Aber mal sehen, vielleicht bekomme ich doch noch was hin.

Gruß,
Thorsten

the ratman · 04 November 2018, 16:47:18

würd ich das können würd ichs mal beim svg-modul abschreiben. das geht ja eh schon mal recht gut.

weißt, dass es mir eigentlich voll reichen würde, würd ich die vorhandenen svg -plots nicht nur als gfx einbinden können. is es schwer, das einzubinden und dann einfach farben (und eventuell größe/breite) on-the-fly an die ui anzupassen?
die plots bräuchte man dann ja nur mehr per drop-down in nem widget aussuchen können (vielleicht dann sogar mit individuellen farb-/linien-/.../-angaben) und jeder, der sich mit svg-plots gespielt hat, braucht auch nix neues zu lernen.

Thorsten Pferdekaemper · 04 November 2018, 17:07:12

Hi,
ok, das ist schon mal eine gute Anregung. Ich schau mir das mal genauer an.
Gruß,
Thorsten

the ratman · 04 November 2018, 20:18:00

du hast wohl recht mit dem data-style

zumindest krieg ich jetzt mal keine fehler mehr - werte seh ich auch, wenn derzeit auch ned, wie ichs will - schaut komisch aus ...

nachtrag:

ich brauch im gegensatz zu dir aber noch

data-columnspec='["netatmo_drinnen:temperature","netatmo_drinnen:dewpoint"]'

juhuu, ich hab n chart - jetzt muß ich mir das nur noch genauer anschaun ...

Thorsten Pferdekaemper · 10 November 2018, 22:33:39

Hi,
könntest Du mir mal einen Screenshot geben, wie bei Dir eine SVG-Definition in FHEM aussieht? Ich benutze keine Logdb und habe keinen Plan, wie das dann aussieht.
(Mit FileLog habe ich schon eine einigermaßen funktionierende Version gebaut.)
Gruß,
Thorsten

the ratman · 11 November 2018, 10:44:56

die unterscheide scheinen ned groß zu sein - aber hier mal meine testdeffinition mit x tempereaturen, regen, sonne und allem, was ich vielleciht mal bei andern charts brauchen könnte *g*:

Code Auswählen

<div data-type="chart"
data-device=wetterstation"
data-logdevice="logdb"
data-logfile="HISTORY"
data-timeranges='[["dieses jahr","0Y","-1Y"],["letztes jahr","1Y","0Y"],["aktueller monat","0M","-1M"],["letzter monat","1M","0M"],["aktuelle woche","0W","-1W"],["letzte woche","1W","0W"],["heute","0D","-1D"],["gestern","1D","0D"]]' 
data-style='["ftui l2","ftui l0","ftui l3","ftui l6","ftui l4","ftui l5","ftui l1","ftui l3fill","ftui l6fill"]'
data-columnspec='["wohnzimmer_temperatur:temperature","netatmo_drinnen:temperature","gaestezimmer_temperatur:temperature","badezimmer_temperatur:temperature","nordseite_temperatursensor:temperature","wetterstation:temperature","treibhaus_temperatur:temperature","terrasse_bewegung_licht:brightness","doif_regenumrechnung:regen_echt"]'
data-legend='["wohnzimmer","schlafzimmer","gästezimmer","badezimmer","nordseite","südseite","treibhaus","",""]'
data-uaxis='["primary","primary","primary","primary","primary","primary","primary","secondary","secondary"]'
data-minvalue_sec="0"
data-maxvalue_sec="255"
data-yticks_format_sec=" "
data-y_margin='["10","10"]' 
data-y_margin_sec='["10","10"]' 
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="now"
data-width="450" data-height="300">
</div>

funzt übrigens super. die db is mysql, extern auf einem windoof-rechner. so kann man die daten auch schön für anderes ausserhalb fhem mißbrauchen *g*

Thorsten Pferdekaemper · 11 November 2018, 10:53:31

Hi,
ich meinte ein Screenshot der SVG-Definition in FHEM, nicht Dein HTML für das Chart Widget.
Gruß,
Thorsten

the ratman · 11 November 2018, 13:12:29

ähm, du meinst den ploteditor?
dann siehe anhang

oder meinst du die gplot dazu?
dann so:

Code Auswählen

# Created by FHEM/98_SVG.pm, 2018-10-20 16:44:26
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title 'termperaturen, sonnenschein und regen'
set ytics .
set y2tics 
set grid y2tics
set ylabel ""
set y2label "temperatur"
set yrange [1:255]

#logdb wohnzimmer_temperatur:temperature::
#logdb netatmo_drinnen:temperature::
#logdb gaestezimmer_temperatur:temperature::
#logdb badezimmer_temperatur:temperature::
#logdb wetterstation:temperature::
#logdb nordseite_temperatursensor:temperature::
#logdb treibhaus_temperatur:temperature::
#logdb terrasse_bewegung_licht:brightness::
#logdb doif_regenumrechnung:regen_echt::

plot "<IN>" using 1:2 axes x1y2 title 'wohnzimmer' ls l5 lw 3 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'schlafzimmer' ls l4 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'gästezimmer' ls l7 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'badezimmer' ls l2 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'südseite' ls l1 lw 3 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'nordseite' ls l6 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'treibhaus' ls l0 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l8fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l2fill lw 0.2 with steps

Thorsten Pferdekaemper · 12 November 2018, 14:55:53

Hi,
ich habe gerade mal die erste Version des Chart-Views hochgeladen. Man muss ein in FHEM definiertes SVG-Device angeben. Daraus versucht FUIP dann ein "schönes" Chart zu machen.
Ich bin mir sicher, dass da noch ein paar Sachen fehlen, z.B. dürfte das automatische update bei Verwendung von DBlog nicht funktionieren.
Könntest Du es trotzdem mal ausprobieren?
Gruß,
Thorsten

eki · 12 November 2018, 14:59:31

Ich hatte vor im Chart sowieso mal die Möglichkeit zu schaffen, direkt ein SVG Definitionsfile als Konfiguration anzugeben (ist eigentlich nicht so schwierig, nur die ganzen Sonderfälle killen einen). Da Du etwas ähnliches zu tun scheinst, würde ich mir das gerne mal anschauen. Wo genau muss ich denn da im FUIP Source Code schauen?

Thorsten Pferdekaemper · 12 November 2018, 15:12:17

Zitat von: eki am 12 November 2018, 14:59:31
Ich hatte vor im Chart sowieso mal die Möglichkeit zu schaffen, direkt ein SVG Definitionsfile als Konfiguration anzugeben (ist eigentlich nicht so schwierig, nur die ganzen Sonderfälle killen einen). Da Du etwas ähnliches zu tun scheinst, würde ich mir das gerne mal anschauen. Wo genau muss ich denn da im FUIP Source Code schauen?

Du kannst ja mal hier anfangen:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/View/Chart.pm

...allerdings gibt ein kein schönes Chart, wenn man die SVGplot styles verwendet. Ich bin auch gerade dabei, mir da was neues zu basteln.

Gruß,
Thorsten

the ratman · 12 November 2018, 16:43:15

goil!

du hast auf jeden fall noch was zum basteln *g*
mein "testplot" wie oben wird super übernommen, das passt schon mal wie die faust aufs auge. da würden mir nur mehr die zusatzsachen gfallen, wie sie das chart-widget auch bietet - also startzeit, endzeit, zeiten von-bis als drop-down, ... und schön vielleicht noch: ne "händische" größenangabe für breite und höhe des plots ansich, wobei mir das automatische anpassen an die zelle durchaus auch gfallt.

wo dein script total versagt is mit plotproxy - da kommt mal gar nix, sobald auch nur eine simple linie verwendet wird.
als beispiel mein wind gschw./richtungs plot:

Code Auswählen

# Created by FHEM/98_SVG.pm, 2018-11-04 09:53:15
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title 'windrichtung und windstärke'
set ytics "n" 0,"n" 360,"o" 90,"s" 180,"w" 270
set y2tics "gering" 10, "frisch" 28, "stark" 50, "sturm" 74, "schwer" 96, "o-artig" 110, "orkan" 155, "---1" 1, "---19" 19, "---38" 38, "---61" 61, "---88" 88, "---103" 103, "---117" 117
set grid
set ylabel ""
set y2label ""
set yrange [0:360]
set y2range [0:160]

#logdb wetterstation:windDirection::
#logdb wetterstation:windSpeed::
#lp Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,0],[$from,0]])
#lp Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,135],[$from,135]])
#lp Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,135],[$from,135]])
#lp Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,315],[$from,315]])
#lp Func:logProxy_values2Plot([[$from,360],[$to,360],[$to,315],[$from,315]])

plot "<IN>" using 1:2 axes x1y1 title 'windrichtung' ls l5 lw 3 with points,\
     "<IN>" using 1:2 axes x1y2 title 'windstärke' ls l0fill_stripe lw 2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l9fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l8fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l9fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l8fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l9fill lw 0.2 with lines

wie das aussehen sollte: siehe anhang