Abfall Widgets beschriften- Schrift unter der jeweiligen Tonne

[Kusselin]

Hallo Zusammen,

ich habe den Abfallkalender mit Tonnen in Tablet UI einbinden können.
Nun wollte ich die Tonnen noch beschriften (unterhalb der Tonnen)

HTML sieht so aus:

Code Auswählen Erweitern

<div class="small">
<div class="inline left-align" data-type="label">BioTonne&nbsp;&nbsp;</div>
<div class="inline left-align" data-type="label">Glasbox&nbsp;&nbsp;</div>
<div class="inline" data-type="label">GrueneTonne</div>
<div class="inline" data-type="label">GraueTonne</div>
</div>

mit left-align kann ich den Text nach Links setzen..wie würde es aber aussehen wenn ich noch weiter nach links gehen muss?

generell wie kann ich den Text individuell nach links oder recht und mitte udn weiter nach rechts verschieben.

Im Wiki verstehe ich das nicht so..da steht twar linksbündig = left-align ....aber halt weiterverschieben....

Über ne Info das es auch ich verstehe, herzlichen Dank

[ArduPino]

So zum Beispiel

Code Auswählen Erweitern



                                 <tr>
<td><div data-type="label" class="large thin">Hausmüll</div></td>
<td>
<div data-type="symbol"class="bigger warn"
data-device="myAbfall" data-get="Abfall_ARTAbfuhrterminRestmuell_tage"
data-get-on='["0","2"]'
data-on-colors='["#455544","#455544"]'
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'>
</div>
<div data-type="label" class="small top-narrow" data-device="myAbfall" data-get="Abfall_ARTAbfuhrterminRestmuell_wochentag"> </div>
</td>
</tr>



Ich habe das mit Tabellen gemacht. Hier habe ich den Wochentag unter den Tonnen stehen. Anstelle diesen, könntest du dann einen Text angeben.



EDIT: Bild eingefügt
Die Tonne dreht sich gerade, deshalb ist die schief.

[Kusselin]

ok danke..ich möchte aber jetzt nicht alles wieder komplett ändern.
Wäre es möglich anhand meiner html datei es zu zeigen?
Gruss

[ArduPino]

Ich sehe gerade das beim kopieren eine Zeile fehlt, nämlich <table>.

Du muss das nicht komplett ändern.
Einfach mal ausprobieren, die original HTML zur Sicherheit kopieren.
Wird man öfter brauchen.

Code Auswählen Erweitern

<table>

<tr>
Zeile1
<td>
Spalte 1
</td>
       
                <td>
Spalte 2
</td>
</tr>



Gibt Seiten die HTML erklären. Ich fummel mir das dann irgend wie zusammen bis es passt.

Dein Beispiel zeigt aber auch nur die Label.
Man weiß ja nicht mal wie deine Tonnen angeordnet sind.
Es gibt aber auch noch andere Befehle wie
left-space-2x
right-space-2x
left-narrow
... und viele andere

https://wiki.fhem.de/wiki/FHEM_Tablet_UI
Bei "Generelle Klassen für die Positionierung"
Tabelle findet man dort glaube ich nicht, das ist aber normales HTML. Wie gesagt, versuchen.
Eine Tonne in eine Tabelle einschließen und dann einfach ein Label darunter.

[ArduPino]

Ein einfaches Beispiel hab ich noch:

Code Auswählen Erweitern

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header><font size="+1">Licht</font></header>
<div class="cell">
<table width="100%">
<tr>

<td>

<div data-type="switch" data-device="Steckdose_D" class="inline"></div>
<div data-type="label" class="top-narow">Hofeinfahrt</div>
</td>
</tr>
</table>
</div>
</li>


Ein Schalter und darunter ein Text. Da waren mal zwei Schalter, deshalb hatte ich das auch hier mit einer Tabelle erstellt.
Schalter und Label in einer Spalte <td> ... </td>

Ich empfehle dir den Editor Notepad++ der Zeigt z.B. an, ob ein <div> oder eine Tabelle <td> ... </td> geschlossen ist.
Sonst verliert man schnell den Überblick. So genug geschrieben für heute.

[Kusselin]

Hi danke dir,

bin noch am Anfang was html bestrifft. Trotzdem danke.

OK wieder was gelernt..td heisst tabelle

was ist eigentlich das "tr" und das "table"?

Ich möchte halt das jetzige net verändern weil es läuft und wollte jetzt einfach einen Code der mir den text unter die Tonnen setzt.

Gruss

[ph1959de]

OK wieder was gelernt..td heisst tabelle

Nein und nein 

was ist eigentlich das "tr" und das "table"?

GoTo https://wiki.selfhtml.org/

[ArduPino]

Ok. Wenn du nichts verändern möchtest, dann muss es wohl so bleiben.
Ich sagte ja, Kopie anlegen und mal rum probieren. Oder wie im Wiki beschrieben die Befehle für die Positionierung testen. Das geht auch ohne Tabelle ! Manchmal ist ohne Tabelle besser, manchmal mit...testen oder so lassen, liegt an dir.

<table> ist der Anfang der Tabelle</table> das Ende
<tr> </tr> und <td> </td> neue Zeile und neue Spalte immer alles das was dazwischen steht.

Edit: Sehe den Code gerade nicht hier in Tapatalk. Also wenn da jetzt kein "table" und so steht, sorry, kann das jetzt nicht ändern. Aber hast ja jetzt einen Link zu einer Hilfe.

Gesendet von meinem Wileyfox Swift mit Tapatalk

[ArduPino]

