[FHEM Tablet-UI] Dokumentation (Diskussionsthread)

drhirn · 07 März 2017, 11:12:54

Ja, schon. Aber auch da irgendwie unglücklich formuliert finde ich. Ich würde nicht verstehen, dass es da nur um den noch freien Platz geht, den sich die Elemente dann anteilsmäßig teilen, wenn ich's nicht wüsste

Standarduser · 07 März 2017, 11:18:28

So hätte ich das jetzt auch nicht ausdrücken können, aber die Beispiele sagen doch alles.

Ulm32b · 18 März 2017, 10:45:08

Es mag ziemlich unsinnig klingen, aber für mein Projekt CSS-Tester wäre es praktisch, wenn man den Namen des Widgets (data-type) über ein reading einlesen könnte, ungefähr so:

Code Auswählen

<div data-type="select"
        data-device="CSS_Tester_Widgetname"
        data-items='["symbol","label","button","switch"]'
        data-get=""
        data-set="">
</div>		
		
<div data-type="label" data-get="CSS_Tester_Widgetname:STATE"></div>		
		
<div data-type="CSS_Tester_Widgetname:STATE" class=""></div>

Wie erwartet funktioniert das so nicht. Kennt jemand einen Hintereingang?

Standarduser · 18 März 2017, 11:17:49

Keine Ahnung, wie das ganze in Summe funktionieren soll.
Wenn Du aber ein und dasselbe Widget 20x auf einer Seite darstellen willst und jede Darstellung einfach mit anderen Klassen versorgt wird, dann könntest Du ja ein Template bauen und den Widget-Namen variabel gestalten.
Soetwas habe ich noch nicht ausprobiert, aber meiner Erfahrung nach ist FTIU nicht sehr wählerisch, was das übergeben von Variablen in ein Template angeht.

Gunther · 23 November 2017, 21:22:16

Der source code geht hier nicht mehr. Wie kommt man an den Code für die Widgetbeispiele?

https://knowthelist.github.io/fhem/tablet/demo_colorwheel.html

MKeY · 23 November 2017, 21:34:06

In Chrome Rechte Maustaste und Quelltext anzeigen

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
    /* FHEM tablet ui */
    /*
    * UI builder framework for FHEM
    *
    * Version: 1.4.4
    * URL: https://github.com/knowthelist/fhem-tablet-ui
    *
    * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    *
    */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="demo" content="1"> <!-- 1=demo data;0=normal mode-->

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

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

    <title>FTUI Demo Colorwheel</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="6" data-sizey="5">
    <header>WIDGET COLORWHEEL</header>
    <!-- place your widget here -->
    <div class="left cell">
        <div data-type="link" class="left large thin"
             data-icon-left="fa-chevron-left"
             data-url="demo_widgets.html">
            Widgets
        </div>
        <div class="left-align bigger thin ">Colorwheel</div>
        <div class="left-align darker">&nbsp; Widget</div>
    </div>
    <div class="container round padding bg-gray gray col-2-3 top-space left left-space left-align ">
       <b>Colorwheel</b> is a
       color picker widget <br/>
       to control RGB color values<br/>
       of your light devices
    </div>
    <div class="bottom absolute bottom-space">
        <div data-type="link" class="round left"
             data-color="lightgray"
             data-icon="fa-code"
             data-background-color="orange"
             data-url="javascript:void(window.open('view-source:'+location.href))">
             View Source Code
        </div>
        <div data-type="link" class="round right"
             data-color="orange"
             data-icon="fa-github"
             data-border-color="orange"
             data-url="https://github.com/knowthelist/fhem-tablet-ui">
             Show On Github
        </div>
    </div>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5">
    <header>COLORWHEEL</header>
    <!-- place your widget here -->
    <div class="row">
    <div data-type="colorwheel" data-device='dummy2' class="roundIndicator top-space-2x"></div>
    <div class="">class="roundIndicator"</div>
    </div>
