[erledigt] fuip - chart widget

[the ratman]

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 Erweitern

Error
widget_chart.js:3082
TypeError: style_array_prep.clone is not a function
mein html-widget dazu:

Code Auswählen Erweitern

<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]

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 Erweitern


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

Gruß,
   Thorsten

[the ratman]

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]

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

Code Auswählen Erweitern


<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]

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]

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

[the ratman]

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]

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]

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 Erweitern

<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]

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

[the ratman]

ähm, du meinst den ploteditor?
dann siehe anhang

oder meinst du die gplot dazu?
dann so:

Code Auswählen Erweitern

# 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]

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]

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]

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]

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 Erweitern

# 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 lineswie das aussehen sollte: siehe anhang

[the ratman]

uij, ich seh grad n nettes log für den funzenden plot.
pro aufruf 1*:

Code Auswählen Erweitern


2018.11.12 17:49:35 1: $VAR1 = {
          'srcDesc' => {
                         'order' => [
                                      'logdb'
                                    ],
                         'all' => ' wohnzimmer_temperatur:temperature:: netatmo_drinnen:temperature:: gaestezimmer_temperatur:temperature:: badezimmer_temperatur:temperature:: wetterstation:temperature:: nordseite_temperatursensor:temperature:: treibhaus_temperatur:temperature:: terrasse_bewegung_licht:brightness:: doif_regenumrechnung:regen_echt::',
                         'src' => {
                                    'logdb' => {
                                                 'arg' => 'wohnzimmer_temperatur:temperature:: netatmo_drinnen:temperature:: gaestezimmer_temperatur:temperature:: badezimmer_temperatur:temperature:: wetterstation:temperature:: nordseite_temperatursensor:temperature:: treibhaus_temperatur:temperature:: terrasse_bewegung_licht:brightness:: doif_regenumrechnung:regen_echt::',
                                                 'num' => 0,
                                                 'idx' => 8
                                               }
                                  },
                         'rev' => {
                                    '0' => {
                                             '6' => 6,
                                             '3' => 3,
                                             '0' => 0,
                                             '4' => 4,
                                             '8' => 8,
                                             '2' => 2,
                                             '1' => 1,
                                             '7' => 7,
                                             '5' => 5
                                           }
                                  }
                       },
          'conf' => {
                      'xdata' => 'time',
                      'title' => 'termperaturen, sonnenschein und regen',
                      'lStyle' => [
                                    'class="SVGplot l5"',
                                    'class="SVGplot l4"',
                                    'class="SVGplot l7"',
                                    'class="SVGplot l2"',
                                    'class="SVGplot l1"',
                                    'class="SVGplot l6"',
                                    'class="SVGplot l0"',
                                    'class="SVGplot l8fill"',
                                    'class="SVGplot l2fill"'
                                  ],
                      'hasygrid' => 0,
                      'terminal' => 'png transparent size <SIZE> crop',
                      'lWidth' => [
                                    'stroke-width:3',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:3',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2'
                                  ],
                      'output' => '\'<OUT>.png\'',
                      'ytics' => '.',
                      'ylabel' => '""',
                      'grid' => 'y2tics',
                      'hasy2grid' => 1,
                      'lTitle' => [
                                    'wohnzimmer',
                                    'schlafzimmer',
                                    'gästezimmer',
                                    'badezimmer',
                                    'südseite',
                                    'nordseite',
                                    'treibhaus',
                                    ' ',
                                    ' '
                                  ],
                      'lAxis' => [
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y1',
                                   'x1y1'
                                 ],
                      'lType' => [
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'steps'
                                 ],
                      'y2label' => '"temperatur"',
                      'yrange' => '[1:255]',
                      'timefmt' => '"%Y-%m-%d_%H:%M:%S"',
                      'y2tics' => '',
                      'xlabel' => '" "'
                    }
        };

2018.11.12 17:49:35 1: wohnzimmer_temperatur:temperature::
2018.11.12 17:49:35 1: netatmo_drinnen:temperature::
2018.11.12 17:49:35 1: gaestezimmer_temperatur:temperature::
2018.11.12 17:49:35 1: badezimmer_temperatur:temperature::
2018.11.12 17:49:35 1: wetterstation:temperature::
2018.11.12 17:49:35 1: nordseite_temperatursensor:temperature::
2018.11.12 17:49:35 1: treibhaus_temperatur:temperature::
2018.11.12 17:49:35 1: terrasse_bewegung_licht:brightness::
2018.11.12 17:49:35 1: doif_regenumrechnung:regen_echt::

[Thorsten Pferdekaemper]

mein "testplot" wie oben wird super übernommen,

Das ist fast schon überraschend, aber es freut mich natürlich.
Könntest Du mir davon mal einen Screenshot machen? Ich würde gerne sehen, ob es auch so aussieht, wie ich mir das dachte.

also startzeit, endzeit,

Das kann ich noch einbauen, wobei ich hier auch versuchen würde, das vom SVG zu übernehmen.

zeiten von-bis als drop-down,

Da habe ich das Problem, dass mein "Framework" nicht ganz so flexibel ist. Ich könnte eine Reihe von Standard-Einträgen anbieten, die man dann in der Konfiguration auswählen kann. Ich denke, dass das schon ausreichend sein sollte. Also sowas wie "Heute", "Gestern", "Diese Woche", "Vorherige Woche" etc.

...

Ich kann irgendwo drei Punkte auf's Chart malen, aber das meinst Du wohl nicht. Wenn Du noch konkrete Ideen hast, dann bitte auflisten.

und schön vielleicht noch: ne "händische" größenangabe für breite und höhe des plots ansich,

So etwas habe ich bisher vermieden, da das meiner Meinung nach als "Gesamtkonzept" kommen sollte. Ich würde hier sehr ungern mit zwei Feldern in der Konfig arbeiten. Mir schwebt vor, dass man Views, bei denen das sinnvoll ist, direkt mit der Maus größer/kleiner machen kann.
Übrigens nimmt der View (also das Chart) den ganzen Raum nach unten und rechts ein. D.h. wenn Du das Ding verschiebst, dann kannst Du zumindest mal oben und links Platz machen.

wo dein script total versagt is mit plotproxy - da kommt mal gar nix, sobald auch nur eine simple linie verwendet wird.

Das war ein Folgeproblem davon, dass "data-device" nicht richtig gefüllt wird. Ich habe gerade eine neue Version hochgeladen, die das Problem nicht mehr haben sollte.

Gruß,
   Thorsten

[the ratman]

hehe, shot kommt sofort
btw - icons (image) fehlt bei der auswahl des plot-widgets.
beim testplot mit proxy sieht man, dass das ausfüllen no ned klappt, was z.b. grade bei dem plot wichtig wäre - siehe den anhang weiter oben "wind.png"
da sieht ma auch gleich, dass man die farben und auch plotbeginn und start-zoomstufe beinflussen können müsste. und natürlich, dass auch die beschreibung der achsen übernommen wird. mein windplot hat z.b. ohne richtungsanbagen wenig sinn, der tempoeraturenplot verwirrt aber nur mit den werten an der linken seite.

aja, und als logeintrag beim aufruf der plots kommt

Code Auswählen Erweitern


2018.11.13 09:51:37 1: $VAR1 = {
          'srcDesc' => {
                         'order' => [
                                      'logdb'
                                    ],
                         'all' => ' wohnzimmer_temperatur:temperature:: netatmo_drinnen:temperature:: gaestezimmer_temperatur:temperature:: badezimmer_temperatur:temperature:: wetterstation:temperature:: nordseite_temperatursensor:temperature:: treibhaus_temperatur:temperature:: terrasse_bewegung_licht:brightness:: doif_regenumrechnung:regen_echt::',
                         'src' => {
                                    'logdb' => {
                                                 'num' => 0,
                                                 'arg' => 'wohnzimmer_temperatur:temperature:: netatmo_drinnen:temperature:: gaestezimmer_temperatur:temperature:: badezimmer_temperatur:temperature:: wetterstation:temperature:: nordseite_temperatursensor:temperature:: treibhaus_temperatur:temperature:: terrasse_bewegung_licht:brightness:: doif_regenumrechnung:regen_echt::',
                                                 'idx' => 8
                                               }
                                  },
                         'rev' => {
                                    '0' => {
                                             '4' => 4,
                                             '8' => 8,
                                             '6' => 6,
                                             '1' => 1,
                                             '5' => 5,
                                             '7' => 7,
                                             '3' => 3,
                                             '2' => 2,
                                             '0' => 0
                                           }
                                  }
                       },
          'conf' => {
                      'ytics' => '.',
                      'output' => '\'<OUT>.png\'',
                      'lType' => [
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'steps'
                                 ],
                      'lTitle' => [
                                    'wohnzimmer',
                                    'schlafzimmer',
                                    'gästezimmer',
                                    'badezimmer',
                                    'südseite',
                                    'nordseite',
                                    'treibhaus',
                                    ' ',
                                    ' '
                                  ],
                      'xlabel' => '" "',
                      'lWidth' => [
                                    'stroke-width:3',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:3',
                                    'stroke-width:1',
                                    'stroke-width:1',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2'
                                  ],
                      'grid' => 'y2tics',
                      'yrange' => '[1:255]',
                      'hasy2grid' => 1,
                      'timefmt' => '"%Y-%m-%d_%H:%M:%S"',
                      'lStyle' => [
                                    'class="SVGplot l5"',
                                    'class="SVGplot l4"',
                                    'class="SVGplot l7"',
                                    'class="SVGplot l2"',
                                    'class="SVGplot l1"',
                                    'class="SVGplot l6"',
                                    'class="SVGplot l0"',
                                    'class="SVGplot l8fill"',
                                    'class="SVGplot l2fill"'
                                  ],
                      'title' => 'termperaturen, sonnenschein und regen',
                      'lAxis' => [
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y2',
                                   'x1y1',
                                   'x1y1'
                                 ],
                      'xdata' => 'time',
                      'y2label' => '"temperatur"',
                      'hasygrid' => 0,
                      'ylabel' => '""',
                      'y2tics' => '',
                      'terminal' => 'png transparent size <SIZE> crop'
                    }
        };

