[FHEM-Tablet-UI] User-Demos

[xyro]

Hallo Eki,

Ja das hat funktioniert!

Vielen Dank dafür!

Andere Sache,...

Beim Aktualisieren der Webseite (F5) kann es passieren, dass es mir die Widgets im Gridster verwürfelt, also an einem anderen Platz sind.
Ebenso werden die Charts oft unvollständig dargestellt,...

Ich weis nicht wo ich da ansetzen könnte. Als Browser habe ich IE, chrome und firefox getestet. Alle machen das selbe, mal mehr mal weniger.

Vielleicht hat da jemand eine Lösung parat?

Grüße

Alex

[wkarl]

Hallo Eki,

bei mir wird ja garnichts dargestellt, auch keine Achsen. Wie wird die Situation behandelt, wenn data-logdevice keine Daten liefert? Werden die Achsen gezeichnet und kein plot, oder werden auch keine Achsen angezeigt?

Die Antwort hilft mir im nächsten Schritt den Bereich einzugrenzen in dem ich suchen muss.

Danke und ciao
walter

[eki]

Hallo Walter,
Wenn keine Daten kommen, werden die Achsen trotzdem gezeichnet. Wenn gar nichts zu sehen ist, deutet das eher darauf hin, dass die refresh Funktion gar nicht aufgerufen wird oder irgendein Fehler im Script oder beim GET Aufruf passiert. Das müsste man dann allerdings auf der Browser Konsole sehen.

Kannst Du mal mit der angehängten Version prüfen ob sich irgendetwas verändert.

[eki]

Hallo Eki,

Ja das hat funktioniert!

Vielen Dank dafür!

Andere Sache,...

Beim Aktualisieren der Webseite (F5) kann es passieren, dass es mir die Widgets im Gridster verwürfelt, also an einem anderen Platz sind.
Ebenso werden die Charts oft unvollständig dargestellt,...

Ich weis nicht wo ich da ansetzen könnte. Als Browser habe ich IE, chrome und firefox getestet. Alle machen das selbe, mal mehr mal weniger.

Vielleicht hat da jemand eine Lösung parat?

Grüße

Alex

Siehst Du in den Fällen, in denen dein Layout durcheinander kommt Statusmeldungen (Toast) die etwas von Timeouts sagen (falls Du die Toast Meldungen ausgeschaltet hast, mal probehalber aktivieren, siehe Wiki).

[wkarl]

Hallo eki,

keine Verbesserung mit der neuen widget_chart.js. Ich werde das ganze zu einem Basiskonstrukt zurück bauen - nicht als popup. Und von dort die Untersuchungen fortführen. Melde mich dann.

Nachtrag: Zurückgebaut funktioniert die Anzeige.

Danke und ciao
Walter

[RoBra81]

Hallo,

