ABFALL Icons in TabletUi einbinden

[misterziege]

Hallo von meiner Seite aus! Ich lese seit einiger Zeit hier mit und habe vor zwei Wochen begonnen, mich mit einem Raspberry und fhem zu beschäftigen. Vieles klappt schon ganz gut und hat mich wieder in meine Jugend zurückversetzt (Terminal -> Ms Dos) 
Im Moment konfiguriere ich eine Tablet UI-Oberfläche nach meinen Wünschen und stehe vor der Tatsache, dass ich die tolle Anzeige des ABFALL Moduls nicht hinbekomme! Ich habe vieles versucht, alles hat aber irgendwie nicht geklappt... Mein letzter Versuch war jetzt, eine Tabelle in einem definierten Bereich zu basteln, in dem ich die "funktionierenden angezeigten Resttage zur Abholung" so anordnen wollte, dass ich daneben einfach nur selbst erstellte und in das default-Verzeichnis kopierte Icons einbinden wollte. Aber auch das gelingt mir nicht 
Mein Device heißt "Muell" und mein derzeitiger Code sieht folgendermaßen aus:

Code Auswählen Erweitern

<table>
<tr>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="button"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_graueRestmuelltonne_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["ro-muelltonne warn","ro-muelltonne warn","ro-muelltonne warn blink","ro-muelltonne warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="bigger"></td>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="button"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_gruenePapiertonneundgruener11mPapiercontainer_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["ro-bin warn","ro-bin warn","ro-bin warn blink","ro-bin warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="left bigger">
</div></td>
</tr>
<tr>
<td><img icons="Biotonne" alt="Biomüll"></td>
<td>&nbsp</td>
<td>[Row 2, Column 3]</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="button"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_GelberSack_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["ro-muelltonne warn","ro-muelltonne warn","ro-muelltonne warn blink","ro-muelltonne warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="bigger">
</div></td>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="button"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_brauneBiotonne_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["ro-bin warn","ro-bin warn","ro-bin warn blink","ro-bin warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="left bigger">
</div></td>
</tr>
<tr>
<td>[Row 4, Column 1]</td>
<td>&nbsp</td>
<td>[Row 4, Column 3]</td>
<td>&nbsp</td>
</tr>
</table>


Eigentlich würde ich gerne die Darstellung der Anzeige in einem Container mit folgenden Maßen einpassen: <li data-row="4" data-col="1" data-sizex="4" data-sizey="4"> und zwar so, dass zwei Icons nebeneinander ausgerichtet sind und die anderen beiden darunter.

Was ich noch gar nicht in Angriff genommen habe, weil ich blutiger html-Anfänger bin aber auch toll wäre wäre ein zusätzlicher (unsichtbarer) Platzhalter in der Mitte (vielleicht ein Kreis mit einem Ausrufezeichen), der nur sichtbar wird, wenn ein "Sondermüll-Termin" (bei uns 3-4 mal im Jahr und auch im Kalender hinterlegt) ansteht.

Über Hilfe jeglicher Art würde ich mich sehr freuen; vielen Dank im Voraus,

misterziege.

[daivnbe]

Hallo misterziege,

sieht doch schonmal ganz gut aus. Die Anordnung passt doch soweit.

Meine Definition der Tonnen sieht so aus:

Code Auswählen Erweitern

<div
data-type="symbol"
data-device="MuellterminDummy"
data-get="Restmuell"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
class="inline" >

Ich bin nicht sicher ob ich Dich richtig verstanden habe, aber versuch das doch mal

Code Auswählen Erweitern


<li data-row="4" data-col="1" data-sizex="4" data-sizey="4">
<table>
<tr>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="symbol"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_graueRestmuelltonne_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="bigger"></td>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="symbol"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_gruenePapiertonneundgruener11mPapiercontainer_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="left bigger">
</div></td>
</tr>
<tr>
<td><img icons="Biotonne" alt="Biomüll"></td>
<td>&nbsp</td>
<td>[Row 2, Column 3]</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="symbol"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_GelberSack_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="bigger">
</div></td>
<td>&nbsp</td>
<td> <div class="top-space">
<div data-type="symbol"
data-background-icon="none"
data-device="Muell"
data-get="Abfall_brauneBiotonne_tage"
data-off-color="#808080"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["#808080","#808080","#808080","#808080"]'
class="left bigger">
</div></td>
</tr>
<tr>
<td>[Row 4, Column 1]</td>
<td>&nbsp</td>
<td>[Row 4, Column 3]</td>
<td>&nbsp</td>
</tr>
</table>
</lI>


VG,
daivnbe

[misterziege]

Juhuu!
Vielen lieben Dank, davinbe!

Jetzt groovt´s richtig! Ich habe zwar noch keine Lösung für den "Sondermüll". Aber dafür sieht der Rest echt schick aus. Und damit auch andere Newbies eine Vorstellung bekommen, wie´s bei mir aussieht folgt hier mein nochmals bearbeiteter Code:

Code Auswählen Erweitern


<li data-row="4" data-col="1" data-sizex="4" data-sizey="3">
<div class="orange"
<h2><FONT SIZE="+2">Müll-Management</FONT></h2></div>
<div data-device="Muell"
data-type="symbol"
data-background-icon="none"
data-off-color="#000000"
data-get="Abfall_graueRestmuelltonne_tage"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-on-colors='["#000000","#000000","#000000","#000000"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
class="top-space bigger warn">
</div>

<div class="norrow inline yellow" data-type="label" data-device="Muell" data-get="Abfall_graueRestmuelltonne_datum"></div>

<div data-device="Muell"
data-type="symbol"
data-background-icon="none"
data-off-color="#E6E600"
data-get="Abfall_GelberSack_tage"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-on-colors='["#E6E600","#E6E600","#E6E600","#E6E600"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
class="top-space bigger warn">
</div>

<div class="norrow inline yellow" data-type="label" data-device="Muell" data-get="Abfall_GelberSack_datum"></div>

<br></br>

<div data-device="Muell"
data-type="symbol"
data-background-icon="none"
data-off-color="#4a995b"
data-get="Abfall_gruenePapiertonneundgruener11mPapiercontainer_tage"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["#4a995b","#4a995b","#4a995b","#4a995b"]'
class="top-space bigger warn">
</div>

<div class="norrow inline yellow" data-type="label" data-device="Muell" data-get="Abfall_gruenePapiertonneundgruener11mPapiercontainer_datum"></div>



<div data-device="Muell"
data-type="symbol"
data-background-icon="none"
data-off-color="#603e19"
data-get="Abfall_brauneBiotonne_tage"
data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
data-on-colors='["#603e19","#603e19","#603e19","#603e19"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
class="top-space bigger warn">
</div>

<div class="norrow inline yellow" data-type="label" data-device="Muell" data-get="Abfall_brauneBiotonne_datum"</div>


</li>


Danke nochmals,
Uli.

[misterziege]

Da habe ich doch gleich noch eine Frage:
Das Rotieren der Mülleimer ist eine tolle Visualisierung. Gibt es auch die Möglichkeit, diese durch einen Klick wieder zu deaktivieren, wenn man z.B. den Müll weggebracht hat? Wie würde dazu ein möglicher Code aussehen?
Vielen Dank im Voraus,
misterziege.

[joschre]

Auch wenn es schon lange her ist antworte ich mal. Bin in den letzten Tagen oft über diesen Thread gestolpert und habe dazu nun eine Antwort.
Roman hat unter: https://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6 folgenden Ansatz:

Code Auswählen Erweitern

<div data-type="switch"
data-device="myAbfall"
data-get="Restmuell_tage"
data-set="Restmuell_tage"
data-warn="Restmuell_tage"
data-warn-on="([0-9]|[1][0-9]|off)"
data-states='["off","0","1","([2-9]|[1][0-9])"]'
data-set-states='["off","off","off","off"]'
data-cmd="setreading"
data-icons='["fa-trash-o","fa-trash-o fa-spin","fa-trash-o fa-blink","fa-trash-o"]'
data-background-icons='["none","none","none","none"]'
data-colors='["black","#888","#888","#888"]'
class="">
</div>

Ein klick auf das Müllicon macht mit "setreading" das Reading für die Resttage auf "off" dadurch wird neben dem Mülleimer ein "!" angezeigt und es dreht sich nicht mehr. Roman lässt jeden morgen um 7 Uhr und nachts um 0:02 Uhr ein Update des Abfallmoduls starten, wodurch es wieder wie gewohnt die Resttage berechnet und das Reading neu setzt.
Sehr gelungen wie ich finde