TabletUI und die Formatierung

[Hoggle]

Hallo alle miteinander.
Vielleicht fassen sich jetzt viele an den Kopf, wenn ich so eine Frage stelle, aber hoffentlich werde ich nicht sofort erschossen

Ich bin jetzt seid ein paar Monaten mit meinem FHEM beschäfftig und habe auch das ein oder andere, auch mit der super Hilfe hier aus dem Forum zustande bekommen, AABBEERR, meine Frauen (Ehefrau und Kind) haben mit diesem ganzen Zeug nichts am Hut, da ja alles nur Spielerei.
Also habe ich mir gedacht: " Hey, wenn ich eine schöne Oberfläche erstelle und alles nicht so "technisch" aussieht, dann klappt das auch mit der Bedienung durch die Mädels."

TabletUI wurde gewählt und installiert.
Einfache Oberflächen mit ein paar Lämpchen und auch der Müllkalender konnte mit Hilfe diverser Copy-Paste Aktionen erstellen. Was mir einfach fehlt ist das nötige Hintergrundwissen. Also nicht verzagen und mal nach ein paar Dokumentationen zu CSS geschaut.
Okay, da ist alles erklärt mit <div>, <td>, etc, so das man einen kleinen Überblick bekommt und die Struktur kennen lernen kann. Ich möchte aber nicht unbedingt ein WEB-Design-Studium mit integriertem Informatiker machen, um eine kleine Oberfläche zu gestalten.
Jetzt frage ich mich, ob ich da so alleine dastehe, oder ob es noch mehr Leidensgenossen gibt?

Wie sollte ich jetzt vorgehen, um auf einfache Art und Weise die benötigten Befehle zur Erstellung einer Tablet-Oberfläche zu lernen?

