New Feature - autohide

[setstate]

Für Readings, die temporär nicht existieren kann man diese jetzt mit

Code Auswählen Erweitern

class="autohide" einfach automatisch ausblenden lassen.
Der Check passiert nach jedem Shortpoll, also nach jedem Reload der Seite, aller 15 Minuten (longpoll ist an) bzw. aller 30 Sekunden (longpoll ist aus) oder nach Wiedererlangen der Netzwerkverbindung.

Beispiel: Vier Elemente, die Warnings anzeigen.
(http://knowthelist.github.io/fhem-tablet-ui/autohide_valid.png)

Code Auswählen Erweitern


  <div data-type="link"
       data-get="dummy1:warn1"
       data-color="white"
       data-background-color="red"
       data-icon="fa-exclamation"
       data-width="150" data-height="40"
       class="autohide round">Warn1: <div data-type="label" data-device="dummy1" data-get="warn1" class="inline"></div>
   </div>
   <div data-type="link"
        data-get="dummy1:warn2"
        data-color="white"
        data-background-color="red"
        data-icon="fa-exclamation"
        data-width="150" data-height="40"
        class="autohide round">Warn2: <div data-type="label" data-device="dummy1" data-get="warn2" class="inline"></div>
    </div>
    <div data-type="link"
         data-get="dummy1:warn3"
         data-color="white"
         data-background-color="red"
         data-icon="fa-exclamation"
         data-width="150" data-height="40"
         class="autohide round">Warn3: <div data-type="label" data-device="dummy1" data-get="warn3" class="inline"></div>
     </div>
     <div data-type="link"
          data-color="white"
          data-get="dummy1:warn4"
          data-background-color="red"
          data-icon="fa-exclamation"
          data-width="150" data-height="40"
          class="autohide round">Warn4: <div data-type="label" data-device="dummy1" data-get="warn4" class="inline"></div>
      </div>


Für den Check muss das autohide-DIV ein data-device & data-get bzw. ein data-get in DEVICE:READING Schreibweise haben! Es wird dann immer das ganze DIV ausgeblendet, mit allen Kind-Elementen.

In diesem Beispiel ist Warn3 nicht mehr vorhanden und wird dadurch ausgeblendet und gibt den Platz für die nachfolgenden Elemente frei.
(http://knowthelist.github.io/fhem-tablet-ui/autohide_invalid.png)

Für Experten:
Das Verhalten bei fehlenden (invaliden) Readings kann man persönlich in der fhem-tablet-ui-user.css überschreiben. Also statt einfach ausblenden, könnte man die Elemente mit rotem Hintergrund verpassen, oder grau machen oder verkleinern. Default ist das (Ausblenden)

Code Auswählen Erweitern

.autohide.invalid{
    display: none;
}

[n4rrOx]

Hallo setstate,

ich habe ein Problem mit der class autohide und zwar, dass das "hiden" nicht immer funktioniert.
Habe diese classe bei allen Labels der Termine als einzigste classe definiert (siehe angehängte Screenshots).

Nach dem Laden der Seite werden mir alte Termine angezeigt, die bereits vorbei sind, teilweise mehrfach.
Es sollen aber nur die kommenden 6 Termine angezeigt werden oder eben soviele Termine, wieviele gerade anstehen bzw. 0.
Die Readings vom calview sind leer bzw. es gibt sie nicht, da keine Termine momentan anstehen.

Nach einem Reload der Seite funktioniert dann manchmal das autohide.
Woher werden die Daten genommen? .... und wieso funktioniert es manchmal beim Reload, aber nie beim ersten Laden?
Kann man dieses Problem beheben?

[setstate]

Die Zeit vom ersten Laden bis zum ersten fertigen ShortPoll wird aus dem Cache (localStorage) überbrückt.
Aber was dann bei dir genau passiert, kann ich von der Ferne aus nicht sagen.

Man müsste tiefer analysieren: in der WebConsole das ftui.deviceStates Objekt einsehen, ob die Parameter auf valid = false gesetzt sind. Und dann im "Inspektor" nachsehen, ob die Termine die .invalid CSS verpasst bekommen haben.

[n4rrOx]

Hallo setstate,

vielen Dank für die Hinweise....werde schauen, was ich damit finden kann und hier berichten!

[gandy]

Hallo setstate,

super feature Ließe sich das autohide auch so erweitern, dass Readings ausgeblendet werden, wenn sie ein bestimmtes Alter überschritten haben?

[n4rrOx]

[...] Man müsste tiefer analysieren: in der WebConsole das ftui.deviceStates Objekt einsehen, ob die Parameter auf valid = false gesetzt sind.

Mit meinen bescheidenen Kenntnissen konnte ich in der Konsole kein Objekt mit dem Namen ftui.deviceStates finden.
Aber auch alles andere hat nicht darauf hingewiesen, dass irgendwas "invalid" sein sollte.

Und dann im "Inspektor" nachsehen, ob die Termine die .invalid CSS verpasst bekommen haben.

.invalid fehlt am Anfang....nach einem Refresh wird sie dann hinzugefügt und die Labels verschwinden.

[ChrisK]

//edit: Hätte ich mal ein bisschen weitergesucht, bevor ich gefragt habe. Das geht mit classchanger.



Da "autohide" am ehesten das ist, was ich suche, frage ich mal hier.

Gibt es eine Möglichkeit einen Widget abhängig von einem reading ein-/auszublenden? Also nicht nur wenn das reading invalid ist, sondern über selbst definierte Zustände.

Konkretes Beispiel:
Für eine Thermostat möchte ich per Switch den Modus auf manuell setzen und darunter per spinner-Widget die Temperatur einstellen. Das spinner-Widget soll im Modus "auto" ausgeblendet werden:

Code Auswählen Erweitern


           <div data-type="switch" data-device="wz_thermostat_Climate"
              data-get="controlMode" data-set="controlMode"
              data-get-off="!manual" data-set-off="auto"
              data-get-on="manual" data-set-on="manual"
              data-icon="circle-o" ></div>
            <div>Manuell</div>
            <div data-type="spinner"
                data-device="wz_thermostat_Climate"
                data-get="desired-temp"
                data-set="desired-temp"
                data-min="15"
                data-max="25"
                data-unit="°C"
                class="valueonly">
            </div>

In diesem Fall würde das also bedeuten, dass das zweite div ausgeblendet werden soll, wenn wz_thermostat_Climate.controlMode != manual ist.
Irgendeine Idee, wie man das am besten umsetzen könnte?