[FHEM Tablet-UI] Dokumentation (Diskussionsthread)

[Zage]

ich denke den meisten werden Beispiele mehr bringen.
Regex lesen werden die meisten können, die Schwierigkeit ist eher das erstellen

Evtl eine eigene Seite mit Regex-Beispielen. Dann kann in einzelnen Widgets darauf verlinkt werden

[drhirn]

Warum verlinkt ihr nicht wiki-intern auf https://wiki.fhem.de/wiki/Regul%C3%A4rer_Ausdruck ?

Weil ich die Seite nicht kannte

Ich danke!

[drhirn]

So, ich hab jetzt eckige Augen und einen rauchenden Kopf vor lauter FTUI CSS Klassen

Aber, es gibt jetzt die Vorlage FTUI Klasse. Mit der kann der Name und die Beschreibung einer bestimmten Klasse in Tabellenform angezeigt werden. Beispiel hier.

Erklärung dazu auf der Seite der Vorlage. Wichtig ist, dass zuerst eine Tabelle geöffnet wird, die einzelnen Klassen in EINER Zeile niedergeschrieben werden und die Tabelle danach wieder geschlossen wird.

Vorhanden sind alle Klassen, die ich auf die Schnelle auf der GitHub-Seite gefunden habe. Fehlen tun die, die eventuell bei Widgets dabei stehen und die, die nicht dokumentiert sind.

Ich habe die ganze Liste auch gleich auf der Hauptseite von Tablet UI eingetragen.

Schön wäre noch, wenn man irgendwie trennen könnte, zwischen Klassen, die für alle Widgets gelten und solchen, die nur für bestimmte verwendet werden können. Das übersteigt aber leider mein Wissen.

Ganz glücklich bin ich nicht mit der Sache, ist ziemlich aufwändig und unübersichtlich. Aber eine bessere Lösung mit vorhandenen Mitteln fällt mir momentan nicht ein. Vorschläge daher sehr willkommen.

[Ulm32b]

Die Liste der Klassen ist sicher unvollständig. Mir fällt spontan ein: "transparent" und "half-transparent", eine meiner jüngeren Entdeckungen (https://forum.fhem.de/index.php/topic,62586.msg540387.html#msg540387).

Das beste Überblickswissen hierzu hat gewiss setstate. Eigentlich braucht er nur die Namen zu liefern. Was dahinter steckt, findet man meist über die Suchfunktion heraus. Die Doku steckt derzeit quasi im Forum. Insofern wäre der Aufwand für setstate überschaubar, und das ist ja gerade das Geniale an diesem Projekt.

Es ist auch gut, dass bei dieser Gelegenheit systematisch gecheckt wird, ob die Klassen für alle Widgets gelten (abgesehen von Fällen, wo dies nicht möglich bzw. sinnvoll ist). Vor meinem geistigen Auge steht eine Tabelle css_Klassen vs. Widgets. Vielleicht kann man die Tabelle mit Filtern versehen und damit überschaubar halten. Dazu kenne ich mich in HTML aber leider zu wenig aus.

[drhirn]

Es steht natürlich jedem frei, die Vorlage selbst zu ändern

Eine Tabelle "css-Klasse vs. Widget" wäre natürlich super, muss aber leider händisch gewartet werden. Und je mehr zu warten ist, desto weniger wird's gemacht befürchte ich.

[Standarduser]

Könntest Du mal bitte checken, warum die CSS-Klasse "mini" so komisch angezeigt wird?
Ich kann irgendwie das Problem nicht finden.

->https://wiki.fhem.de/wiki/FTUI_Widget_Level

[drhirn]

Weil's die Klasse "horizontal" nicht gibt. Sollte ich eine Fehlerbehandlung einführen

Verwende bitte {{FTUI Klasse|...}} nicht {{FTUI Klassen|...}}. Also ohne "N". Ist in der Dokumentation zur Vorlage noch falsch.

[Standarduser]

Ah ok. Ist mir garnicht aufgefallen.
Vielen Dank.

[Standarduser]

Ist es auch möglich, dass der Klassenname, der da -falsch- angegeben wurde, trotzdem da steht?
Im Moment steht das mit bei der Klasse mini drin.

[drhirn]

Ich hätt's probiert, sieht aber leider nicht so aus. Muss dem morgen mal nachgehen, da habe ich mein Test-Wiki zur Verfügung.

[Standarduser]

Ok, ich füg dann aber schonmal die Klasse hinzu.

[SirMarco]

Das macht sich ja echt schon.
Toll wie die Community das schnell in die Hand genommen hat und setstate ist sicher auch froh in dem Bereich entlastet zu sein.

Habe auchmal einen Wiki Account beantragt.

Musst du nicht, ich kann da liefern.

@drhirn Es gibt noch data-load, welches ein div mit dem Content einer HTML Datei füllen kann.
Entweder du trägst das noch nach, oder ich versuche mich mal in die Wiki Bedienung reinzuarbeiten wenn mein Account da ist.

Damit kann man z.B. über Buttons den Inhalt eines Divs auf der Seite austauschen,
oder ganze Seiten tauschen um eben eine Tabbar ähnlich Pagetab zu realisieren.

So könnte das in der index.html aussehen:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <script src="lib/jquery.min.js" defer></script>
    <script src="lib/jquery.toast.min.js" defer></script>
    <script src="js/fhem-tablet-ui.min.js" defer></script>
</head>

<body>
  <div id="panel">
    <div class="page" id="content-1"></div>
    <div class="page" id="content-2"></div>
  </div>

  <div id="menu">
    <div class="tab-bar" >
      <div class="tab-link" >
          <div data-type="link"
               data-load="#content-1"
               data-url="#content_1.html"
               data-icon=""
               data-color="#dbdbdb"
               data-active-color="#419aff"
               data-active-pattern=".*#content_1.html">
               Link 1
          </div>
      </div>
      <div class="tab-link" >
          <div data-type="link"
               data-load="div#content-2"
               data-url="#content_2.html"
               data-icon=""
               data-color="#dbdbdb"
               data-active-color="#419aff"
               data-active-pattern=".*#content_2.html">
               Link 2
          </div>
       </div>
    </div>
  </div>
</body>
</html>


Und so content_1.html und content_2.html:

Code Auswählen Erweitern


content1.html:

<html>
<body>
<div class="page" id="content-1">
<div id="panel">
             <!-- Start of content -->
             Content 1
             <!-- End of content -->
</div>
</div>
</body>
</html>


content2.html:
<html>
<body>
<div class="page" id="content-2">
<div id="panel">
             <!-- Start of content -->
             Content 2
             <!-- End of content -->
</div>
</div>
</body>
</html>


So sieht das dann z.B. bei mir als Tabbar aus:



Echt schönes Design. Magst du es im Demo Thema einmal vorstellen und uns teilhaben? 

[Thyraz]

Hatte ich die Tage sowieso vor.

Muss nur noch ein paar Sachen fertig basteln.

[viegener]

Faszinierend wie schnell das in der Community passiert - Die Kooperation, Begeisterung under der Schwung ist klasse!

Würde es Sinn machen bei jedem Widget auf der Seite noch zu vermerken welcher Versionsstand dokumentiert wurde, wenn sich mit neuen Versionen etwas ändert?

[Standarduser]

Sinn auf alle Fälle, aber das müsste dann jemand auch aktualisieren, wenn sich sonst nichts geändert hat, also alle Widget Seiten überarbeiten, wenn es ein Update gab.

Ich würde vielleicht eher den Weg gehen, die Widgets, die nicht mehr kompatibel sind, so wie WeekProfile, entsprechend zu markieren.