[FHEM-Tablet-UI] User-Demos

setstate · 30 August 2017, 07:00:43

die bootstrap css und Docus zu den Klassen findet man hier http://getbootstrap.com. Einfach nach lib kopieren und in den Header einbinden.

Ist sehr mächtig und sehr beliebt, aber schon bei dem Satz - ein Grid hat immer 12 Spalten, schalte ich immer ab und denke: Warum einfach, wenn es auch kompliziert geht?

Code Auswählen


<!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">

    <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-sm-6">
            <div class="row">
                <div class="col-sm-6  bg-gray">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
                <div class="col-sm-6  bg-green">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
             </div>
        </div>
        <div class="col-sm-6 bg-blue">
            <div data-type="volume" data-device='AvReceiver' data-get='volume' data-set='volume' class="large" ></div>
            <div class="top-narrow-2x">Volume</div>
        </div>
</div>
</body>
</html>

Thyraz · 30 August 2017, 07:34:04

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.

Zitat von: Fixel2012 am 29 August 2017, 23:36:59
@Thyraz
Darf man fragen, wie viel Arbeit in dem Frontend steckt (geschätzte Zeit in Stunden)?
Hattest du dabei schon vorher Erfahrung mit HTML und CSS?

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.

ChrisK · 30 August 2017, 13:30:42

Erstmal vielen Dank für die Dateien Thyraz!
Das Layout sieht super aus!

Zitat von: Thyraz am 29 August 2017, 11:05:40
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.

Eine Frage habe ich zum Slider.
Leider kriege ich den nicht auf die volle bzw. überhaupt eine Breite hin.
Ich habe auch die bootstrap.css und .js-Dateien runtergeladen und eingebunden, aber es bleibt bei dem komisch zusammengestauchten Slider.
Ich habe den Slider auch mal außerhalb von col-xs-10 und col-xs-11 platziert, dann passt es.

Hier ein Bild zur Verdeutlichung, oben der Slider außerhalb des templates und drunter der Slider aus dem Template (den roten Rahmen habe ich reingepackt, damit ich sehe welcher Platz zur Verfügung steht).
Vielleicht hat einer ja eine spontane Idee, was mir noch fehlt. Ansonsten baue ich mir das mal komplett um.

PingPong · 31 August 2017, 22:25:07

Hallo Paul,

ich muss nochmal fragen.
Bin mit der Anpassung deiner Seiten schon ein ganzes Stück weiter.
Ich Scheiter jedoch gerade am Austausch eines Icons auf der Seite content_system.
Statt

Code Auswählen

data-icons='["fs-cul_868","fs-hue_filled_bridge_v2 fa-blink"]'
würde ich gerne

Code Auswählen

data-icons='["fs-hue_filled_bridge_v2","fs-hue_filled_bridge_v2 fa-blink"]' verwenden.
Mir wird aber kein Icon in ftui angezeigt.
Hast Du nen Tipp, wo mein Fehler liegt?

VG
Marc

paul79 · 01 September 2017, 08:04:47

Hallo Marc,

ich weiß nur das nicht alle Icons von dem Iconset FS angezeigt werden da sie zu alt sind und bei mir wird es auch nicht angezeigt.

Gruß Paul

PingPong · 01 September 2017, 10:26:44

Hallo Paul,

vielen Dank für Deine Antwort.
Schade, dann werde ich wohl nach einem anderen Icon suchen müssen.

VG
Marc

Pi_Newbie · 04 September 2017, 18:29:16

@ Thyraz: Herzlichen Dank für den Upload deiner aktualisierten Dateien.

Ich habe jedoch ein kleines Problem.

Ich bekomme keinerlei Icons angezeigt. Die WetterIcons sind okay, nachdem ich sie für mich angepasst habe. Aber zum Beispiel das Hintergrundbild des Wohnzimmers, die Icons zu den Lampen etc. werden mir alle nicht angezeigt. Eine Idee woran das liegen könnte? Ich habe auch folgende seltsame Fehlermeldung:

Failed to load resource: Es wurde kein Server mit dem angegebenen Hostnamen gefunden http://piwdmn.fritz.box:8084/fhem/ftui/img/homeoffice.jpg

Wo muss ich denn den Verweis zum lokalen Speicherort der Icons/Bilder verändern?

Vielen Dank für Deine/Eure Hilfe!

