Symbol anzeigen wenn...

[Frank13]

Hallo allerseits!

Ich habe mal wieder eine kleine Denkblockade...

Ich möchte (auf meiner Übersichtsseite) die Abfalltonnenabholung nur anzeigen, wenn die jeweilige Tonne heute oder morgen abgeholt wird - damit muss ich nicht den Platz für alle Tonnen reservieren.
Wie kann ich ein Symbol definieren, dass nur angezeigt wird, wenn z.B. das Reading "Restabfall_tage" kleiner als 2 wird? Hat da jemand eine Idee? (Das nicht angezeigte Symbol darf den Platz dann auch nicht blockieren!)

Viele Grüße

Frank

[klausw]

das klappt mit

Code Auswählen Erweitern

class="autohide"
in diesem Fall wird das Icon nur angezeigt, wenn das entsprechende Reading existiert (wird aber nur bei refresh und longpoll aktualisiert).
Müsstest also ein separates reading erzeugen.

[Frank13]

Werde ich mal testen. Danke!

Viele Grüße

Frank

[Frank13]

Hallo allerseits!

Ich bin etwas weiter gekommen - das Verstecken funktioniert. Jetzt soll noch ein Text mit dazu kommen, wie kann ich den verstecken?

Ich hänge mal den Code ausschnittsweise an. Ich möchte die Symbole alle in einer Reihe mit dem zugehörigen Text und dann jeweils Symbol incl. Text ausblenden.

Code Auswählen Erweitern


<li data-row="1" data-col="8" data-sizex="3" data-sizey="1">

   <div class="inline ">
<div data-type="symbol"
       data-device="MuellterminDummy"
       data-get="Bioabfall_versteckt"
       data-icon="fa-trash warn fa-spin"
       data-off-colors="green"
       class="cell autohide" >
       </div>
    <div data-type="label" class="tiny">Biotonne</div>

   <div data-type="symbol"
   data-device="MuellterminDummy"
   data-get="Papiertonne_versteckt"
   data-icon="fa-trash warn fa-spin"
   data-off-color="blue"
   class="cell autohide" >
   </div>
   <div data-type="label" class="tiny">Papiertonne</div>

</div>
</li>   


[setstate]

So könnte man es auch machen

Code Auswählen Erweitern


<li data-row="1" data-col="8" data-sizex="3" data-sizey="1">
  <div class="center">
    <div data-type="label" data-device="MuellterminDummy"
        data-get="Bioabfall_tage" data-limits='[0,3]'
        data-classes='["show","hide"]'
        class="fixedlabel inline">

        <i class="fa fa-2x fa-trash green"></i>
        <div class="tiny white">Biotonne</div>
       
    </div>
    <div data-type="label" data-device="MuellterminDummy"
         data-get="Papierabfall_tage" data-limits='[0,3]'
         data-classes='["show","hide"]'
         class="fixedlabel inline">
       
        <i class="fa fa-2x fa-trash blue"></i>
        <div class="tiny white">Papiertonne</div>

    </div>
  </div>
</li>


[Frank13]

Hi!

Das ist auch eine sehr nette Variante. Da spare ich mir den ganzen Mülldummy und hole die Daten direkt aus dem Abfallkalendar.
Wenn ich im <i class... noch ein "fa-spin" hinzufüge, dreht die Tonne sogar.
Jetzt fehlt mir dabei nur noch die Anzeige der Tage (oben rechts an der Tonne) - bei der alten Variante ging das ja mit "warn". Nur hier hat das leider keine Wirkung...

Viele Grüße

Frank

[setstate]

Wenn das Icon nicht statisch sein soll, sondern mit FHEM connected, dann kann man anstatt des <i> auch wieder das <div data-type="symbol"> benutzen. Ohne das autohide ...

[Frank13]

Hi!

Das ist die Lösung! Jetzt kann ich endlich den WAF anpassen... 

Viele Grüße

Frank

[accessburn]

Lässt sich das anpassen auf on oder off?
Erst Anzeigen wenn das Readingstate "on" ist.

[setstate]

man könnte einmal mit einem Classchanger arbeiten:

Code Auswählen Erweitern



<div data-type="classchanger"
     data-device="dummyDevice"
     data-get="myReading"
     data-get-on="on"
     data-on-class="show"
     class="hide">

  <div data-type="symbol"
       data-device="myDummy1"></div>

  <div data-type="symbol"
       data-device="myDummy2"></div>

</div>

Oder man benutzt data-hide="myReading" beim Symbol-Widget. Dann wird das Symbol versteckt, wenn das Reading "on", "true" oder 1 ist.

[grobby]

Alles schön und gut, aber was machste wenn mal 2 Tonnen an einem Tag an der Reihe sind? Kann man dann irgendwie die Farben wechseln lassen zb aller 1 Sekunde damit man auch sieht das 2 Tonnen dran sind.