Um mein Problem mal zu verdeutlichen: Ich habe zum Beispiel meinen Müllkalender (Über das Abfall-Modul") für meine Verhältnisse passend gestaltet bekommen, aber es wird die Zahl der Tage bis zur nächsten Leerung nur einstellig angezeigt. Heute passt das, da nur noch 3 Tage bis zum 25., aber wenn die Zahl zum Beispiel "10" ist, dann steht eine "0" oben rechts.
Ich also gedacht, das es etwas mit dem

Code Auswählen Erweitern

data-get-warn=".*(\d+) zu tun haben müsste und mal den Herrn Google nach diesem Befehl befragt (fhem data-get-warn (\d+)). Ihr könnt euch vorstellen, das diese Suchanfrage keine Zielführenden Ergebnisse brachte .
Ach ja, hier noch der Ausschnitt aus der html Datei:

Code Auswählen Erweitern

       <li data-row="1" data-col="1" data-sizex="2" data-sizey="3" class="bg-blue">
             <!-- place your widget here -->
                     <div data-device="myAbfall"
               data-type="symbol"
   class="bigger warn"
   data-get="next" data-get-warn=".*(\d+).*"
                                   data-get-on='["Restmuell_.*","Wertstoff_.*"]'
                                   data-on-colors='["#000","#6EB54C"]'
                                   data-icons='["fa-trash-o","fa-trash-o"]'>
                     </div>
                     <div data-type="label" width="100%" style="font-size:100%"
                                   data-device="myAbfall"
                                   data-get="next_text">
                     </div>
                     <div data-type="label" width="100%" style="font-size:100%"
                                   data-device="myAbfall"
                                   data-get="next_datum">
                     </div>
</li>
.

oder auch ein großes Fragezeichen:

Code Auswählen Erweitern

data-get-on='["Restmuell_.*","Wertstoff_.*"]'. Wieso steht da z. B. kein "Gelber-Sack" oder die "Komposttonne" und sie wird trotzdem angezeigt?

Dies nur als kleine Beispiele.

Also, noch einmal die ganz einfache Frage: Wie und wo sollte ich anfangen, um TabletUI Oberflächen zu erstellen.
Natürlich im Wiki. Da komme ich ja her, aber so richtig zum lernen ist das nicht gedacht, oder?

[sinus61]

Probier mal

Code Auswählen Erweitern

data-get-warn=".*_(\d+).*"

Dein Gelber Sack wird zwar als Text angezeigt und die Tonne ist auch da, aber die ändert ihre Farbe nicht. Dafür müsstest du diesen Teil an deine Texte anpassen:

Code Auswählen Erweitern

                                   data-get-on='["Restmuell_.*","Wertstoff_.*"]'
                                   data-on-colors='["#000","#6EB54C"]'
                                   data-icons='["fa-trash-o","fa-trash-o"]'>


[Hoggle]

Hallo sinus61.
Vielen Dank für deine Hilfe für dieses spezielle Problem und für deine Lösungsansätze, aber eigentlich sollten das ja nur Beispiele für mein grundlegendes Problem.
Ich mag es auch nicht so gerne, wenn eine Frage zum x-ten mal gestellt wird, nur weil man bei der Suche im Forum die falschen Schlagworte eingegeben hat.

In diesem Zusammenhang noch einmal die Frage an alle: Wo sollte ich solche Probleme nachschlagen? Das jetzt dieses eine Zeichen ("_") dafür zuständig ist, das auch 2-stellige Zahlen angezeigt werden, ist das CSS, HTML, FTUI, oder wo kann man sich da einlesen?
Wie gesagt, es muß nicht unbedingt ein Informatikstudium nötig sein, oder?

[tomster]

Hallo Hoggle, --edit-- Sorry, hatte versehentlich Sinus61 angesprochen... ---/edit--

das obige Beispiel sind sogenannte Regular Expressions (RegEx). Das ist nichts FTUI- oder HTML-spezifisches, sondern ein genereller Oberbegriff, respektive generelles Verfahren um Zeichenketten nach gewünschten Kriterien zu "Filtern". Ich muss mich auch jedes einzelne Mal wieder neu einlesen, um nach vielen (Fehl-)Versuchen endlich die gewünschte RegEx zu finden. Ich hab aber im normalen Leben kaum mit RegEx'en zu tun...

Für die Formatierung des FTUI bleibt momentan nicht recht viel mehr, als sich ein "fundiertes Halbwissen" an CSS anzueignen. Auch wenn es inzwischen mannigfaltigste Code-Schnipsel hier im Forum gibt, existiert kein "zentrales Codelager", auf dem alles zusammengefasst wäre. Um bestimmte Layouts hinzubekommen, ist daher (zumindest in meinem Fall) meist Einiges an Probiererei erforderlich.

Dennoch: Lass Dich nicht entmutigen. Es ist kein Hexenwerk! Wer es geschafft hat sich in FHEM einzulesen, für den ist das FTUI "easy peasy lemon squeezy". Und Fragen werden hier im Forum eigentlich immer beantwortet. Ich denke nämlich es geht den Meisten ähnlich und jeder ist froh über ein bisschen Hilfestellung

[sinus61]

Außer dem Wiki gibt es vor allem hier das Forum wo man mitlesen und dann lernen kann. Dann fängt man so nach und nach an seine Seite zu bauen und versucht idealerweise zu verstehen was man da gerade gemacht hat.

Solche Sachen wie bei data-get-warn sind Regular Expressions, das kann man gut auf der Seite https://regex101.com/ testen. In diesem Beispiel eben dort bei Teststring

Code Auswählen Erweitern

Restmuell_12
eingegeben und bei Regular Expression

Code Auswählen Erweitern

.*(\d+).*

Dann siehst Du gleich, es kommt immer nur eine einstellige Zahl raus und kannst dort rumprobieren. In diesem Fall würde auch sogar nur (\d+) reichen um an die zweistellige Zahl zu kommen.

[Hoggle]

Und wieder ein bisschen schlauer geworden, bzw. eine neue Stellen zum lernen gefunden.
Reguläre Ausdrücke ist das Zauberwort, welches man sich etwas genauer anschauen sollte um FTUI zu verstehen und im fhem etwas besser zurecht zu kommen.
Na, es geht ja voran mit dem anzulernenden Wissen.
Also: Grundlagen in CSS und "etwas" HTML und reguläre Ausdrücke. Dann noch ein bisschen WAF und das reindenken in die Gehirnwindungen der zukünftigen Benutzer und alles wird gut, oder ?
Oder habe ich jetzt noch ein ganz wichtiges Thema vergessen (Ab wann muss man denn PERL können?)

[en-trust]

Also mit data-get-warn=".*_(\d+).*" bekomme ich auch nur einstellige Werte statt der richtigen.