So hier wie versprochen noch mal ein Beispiel und zwar ohne Tabelle:

Code Auswählen Erweitern

<li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
<header><font size="+0">Alarmanlage</font></header>
<div class="cell">
<div data-type="switch" data-device="du_Alarmanlage" class="narrow-top"
data-get-on="on"
data-get-off="off"
data-on-color="#22FF22"
data-off-color="#303030"
data-icon="oa-status_away_1"
data-on-background-color="#FF2222"
data-off-background-color="#505050" >
</div>
<div data-type="label" class="small"
data-device="Alarmanlage"
data-get="level4xec">
                                         </div>
</div>
</li>

Ergebnis ist dann wie im Anhang.
Damit habe ich einen Text sehr nah am Button und das ohne Tabellen, sondern zwei "DIV" in einem übergeordneten "DIV"
Bei "class" können dann Dinge wie "narrow-top" mit angegeben werden.

Also fügst du nur ein "Label" in ein weiteres DIV ein, mit dem Text den du dort haben willst.
Der ganze HTML Code orientiert sich erst mal in dem Feld der oben per data-sizex und data-sizey angegeben ist, solange alles rein passt.
Wenn nicht steht es über, kann auch passieren. Entweder man macht das Feld dann größer, oder verkleinert die Icons und die Schrift.
Würdest du das so übernehmen, ohne irgend was anderes, würde das Feld aber trotzdem bis in die erste Zeile rutschen !
Stell dir vor die Felder schwimmen, ist oben drüber nichts, bewegt es sich eben weiter hoch, egal welche Position man angibt !
In X weiß ich es gerade gar nicht.

Sollen mehrere Icons und Texte angeordnet werden, muss man das schon fast mit einer Tabelle machen.
Erst damit habe ich das so geschoben bekommen, wie im zweiten Bild zu sehen.
Ich habe dann einfach mal ein <tr> oder <td> eingebaut (und wieder mit </td> </tr> geschlossen !), also einfach ausprobiert was passiert.

[Kusselin]

Hallo Zusammen,

Ihr könnt mich jetzt auslachen oder was auch immer..aber ich lasse trotzdem nicht locker. Ich sitze jetzt seit 2 Std hier und probiere am Müllkalender unter die Tonnen die Bezeichnung zu setzen... hier auch nochmal dank an ph1959de für seinen link!! der ist sehr hilfreich aber anscheinend noch nicht für mich 

Natürlich auch an die geduld von ArduPino durch seine Beispiele. Bei mir war der HTML Code nicht untereinander sondern nebeneinander. Ich habe es jetzt so hinbekommen das alles untereinader steht. Desweiteren habe ich den Code "class=inline" gesetzt und am schluss immer das Label gesetzt mit der jeweiligen Bezeichnung. Leider funzt es nicht und es stht immer noch untereinander

Könnte da bitte nochmal ein Experte drüberschauen und mir sagen wie ich es jetzt nebeneinander hinbekomme

Vielen vielen Dank!!

Code Auswählen Erweitern

<!-- Abfall Kalender -->

<li data-col="7" data-row="5" data-sizex="5" data-sizey="2">

<header>
<div data-type="label" class="medium">Abfall Kalender</div>
</header>

<div class="top-space small">

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="BioTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["SaddleBrown","SaddleBrown"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="">Biomüll</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="BlaueTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["blue","blue"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="">Glas</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="GrueneTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["green","green"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="">Grüne Tonne</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="Restmuell"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["gray","grey"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="">Restmüll</div>

</div>


</li>

[ArduPino]

Ich sagte ja, das wenn etwas geöffnet wurde, es auch wieder geschlossen werden muss.
Da war bei jeder Tonne noch ein <div> offen, das ich jeweils mit </div> geschlossen habe.
Das wird im Notepad++ schön angezeigt, einfach auf das <div> klicken und das </div> wird angezeigt...wenn es denn da ist
Wenn man nun alles auf ein mal verschieben möchte, müsste man dies im ersten DIV unter </HEADER> machen.
Das ist ein DIV, das alle anderen einschließt, wie eine Klammer in einer Klammer...

Code Auswählen Erweitern

<li data-col="1" data-row="2" data-sizex="4" data-sizey="1">

<header>
<div data-type="label" class="medium">Abfall Kalender</div>
</header>

<div class="small">

<div class="inline">
<div data-type="symbol"
data-device="myAbfall"
data-get="Abfall_ARTAbfuhrterminRestmuell_tage"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["SaddleBrown","SaddleBrown"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label" class="top-narrow">Biomüll</div>
</div>


<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="BlaueTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["blue","blue"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="top-narrow">Glas</div>
</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="GrueneTonne"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["green","green"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="top-narrow">Grüne Tonne</div>
</div>

<div class="inline">
<div data-type="symbol"
data-device="MuellterminDummy"
data-get="Restmuell"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-on-colors='["gray","grey"]'
data-get-on='["0","2"]'
class="bigger inline" >
</div>
<div data-type="label"
  class="top-narrow">Restmüll</div>
</div>
</div>


</li>

Da alles nun etwas kleiner ist, habe ich das Fenster (oder wie man das auch immer nennt) verkleinert auf eine Zeile.
Dafür habe ich die Positionen der Beschriftungen mit "top-narrow" nach oben näher an die Tonnen geschoben.

Da du aber keine Werte hast, drehen sich die Tonnen und es wird auch das Warnsignal (der rote Kreis) nicht angezeigt.
Deshalb habe ich mal mein device dort eingefügt um ein Bild zu machen.

[Kusselin]

Danke Dir ArduPino