2018.11.13 09:51:37 1: wohnzimmer_temperatur:temperature::
2018.11.13 09:51:37 1: netatmo_drinnen:temperature::
2018.11.13 09:51:37 1: gaestezimmer_temperatur:temperature::
2018.11.13 09:51:37 1: badezimmer_temperatur:temperature::
2018.11.13 09:51:37 1: wetterstation:temperature::
2018.11.13 09:51:37 1: nordseite_temperatursensor:temperature::
2018.11.13 09:51:37 1: treibhaus_temperatur:temperature::
2018.11.13 09:51:37 1: terrasse_bewegung_licht:brightness::
2018.11.13 09:51:37 1: doif_regenumrechnung:regen_echt::
2018.11.13 09:51:37 1: $VAR1 = {
          'srcDesc' => {
                         'src' => {
                                    'lp' => {
                                              'num' => 1,
                                              'arg' => 'Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,0],[$from,0]]) Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,135],[$from,135]]) Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,135],[$from,135]]) Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,315],[$from,315]]) Func:logProxy_values2Plot([[$from,360],[$to,360],[$to,315],[$from,315]])',
                                              'idx' => 4
                                            },
                                    'logdb' => {
                                                 'num' => 0,
                                                 'arg' => 'wetterstation:windDirection:: wetterstation:windSpeed::',
                                                 'idx' => 1
                                               }
                                  },
                         'all' => ' wetterstation:windDirection:: wetterstation:windSpeed:: Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,0],[$from,0]]) Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,135],[$from,135]]) Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,135],[$from,135]]) Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,315],[$from,315]]) Func:logProxy_values2Plot([[$from,360],[$to,360],[$to,315],[$from,315]])',
                         'order' => [
                                      'logdb',
                                      'lp'
                                    ],
                         'rev' => {
                                    '1' => {
                                             '4' => 6,
                                             '0' => 2,
                                             '3' => 5,
                                             '1' => 3,
                                             '2' => 4
                                           },
                                    '0' => {
                                             '1' => 1,
                                             '0' => 0
                                           }
                                  }
                       },
          'conf' => {
                      'lTitle' => [
                                    'windrichtung',
                                    'windstärke',
                                    ' ',
                                    ' ',
                                    ' ',
                                    ' ',
                                    ' '
                                  ],
                      'xlabel' => '" "',
                      'ytics' => '"n" 0,"n" 360,"o" 90,"s" 180,"w" 270',
                      'lType' => [
                                   'points',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines',
                                   'lines'
                                 ],
                      'output' => '\'<OUT>.png\'',
                      'hasy2grid' => 0,
                      'lStyle' => [
                                    'class="SVGplot l5"',
                                    'class="SVGplot l0fill_stripe"',
                                    'class="SVGplot l9fill"',
                                    'class="SVGplot l8fill"',
                                    'class="SVGplot l9fill"',
                                    'class="SVGplot l8fill"',
                                    'class="SVGplot l9fill"'
                                  ],
                      'timefmt' => '"%Y-%m-%d_%H:%M:%S"',
                      'grid' => undef,
                      'lWidth' => [
                                    'stroke-width:3',
                                    'stroke-width:2',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2',
                                    'stroke-width:0.2'
                                  ],
                      'yrange' => '[0:360]',
                      'y2range' => '[0:160]',
                      'y2label' => '""',
                      'xdata' => 'time',
                      'title' => 'windrichtung und windstärke',
                      'lAxis' => [
                                   'x1y1',
                                   'x1y2',
                                   'x1y1',
                                   'x1y1',
                                   'x1y1',
                                   'x1y1',
                                   'x1y1'
                                 ],
                      'terminal' => 'png transparent size <SIZE> crop',
                      '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',
                      'ylabel' => '""',
                      'hasygrid' => 0
                    }
        };

2018.11.13 09:51:37 1: wetterstation:windDirection::
2018.11.13 09:51:37 1: wetterstation:windSpeed::
2018.11.13 09:51:37 1: Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,0],[$from,0]])
2018.11.13 09:51:37 1: Func:logProxy_values2Plot([[$from,45],[$to,45],[$to,135],[$from,135]])
2018.11.13 09:51:37 1: Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,135],[$from,135]])
2018.11.13 09:51:37 1: Func:logProxy_values2Plot([[$from,225],[$to,225],[$to,315],[$from,315]])
2018.11.13 09:51:37 1: Func:logProxy_values2Plot([[$from,360],[$to,360],[$to,315],[$from,315]])


Das kann ich noch einbauen, wobei ich hier auch versuchen würde, das vom SVG zu übernehmen.

wenn man genau das überschrieben könntest für was eigenes wärs villeicht sinnvoller. ich verwende z.b. manchen plot auch am handy - so "eng" würde n plot in der tablet-ui irgendwie komisch kommen.

mein "Framework" nicht ganz so flexibel ist. Ich könnte eine Reihe von Standard-Einträgen anbieten,

sowieso. wichtig wäre mir pers. da vor allem, das man sagen kann, ob der view mit "jetzt" endet, oder z.b. mit tagesende. die "anzeigemenge" wäre sicher auch ned uninteressant - also: 1/3/6/912 stunden, tag, gestern, woche, monat, jahr und da immer heute und voriger. das wäre ja eig. nur ein vorgegebener zoom.

Ich kann irgendwo drei Punkte auf's Chart malen,

ich erzähl da nur, was ich so brauchen könnte, nehme aber ned an, dass du das für mich alleine machst - geburtstag hab i erst wieder ende august *g*.
ernsthaft gesprochen: ich hab sicher an 90% ned gedacht, was andere verwenden wollen würden.

da das meiner Meinung nach als "Gesamtkonzept" kommen sollte

jo, da hast recht. is aber derzeit ned wirklich möglich. nicht, wenn man mal schnell was mit deinen widgets und anderen zusammen macht wie ich. z.b.: happerts da schon an der formatierung der "überschriften" der widgets. wenn man da faul is, und nicht seine eigenen divs für selbige mit einbaut, schaut das schon unterschiedlich aus *g*. jaja, ich weiß ... faules schweinchen, ich bin.

[Thorsten Pferdekaemper]

btw - icons (image) fehlt bei der auswahl des plot-widgets.

Das kommt demnächst auch.

beim testplot mit proxy sieht man, dass das ausfüllen no ned klappt,

Im Prinzip klappt das schon, also bei mir. Ich habe aber gesehen, dass Du "l8fill" und "l9fill" als line style verwendest. Das gibt es bei mir gar nicht, also habe ich das nicht beachtet. Wo ist das her?

da sieht ma auch gleich, dass man die farben und auch plotbeginn und start-zoomstufe beinflussen können müsste.

Ich sehe da weder das eine noch das andere. Könntest Du mal ein bisschen ins Detail gehen? Am besten wären Screenshots nach dem Motto "so will ich's" und "so ist es".

und natürlich, dass auch die beschreibung der achsen übernommen wird. mein windplot hat z.b. ohne richtungsanbagen wenig sinn, der tempoeraturenplot verwirrt aber nur mit den werten an der linken seite.

Auch hier wäre eine Gegenüberstellung von "so ist es" und "so soll es" gut.

z.b.: happerts da schon an der formatierung der "überschriften" der widgets. wenn man da faul is, und nicht seine eigenen divs für selbige mit einbaut, schaut das schon unterschiedlich aus

Kannst Du mal erklären, was Du meinst? ...bzw. mir mit Screenshots zeigen, was da nicht stimmt?

Gruß,
   Thorsten

[the ratman]

dass Du "l8fill" und "l9fill" als line style verwendest. Das gibt es bei mir gar nicht, also habe ich das nicht beachtet. Wo ist das her?

das kann man in seinen style einbauen.
wäre bei mir also "ratbrightsvg_defs.svg" und "ratbrightsvg_style.css". standard wäre "svg_defs.svg" und "svg_style.css". siehe beim editorlink von der weboberfläche unter stylefiles.
da wärs vielleicht sogar lustig, eigene styles für die tablet-ui basteln zu können. dann kann sich jeder seine eigenen styles basteln und braucht die eigentlich nur vom original abschreiben *g*.

Könntest Du mal ein bisschen ins Detail gehen?

