Probleme mit ersten Schritten im TabletUI

[Rheingold]

Hallo zusammen,

sorry für meinen verzweifelten Post. Ich habe mich nun schon etliche Stunden mit FHEM und dem TabletUI befasst. Um Hilfe zu finden wollte ich hier etwas schreiben, doch das Captcha hat meinen Postversuch zerschlagen und nun darf ich alles neu tippen

Das TabletUI habe ich schon drei Mal neu installiert, doch jedes Mal erscheint es so, als ob die Darstellung komplett verzerrt ist. Siehe Screenshot. Mache ich etwas falsch? Die letzte Installationsanleitung war von GitHub: https://github.com/knowthelist/fhem-tablet-ui
Meine Ansprüche sind erst mal gering. Ich möchte eine Übersicht erstellen, mit Datum, Uhrzeit und dem aktuellen Wetter. Alles weiter folgt peut a peut. Doch selbst da scheitert es leider schon. Wenn ich die index.html anpasse und nur noch folgendes zwischen den <ul> Tags steht, sehe ich keine Temperatur

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="4" data-sizey="4">
    <header>Temperatur</header>
<div data-type="label" data-device="WEATHER_PROPLANTA" data-get="temperature" data-unit="°C" class="cell big"></div>
</li>

Mache ich etwas falsch? Ich habe den Eindruck, dass die Daten vorhanden sein müssten. So sieht es zumindest in FHEM aus.

Gibt es irgendwo eine aktuelle und gute Doku zum TabletUI? Ich habe den Eindruck, dass manche Angabe im Wiki veraltet und so nicht mehr umsetzt sind?

Danke schon mal für die Hilfe und Geduld im Vorfeld

[setstate]

https://wiki.fhem.de/wiki/FHEM_Tablet_UI/FAQ#Warum_erscheint_bei_mir_die_index.html_aus_dem_Example_v.C3.B6llig_verschoben.3F

[Tutti_Bomovski]

Ich hatte am Anfang auch so meine Probleme.
Inzwischen sieht es schon ganz gut aus.
Ich würde auf jeden Fall mal mit einer "leeren" index.html anfangen.
Aus diversen User Vorschlägen habe ich mir dann nach und nach die weiteren Bausteine zusammengebaut. Für nur Uhrzeit und Wetter bin ich bereits fertig.

[setstate]

das sieht ja schongut aus, obwohl ich kein Freund von 3D Schatten Effekten bin. Ich mag mehr minimal Flat. Aber beim Luftfeuchte-Rot musst du noch etwas nachbessern. Das beisst sich etwas zu sehr mit dem Hintergrund. Tipp: https://flatuicolors.com

[Rheingold]

Ich hatte am Anfang auch so meine Probleme.
Inzwischen sieht es schon ganz gut aus.
Ich würde auf jeden Fall mal mit einer "leeren" index.html anfangen.
Aus diversen User Vorschlägen habe ich mir dann nach und nach die weiteren Bausteine zusammengebaut. Für nur Uhrzeit und Wetter bin ich bereits fertig.

Danke für die schnellen Antworten.
Meinst du eine komplett leere index.html oder die index-example.html nehmen und alles zwischen
<div class="gridster">
<ul>
und
</ul>
</div>
löschen? Letzteres habe ich nämlich gemacht?

Dein GUI sieht schon mal gut aus. Wäre froh es so schon zu haben? Könntest du evtl. die HTML-Datei zur Verfügung stellen, damit ich dort mal reinschauen kann?

[Tutti_Bomovski]

Danke für die schnellen Antworten.
Meinst du eine komplett leere index.html oder die index-example.html nehmen und alles zwischen
<div class="gridster">
<ul>
und
</ul>
</div>
löschen? Letzteres habe ich nämlich gemacht?

Dein GUI sieht schon mal gut aus. Wäre froh es so schon zu haben? Könntest du evtl. die HTML-Datei zur Verfügung stellen, damit ich dort mal reinschauen kann?

Ja kann ich machen. Sobald ich am PC bin schicke ich es dir.

[Tutti_Bomovski]

das sieht ja schongut aus, obwohl ich kein Freund von 3D Schatten Effekten bin. Ich mag mehr minimal Flat. Aber beim Luftfeuchte-Rot musst du noch etwas nachbessern. Das beisst sich etwas zu sehr mit dem Hintergrund. Tipp: https://flatuicolors.com

Alles Geschmackssache...
Aber Anregungen sind natürlich willkommen.
Werde mal nach was hübscherem schauen.
Danke für deinen Hinweis.

[Tutti_Bomovski]

Im Anhang meine HTML Daten...
Viel Erfolg

Gruß
Tutti...

[maxritti]

Danke für die schnellen Antworten.
Meinst du eine komplett leere index.html oder die index-example.html nehmen und alles zwischen
<div class="gridster">
<ul>
und
</ul>
</div>
löschen? Letzteres habe ich nämlich gemacht?

Dein GUI sieht schon mal gut aus. Wäre froh es so schon zu haben? Könntest du evtl. die HTML-Datei zur Verfügung stellen, damit ich dort mal reinschauen kann?

Ich habe die index_empty.html genommen und in die <li>...</li> meine Wünsche eingebaut.
Kommt aber im Prinzip das selbe raus, wenn du die index-example.html nimmst und das zwischen <ul>...</ul> löscht und da dein <li>'s einbaust.

Also:

Code Auswählen Erweitern

...
<div class="gridster">
<ul>

<li> hier kommt der code für deinen ersten Bereich ein </li>

</ul>
</div>
...

Hast Du dich eventuell nur im Devicenamen und/oder im Readingsnamen vertippt?

[Rheingold]

Vielen Dank für die Hilfe bisher. Es wird. Langsam aber sicher bin ich dabei ein GUI zusammen zu bauen. Anbei für alle interessierten ein Screenshot vom aktuellen Entwicklungsstadium.

Wenn die Tage die ersten Sensoren und Aktoren kommen wird es spannend Aktuell habe ich lediglich einen DHT22 am Raspberry, der aber verlässlich jede Minute die Werte aktualisiert

[maxritti]

Und an was hat es gelegen, dass es bei dem ersten Versuch nicht klappte?
Nur falls einer mal ein ähnliches Problemchen hat.

[Rheingold]

Wie in der ersten Antwort beschrieben, stimmte die standardmäßige Brite/Höhe der Elemente nicht. Ich habe diese angepasst wie im Wiki beschrieben.

Aus

Code Auswählen Erweitern

<meta name="widget_base_width" content="77">
<meta name="widget_base_height" content="71">

Wurde

Code Auswählen Erweitern

<meta name="widget_base_width" content="103">
<meta name="widget_base_height" content="95">

Mit den Werten kann eben die Breite und Höhe der Spalten definiert werden. Scheinbar waren diese per Default zu niedrig eingestellt. Ich werde noch ein bisschen experimentieren, was die besten Werte sind um es auf dem Tablet schön darzustellen.

[maxritti]

Dann hatte ich das wohl falsch interpretiert.
Für mich hat es nach zwei Problemen ausgesehen.
Zum einen das verschobene Problem und dann noch, dass die Temperatur nicht angezeigt wurde.

Aber Hauptsache es klappt nun.