ich habe das gleich Problem mit den Charts im Popup (http://forum.fhem.de/index.php/topic,45864.0.html) - wie kann ich bei der Lösungsfindung helfen?

Ronny

[RoBra81]

Hallo,

ich habe mir mal die widget_chart.js angesehen: Ich habe einige Zusammenhänge finden können, komme aber nicht wirklich weiter. In der Funktion update wird definiert, dass das Refresh beim Event fadein des parent aufgerufen werden soll. Hier gibt es ein Problem:

1. der parent des Chart ist der Dialog und nicht das Popup
2. das Event fadein wird in der widget_popup.js nicht weder für den Dialog noch für das Popup getriggert, sondern für das angeklickte Objekt (z.B. ein Label)

Ich habe mal testweise in der widget_popup.js die Zeile

Code Auswählen Erweitern

                    dialog.trigger('fadein');


nach Zeile 110 eingefügt. Dies führt dazu, dass zwar versucht wird, beim öffnen des Dialogs den Chart aufzubauen, aber es werden sehr viele Fehler auf der Console angezeigt und der Chart wird nicht korrekt angezeigt - vermutlich passt die parent-Zuordnung hier nicht.

Hier noch mein HTML:

Code Auswählen Erweitern

        <li data-row="5" data-col="2" data-sizex="4" data-sizey="2" class="halbTransparent">
          <header class="headerTransparent">WOHNZIMMER</header>
          <div class="left">
            <div data-type="thermostat" data-device="DG.wz.HZ.Heizkoerperventil.Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left-space"></div>
          </div>
         
          <div class="right right-space">
            <div data-type="dimmer"
                 data-device="DG.wz.LI.Allgemein"
                 data-get="brightness"
                 data-get-off="0"
                 data-get-on="[1-9][0-9]*"
                 data-set-off="0"
                 data-set="dim"
                 data-min="0"
                 data-max="100">
            </div>
            <div data-type="label" class="cell">Licht</div>
            <div data-type="symbol"
                 id="starter1"
                 data-device='DG.wz.LI.Allgemein'
                 data-get=""
                 data-off-color="DG.wz.LI.Allgemein:RGB"
                 data-off-background-color="DG.wz.LI.Allgemein:RGB"
                 data-icon="fa-ellipsis-h"
                 data-background-icon="fa-circle-thin"
                 class="small">
            </div>
          </div>
         
          <div data-type="popup" data-height="240px" data-width="240px" data-mode="animate" data-starter="#starter1" class="col-1-6">
            <div class="dialog dialogTransparent">
              <header class="dialogheaderTransparent">RBG COLOR</header>
              <div data-type="colorwheel" data-device='DG.wz.LI.Allgemein' data-get="RGB" data-set="RGB" class="roundIndicator"></div>
            </div>
          </div>
         
          <div class="right top-space right-space-2x">
            <div class="inline">
              <div data-type="label" data-device="DG.wz.HK.Wandthermostat" data-get="measured-temp" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
              <div data-type="klimatrend" data-device="DG.wz.HZ.Heizkoerperventil.Clima" data-get="statMeasured-tempTendency"></div>
              <div data-type="label" class="cell">Temperatur</div>
            </div>
           
            <div class="inline">
              <div data-type="label" data-device="DG.wz.HK.Wandthermostat" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
              <div data-type="label" class="cell">Luftfeuchte</div>
            </div>

            <div class="cell">
              <div data-type="popup" data-width="450px" class="inline halbTransparent">
                <div data-type="simplechart"
                    data-device="DG.wz.HK.Wandthermostat"
                    data-logdevice="DBLog_XX.xx.HZ.Heizung"
                    data-columnspec="DG.wz.HK.Wandthermostat:measured-temp"
                    data-minvalue="15"
                    data-maxvalue="25"
                    data-height="60"
                    data-width="90"
                    class="noticks">
                </div>
                <div class="dialog dialogTransparent">
                  <header class="dialogheaderTransparent">TEMPERATURE</header>
                  <div data-type="simplechart"
                      data-device="DG.wz.HK.Wandthermostat"
                      data-logdevice="DBLog_XX.xx.HZ.Heizung"
                      data-columnspec="DG.wz.HK.Wandthermostat:measured-temp"
                      data-minvalue="15"
                      data-maxvalue="25"
                      data-yticks="2"
                      data-daysago="1"
                      data-height="250">
                  </div>
                </div>
              </div>
              <div data-type="popup" data-width="800px" data-height="700px" class="inline">
                <div data-type="simplechart"
                    data-device="DG.wz.HK.Wandthermostat"
                    data-logdevice="DBLog_XX.xx.HZ.Heizung"
                    data-columnspec="DG.wz.HK.Wandthermostat:humidity"
                    data-minvalue="0"
                    data-maxvalue="100"
                    data-height="60"
                    data-width="90"
                    class="noticks">
                </div>
                <div class="dialog dialogTransparent">
                  <header class="dialogheaderTransparent">CHART</header>
                  <div data-type="chart"
                      data-height="400"
                      data-device="DG.wz.HZ.Heizkoerperventil"
                      data-logdevice="DBLog_XX.xx.HZ.Heizung"
                      data-columnspec='["DG.wz.HK.Wandthermostat:measured-temp","DG.wz.HK.Wandthermostat:humidity","DG.wz.HZ.Heizkoerperventil:actuator"]'
                      data-style='["ftui l0fill","ftui l1fill","ftui l2fill"]'
                      data-ptype='["lines","lines","steps"]'
                      data-uaxis='["primary","secondary","secondary"]'
                      data-legend='["Temperatur","Luftfeuchte","Ventilstellung"]'
                      data-yunit="°C"
                      data-ytext="Temperature"
                      data-minvalue="auto"
                      data-maxvalue="auto"
                      data-yunit_sec="%"
                      data-ytext_sec="Percentage"
                      data-yticks="auto"
                      data-minvalue_sec="0"
                      data-maxvalue_sec="100"
                      data-daysago_start="0"
                      data-daysago_end="-1"
                      data-crosshair="true"
                      data-cursorgroup="1"
                      data-scrollgroup="1"
                      data-showlegend="true"
                      data-xticks="auto">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>


Ronny

[RoBra81]

Ich hab's!! Ich habe das Problem lokalisieren können: standardmäßig wird ein Popup im Modus "animate" geöffnet - damit kommt jedoch das Chart-Widget leider nicht klar, da sich die Größe des Popups langsam ändert und vermutlich das Refresh mit der initialen Größe 0 arbeitet. Ändert man den Modus auf "fade" dann funktioniert das Chart-Widget (mit der vorher beschriebenen Anpassung im widget_popup.js) auch im Popup (leider aber nicht so schön animiert "einfliegend").

Code Auswählen Erweitern

              <div data-type="popup" data-width="800px" data-height="700px" class="inline" data-mode="fade">


Ronny

[eki]

Hallo Ronny,

das ist doch schon mal ein guter Hinweis, damit kann ich weiter prüfen. Ich hatte in die widget_popup.js nach Rücksprache mit setstate einen zusätzlichen event trigger eingebaut, der beim Öffnen des Popus dem widget_chart.js Bescheid gibt, dass das Chart aufgebaut werden kann. Eventuell kommt der event in Deinem Fall nicht, ich werde mir noch mal das popup widget anschauen, vielleicht finde ich ja was.

Gruss
Kurt

[RoBra81]

Hallo Kurt,

das ist doch schon mal ein guter Hinweis, damit kann ich weiter prüfen. Ich hatte in die widget_popup.js nach Rücksprache mit setstate einen zusätzlichen event trigger eingebaut, der beim Öffnen des Popus dem widget_chart.js Bescheid gibt, dass das Chart aufgebaut werden kann. Eventuell kommt der event in Deinem Fall nicht, ich werde mir noch mal das popup widget anschauen, vielleicht finde ich ja was.

das Event kommt, jedoch vom falschen Element: Du definierst das on im widget_chart auf den parent vom chart-Element - das ist bei mir der Dialog. Im Popup wird der Event auf this getriggert - das ist bei mir jedoch weder das Popup noch der Dialog, sondern das Element, welches angeklickt wurde (in meinem Beispiel oben der Simplechart) - und das ist kein Parent von Chart sondern eher ein "Onkel"  (ein sibling vom parent). Wie gesagt, wenn man im widget_popup

Code Auswählen Erweitern

$(this).trigger('fadein');

durch

Code Auswählen Erweitern

dialog.trigger('fadein');

ersetzt, funktioniert es (zumindest, wenn das Popup nicht animiert wird)...

Ronny

[RoBra81]

Hallo,

mit der angehängten Version funktioniert's nach Anpassung der Funktion show auch beim Modus "animate" 

Ronny

PS: ich hätte da noch einen Wunsch: wäre es möglich, die Diagramme zum Chartanfang und zum aktuellen Zeitpunkt zu vervollständigen: wenn ein Wert über Nacht eine weile konstant ist, fängt die Linie nicht 0:00 Uhr sondern irgendwann später an. Gleiches gilt für das Ende: war der Wert in letzter Zeit konstant, endet die Linie mit der letzten Wertänderung und nicht zum aktuellen Zeitpunkt - das kann bei mehreren Linien im Diagramm schon merkwürdig aussehen...

[RoBra81]

PS: ich hätte da noch einen Wunsch: wäre es möglich, die Diagramme zum Chartanfang und zum aktuellen Zeitpunkt zu vervollständigen: wenn ein Wert über Nacht eine weile konstant ist, fängt die Linie nicht 0:00 Uhr sondern irgendwann später an. Gleiches gilt für das Ende: war der Wert in letzter Zeit konstant, endet die Linie mit der letzten Wertänderung und nicht zum aktuellen Zeitpunkt - das kann bei mehreren Linien im Diagramm schon merkwürdig aussehen...

Ich hab's mit dem Logproxy hinbekommen

[eki]

Hallo Ronny,

danke fuer deine Hilfe, gut analysiert. Ich werde noch mal versuchen zu kapieren, warum das bei mir und einigen anderen mit eigentlich der gleichen Struktur funktioniert hat.

Das mit den Anfangs- und Endwerten ist mir, so wie Du es gelöst hast, lieber. Ich finde es besser, dass das Chart nur die Daten verwendet, die es per get bekommt und nichts dazu "erfindet".

[RoBra81]

Hallo,

beim Basteln sind mir noch ein Wunsch gekommen, vielleicht kann der ja bei Gelegenheit umgesetzt werden  : ich habe reichlich Kurven in meinen Graphen eingebaut und hätte daher gern die Möglichkeit, zu konfigurieren, welche Kurven standardmäßig angezeigt werden und welche ich nur bei Bedarf zugeschaltet werden können soll.

Darüber hinaus noch eine Frage: ich habe mehr als fünf Kurven und daher die CSS analog zu den anderen um l5 erweitert - das funktioniert prinzipiell, nur das fill will nicht klappen - hast du eine Idee, woran es liegen könnte?

Vielen Dank
Ronny

[eki]

Hallo Ronny,

das feature im Definitionsfile festzulegen, welche Graphen sichtbar sind und welche nicht, habe ich schon eingebaut, gibts in den nächsten Tagen  .

Wenn Du bei Deiner Definition einen Farbverlauf wie in meinen anderen Stilen verwendest, wird das so nicht funktionieren. Ich habe es nicht geschafft, Verläufe aus css Dateien so einzubinden, dass sie von den SVGs richtig verwendet werden und die Verläufe deshalb per js Code eingebunden. Man kann also nur auf die Verläufe aus den fhem plots und auf ein paar, die ich dazu erfunden habe zurückgreifen. Wenn Du mir deine Styles schickst füge ich zusätzliche passende Verläufe mit dazu.