FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: tomster am 05 Februar 2017, 00:24:22

Titel: data-hide für <li>
Beitrag von: tomster am 05 Februar 2017, 00:24:22
Servus zusammen!

Mir ist gerade beim Aufbau einer neuen FHEM/FTUI-Instanz die Idee gekommen, dass es vielleicht gar nicht schlecht wäre, wenn man <li> Sections über einen devicestate ein-/ ausblenden könnte.
Eine Anwendung ist bei mir ein rotor-Widget, welches Wetterdaten von mehreren Orten anzeigt. Ein anderes zeigt unterschiedliche Kalender. Nun wäre es nicht schlecht, wenn man die Anzeige der jeweiligen <li>-Elemente in Abhängigkeit z.B. der Jahreszeit (Sommer: Wetter am See, Winter: Skiwetter) oder des jeweilig vor dem FTUI stehenden Nutzers (möchte den RasPi mittels Kamera zur Gesichtserkennung nötigen) anzeigen lassen könnte. Was haltet ihr von dieser Idee?
Titel: Antw:data-hide für <li>
Beitrag von: setstate am 05 Februar 2017, 00:55:20
Das geht mit dem universellen data-type="html"


<li data-row="1" data-col="3" data-sizex="1" data-sizey="1" data-type="html" data-class="dummy1:STATE" data-map-class='{"1":"show", ".*":"hide"}'>


Class wird gesteuert von Reading dummy1:STATE
Welche Klasse bei welchem Wert, wird mit dem data-map-class festgelegt

Leider gibt es noch eine Unzulänglichkeit in der Standard-CSS, die geändert werden muss

vorher

div.hide {
    display: none;
}


nachher

.hide {
    display: none;
}
Titel: Antw:data-hide für <li>
Beitrag von: tomster am 05 Februar 2017, 02:49:19
Danke, setstate.

Das funzt allerdings nur bei den "Toplevel"-<li>s, also durch die man die Gridster-Cards definiert.
Ein <li> innerhalb z.B. eines Rotor-Widgets lässt sich nicht damit schalten. Das wär aber genau was ich bräuchte...
Dieser Effekt lässt sich beim Ausblenden von gesamten TL-<li>s leider nicht erreichen.
LG,
Tom
Titel: Antw:data-hide für <li>
Beitrag von: MatthiasL am 18 Januar 2018, 11:36:46
Ich habe heute ein Update von FHEM gemacht und seitdem funktioniert das ausblenden abhängig der data-map-class nicht mehr.
Hat wer eine Idee, woran es liegt?


<li data-row="2" data-col="1" data-sizex="2" data-sizey="1" data-type="html" data-class="avr:createcover" data-map-class='{"onplayingNET":"show",".*":"hide"}'>
                    <header>Titel - Künstler</header>
                    <div data-type="label"
                    data-device="Spotify"
                    data-get="track_name"
                    class="bigger">
                    </div>
</li>
Titel: Antw:data-hide für <li>
Beitrag von: minias am 25 Januar 2018, 18:02:11
Habe heute auch ein Update gemacht und habe das selbe Problem.

<li data-class="g_pioneer_z1:power" data-map-class='{"on":"show", "off":"hide"}'  data-col="7" data-row="2" data-sizex="2" data-sizey="2" data-type="html">
<header>VOLUME WOHNZIMMER</header>
<div class="cell">
<div class="bigger top-space fullsize" data-device="g_pioneer_z1" data-get="volume" data-max="80" data-min="20" data-set="volume" data-type="volume"></div>
</div>
</li>