[FHEM-Tablet-UI] User-Demos

[gloob]

Probier mal bitte folgendes

[Leeloo_Dallas]

Try this 

-----> Nachtrag:
@gloob war schneller

[moonsorrox]

Super Danke klappt.... 

[lewej]

Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch

Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292

Edit: Eine Info noch dazu.

Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.

Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".

Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.

Hi,

in deiner css verweist du auf Bilder die auf deiner fritzbox liegen, könntest du diese auch zur Verfügung stellen?

Gruß
lewej

[Thyraz]

Hallo lewej,

auf meiner Fritzbox hab ich noch nie Dateien abgelegt.
Ich hab die CSS gerade nicht greifbar hier, aber ich denke das sind Dateien die im Paket mit drin sind.

Nicht verwirren lassen, dass der hostname auf fritz.box endet.
Im Netz der Fritzbox heißen alle Geräte name.fritz.box

[lewej]

Hallo lewej,

auf meiner Fritzbox hab ich noch nie Dateien abgelegt.
Ich hab die CSS gerade nicht greifbar hier, aber ich denke das sind Dateien die im Paket mit drin sind.

Nicht verwirren lassen, dass der hostname auf fritz.box endet.
Im Netz der Fritzbox heißen alle Geräte name.fritz.box

Hi,
hab die Bilder gefunden, der Hostname hat mich in die Irre geführt. Ich finde das Design echt genial. Ich würde gerne die Seite um ein ausklappbares Menü gerne erweitern.
Kannst du mir evtl. einen Tipp geben, wo ich ansetzen müsste.
Sowas in der Art.

Gruß
lewej

[lewej]

Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch

Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292

Edit: Eine Info noch dazu.

Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.

Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".

Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.

Hi,
wie setzt du das Reading ftuiIcon, wäre Super wenn du den code anhängen könntest.

gruß
lewej

[Thyraz]

Hi lewej,

findet sich hier:
https://forum.fhem.de/index.php/topic,37378.msg678502.html#msg678502

Ist ein Userreading, welches ich bei jedem Gerät hinzufüge welches in TabletUI angezeigt wird.
Für eine Lampe sieht man ja im im verlinkten Post die Logik.

Bei einem Rollladen wären es z.B. 3 Zustände: Icon für Zu, für Offen, und alles dazwischen Icon für Mitte.

[lewej]

Hi lewej,

findet sich hier:
https://forum.fhem.de/index.php/topic,37378.msg678502.html#msg678502

Ist ein Userreading, welches ich bei jedem Gerät hinzufüge welches in TabletUI angezeigt wird.
Für eine Lampe sieht man ja im im verlinkten Post die Logik.

Bei einem Rollladen wären es z.B. 3 Zustände: Icon für Zu, für Offen, und alles dazwischen Icon für Mitte.

Hi Thyraz,

Danke schaue ich mir an. Hast eine Idee wie ich ein Navmenu zusätzlich einfügen könnte, das sich links oder rechts aufrufen lässt?

Gruss
Lewej

[Thyraz]

Ah sorry, den Post darüber hatte ich übersehen.

nein, kann ich dir leider wenig weiterhelfen.
Hab das selbst noch nie genutzt.

Aber es gab hier im Thread schon ein paar Beispiele für sowas.

[lewej]

Ok, hätte ich das Lib Verzeichnis wohl doch auch noch reinkopieren sollen. 
Sorry war gestern ein Schnellschuss, hatte die Dateien schnell per VPN gezogen und hier hochgeladen nachdem ich ein paar Anfragen hatte.

Aber ja, die Bootstrap lib wie von setstate reinkopieren sollte helfen.

Das Bootstrap Grid ist an sich hier ganz gut erklärt.
Verwende außer dem Grid auch nicht wirklich viel von Bootstrap.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Hatte das aber schonmal geschrieben: Bootstrap ist für so ein Design ja kein Muss.
Mit Flexbox gibt es ja sogar eine hier öfters beschriebene Variante die ein responsive Design ermöglicht.
Als ich mit meinem ursprünglichen Design angefangen hab, war davon hier aber eben noch nicht die Rede.

Das ist schwer zu sagen.
Habe aber durchaus einige Erfahrung mit CSS / HTML auch wenn es nicht mein täglich Brot ist.

Die meiste Zeit ging aber definitiv für:
- Verständnis von Link Widget + Templates
- Im Netz nach Heimautomatisierungsscreenshots suchen und zu überlegen wie ich welche Elemente anordnen will
- Farbpalette erstellen
- Icons zeichnen
- Herausfinden wie man eine funktionierende Iconschriftart erstellt
drauf.

Das Umsetzen der einzelnen Seiten und der Templates war hingegen recht schnell erledigt.
Insgesamt sind für mein TabletUI im Laufe des letzten Jahres auch einige Stunden drauf gegangen.

Hallo Thyraz,

ich versuche gerade responsible Gridster Elemente in dein Template einzubauen, klappt aber nicht wirklich. Hast eine welche col anordnung ich verwenden müsste?
Bei mir sieht das ganze etwas zerhauen aus.

hier sind Bilder von horz/vert
Ich würde gerne zwei Reihen mit jeweils 4 Elemtene anordnen(IPAD) und Iphone 8 untereinander.

grüsse
lewej

[moonsorrox]

ich versuche gerade responsible Gridster Elemente in dein Template einzubauen, klappt aber nicht wirklich.

das kannste vergessen, hatte ich auch schon probiert...! meines Wissens kannst du nur eine Seite mit Gridster Elementen machen oder eben mit Bootstrap

[lewej]

das kannste vergessen, hatte ich auch schon probiert...! meines Wissens kannst du nur eine Seite mit Gridster Elementen machen oder eben mit Bootstrap

Das müsste doch mit den bootstrap mitteln möglich sein, oder kommt da ftui css und die bootstrap sich in die quere?

Beispiel
https://zellwk.com/blog/from-html-grids-to-css-grids/

[setstate]

grundsätzlich geht das (Detail-Probleme sind aber nicht auszuschließen)

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="longpoll" content="1">
    <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0">
    <!-- 1=output to console;0=not output -->

    <link rel="stylesheet" href="lib/bootstrap.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div data-type="switch" data-device="dummy1"></div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div data-type="switch" data-device="dummy2"></div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div data-type="switch" data-device="dummy3"></div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div data-type="switch" data-device="ftuitest"></div>
        </div>
    </div>
</body>

</html>


evtl. anstatt der css/fhem-tablet-ui.css nur die css/fhem-tablet-ui-f7.css reinnehmen, die ist minimalistisch

[Waschto]

Hallo Community,

habe mein TabletUI auf meinem Server als Livedemo aufbereitet. Nichts besonderes, aber dafür zum selber klicken 😉

--> https://waschto.eu/fhem-und-tabletui-livedemo/

Gruß Daniel