man sieht z.b. beim wind-plot, dass ich auf der linken y-achse himmelsrichtungen und auf der rechten y div. einträge für den waf hab, wo selbiger die windstärke im klartext kriegt.
wenn du weiter im shot für die talbet-ui schaust, siehst du beim oberen plot, dass zahlen an der linken y stehen - die sind im originalplot ausgeblendet, bzw. steht im orignalplot ein "set ytics .". es sollte also nur ein "." an der linken y-achse stehen, nicht die zahlen von 0 bis 255.
2 bspl. siehe anhang

Zitat
z.b.: happerts da schon an der formatierung der "überschriften" der widgets. wenn man da faul is, und nicht seine eigenen divs für selbige mit einbaut, schaut das schon unterschiedlich aus

Kannst Du mal erklären, was Du meinst? ...bzw. mir mit Screenshots zeigen, was da nicht stimmt?

vergiss es - war eher als scherz gemeint. das is nix, was man nicht auf einfachste art mit nem div bei deinem html-widget erledigen könnte.

[Thorsten Pferdekaemper]

das kann man in seinen style einbauen.
wäre bei mir also "ratbrightsvg_defs.svg" und "ratbrightsvg_style.css". standard wäre "svg_defs.svg" und "svg_style.css". siehe beim editorlink von der weboberfläche unter stylefiles.
da wärs vielleicht sogar lustig, eigene styles für die tablet-ui basteln zu können. dann kann sich jeder seine eigenen styles basteln und braucht die eigentlich nur vom original abschreiben *g*.

Gerade solche Sachen wollte ich bei FUIP eigentlich vermeiden. Der Witz ist ja gerade, dass man ohne HTML, CSS und JS auskommt.
Ich hatte zuerst einfach die Original-Styles benutzt, aber das sieht im Chart recht bescheiden aus. Z.B. scheint mir die Liniendicke da anders "interpretiert" zu werden als im FHEMWEB-SVG. Deshalb habe ich jeweils meine eigene Version dafür gebastelt.
...aber mal sehen, vielleicht fällt mir dazu auch noch was ein.

[the ratman]

is ja derzeit ned wirklich schlimm - freu mich schon, dass da was weiter geht *g*
ich denk halt nur, dass der ideale und universellste zustand wäre, zwar das grundlegende svg bei allen ansichtsarten von fhem verwenden zu können, aber das feintuning bei allen diesen anzeigemöglichkeiten getrennt vornehmen zu können. mein bspl. is da immer ein portrait handy view. ich kann da durchaus meine plots brauchen, muß die aber meistens trotzdem ein 2. mal anlegen, weill sonst mindestens mal die breite nicht passt.



eigene version wäre warscheinlich eh am besten, weil du dann ja alles beeinflussen könntest, linien dicken/arten, füllungen, farben.

dumme idee 1:, wenn man das alles irgendwo fest eintragen könnte für alle plots. also ähnlich dem textfiles für svg's. würd ja ein textfile reichen, wo man einfach zeile für zeile seine farbe rein schreibt. würde man das irgendwann mal ausbauen wollen, könnte man dann mehrere solcher textfiles haben und die wie skinns zu den einzelnen plots dazu laden.

dumme idee 2 wäre - so das geht - dein script die anzahl der benötigten farben/linienarten/füllungen/... abzählen zu lassen und eine entsprechende menge an dropdowns mit entsprechender auswahl zu generieren.

[Thorsten Pferdekaemper]

Hi,
ich habe gerade eine neue Version hochgeladen. Neuigkeiten sind:

data-timeranges: Hier kann man im Konfigurations-Popup aus einer Liste auswählen, was man will.

data-daysago_start/end und data-nofulldays: Das wird aus den Attributen fixedrange, endPlotNow und endPlotToday ermittelt. Bei Stunden-Plots (also fixedrange "hour" oder "<n>hours") ist sozusagen immer "endPlotNow" gesetzt, da das chart Widget das anscheinend nicht anders kann. Bei "<n>years" in Verbindung mit endPlotToday scheint es im chart Widget einen Bug zu geben, der an der x-Achse die falschen Jahre anzeigt. Da müsste ggf. eki mal was machen, denke ich.

Die Offsets aus dem SVG werden (noch) nicht übernommen. (Ich meine damit das Attribut fixedoffset und die Offset-Angabe beim fixedrange-Attribut.)

Probier's mal aus...

Gruß,
   Thorsten

[the ratman]

hehe, das fangt echt an spaß zu machen ...
data-timeranges - fein wärs noch mit stunden zum auswählen - 1,3,6,12 und den tag (also 24h) trozdem auch mit end plot now machen zu können - aber auf jeden fall ist das genau die art von noobfreundlichkeit, die mir gfallt. "mal schnell im vorbeigehen ein paar timeranges ändern ..."

Die Offsets aus dem SVG werden (noch) nicht übernommen.

freut mich, dass du das im auge hast.


sag: kannst du die (oben schon erwähnten) logeinträge irgendwie weg kriegen. das wird bei ner testseite mit n paar plots und mehrfachen aufrufen ganz schön viel im log *g*. vor allem scheint das ja kein fehler oder sonst was zu sein, sondern nur rauszuschreiben, was die plots so brauchen. ausserdem verlängerst du damit mein leben - bin recht schreckhaft geworden, was logs mit einträgen angeht *g*.

[Thorsten Pferdekaemper]

freut mich, dass du das im auge hast.

Hier geht's um die Offsets. Das Problem dabei ist, dass das chart Widgets das eigentlich nicht selbst kann. Wenn fixedrange "day" oder "<n>days" ist, dann kann man das ausrechnen und daraus das entsprechende daysago_start/end-Pärchen machen. (Der Offset im SVG ist immer in Tagen, soweit ich das verstehe.) Schwierig wird's halt mit "month"/"year"/"<n>years", insbesondere wenn endPlotToday nicht gesetzt ist.
Vielleicht kümmere ich mich erst einmal um ein paar einfachere Sachen. In der Zwischenzeit baut eki vielleicht was. (@eki: Liest Du hier mit?)
Gruß,
   Thorsten   

[eki]

Ja, ich lese mit. Wie gesagt, ich bin dran, das dauert aber noch (bin gerade anderweitig ziemlich unter Wasser). Wenn Ihr noch warten könnt, dann macht es Sinn, hier nicht zu viel Aufwand im FUIP zu spendieren, sonst machen wir Doppelarbeit.

[Thorsten Pferdekaemper]

Hi,
danke für die Antwort. Ich bin jetzt schon ziemlich weit, da würde ich gerne noch ein bisschen weitermachen...
Ich habe jetzt mal das mit den yticks versucht. Folgendes HTML schickt den Browser anscheinend in eine Endlosschleife:

Code Auswählen Erweitern


<div data-type="chart"
data-device='["HM_21F923","HM_21F923","HM_21F923",""]'
data-logdevice='["logdb_all","logdb_all","logdb_all","logProxy"]'
data-columnspec='["HM_21F923:desired-temp::","HM_21F923:measured-temp::","HM_21F923:actuator::","Func:logProxy_values2Plot([[$from,70],[$to,70],[$to,20],[$from,20]])"]'
                                       data-timeranges='[["Heute","0D","-1D"],["Gestern","1D","0D"],["Aktuelle Woche","0W","-1W"],["Vorherige Woche","1W","0W"],["Aktueller Monat","0M","-1M"],["Vorheriger Monat","1M","0M"],["Aktuelles Jahr","0Y","-1Y"],["Vorheriges Jahr","1Y","0Y"]]' 
                                   data-daysago_start="0Y"  data-daysago_end="-1Y" 
                                       data-nofulldays="false" 
                                       data-yticks_sec='[[22,"Nice"],[20,"Ok"],[18,"Cool"],[16,"Cold"]]'
                                      data-style='["fuipchart l0","fuipchart l1","fuipchart l2","fuipchart l1fill"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["secondary","secondary","primary","primary"]'
data-legend='["Soll","Ist","Ventil","Test"]';
data-minvalue="0" data-maxvalue="100"
data-minvalue_sec="12" data-maxvalue_sec="25"
data-title="Heizung via logdb"
data-title_class="fuipchart title"
data-ytext="Humidity"
data-ytext_sec="Temperature"
data-legendpos='["left","top"]'
data-width="100%" data-height="100%"
style="width:100%;height:100%;">
</div>

Wenn ich data-yticks_sec weglasse, dann ist alles ok. Irgendwelche Vermutungen?
Gruß,
   Thorsten

[eki]

sieht so aus, als ob das an der Reihenfolge liegt. Die Liste in data-yticks_sec muss in aufsteigender Reihenfolge (was die Werte betrifft) angegeben werden.

[Thorsten Pferdekaemper]

Das ist wohl tatsächlich so. Ich sortiere den Kram jetzt und es klappt.
Danke&Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,

die "YTicks" gehen jetzt auch. Allerdings mit einem kleinen Problemchen. Wenn ich die yticks für die rechte Y-Achse setze, dann scheint die Berechnung der Ticks für die linke Achse nicht mehr so ganz zu stimmen. Auf dem angehängten Screenshot sieht man, was ich meine.

