Tablet UI - responsive Design (flexbox)

[jemu75]

Hallo an Alle!

Bin jetzt auch am umbauen, habe aber ein kleines Problem mit dem Menü.
Das Verhalten habe ich am PC (Chrome) und am Handy im Querformat.
Wenn das Menü ganz ausgefahren oder ganz eingefahren  ist, passt alles aber wenn es den Zwischen-Status hat, verdeckt es den Content. Was muss ich da ändern? Kann mir da wer helfen?
Im Prinzip habe ich das von jemu75 nachgebaut.
jemu75  ist das bei dir auch so?

Hallo, bei mir passt die Darstellung auf den verschiedenen Geräten. Hast du die user_tablet_ui.css von mir mit in das Hauptverzeichnis gepackt? Dort hatte ich div. Anpassungen drin. Ansonsten schicke einfach mal deine index.html und die zugehörige content-seite.

[jemu75]

Hallo jemu, nice..... so mache ich das im Prinzip auch, aber ich finde das Reading "mode" nicht in meinen DOIF´s. Hab mal mit state gespielt, aber da hats dann natürlich die cmd´s drin und nicht enabled/disabled. Ist das ein Userreading? Falls ja, wie genau hast du dieses angelegt?

Das Reading mode verhält sich in FHEM etwas eigenartig. Wenn man die DOIF Funktion zum erstem Mal "enabled" bzw. "disabled" dann erscheint das Reading. Aus meiner Sicht ist das kein Userreading. Zumindest habe ich nichts angelegt.

[edank]

Jemu75 danke dir!
Es bewahrheitet sich wieder einmal, "Wer lesen kann, ist klar im Vorteil"!
Habe es übersehen, dass Du die css auch geändert hast.

LG
Edank

[holle75]

Das Reading mode verhält sich in FHEM etwas eigenartig. Wenn man die DOIF Funktion zum erstem Mal "enabled" bzw. "disabled" dann erscheint das Reading. Aus meiner Sicht ist das kein Userreading. Zumindest habe ich nichts angelegt.

Ah, jetzt seh ich es auch .... lustig, meine DOIF´s sind alle mit disable/initialize angelegt (und bei initialize, was eigentlich immer der Fall ist, ist "mode" nicht sichtbar). Deswegen ist es mir nie aufgefallen. Bau ich mal um. Danke.

[daelch]

Dein Design sieht wirklich toll aus, das werde ich auf jeden Fall ausprobieren! Dass sich dies auf dem Tablet und Handy gleichermaßen nutzen lässt, hat einen besonderen reiz!

Derzeit baue ich mein Smart Home auf und arbeite mich gerade in FHEM ein.

Ich habe eine Verständnisfrage: beim - ich nenne es mal die - klassische Tablet UI Oberfläche gibt es einige Widgets (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Integrierte_Widgets). Lassen sich alle Widgets aus der klassischen Tablet UI Oberfläche auch in Deinem Design nutzen? Oder müssen diese erst für Deine Darstellung angepasst werden? Sorry für die Anfängerfrage.

Vielen Dank und viele Grüße

[eppi]

Hallo
Bei mir ist das Problem mit der Überlappung im Querformat noch nicht gelöst. Ich habe die CSS Änderungen im Beitrag #7 übernommen, jedoch keine Änderung festgestellt.
Das Problem habe ich bei meiner Konfig nur mit den Cameras. Ich Hochformat ist alles ok, im Querformat sind die Bilder überlappt (siehe Anhang). Das Template habe ich vom Zip übernommen. Hat jemand eine Idee

[jemu75]

Hallo Zusammen,

ich habe gestern FTUI aktualisiert seitdem passen die Abstände zwischen den Zeilen nicht mehr.

Hat jemand eine Idee was ich anpassen muss.

es sind die orginal Seiten aus dem ersten Beitrag.

Christian

Hallo Christian,