</li>
<li data-row="1" data-col="10" data-sizex="3" data-sizey="5">
    <header>COLORWHEEL ON SUBMENUS</header>
    <!-- place your widget here -->
    <div class="row container round bg-gray padding margin">
        <div data-type="switch" data-device='HUEDevice1' data-on-background-color="HUEDevice1:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="col-1-4"></div>
        <div class="col-1-2">HUE Device 1</div>
        <div data-type="symbol" id="starter1" data-device='HUEDevice1' data-get="" data-off-color="HUEDevice1:rgb" data-off-background-color="HUEDevice1:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small"></div>
    </div>
    <div class="row container round bg-gray padding margin">
        <div data-type="switch" data-device='HUEDevice2' data-on-background-color="HUEDevice2:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="col-1-4"></div>
        <div class="col-1-2">HUE Device 2</div>
        <div data-type="symbol" id="starter2" data-device='HUEDevice2' data-get="" data-off-color="HUEDevice2:rgb" data-off-background-color="HUEDevice2:rgb" data-icon="fa-ellipsis-v" class="small"></div>
    </div>
    <div class="row container round bg-gray padding margin">
        <div data-type="switch" data-device='HUEDevice3' data-on-background-color="HUEDevice3:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="col-1-4"></div>
        <div class="col-1-2">HUE Device 3</div>
        <div data-type="symbol" id="starter3" data-device='HUEDevice3' data-get="" data-off-color="HUEDevice3:rgb" data-off-background-color="HUEDevice3:rgb" data-icon="fa-circle" class="small"></div>
    </div>
    <div class="container round bg-gray padding margin">
        <div data-type="switch" data-device='HUEDevice4' data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="col-1-4"></div>
        <div class="col-1-2">HUE Device 4</div>
        <div data-type="symbol" id="starter4" data-device='HUEDevice4' data-get="" data-icon="fa-bars" class="small"></div>
    </div>
    <div data-type="popup" data-height="240px" data-width="240px" data-mode="animate" data-starter="#starter1" class="col-1-6">
      <div class="dialog">
          <header>RBG COLOR</header>
          <div data-type="colorwheel" data-device='HUEDevice1' data-get="rgb" data-set="rgb" class="roundIndicator"></div>
      </div>
    </div>
    <div data-type="popup" data-height="240px" data-width="240px" data-mode="animate" data-starter="#starter2" class="col-1-6">
      <div class="dialog">
          <header>RBG COLOR</header>
          <div data-type="colorwheel" data-device='HUEDevice2' data-get="rgb" data-set="rgb" class="roundIndicator"></div>
      </div>
    </div>
    <div data-type="popup" data-height="240px" data-width="240px" data-mode="animate" data-starter="#starter3" class="col-1-6">
      <div class="dialog">
          <header>RBG COLOR</header>
          <div data-type="colorwheel" data-device='HUEDevice3' data-get="rgb" data-set="rgb" class="roundIndicator"></div>
      </div>
    </div>
    <div data-type="popup" data-height="240px" data-width="240px" data-mode="fade" data-starter="#starter4" class="col-1-6">
      <div class="dialog">
          <header>RBG COLOR</header>
          <div data-type="colorwheel" data-device='HUEDevice4' data-get="rgb" data-set="rgb" class="roundIndicator"></div>
      </div>
    </div>
</li>
<li data-row="6" data-col="1" data-sizex="3" data-sizey="4">
    <header>SMALL</header>
    <!-- place your widget here -->
    <div data-type="colorwheel" data-device='dummy2' class="small top-space-3x"></div>
    <div class="">class="small"</div>
</li>
<li data-row="6" data-col="4" data-sizex="6" data-sizey="4">
    <header>COLORWHEEL BIG</header>
    <!-- place your widget here -->
    <div class="row top-space-2x">
        <div data-type="colorwheel" data-device='dummy1' class="big barIndicator col-1-2"></div>
        <div class="medium col-1-2">class="big barIndicator"</div>
    </div>
</li>
<li data-row="6" data-col="10" data-sizex="3" data-sizey="4">
    <header>BACK</header>
    <!-- place your widget here -->
    <div data-type="colorwheel" data-device='dummy1' class="lineIndicator  top-space-3x"></div>
    <div class="top-narrow-2x">class="lineIndicator"</div>
</li>
</ul>
</div>
</body>
</html>

Gunther · 23 November 2017, 21:44:00

super, danke!

Ulm32b · 14 Januar 2018, 20:44:27

Hi Folks,
ein Jahr nach der legendären Doku-Offensive habe ich mir heute den Stand der Dinge angeschaut. Und eine bis dahin offene Doku erstellt: Swiper ist jetzt ,,drin"(https://wiki.fhem.de/wiki/FTUI_Widget_Swiper). Multistatebutton hatte ich im November kurz und schmerzlos (vielleicht ein wenig unkonventionell) erledigt (https://wiki.fhem.de/wiki/FTUI_Widget_Multistatebutton).

Bei den anderen noch offenen Widgets halte ich mich zurück:

Button: Den Unterschied bzw. Mehrwert zu Push habe ich noch nicht verstanden.
Eventmonitor: Noch nicht benutzt.
Html: Was macht der?
Medialist: Noch nicht benutzt.
Notify: Mit der Suchfunktion findet man im Forum keine Infos, weil man vom FHEM-notify überschüttet wird.
Slideout: Ich nutze kein Smartphone.

Sehr erfreulich ist, dass neue Widgets wie Scale ebenso geräuschlos wie kurzfristig Eingang ins Wiki fanden. Und bei den neuesten Errungenschaften (Checklist, Include) wird das wohl auch gelingen.
Von den 48 im Wiki gelisteten internen Widgets sind 42 dokumentiert. Damit liegen wir knapp unter 90%. Geht da noch was?

sinus61 · 14 Januar 2018, 21:01:40

Notify ist hier kurz beschrieben
https://forum.fhem.de/index.php/topic,60386.0.html

Ulm32b · 15 Januar 2018, 01:04:44

Zitat von: sinus61 am 14 Januar 2018, 21:01:40
Notify ist hier kurz beschrieben
https://forum.fhem.de/index.php/topic,60386.0.html

O.k. Vielen Dank.
Diese wahrlich verschüttete Beschreibung bringt Klarheit. Unter Firefox hat es bei mir auch sofort "gebimmelt". Fully scheint solche Benachrichtigungen aber nicht zu kennen (oder ich habe die Einstellung nicht gefunden). Deshalb möchte ich hierzu vorläufig keine Doku schreiben.

n4rrOx · 15 Januar 2018, 11:13:47

Hi,

hab noch 3 Widgets gefunden, die bislang ebenfalls in der Doku noch nicht erwähnt wurden:

Widget Theme:
https://forum.fhem.de/index.php/topic,69259.0.html

Widget Imagecover:
https://forum.fhem.de/index.php/topic,70265.0.html

Widget AnalogClock:
https://forum.fhem.de/index.php/topic,50821.0.html

Widget FileLog:
https://forum.fhem.de/index.php/topic,63759.msg716731.html

Gruß
Mathias