Das mit dem "Ausblenden" der Zahlen auf einer Achse habe ich nicht richtig hinbekommen. Ich glaube auch, dass die Funktionalität im SVG (also in FHEMWEB) nicht wirklich beabsichtigt war. Jedenfalls funktioniert das so im chart Widget nicht. (Wenn man es so probiert, dann hat man mal wieder eine Endlosschleife.)
Ich habe dann versucht, es doch irgendwie hinzubekommen, aber ohne richtigen Erfolg. In einigen Fällen kann es funktionieren, in der FHEMWEB-Definition so etwas wie

Code Auswählen Erweitern


"" 0, "" 100

...einzugeben, wobei 0 und 100 die obere und untere Grenze ist.
Ich denke aber, es wäre sauberer, wenn eine entsprechende Funktion ins chart Widget eingebaut wird.

Die ganzen Log-Ausgaben sollten jetzt auch weg sein.

Gruß,
    Thorsten

[Thorsten Pferdekaemper]

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

[eki]

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]

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 Erweitern

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]

Nachdem 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.

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]

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]

... @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]

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]

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 Erweitern


<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 Erweitern


<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]

ich 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 Erweitern


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

...und entsprechend als letzte Zeile:

Code Auswählen Erweitern


</svg>


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

Gruß,
   Thorsten

[the ratman]

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]

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]

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]

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]

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 Erweitern

  <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 Erweitern

.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]

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

[the ratman]

die originalfiles kopiert und umbenannt und dann ergänzt. das wars ... hab ich hier einen erwischt, der sich nicht all zu sehr mit dem web-frontent auseinander gesetzt hat? *g*

ich kopier dir meine files mal ganz rein, dann kannst is mit den originalen, also "svg_defs.svg" und "svg_style.css", wie sie im www/pgm2/ liegen, vergleichen.

gefunden werden die files bei dem web-frontent durch ein attribut "stylesheetPrefix"
bei mir lautet das dann "ratbright"
alles was das web-frontend mit dem namen findet, wird dann verwendet, ansonsten wird das ganze original-gedöns verwendet.

könntest du übrigens dann genauso machen - somit gäbts dann auch für jedes tablet-frontend die möglichkeit, eigene svg-styles zu nehmen ... würd mir sehr gefallen, weil irgendwann mal mach ich auch beim handy-style mit deinem interface-painter weiter *g*, werd also mindestens 2 tablet-ui's von dir am laufen haben.

[Thorsten Pferdekaemper]

hab ich hier einen erwischt, der sich nicht all zu sehr mit dem web-frontent auseinander gesetzt hat? *g*

Naja, ehrlich gesagt interessiert mich das Aussehen nicht ganz so besonders, solange es funktioniert. Ich verwende das normale FHEMWEB-Frontend normalerweise nur als Admin-Oberfläche, da sind mir die perfekten Charts egal.

Das mit den eigenen Files sollte jetzt automatisch übernommen werden. Nur zwei Sachen gehen noch nicht:
- "Remote FUIP": es werden svg_...css und svg vom lokalen system genommen. Ich denke aber, dass Dein FUIP auf dem normalen FHEM läuft, also dürfte das erstmal egal sein.
- Auf popups geht es wahrscheinlich nicht.

Diese beiden Punkte sind aber etwas Aufwand, da will ich erstmal wissen, ob es prinzipiell richtig funktioniert. Könntest Du mal testen?

Gruß,
   Thorsten

[the ratman]

da sind mir die perfekten Charts egal.

da geb ich dir recht, aber das gabze rennt dann ja auch noch für den floorplan (der holt sich zumindest teile des designs trotz eigenem css von anderen css's) - und der is immer noch mein favorit, weil man den so herrlich als müllverwerter vom fhem-web nehmen kann.
drum fahr ich ja auf dein kleinod von modul so ab. das kommt dem floorplan am nächsten. war mein erster gedanke damals, als ich dein widget zum darstellen von readingsgroups gsehen hab.
wäre eigentlich lustig, wenn man das ein bissi pimpen können würde, is aber ned wirklich auf meiner wunschliste ganz oben. aber im anbetracht an eine schnell und einfach erstellte tablet-ui vielleicht für dich gar ned uninteressant. da könntest dich wieder dumm spielen in richtung: rg aus fhemweb + alles, was dieser fehlt, wie z.b. "drehen" der tabelle um 90°, mehr designmöglichkeiten, oder sowas.

"Remote FUIP" ... is dem onkel ratti aber sowas von total egal. würd ichs mal brauchen, hätte mein 2. fhem warscheinlich designtechnisch eh das gleich aussehen wie das "hauptfhem".

"Auf popups geht es wahrscheinlich nicht."  ... wäre warscheinlich aber sogar für den einen oder andern lustig irgendwann mal. derzeit fallt aber ned mal mir wirklich sinnvolles für ein chart-popup ein - ausser vielleicht, dass nach dem anklicken einer temperaturanzeige das passende chart aufpoppt.



so, ich habs auch gleich probiert - funzt wie es soll. ich seh auf den ersten blick keinen fehler. die probleme am ende hier ...
fallts mir nur erst jetzt auf, oder hast du das "legenden-popup" auch noch verschiebbar gemacht so nebenbei?

die probleme:
o) die strichstärken passen wohl noch nicht wirklich - siehe anhang
o) geht man auf die tablet-ui oberfläche werden farben (zb. schwarzer strich wird invertiert dargestellt) angepasst. geht man vorher aber auf den plot im fhemweb, dann übernimmt die tabletui die originalfarben meines web-styles. das sogar bei getrennten browsern.
nachtrag: die farben bleiben jetzt. scheinbar war beim 1. aufruf noch was im cache oder so. die farben sind jetzt also nicht an tablet ui angepasst, sondern bleiben wie sie sein sollen.
o) das kommt übrigens beim aufruf meiner seite mit 2 testplots:

Code Auswählen Erweitern


2018.11.19 15:13:43 1: PERL WARNING: Use of uninitialized value $pageId in hash element at ./FHEM/42_FUIP.pm line 340.
2018.11.19 15:13:43 1: stacktrace:
2018.11.19 15:13:43 1:     main::__ANON__                      called by ./FHEM/42_FUIP.pm (340)
2018.11.19 15:13:43 1:     FUIP::getViewDependencies           called by ./FHEM/42_FUIP.pm (409)
2018.11.19 15:13:43 1:     FUIP::getFtuiUserCss                called by ./FHEM/42_FUIP.pm (1785)
2018.11.19 15:13:43 1:     FUIP::CGI                           called by ./FHEM/01_FHEMWEB.pm (892)
2018.11.19 15:13:43 1:     main::FW_answerCall                 called by ./FHEM/01_FHEMWEB.pm (535)
2018.11.19 15:13:43 1:     main::FW_Read                       called by fhem.pl (3603)
2018.11.19 15:13:43 1:     main::CallFn                        called by fhem.pl (726)
2018.11.19 15:16:50 1: PERL WARNING: Use of uninitialized value $pageId in hash element at ./FHEM/42_FUIP.pm line 340.
2018.11.19 15:16:50 1: stacktrace:
2018.11.19 15:16:50 1:     main::__ANON__                      called by ./FHEM/42_FUIP.pm (340)
2018.11.19 15:16:50 1:     FUIP::getViewDependencies           called by ./FHEM/42_FUIP.pm (409)
2018.11.19 15:16:50 1:     FUIP::getFtuiUserCss                called by ./FHEM/42_FUIP.pm (1785)
2018.11.19 15:16:50 1:     FUIP::CGI                           called by ./FHEM/01_FHEMWEB.pm (892)
2018.11.19 15:16:50 1:     main::FW_answerCall                 called by ./FHEM/01_FHEMWEB.pm (535)
2018.11.19 15:16:50 1:     main::FW_Read                       called by fhem.pl (3603)
2018.11.19 15:16:50 1:     main::CallFn                        called by fhem.pl (726)


somit: vielen dank bis jetzt mal. hast ne geile arbeit abgeliefert!

[Thorsten Pferdekaemper]

drum fahr ich ja auf dein kleinod von modul so ab.

Naja, "Kleinod". Das Ding is mittlerweile doch ziemlich "heavy"...

als ich dein widget zum darstellen von readingsgroups gsehen hab.

Mit wem redest Du? Ich habe kein solches Widget. Ich weiß nicht einmal von einem solchen.

wäre eigentlich lustig, wenn man das ein bissi pimpen können würde, is aber ned wirklich auf meiner wunschliste ganz oben. aber im anbetracht an eine schnell und einfach erstellte tablet-ui vielleicht für dich gar ned uninteressant. da könntest dich wieder dumm spielen in richtung: rg aus fhemweb + alles, was dieser fehlt, wie z.b. "drehen" der tabelle um 90°, mehr designmöglichkeiten, oder sowas.

Naja, für mich ist das Vorgehen für das Chart Widget eher eine Notlösung, da es anderenfalls extrem viel Aufwand geworden wäre. Ich kann mir aber das mit der Readingsgroup mal ansehen, wenn Du mir
einen Link dazu gibst und einen neuen Thread dazu aufmachst.

fallts mir nur erst jetzt auf, oder hast du das "legenden-popup" auch noch verschiebbar gemacht so nebenbei?