ich habe das Update eben auch mal gemacht und nach dem Neustart selbigen Effekt. Ich habe jetzt erstmal "zurückgerollt", da ich auf die Schnelle nichts gefunden habe. Ich gehe jedoch davon aus, dass setstate was in der fhem-tablet-ui.css verändert hat, was zu diesem Effekt führt. Aktuell gibt es hier im Forum unter dem Beitrag Update (03.09.2017) - Elemente verschoben ja auch viele andere User, die über Veränderungen bei der Darstellung der einzelnen Elemente berichten. Wenn setstate die Sachen behebt, sollte das auch für meine hier vorgestellte Lösung zutreffen. Ansonsten würde ich mich noch mal tiefer in der Thema "eingraben" und eine Lösung bauen.

[jemu75]

Ich habe eine Verständnisfrage: beim - ich nenne es mal die - klassische Tablet UI Oberfläche gibt es einige Widgets (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Integrierte_Widgets). Lassen sich alle Widgets aus der klassischen Tablet UI Oberfläche auch in Deinem Design nutzen? Oder müssen diese erst für Deine Darstellung angepasst werden?

Ich habe mit dem Design im Grunde nur einen Rahmen geschaffen. Du kannst hier grundsätzlich alle Widgets einbauen die zur Verfügung stehen. Empfehlenswert ist es jedoch, das Grundprinzip der Templates nicht völlig zu verlassen.

Meine damit - als Empfehlung:
Links: ein Symbol, welches den Status des Aktoren bzw. Sensoren repräsentiert (class="big compressed")
Mitte: Die Bezeichnung (class="big") und darunter diverse Zusatzinformationen, die den Aktor bzw. Sensor betreffen
Rechts: 1 oder 2 (nebeneinander) angeordnete "Steuerelemente" z.B. Button, Slider ect. die eine Hauptfunktion des jeweiligen Aktoren ansprechen. (class="small")

Hier mal ein leeres Template/Muster, in dem du faktisch deine eigenen Sachen realisieren kannst.

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template Muster [hier dokumentieren welche Typen von Aktoren/Sensoren im Template angesprochen werden]  -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<!-- großes Symbol welches den Status des Aktoren bzw. Sensoren repräsentiert, sollte class="big compressed haben"-->
<div data-type="symbol" data-device="var_device" data-states='["0","1"]' data-colors='["blue","red"]'  data-icon="var_icon" class="big compressed"></div>
</div>
<div class="cell-80 left-align">
<!-- Name oder Ort des Aktor bzw. Sensor, sollte class="big" haben -->
<div class="big">var_name</div>
<!-- zusätzliche Informationen, die den aktuellen Status des Aktoren bzw. Sensoren wiedergeben -->
<div data-type="label" data-device="var_device"></div>
</div>
<div class="cell right-align">
<!-- Steuerelement z.B. switch, push, slider, sollte class="small" haben -->
<!-- diese Zelle nur füllen, wenn zwei Steuerelemente z.B. bei einer Jalousie "up" und "down" nötig sind, ansonsten dieses div leer lassen aber nicht löschen! -->
<div data-type="switch" data-device="var_device" class="small"></div>
</div>
<div class="cell right-space">
<!-- Steuerelement z.B. switch, push, slider, sollte class="small" haben -->
<div data-type="switch" data-device="var_device" class="small"></div>
</div>
</div>
</body>
</html>


[jemu75]

Hallo
Bei mir ist das Problem mit der Überlappung im Querformat noch nicht gelöst. Ich habe die CSS Änderungen im Beitrag #7 übernommen, jedoch keine Änderung festgestellt. Im Hochformat ist alles ok, im Querformat sind die Bilder überlappt. Das Template habe ich vom Zip übernommen. Hat jemand eine Idee

Das Problem habe ich in der Tat auch noch, aber eben nur im Querformat. Ich denke hier ist das von setstate erstellte flexbox noch nicht sauber ausprogrammiert. - Ps.: keine Kritik an setstate - er hat die Grundlage für alle die tollen Lösungen erst geschaffen! 

