FHEM Forum

Hallo,

ich habe eine Frage zum Tablet UI mit den Abfallmodul. Fhem und Tablet UI sollten aktuell sein.

Ich komme nicht klar wie und wann die Tonnen sich im Tablet UI drehen sollen.


Aktuell sieht es so aus wie im Screenshot.


Ich möchte aber die Darstellung anders haben.

Also wie folgt:

- 0-2 Tage vorher soll die Tonne sich drehen mit roten Kreis der Tage darüber
- 3-7 Tage vorher soll über der Tonne der Rote Kreis mit den Tagen stehen - ohne zu drehen
- 8-unendlich soll nur die Tonne ohne den Roten Kreis dargestellt werden. Einfach nur die Tonne ohne die Zahl im roten Kreis darüber


Aktuell sieht meine HTML für die erste Tonne BIOMÜLL so aus:

<div class="vbox">
            <div data-type="symbol"
data-background-icon="none"
data-off-color="SaddleBrown"
data-device="Abfall"
data-get="Biomuell_days"
data-colors='["SaddleBrown","SaddleBrown"]'

data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin"]'
data-get-on='"[0-2]","[3-8]",]'

class="large bottom-narrow" >
</div>
                            <div class="">Biom&uuml;ll</div>
       <div data-type="label" data-device="Abfall" data-get="Biomuell_weekday"></div>
<div data-type="label" data-device="Abfall" data-get="Biomuell_date"></div>
</div>

Denke mal laut dem WIKI (commandref) in FHEM sind die beiden zeilen Wichtig.


            data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin"]'
            data-get-on='"[0-2]","[3-8]",]'


Aber da steige ich leider nicht richtig durch wie das zusammen passen soll...


Für Hilfe wäre ich sehr dankbar!


Gruß Albi

Mein AKTUELLES komplettes HTML für alle 4 Tonnen sieht wie folgt aus:

<div class="row">
<div class="hbox">

<div class="vbox">
            <div data-type="symbol"
data-background-icon="none"
data-off-color="SaddleBrown"
data-device="Abfall"
data-get="Biomuell_days"
data-colors='["SaddleBrown","SaddleBrown"]'
data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin"]'
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
class="large bottom-narrow" >
</div>
                            <div class="">Biom&uuml;ll</div>
       <div data-type="label" data-device="Abfall" data-get="Biomuell_weekday"></div>
<div data-type="label" data-device="Abfall" data-get="Biomuell_date"></div>
</div>



<div class="vbox">
            <div data-type="symbol"
data-background-icon="none"
data-off-color="black"
data-device="Abfall"
data-get="Restmuell_days"
data-colors='["black","black"]'
data-icons='["fs-dustbin warn","fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
class="large bottom-narrow" >
</div>
                            <div class="">Restm&uuml;ll</div>
<div data-type="label" data-device="Abfall" data-get="Restmuell_weekday"></div>
<div data-type="label" data-device="Abfall" data-get="Restmuell_date"></div>
</div>

<div class="vbox">
                            <div data-type="symbol"
data-background-icon="none"
data-off-color="blue"
data-device="Abfall"
data-get="BlaueTonne_days"
data-colors='["blue","blue"]'
data-icons='["fs-dustbin warn","fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
class="large bottom-narrow" >
</div>
                            <div class="">Blaue Tonne</div>               
<div data-type="label" data-device="Abfall" data-get="BlaueTonne_weekday"></div>
<div data-type="label" data-device="Abfall" data-get="BlaueTonne_date"></div>
</div>

<div class="vbox">
                            <div data-type="symbol"
data-background-icon="none"
data-off-color="yellow"
data-device="Abfall"
data-get="GelbeTonne_days"
data-colors='["yellow","yellow"]'
data-icons='["fs-dustbin warn","fs-dustbin warn fa-spin","fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}"]'
class="large bottom-narrow" >
</div>
                            <div class="">Gelbe Tonne</div>               
<div data-type="label" data-device="Abfall" data-get="GelbeTonne_weekday"></div>
<div data-type="label" data-device="Abfall" data-get="GelbeTonne_date"></div>
</div>

</div>
</div>

PS

Kann auch gerne in einen "Fachbereich" verschoben werden. Aber ich fühle mich hier eher als "Anfänger"

Albi

data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn","fs-dustbin"]'
data-get-on='["0","3","8"]'

fs-dustbin = Icon der Mülltonne
warn = mit rotem Kreis
fa-spin = dreht sich

Das ganze bedeutet:
- ab 0, Icon mit rotem Kreis und Drehung
- ab 3, Icon mit rotem Kreis
- ab 8, nur Icon

Vielen Dank.

eigentlich Logisch... Manchmal sieht man den Wald vor lauter Bäumen nicht...

Albi