Eigentlich nicht. Ich habe es nur in die linke obere Ecke geschoben, da es meiner Meinung nach rechts oben meistens stört.

o) die strichstärken passen wohl noch nicht wirklich - siehe anhang

Ich habe absichtlich die Strichstärken auf 2 Pixel vergrößert, da es ansonsten ziemlich blöd ausgesehen hat.

o) geht man auf die tablet-ui oberfläche werden farben (zb. schwarzer strich wird invertiert dargestellt) angepasst. geht man vorher aber auf den plot im fhemweb, dann übernimmt die tabletui die originalfarben meines web-styles. das sogar bei getrennten browsern.
nachtrag: die farben bleiben jetzt. scheinbar war beim 1. aufruf noch was im cache oder so. die farben sind jetzt also nicht an tablet ui angepasst, sondern bleiben wie sie sein sollen.

So ganz habe ich nicht kapiert, was jetzt genau richtig oder falsch läuft. Im Prinzip sollten alle Farben so sein, wie im FHEMWEB-SVG, außer blau (l2) und schwarz (l5). Blau habe ich ein bisschen aufgehellt und schwarz durch hellgrau (fast weiß) ersetzt. Das sollte bei Dir auch so ankommen, außer Du hast das Attribut userCss benutzt.
Wenn es anders ist, dann läuft was falsch.

Code Auswählen Erweitern


2018.11.19 15:13:43 1: PERL WARNING: Use of uninitialized value $pageId in hash element at ./FHEM/42_FUIP.pm line 340.

Das schau ich mir noch an.

Gruß,
   Thorsten

[the ratman]

kleinod war auch eher verniedlichend gemeint - ich bin kein heavy metal freak ...
übrigens: nur dass kein missverständnis auftritt: ich bin mittlerweile mehr als glücklich mit deinem großod ... ich spinne also einfach nur so vor mich hin in der hoffnung, ein paar ideen unterzubringen. siehe z.b. readingsgroups, oder welcher irrsinn mir sonst noch so einfallen wird. fühl dich also bitte zu nix genötigt.

Mit wem redest Du? Ich habe kein solches Widget. Ich weiß nicht einmal von einem solchen.

upps, ja
ich meinte natürlich dein readingslist, dann hab ich gesucht und das https://wiki.fhem.de/wiki/FTUI_Widget_Readingsgroup gefunden. sorry - da fehlte also ein "zwischen schritt" *g*

Readingsgroup mal ansehen, wenn Du mir einen Link dazu gibst

siehe ein paar zeilen oben. ist aber echt ned dringend oder so, war einfach eine idee in sachen "simple tablet ui". es wäre allerdings grad für umsteiger echt interessant. ich hab ca. 40 rg's zum visualisieren, bis man das alles tablet-ui-like hat, hat man wenigstens bis dahin halbwegs geordnete infos am schirm. das wäre sogar stand von jetzt. wenns dann einen tablet-rg-viewer mit mehrwert gibt, wird sich sicherlich keiner beschweren, der dann nicht alle seine rg's quasi neu für die tablet ui erfinden müsste.

Eigentlich nicht. Ich habe es nur in die linke obere Ecke geschoben, da es meiner Meinung nach rechts oben meistens stört.

drum is es mir dann aufgfallen.

Ich habe absichtlich die Strichstärken auf 2 Pixel vergrößert, da es ansonsten ziemlich blöd ausgesehen hat.

dann muß ich mir für meine "windrichtungspünktchen" was anderes einfallen lassen, oder könntest du eventuell anstelle fester 2px einfach +1px sagen? dann wären die strichstärken auch gleich mit übernommen.

So ganz habe ich nicht kapiert, was jetzt genau richtig oder falsch läuft.

drum hab ich auch ersteres durchgestrichen. ich wusste nur ned, ob du eventuell schon den beitrag gelesen hast. da wollt ichs ned einfach löschen und dadurch verwirren. es passt also alles. farben werden übernommen, alles kein problem!

[Thorsten Pferdekaemper]

Hi,
ich habe jetzt den chart View (und anderes) noch einmal überarbeitet. Im Einzelnen:

• Das chart View funktioniert jetzt im Prinzip auch auf Popups inklusive der ganzen css/svg-defs Geschichten. Allerdings gibt es ein Problem mit der Größe des FTUI-Widgets. Dazu habe ich einen separaten Thread aufgemacht, der aber bisher noch nicht beantwortet wurde.
• Das Übernehmen der svg-Formate aus der FHEMWEB-Welt (also <prefix>svg_defs.svg sowie <prefix>svg_style.css funktioniert jetzt auch für "remote FUIP". Diese Dateien werden dann aus dem FHEM-System mit den SVG-Definitionen geholt. Alle anderen "user"-Dateien, also userCss, userHtmlBodyStart und die fhem-tablet-ui-user.css kommen aus dem FUIP-System.
• FUIP übernimmt jetzt die Styles vom SVG (fast) so wie sie sind. Schwarz bleibt Schwarz und das dunkle Blau bleibt ebenfalls. Hier muss dann ggf. auf der SVG-Seite geändert oder eben ein userCss verwendet werden.
• Die Linienstärken werden jetzt auch aus der SVG-Definition übernommen. (FUIP setzt jetzt nicht mehr automatisch 2px.)
• Die Höhe des Charts wurde um 4px reduziert, da die untere Achsenbeschriftung aus der Zelle herausgeragt hat.
• Es gab einen Absturz wegen leerer Seiten an anderer Stelle. Das sollte jetzt nur noch eine Meldung im FHEM-Log geben.

...probiert's mal aus.

Von wegen ReadingsGroup übernehmen: Das wäre einen eigenen Thread wert. Ich kann da nichts versprechen, aber ich brauche wie üblich einen eigenen Thread und Beispiele. Ich glaube, dass die ReadingsGroups so viel können, dass man gar nicht alles übernehmen kann. ...aber einiges vielleicht schon.

Gruß,
   Thorsten

[the ratman]

nach meinem morgentlichen update schreib ich gern was zu den charts/popups.

wegen rg's - bevor man eigenes startet ...
wär natürlich genial, aber vielleicht wärs sogar einfacher, was eigenes zu basteln?
so könnt man die schwächen der rg's  umgegen. ich z.b. ärger mich immer, dass man nur zeilen aber keine reihen verbinden kann.
oder ein "drehen" ganzer rg's um 90° war immer so ein wunschgedanke. sprich: mir pers. happerts definitiv an mehr "designmöglichkeiten".

das genialste wär natürlich, wenn man sich ne "tablet-rg" zusammenklicken könnte wie mit deinem painter die ganze ui. ob das den aufwand wert is, wage ich allerdings nicht zu beurteilen.

[Thorsten Pferdekaemper]

Hi,
ich verstehe gerade nicht, worin der Vorteil besteht, wenn man sich eine "ReadingsGroup" innerhalb eines FUIP UI zusammenklicken kann gegenüber dem, sich die Sachen einfach so in der UI zusammenzuklicken. Dadurch wird es doch nur noch komplizierter.
Ich könnte es verstehen, wenn man eine ReadingsGroup aus FHEM übernehmen und dann damit noch weiterbasteln will, aber direkt "was eigenes" verstehe ich nicht.
Genau wegen solcher Diskussionen/Fragen will ich für so etwas einen eigenen Thread.
Gruß,
   Thorsten

[the ratman]

ich will ned immer was aufmachen, sonst glauben die leut noch, ich bin unmäßig und hab dich versklavt *g*
wenn du sowas aber mal wirklich vor hast, kannst mit mir als betatester und "komischer ideen geber" rechnen. derzeit hoff ich eher nur, dir irgendwelche richtungen zu geben, an die du selber vielleicht ned denkst.

hast schon recht - warscheinlich wärs am besten, wenn man das chart-mäßig lösen könnte. mein: rg übernehmen aber mit aufhüpschung durch dein zukünftiges widget.
ich denk da z.b. an die ganzen grafiken, das wird z.b. schon wieder ein farbproblem.

mein "zusammenklicken" war halt auch immer so ein wunsch bei der rg - das erstellen einer solchen is ja manchesmal ne qual, weil du ja keinerlei formatierung im dev siehst.
ein problem wird auch sein, dass zumindest ich nen haufen web-view widgets in rg's verwende - kriegst du sowas auch 1:1 in deine ui? als bsp. hab ich mal eine meiner übersichts rg's angehängt als gfx.

[Thorsten Pferdekaemper]

ich will ned immer was aufmachen, sonst glauben die leut noch, ich bin unmäßig und hab dich versklavt *g*

Genau das ist der Fall, wenn Du die Threads missbrauchst. Dann wird die "Arbeit" tatsächlich zur Sklaverei, da man nie mit etwas fertig wird.
Das ist jetzt mein letzter Kommentar zur ReadingsGroup im Chart Thread.

[the ratman]

sodale ... ein schnelltest

+) es kommen beim normalen (also als nicht-popup) aufruf keine warnings mehr im log
+) bei den achsenbezeichnungen seh ich keinerlei fehler (kiosk sp browser win 10) - ein bissi sehr klein ist die schrift vielleicht.

-) beim erstellen und/oder ändern eines plots in einem popup (z.b. auch beim verändern der größe) kommt folgendes warnings

