[FHEM Tablet-UI] Dokumentation (Diskussionsthread)

[drhirn]

Bin der selben Meinung wie DocCyber. Ein extra Thread wird von anderen, die eventuell die selbe Frage haben, leichter gefunden.

Nichts desto trotz hätte ich data-hide so verstanden, dass du damit ein Reading angeben kannst, dessen Wert bestimmt, ob das Widget angezeigt wird oder nicht.

Code Auswählen Erweitern


data-hide="STATE"
data-hide-on="!on"
data-hide-off="on"


... hätte ich so interpretiert, dass das Widget angezeigt wird, wenn der Status des Devices auf "on" steht. Sonst wird ausgeblendet.

Man korrigiere mich, wenn ich falsch liege. Hab's auch noch nie verwendet.

[viegener]

Wie wollen wir jetzt eigentlich vorgehen, wenn bei der Umsetzung der Dokumentation inhaltliche Fragen entstehen?
Ich arbeite gerade an der Doku für Push und stolpere hier über data-hide (hab ich bisher noch nicht verwendet). Womit wird dieser Wert denn verglichen, ein data-get gibt es ja (laut bisheriger doku ) nicht? Oder bezieht sich das auf data-warn?

Abgesehen von dieser ernstgeleinten Frage, sollen wir solche Dinge direkt hier klären oder lieber einen eigenen Thread dafür eröffnen?

Gute Frage, habe es gerade mal aus dem Code versucht zu klären:

Es sieht wohl so aus, als ob fest auf "on" / "off" verglichen wird.
Es gibt zwar auch vorbereitete Werte "hide-on" / "hide-off" die eigentlich für den Vergleich angedacht sind, aber auf den ersten Blick scheinen die nicht verwendet zu werden...

Hier müsste wohl setstate zur Intention von "hide-on" / "hide-off" was sagen

[setstate]

Ihr seht das schon so richtig:

data-hide          das Reading, dessen Wert gecheckt wird
data-hide-on    "Wann ist das Hide an(on), aktiv. Bei welchem Wert?"
data-hide-off    "Wann wird das Verstecken wieder aus (off) geschaltet?"

data-hide-on   steht per default auf 'on|1|true' also gängige Werte, wenn was AN ist
data-hide-off   Default ist hier '!on' -> alles nur nicht der Wert von data-hide-on. Aber hier nur als Stringvergleich, kein RegEx. Somit passen die Defaults garnicht zusammen.

Sinnvoller wäre
data-hide-on="on|1|true"
data-hide-off="off|0|false"

Oder
data-hide-on="on"
data-hide-off="!on"

[Standarduser]

Über Nacht kamen mir noch einige Gedanken.

Ich halte es für eine gute Idee, mal alle Attribute aus der Github-Doku zu nehmen, und diese dann im Bulk zu übersetzen.
Nacher kann man sich dann genau die Attribute, die man für die aktuelle Doku benötigt, einfach kopieren und einfügen. Nur Standard-Wert und im Einzelfall vielleicht auch etwas Inhalt müssten noch angepasst werden.
Hab mir die auch alle schonmal ins Excel gezogen - scheint einigermaßen übersichtlich zu sein.

[drhirn]

Widget "Link" ist fertig: FTUI Widget Link

[setstate]

Sehr schön!
Die Beispiele kommen mir bekannt vor 

Und wenn ich jetzt sagen würde, Link kann man auch als Austauscher für Seiteninhalte, genauso wie mit Pagebutton benutzen. Muss ich dann noch Infos liefern, oder findet man das irgendwie, um es im Artikel nachzutragen?

[drhirn]

Ja, hehe, ich war so frei und hab geklaut

Hmm, ich bin ja grundsätzlich dafür, dass andere statt mir denken. Kann mir zwar gut vorstellen, dass das funktioniert, wäre aber trotzdem ganz froh, wenn du zusätzliche Infos liefern könntest.

[Standarduser]

Widget "Link" ist fertig: FTUI Widget Link

Man, Du legst ja hier vor! Da muss ich wohl auch mal ein wenig Gas geben.
Warum sind die Attribute eigentlich nicht mehr fett geschrieben? Versehen oder neuer Stil?

[drhirn]

Warum sind die Attribute eigentlich nicht mehr fett geschrieben? Versehen oder neuer Stil?

Vergessen
Ich korrigiere das bei der nächsten Änderung

[Thyraz]

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.

Und wenn ich jetzt sagen würde, Link kann man auch als Austauscher für Seiteninhalte, genauso wie mit Pagebutton benutzen. Muss ich dann noch Infos liefern, oder findet man das irgendwie, um es im Artikel nachzutragen?

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:



[drhirn]

Eine Textsuche auf der GitHub-Seite nach "data-load" gibt 0 Treffer. Ein gutes Beispiel dafür, warum wir gerade die Community dokumentieren lassen

Ich werde versuchen, das nachzutragen. Darf ich deinen Anhang im Wiki verwenden? Sehr hübsch übrigens!

[setstate]

Vielen Dank!

Cooles mobile Schema. Hast du das übersichtlich in einer mobile-CSS für mich? Würde ich glatt als Standard so übernehmen.

Oder hast du die Farben pro Widget einzeln gesetzt?

[Standarduser]

Ich habe eine Zeit lang das Link-Widget als Page-tab-Ersatz verwendet. Das ganze ist aber ziemlich komplex und gehört meiner Meinung nach eher in den Bereich "komplexe Beispiele". Vielleicht sollten wir den parallel starten und einen Absatz "Weitere Anwendungsgebiete" einführen?

[Standarduser]

BTW: https://wiki.fhem.de/wiki/FTUI_Widget_Push

[SirMarco]

Ich finde das echt der Hammer was hier passiert!!