moonsorrox · 05 September 2017, 01:23:52

du mußt genau das was in der Fehlermeldung (piwdmn.fritz.box) steht durch deine IP oder deinen Namen ersetzen. Dann hat er den Port 8084...
Je nachdem was du nutzt in der Regel ist der WEB FHEMWEB 8083, WEBphone FHEMWEB 8084, WEBtablet FHEMWEB 8085, aber das sollte eigentlich klar sein.

Das mit den Bildern schau dir mal in der fhem-tablet-ui-user.css genau an...!

Pi_Newbie · 05 September 2017, 10:45:43

Gestern war es wohl einfach zu viel!

Habe da zig mal reingeschaut und wohl jedes mal überlesen!

Danke Dir!!!

Die Icons unter "content_wohnen.html" zeigt er mir aber leider trotzdem nicht an! Würde gerne die Dimmer durch einfachen "Switch" ersetzen, aber da zerhaut es mir die Seite. Da muss ich mal noch schauen woran das liegt. Ist im gesamten etwas komplizierter als meine bisherige Visu aber ich finde den Ansatz sehr interessant!

Danke nochmal "Thyraz" für den Upload deiner Dateien und das Du diese tolle Visu dem Forum zur Verfügung stellst.

Könntest Du evtl. mir einen Tipp geben wie ich das ändern kann?

Danke!!!

Zippo2000 · 23 September 2017, 17:03:05

Zitat von: Masterfunk am 11 Februar 2017, 12:17:41
Bin noch bei den Anpassungen wegen der Umstellung auf 2.5

Genau an der Stelle habe ich aktuell Probleme, da die data-substitution nicht mehr geht.
Sobald ich alles wieder richtig am laufen habe, werde ich noch mal alle Dateien zur Verfügung stellen.

Gruß Detlef

@Masterfunk: Konntest Du die Probleme mit Deiner Update-Funktion und Tablet UI >2.5 beheben?
Ich frage mal ganz dreist: Könntest Du den Code dazu posten? Ich würde das liebend gerne übernehmen, scheitere aber gerade an den vielen Codeschnipseln..

Viele Grüße,
Tobi

Leeloo_Dallas · 25 September 2017, 14:10:18

Hab den Thread gerade erst entdeckt,....

Anbei seht Ihr eine Möglichkeit das UI auf das Nötigste zu reduzieren und dennoch recht viele Komponenten unterzubringen.
Die Nutzung von FTUI auf einem kleinen Tablett bzw. auf dem Smartphone kann ggf. dadurch optimiert/vereinfacht werden.

https://forum.fhem.de/index.php/topic,67141.msg590677.html#msg590677

Gruß
Leeloo

Pitcher90 · 26 September 2017, 16:00:12

Hier mal meine Vorstellung eines Interfaces. Aufgeteilt in Tablet- und mobile Ansicht.
Außerdem noch eine helles und dunkles Theme, dass sich mit klicken auf den Header "MENU" einstellen lässte.
Das Loxone-System hat mich zu dieser Farbwahl inspiriert.

SvenJust · 26 September 2017, 16:31:16

Sehr schick, kannst Du uns die html- und css-Dateien zur Verfügung stellen?

Pitcher90 · 26 September 2017, 16:36:03

Zitat von: SvenJust am 26 September 2017, 16:31:16
Sehr schick, kannst Du uns die html- und css-Dateien zur Verfügung stellen?

Klar. Muss nur vorher meine persönlichen Daten rauß nehmen. Vorab kann ich aber auf folgende Seite verlinken:
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6

Hier hab ich die Code-Teile der mobilen Seite her.

moonsorrox · 26 September 2017, 16:59:03

Zitat von: Pitcher90 am 26 September 2017, 16:36:03
http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6

Hier hab ich die Code-Teile der mobilen Seite her.

das ist die Seite von Roman1528 hier aus dem Forum.. Roman arbeitet aber total ohne Gridster Elemente mit der Menüleiste ausklappbar und bei dir sieht das so als wenn du beides miteinander vermischt hast. Soll heißen die Felder auf den Screenshots 4-6 sehen so aus als wären sie mit Gridster gemacht.
Kannst du dazu etwas sagen, oder eben mal den Code zeigen dann sieht man es ja...

Danke

Ich spiele auch gerade mit den Farben und experimentiere mit "GRÜN" weil mir das Loxone auch sehr gut gefällt