Code Auswählen Erweitern


2018.11.25 09:14:59 1: PERL WARNING: Argument "auto" isn't numeric in addition (+) at ./FHEM/42_FUIP.pm line 2155.
2018.11.25 09:14:59 1: stacktrace:
2018.11.25 09:14:59 1:     main::__ANON__                      called by ./FHEM/42_FUIP.pm (2155)
2018.11.25 09:14:59 1:     FUIP::autoArrangeNewViews           called by ./FHEM/42_FUIP.pm (2216)
2018.11.25 09:14:59 1:     FUIP::Set                           called by fhem.pl (3598)
2018.11.25 09:14:59 1:     main::CallFn                        called by fhem.pl (1811)
2018.11.25 09:14:59 1:     main::DoSet                         called by fhem.pl (1843)
2018.11.25 09:14:59 1:     main::CommandSet                    called by fhem.pl (1217)
2018.11.25 09:14:59 1:     main::AnalyzeCommand                called by fhem.pl (1063)
2018.11.25 09:14:59 1:     main::AnalyzeCommandChain           called by ./FHEM/01_FHEMWEB.pm (2587)
2018.11.25 09:14:59 1:     main::FW_fC                         called by ./FHEM/01_FHEMWEB.pm (863)
2018.11.25 09:14:59 1:     main::FW_answerCall                 called by ./FHEM/01_FHEMWEB.pm (535)
2018.11.25 09:14:59 1:     main::FW_Read                       called by fhem.pl (3603)
2018.11.25 09:14:59 1:     main::CallFn                        called by fhem.pl (726)
2018.11.25 09:14:59 1: PERL WARNING: Argument "auto" isn't numeric in addition (+) at ./FHEM/42_FUIP.pm line 2156.
2018.11.25 09:14:59 1: stacktrace:
2018.11.25 09:14:59 1:     main::__ANON__                      called by ./FHEM/42_FUIP.pm (2156)
2018.11.25 09:14:59 1:     FUIP::autoArrangeNewViews           called by ./FHEM/42_FUIP.pm (2216)
2018.11.25 09:14:59 1:     FUIP::Set                           called by fhem.pl (3598)
2018.11.25 09:14:59 1:     main::CallFn                        called by fhem.pl (1811)
2018.11.25 09:14:59 1:     main::DoSet                         called by fhem.pl (1843)
2018.11.25 09:14:59 1:     main::CommandSet                    called by fhem.pl (1217)
2018.11.25 09:14:59 1:     main::AnalyzeCommand                called by fhem.pl (1063)
2018.11.25 09:14:59 1:     main::AnalyzeCommandChain           called by ./FHEM/01_FHEMWEB.pm (2587)
2018.11.25 09:14:59 1:     main::FW_fC                         called by ./FHEM/01_FHEMWEB.pm (863)
2018.11.25 09:14:59 1:     main::FW_answerCall                 called by ./FHEM/01_FHEMWEB.pm (535)
2018.11.25 09:14:59 1:     main::FW_Read                       called by fhem.pl (3603)
2018.11.25 09:14:59 1:     main::CallFn                        called by fhem.pl (726)-)beim überfahren eines popups mit der maus kommt kurz ein horizontaler scrollbalken.
-) als erinnerung: dir fehlt noch ein icon bei der auswahl des widgets
-) befindet sich das proplanta-widget auf der selben seite wie ein chart-widget, gibts einen farbfehler - siehe anhang
x) was man eventuell noch einfügen können sollte ist das übernehmen/ignorieren vom attr "endPlotNow". standardmäßig scheint das deinem chartwidget doch recht egal zu sein.

tjo, scheint langsam wirklich dem ende zu zu gehen. gefällt mir wirklich verdammt gut.

[Thorsten Pferdekaemper]

-) beim erstellen und/oder ändern eines plots in einem popup (z.b. auch beim verändern der größe) kommt folgendes warnings

Das konnte ich nachvollziehen, aber ich will es momentan nicht lösen. Im Prinzip macht es nichts (außer störender Meldungen im Log) und es erinnert mich an ein etwas grundlegenderes Problem.

beim überfahren eines popups mit der maus kommt kurz ein horizontaler scrollbalken.

Das konnte ich gar nicht nachvollziehen. Bei mir fehlt auf dem Popup einfach der untere Teil des Charts, aber ohne Scrollbalken. Der einzige Scrollbalken, der bei mir erscheint, kommt wenn ich auf die drei Striche für die Auswahl für die Intervalle klicke. Da ist es aber ok, da das bei mir nicht ins Popup passt.
Kannst Du mir noch ein bisschen mehr Details liefern? Z.B. welcher Browser, vielleicht die SVG-Datei etc.

-) als erinnerung: dir fehlt noch ein icon bei der auswahl des widgets

Das ist jetzt dabei.

-) befindet sich das proplanta-widget auf der selben seite wie ein chart-widget, gibts einen farbfehler - siehe anhang

Ich sehe was Du meinst, aber ich konnte es nicht nachvollziehen. Kannst Du nachsehen, wo die Farbe herkommt? Ansonsten gib mal folgendes (sinngemäß) in die Adresszeile des Browsers ein, wenn Du das Problem siehst.

Code Auswählen Erweitern


http://<ip>:<port>/fhem/<name_des_FUIP_device>/css/fhem-tablet-ui-user.css

(Das ist was anderes als Deine "normale" fhem-tablet-ui-user.css, also bitte genau so machen wie beschrieben.)
...dann hätte ich gerne das, was der Browser anzeigt.

x) was man eventuell noch einfügen können sollte ist das übernehmen/ignorieren vom attr "endPlotNow". standardmäßig scheint das deinem chartwidget doch recht egal zu sein.

Eigentlich war das schon drin, aber nur wenn man das Attribut fixedrange explizit auf "day" stehen hatte. Jetzt wird fixedrange wie "day" behandelt, wenn es nicht explizit gesetzt ist. D.h. endPlotNow müsste jetzt (fast) immer funktionieren.
"Fast" habe ich geschrieben, weil es für Stundenplots sowieso immer so funktioniert wie mit "endPlotNow". Dort gibt es keinen 3-Stunden-Automatismus.

Gruß,
   Thorsten

[the ratman]

Kannst Du mir noch ein bisschen mehr Details liefern? Z.B. welcher Browser, vielleicht die SVG-Datei etc.

firefox ... geht zu 100%, ist auch alles da. ich leg auch ein bild dazu.
kiosk sp browser ... text stimmt ebenfalls, auch da ist nix abgeschnitten. beim überfahren des plots kommt ein horizontaler schiebebalken (das kann ich dir leider nicht schießen, dazu ist mein screenshot-tool zu blöd) - du kannst dir den selber im windoof app-store kostenlos abzapfen, so du dich ärgern willst *g*.
dumme idee: ich hab keine überschrift fürs popup, nur die des plots - könnte da der platzmangel bei dir herkommen?

...dann hätte ich gerne das, was der Browser anzeigt.

das müsste dann so aussehen?

Code Auswählen Erweitern

http://192.168.178.8:8083/fhem/tablet/css/fhem-tablet-ui-user.cssda kommt dann nur eine meldung in richtung "disconnected from the server <irgendwas>" und dann kommt nach 1 sek. ne schwarze seite

Ich sehe was Du meinst, aber ich konnte es nicht nachvollziehen.

tjo, jetzt wo ich das auch mit dem ff testen kann, kann ich sagen, dass es wohl am kiosk sp liegt. weil der ff macht den fehler nicht. leider kann ich beim kiosk-browser überhaupt nix machen - der würd mir nicht mal die aktuelle url verraten, geschweige denn, mich irgendwelche rohdaten anschauen lassen.

Jetzt wird fixedrange wie "day" behandelt, wenn es nicht explizit gesetzt ist.

ich bin glücklich!


so, jetzt muß ich nur mehr einen ersatz für meinen kiosk-browser finden. auf dem sollte das ganze ja eigentlich laufen. aber auf dem ding fehler zu suchen, kannst vergessen und würd ich dir auch gar ned antun wollen. ich geh übrigens stark von aus, dass da der ie dahinter steht und den und den edge hab ich vor 1 woche als nicht brauchbar verbannt. lieber ein paar mal am ff auf dem surface mit stift link-anklick-probleme, als ewig falsche anzeigen, kaputte designs und nicht nachvollziehbare nachdenkfasen beim anwählen von websites ...

[Thorsten Pferdekaemper]

firefox ... geht zu 100%, ist auch alles da. ich leg auch ein bild dazu.

Seltsam. Mit Firefox funktioniert bei mir kein chart Widget...

kiosk sp browser ... text stimmt ebenfalls, auch da ist nix abgeschnitten. beim überfahren des plots kommt ein horizontaler schiebebalken

Wie überfährst Du denn auf einem Tablet/Handy das Popup mit der Maus?

dumme idee: ich hab keine überschrift fürs popup, nur die des plots - könnte da der platzmangel bei dir herkommen?

Das spielt bei mir keine Rolle.

das müsste dann so aussehen?

Code Auswählen Erweitern

http://192.168.178.8:8083/fhem/tablet/css/fhem-tablet-ui-user.css