Ich habe dazu vorerst eine Lösung geschaffen, indem ich alle Elemente auf eine "card" lege und diese dann mit "section" abgrenze.

Probiere in deiner Content-Seite gern mal folgendes:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<body>
   <div class="page" id="content_chart">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Kameras</header>
<section>
<!-- div/template oder Link zur 1. Kamera -->
</section>
<section>
<!-- div/template oder Link zur 2. Kamera -->
</section>
<section>
<!-- div/template oder Link zur 3. Kamera -->
</section>
</div>
</div>
</div>
</div>
</body>
</html>


[andy19850]

Ich hätte dann auch noch mal eine Frage. Baue gerade alles nach und nach auf und mir fehlt noch eine schnelle und einfache Möglichkeit das Residents-Modul zu bedienen.
Ich habe es jetzt vorerst wie im Screenshot mit folgendem template gebastelt:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Startseite fuer den Bewohnerstatus -->
</head>
<body>
<div class="row">
<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["gone","gotosleep","home","awoken"]' data-colors='["red","blue","green","yellow"]' data-color="blue" data-icon="var_icon" class="big compressed"></div>
</div>

<div class="cell-80 left-align">
<div class="big">var_name</div>
<div data-type="label" data-device="var_device"></div>
</div>

<div class="cell">
</div>

<div class="cell">
<div data-type="select" data-device="var_device" data-items='["home","gone","gotosleep","asleep","awoken"]' data-get="state" data-set="state"</div>
</div>

</div>
</body>
</html>

Funktioniert sehr gut. Allerdings hätte ich gerne das Switch Widget etwas breiter gehabt. Geht das überhaupt oder bricht das irgendwelche Design-Regeln im css oder sowas?

[jemu75]

Ich hätte dann auch noch mal eine Frage. Baue gerade alles nach und nach auf und mir fehlt noch eine schnelle und einfache Möglichkeit das Residents-Modul zu bedienen.
Ich habe es jetzt vorerst wie im Screenshot mit folgendem template gebastelt:
Allerdings hätte ich gerne das Switch Widget etwas breiter gehabt. Geht das überhaupt oder bricht das irgendwelche Design-Regeln im css oder sowas?

Gute Lösung wie ich finde. Schau als Anregung gern mal in die Datei template_dimmer.html
Hier verwende ich zum dimmen des Lichtes einen Slider der ja auch mehr Platz benötigt. Mein Vorschlag wäre deshalb, dass Du dich am "Rahmen" des Dimmer-Templates orientiert. 

[andy19850]

Danke, habe es hinbekommen 

[jemu75]

Hat schon irgendwer raus bekommen, weshalb seit dem letzten Update die Zeilenabstände im mittleren Teil der Templates so groß geworden sind?
Ich habe jetzt eine ganze Weile die fhem-tablet-ui.css durchforstet, steige jedoch nicht dahinter, was setstate verändert hat.   

[ErzGabriel]

@jemu78
Ich habe mir deine Dateien runtergeladen und die Devices auf meine umgebaut. Alles ins passende Verzeichnis kopiert und musste leider feststellen, das keine Daten aktualisiert werden. Kann aber den Fehler nicht finden, hast Du einen Tipp für mich? Danke.
Fhem Version ist 12.2016
FTUI Version gestern aktualisiert.

[jemu75]

@jemu78
Ich habe mir deine Dateien runtergeladen und die Devices auf meine umgebaut. Alles ins passende Verzeichnis kopiert und musste leider feststellen, das keine Daten aktualisiert werden. Kann aber den Fehler nicht finden, hast Du einen Tipp für mich? Danke.
Fhem Version ist 12.2016
FTUI Version gestern aktualisiert.

arbeitest du mit websocket?
Das sieht bei mir in der fhem.cfg wie folgt aus.

Code Auswählen Erweitern


define WEB FHEMWEB 8083 global
attr WEB editConfig 1
attr WEB longpoll websocket