Heißt Dein FUIP-Device tatsächlich "tablet"?

leider kann ich beim kiosk-browser überhaupt nix machen - der würd mir nicht mal die aktuelle url verraten, geschweige denn, mich irgendwelche rohdaten anschauen lassen.

Dann zeige einfach die Seite mal im Firefox oder so an (auch wenn es da ok aussieht) und versuch es mit der fhem-tablet-ui-user.css nochmal.

ich bin glücklich!

Ich aber nicht, da das ganze meiner Meinung nach noch ziemlich "buggy" ist.

Gruß,
   Thorsten

[the ratman]

Seltsam. Mit Firefox funktioniert bei mir kein chart Widget...

ff 63.03 64 bit win 10 - sowohl portable (von nem stick) als auch fest installiert auf einem pc und dem surface.
alle varianten verhalten sich gleich gut. mein adblocker is aus auf internen seiten und das addon "disable javascript" rennt ebenfalls nicht. ansonsten sind die dinger "out of the box"
und nachdems auf dem kiosk-browser auch so halbwegs rennt, würd ich sagen: am ie würds wohl auch laufen - maximal mit dem erwähnten schiebebalken.

Wie überfährst Du denn auf einem Tablet/Handy das Popup mit der Maus?

hab den derzeit auch auf beiden rechnern am laufen. am großen mit maus und am tablet mit stift, der quasi als maus werkelt. mit finger gibts natürlich keinen "schwebeklick" und somit auch keinen balken*g*

Heißt Dein FUIP-Device tatsächlich "tablet"?

ja ... internals:

Code Auswählen Erweitern

NAME   tablet
NR   236
STATE   tablet
TYPE   FUIP
editOnly   0
beim anzeigen am ff kommt auch nur ne weiße seite ... nochmal: ich rufe einfach die tabletseite auf und hau dahinter "/css/fhem-tablet-ui-user.css" dran?
mit "view-source:http://192.168.178.8:8083/fhem/tablet/css/fhem-tablet-ui-user.css" steht tatsächlich 0,nix da. mit elemte untersuchen erkennt man tatsächliech ein html grundgerüst. der header is ganz leerr und  im body gibts genau nur einen leeren pre-tag.
nachtrag: wunder mich auch nicht - geh ich mal auf "/opt/fhem/www/tablet/css" nachgucken, stell ich fest, dass es dort diese .css nicht gibt. dafür jede menge andere

Code Auswählen Erweitern

ratman@fhem:/opt/fhem/www/tablet/css# ls
fhem-blue-ui.css      fhem-darkgreen-ui.css  fhem-mobil-ui.css   fhem-tablet-ui.min.css      ftui-bright-mint-ui.css  ftui_checklist.css   ftui_controlbutton.css  ftui_departure.css  ftui_range.css     ftui_slider.css   ftui_weekprofile.css
fhem-darkblue-ui.css  fhem-green-ui.css      fhem-tablet-ui.css  fhem-tablet-ui-wdtimer.css  ftui_chart.css           ftui_colorwheel.css  ftui_controller.css     ftui_medialist.css  ftui_slideout.css  ftui_spinner.css



Ich aber nicht, da das ganze meiner Meinung nach noch ziemlich "buggy" ist.

dann nenns einfach ne pre oder alpha *g* der weg stimmt ja schon mal und mein ff beweist, dass es gehen kann ...

[Thorsten Pferdekaemper]

Hi,
ich hab das mit dem Firefox auch nochmal probiert. Es funktioniert tatsächlich, nur spezielle Angaben bei fixedrange gehen nicht. Warum das so ist ist mir allerdings auch nicht klar.

nachtrag: wunder mich auch nicht - geh ich mal auf "/opt/fhem/www/tablet/css" nachgucken, stell ich fest, dass es dort diese .css nicht gibt.

Das hat damit nur am Rande zu tun. FUIP macht sich seine fhem-tablet-ui-user.css selbst "on the fly". Die Originale von FTUI wird zwar auch inkludiert, sie muss aber nicht existieren. Ich habe auf meinem Testsystem auch keine.

Könntest Du es vielleicht nochmal probieren? Also genau die Seite anzeigen, die normalerweise das Problem hat und dann die besagte URL eingeben. Falls es wirklich nicht geht, könntest Du es mal auf einer anderen FUIP-Seite probieren?
Gruß,
   Thorsten

[the ratman]

uij, jetzt mag er mich ... ist halt jetzt ff, also der problemlose. jetzt frag ich mich zwar grad, was nu anders als beim letzten mal is ... aber ich glaub, ich schalt auf geistigen durchzug *g*.

Code Auswählen Erweitern

text.fuipchart.title { font-size:16px; fill:#808080; }

/* all normal lines should have no fill */
.fuipchart:not([class*="fill"]):not([class*=dot]):not(text) { fill:none; }

/* stroke-width classes
0.2 0.5 1 1.5 2 3 4 8 12 16 24 */
.fuipchart.lwidth0p2 { stroke-width:0.2px; }
.fuipchart.lwidth0p5 { stroke-width:0.5px; }
.fuipchart.lwidth1 { stroke-width:1px; }
.fuipchart.lwidth1p5 { stroke-width:1.5px; }
.fuipchart.lwidth2 { stroke-width:2px; }
.fuipchart.lwidth3 { stroke-width:3px; }
.fuipchart.lwidth4 { stroke-width:4px; }
.fuipchart.lwidth8 { stroke-width:8px; }
.fuipchart.lwidth12 { stroke-width:12px; }
.fuipchart.lwidth16 { stroke-width:16px; }
.fuipchart.lwidth24 { stroke-width:24px; }

/* Definition for legend window */
.legend.lback {
fill: #111;
fill-opacity: 0.7;
}

.tab {
    overflow: hidden;
}

.tab button {
    border: none;
outline: none;
    cursor: pointer;
padding: 0;
padding-top: 3px;
    background-color: #2a2a2a;
    border-color: #eee;
    border-width: 1px;
    border-style: none none solid none;
}

/* Maus �ber dem Tab */
.tab button:hover {
    background-color: #444;
}

/* Aktiver Tab */
.tab button.active {
    border-width: 1px 1px 0px 1px;
    border-style: solid solid none solid;
    border-radius: 8px 8px 0px 0px;
    border-color: #eee;
}

/* Inhalt des Tabulators */
.tabcontent {
    display: none;
}

.sheet {
margin-top: -1px;
padding-top: 3px;
border-width: 1px;
    border-style: none solid solid solid;
    border-color: #eee;
}

.weatherValue{
    margin-right: 3px  !important;
}

.weatherUnit{
}


.background { fill:#ffffff; }

text       { font-family:Arial; font-size:11px; }
text.title { font-size:14px; }
text.legend { cursor:pointer; }
circle#svgmarker { color:#278727; opacity:0.5; }

path.SVGplot     { stroke:black; fill:none; }
rect.SVGplot     { stroke:black; fill:none; }
polyline.SVGplot { stroke:black; fill:none; }
.border  { stroke:white; fill:url(#gr_bg); }
.vgrid   { stroke:lightgray;  stroke-dasharray:2,6; }
.hgrid   { stroke:lightgray;  stroke-dasharray:2,6; }
.pasted  { stroke:black; stroke-dasharray:1,1; }

.SVGplot.l0     { stroke:red;     }
.SVGplot.l1     { stroke:green;   }
.SVGplot.l2     { stroke:blue;    }
.SVGplot.l3     { stroke:magenta; }
.SVGplot.l4     { stroke:brown;   }
.SVGplot.l5     { stroke:black;   }
.SVGplot.l6     { stroke:olive;   }
.SVGplot.l7     { stroke:gray;    }
.SVGplot.l8     { stroke:yellow;  }
.SVGplot.l9     { stroke:orange;  }
.SVGplot.l0fill { stroke:red;  fill:url(#gr_0);   }
.SVGplot.l1fill { stroke:green;  fill:url(#gr_1); }
.SVGplot.l2fill { stroke:blue; fill:url(#gr_2);   }
.SVGplot.l3fill { stroke:magenta; fill:url(#gr_3);}
.SVGplot.l4fill { stroke:brown; fill:url(#gr_4);  }
.SVGplot.l5fill { stroke:black; fill:url(#gr_5);  }
.SVGplot.l6fill { stroke:olive; fill:url(#gr_6);  }
.SVGplot.l7fill { stroke:gray; fill:url(#gr_7);   }
.SVGplot.l8fill { stroke:yellow; fill:url(#gr_8); }
.SVGplot.l9fill { stroke:orange; fill:url(#gr_9); }

.SVGplot.l0dot  { stroke:red;   stroke-dasharray:2,4; }
.SVGplot.l1dot  { stroke:green; stroke-dasharray:2,4; }
.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);}
.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);}
.SVGplot.l0fill_gyr    { stroke:red; fill:url(#gr0_gyr);}

text.SVGplot.l0     { stroke:none; fill:red;     }
text.SVGplot.l1     { stroke:none; fill:green;   }
text.SVGplot.l2     { stroke:none; fill:blue;    }
text.SVGplot.l3     { stroke:none; fill:magenta; }
text.SVGplot.l4     { stroke:none; fill:brown;   }
text.SVGplot.l5     { stroke:none; fill:black;   }
text.SVGplot.l6     { stroke:none; fill:olive;   }
text.SVGplot.l7     { stroke:none; fill:gray;    }
text.SVGplot.l8     { stroke:none; fill:yellow;  }
text.SVGplot.l9     { stroke:none; fill:orange;  }
text.SVGplot.l0fill { stroke:none; fill:red;     }
text.SVGplot.l1fill { stroke:none; fill:green;   }
text.SVGplot.l2fill { stroke:none; fill:blue;    }
text.SVGplot.l3fill { stroke:none; fill:magenta; }
text.SVGplot.l4fill { stroke:none; fill:brown;   }
text.SVGplot.l5fill { stroke:none; fill:black;   }
text.SVGplot.l6fill { stroke:none; fill:olive;   }
text.SVGplot.l7fill { stroke:none; fill:gray;    }
text.SVGplot.l8fill { stroke:none; fill:yellow;  }
text.SVGplot.l9fill { stroke:none; fill:orange;  }

text.SVGplot.l0dot  { stroke:none; fill:red;     }
text.SVGplot.l1dot  { stroke:none; fill:green;   }
text.SVGplot.l0fill_stripe {stroke:none; fill:red;  }
text.SVGplot.l1fill_stripe {stroke:none; fill:green;}
text.SVGplot.l0fill_gyr    {stroke:none; fill:red;  }

[Thorsten Pferdekaemper]

Hi,
kannst Du mal probieren was passiert, wenn Du in ratbrightsvg_style.css die erste Zeile weglässt? Also das Teil mit .background.
Gruß,
   Thorsten

[the ratman]

hast den nagel auf den kopf getrofffen, nur liegt das im ratbrightsvg_style.css --> .background { fill:#ffffff; }

zumindest wäre dann der kiosk-browser auch wieder der meinung, dass problante mit dunklen hg kommen sollte *g*


das problem is halt, dass auch der original-style (svg_style.css) damit arbeitet --> .background { fill:#FFFFE7; }

[Thorsten Pferdekaemper]

hast den nagel auf den kopf getrofffen, nur liegt das im ratbrightsvg_style.css --> .background { fill:#ffffff; }

Ja klar, und dessen Inhalt wird in die fhem-tablet-ui-user.css "inkludiert". ...zumindest die fhem-tablet-ui-user.css, die von FUIP geliefert wird.
Ich muss mir nochmal genau anschauen, was man da machen kann.
Gruß,
   Thorsten

[the ratman]

einfach n blödes .background { fill:wasauchimmer!important; } dran hängen?

[Thorsten Pferdekaemper]

Hi,
nein, das sollte nicht die Lösung sein. Ich würde gerne herausfinden, warum das so ist. Die Klasse "background" wird nirgends verwendet, daher dürfte das keinen Effekt haben. ...außer die Klasse hat für diesen einen Browser irgend eine Sonderbedeutung.
Was genau ist das nochmal für ein Teil?
Gruß,
   Thorsten

[the ratman]

das ding heißt "kiosk sp browser" und is im windows store kostenlos und werbefrei zu kriegen.

ich geh - wie gsagt - davon aus, dass der allerdings selber teile des ie/edge mißbraucht - der edge zumindest macht den selben fehler. hab ihn extra nochmal reaktiviert *g*.
da den fehler" zu suchen ... viel spaß. vor allem sieht m$ das sicher ned als fehler. zumindest nicht als eigenen ...

den edge sollte man mit

Code Auswählen Erweitern

@supports (-ms-ime-align:auto) { .background { fill:wasauchimmer!important; } }
den ie 10 und 11 (hab ich aber auch nur von google) mit

Code Auswählen Erweitern

@media all and (-ms-high-contrast:none) {
     .background { fill:wasauchimmer!important; }
     *::-ms-backdrop, .background { fill:wasauchimmer!important; }
}zu besserem verhalten erziehen können
keine ahnung, ob das dann auch der kiosk kapiert?

[Thorsten Pferdekaemper]

Kannst Du mir mal den Link / die Links geben wo Du das her hast?

[the ratman]

aus dem windows store von win 10 hab ich ihn
gut, man kann auch im inet nach gucken: https://www.microsoft.com/de-de/p/kiosk-sp-browser/9wzdncrfj55j?activetab=pivot:overviewtab

wennst das css-zeugs meinst -  nö
is schon ewig her
aber im google einfach "edge css" eingeben ... erster link dazu is ja schon wie meiner: https://pixelbar.be/blog/microsoft-edge-internet-explorer-10-und-ie11-via-media-queries-css-ansprechen/

[Thorsten Pferdekaemper]

Hi,
ich konnte das Problem zwar nicht nachvollziehen, aber möglicherweise lag es am weatherdetail Widget. Die css-Klassen waren doch sehr unspezifisch. Ich habe das geändert, könntest Du nochmal probieren?
Gruß,
   Thorsten

[the ratman]

nö sorry,

weiterhin der selbe fehler mit dem hintergrund und den nicht übernommenen strichstärken beim kioskbrowser und dem edge. der ff rennt weiterhin problemlos.


nachtrag:
ich wollts nur sicherheitshalber erwähnen. kann aber nix davon wirklich nachvollziehen ...
manchesmal stimmen die strichstärken und die problanta-farben auch - der eindruck wäre, dass es immer in der tablet-ui funzt, wenn ich vorher keinen plot per fhem-web aufgerufen hatte. das wäre aber extrem komisch, weil das auch so läuft, wenn ich mit ff und edge gemischt arbeite. und weil ich das auch sicher wissen wollt, hab ichs sogar mit nem portablen ff probiert. der teilt sich 100% sicher keinen cache mit dem edge/ie/kiosk-browser.

o) könnte es also sein, dass auch die web-ui irgendwas extra/temporär anlegt auf das dann auch die tablet-ui zugreift?
o) bzw - ich hatte bei der nutzung des edge immer schon das problem, dass temporäres zeug eher nicht gelöscht wurde, egal, was man so gemacht hat an tastenkombinationen. eventuell ist das in die richtung zu verorten?

[Thorsten Pferdekaemper]

Hi,
das klingt dann aber eher danach, dass da was im Backend (also in FHEM selbst) passiert. FUIP ist ja auch sozusagen auf FHEMWEB draufgeflanscht, zumindest sehe ich Zeugs im HTML, was von FHEMWEB kommt. (Das wollte ich auch mal irgendwann loswerden...) D.h. es kann sehr wohl sein, dass etwas, was Du in FHEMWEB machst, Auswirkungen in FUIP hat. Natürlich soll das nicht so sein.
...aber auch damit konnte ich es nicht nachvollziehen. Es wäre möglicherweise hilfreich, wenn ich das alles mal sehen würde. Kannst Du ein Video davon machen?
Gruß,
   Thorsten

[the ratman]

das müsst ich dann aber 24/7 laufen lassen *g*
wie gsagt: das ist nicht wirklich nachvollziehbar und weit weg von ausgetestet, mehr ein gefühl.

schau dir mal die anhänge an - das wird ja immer lustiger ...
im edge fehlen ganze teile des header und zwar genau deine.

nachtrag: das ist parallel aufgenommen - in beiden browsern genau die selbe url zur selben zeit aufgerufen

[Thorsten Pferdekaemper]

Hi,
das, was der Firefox da als Quelltext anzeigt ist das, was insgesamt durch FTUI etc. dynamisch erzeugt wird. D.h. das ist mehr als der Quelltext. Das, was Du vom Edge angehängt hast, ist meiner Meinung nach richtig. Das soll nicht heißen, das die Firefox-Anzeige falsch ist. Es ist halt nur nicht einfach der Quelltext, sondern was anderes.
Gruß,
  Thorsten

[the ratman]

na dann viel spaß für webentwickler - beides sind die jeweiligen implementierten dev-tools mit ihren grundeinstellungen.

[the ratman]

so, hab mich mal n bissi gespielt wegen der falschen hg-farben und falsch-dicken striche.

herausgekommen ist ned viel und warschienlich auch nix hilfreiches.
aber immerhin kann ich sagen, dass beim ersten aufruf über den kioskbrowser bzw. den edge alles richtig rennt. erst ein 2. aufruf der browser macht den fehler und ab dann immer, bis zu einem neustart des compis.
alle mir bekannten cache-lösch-aktionen für den edge helfen da auch ned, nicht mal das entfernen der "edge-leichen" (wirklich beenden kannst du den ja nimma) per taskmanager hilft.

ich würd sagen: vergessen ma die fehler, bis m$ den edge auf crome umgstellt hat. das kann ja ned so lange dauern, denk ich mal.

[RPunkt]

Hallo,
ich versuche mit gerade an FUip, aber irgendwie bekomme ich die Charts nicht zum Laufen.
Wenn ich ein Chart mit FileLog erstelle, dann ist alles in Ordnung, jedoch ist mein Standard LogDB.
Keines der LogDB SVG-Charts zeigt eine Kurve. Die Legende ist vorhanden, aber sonst nichts.
Was mache ich falsch?

[eki]

siehe https://forum.fhem.de/index.php/topic,110994.msg1065135.html#msg1065135