FHEM > FHEMWEB

Neuer Style: flex. Flexibel für alle Geräte

(1/152) > >>

xanker:
Hallo zusammen,

ich habe einen Style für FHEMWEB entworfen, mit dem Ziel, dass er für alle Geräte- bzw. Display-Größen gut funktioniert. Ein wichtiger Punkt war für mich, dass kein horizontales Scrollen mehr nötig ist, da dies mMn. die Übersichtlichkeit einschränkt.

Folgende Funktionen/Eigenschaften beinhaltet mein Style:

* Skaliert für alle Display-Größen (minimale Breite: 350px)
* Devices/Reading/Attribute sortieren sich je nach Breite selbstständig (auf sinnvolle Weise)
* Slider, Selects, Inputs, Plots skalieren falls nötig (auf sinnvolle Weise)
* Tabellen können in zwei Spalten angezeigt werden um den Platz bei größeren Display besser auszunutzen
* Menü ist ein/ausblendbar. Bei einer Breite von >800px wird das Menü standardmäßig angezeigt, ansonsten automatisch ausgeblendet. Optional kann das Menü auch immer ausgeblendet werden.
* Menü enthält Icon-Buttons für Reboot, Update, Update check, Reread Icons, Reload myUtils, Save und (falls möglich) Save check. Die Buttons können nach Belieben ein-/ausgeblendet werden.
* Menü und Haupt-Content sind unabhängig voneinander, lass sich also getrennt scrollen (falls nötig).
* Alle Menü Eintrage (nicht nur Räume) können beliebig sortiert und gruppiert werden
* Datum, Uhrzeit und Verbose-Level bei Logs und dem Eventmonitor werden farblich hervorgehoben um die Übersichtlichkeit zu verbessern
* Device-Groups bzw. alles wo das group-Attribut gesetzt ist, kann per Drag'n'Drop sortiert werden. Neu: Es kann nun zwischen einem Ein-Spalten, Zwei-Spalten und "custom" Layout gewählt werden.
* Neu: Gruppen können nun ausgeblendet werden. Dazu den Edit-Mode aktivieren, durch langes Drücken des Gruppen-Headers. In den Einstellungen gibt es eine Option um ausgeblendete Gruppen wieder anzuzeigen.
* Farben sind frei definierbar. Es gibt bisher vier Standard-Presets: bright, dark, black und fhem. Zudem können beliebig viele eigene Presets definiert werden
* Neu: Einstellungen werden nun IMMER im aktuellen FHEMWEB Device. Durch fingerprintjs2 (https://github.com/Valve/fingerprintjs2) wird ein Fingerprint vom aktuellen Endgerät erstellt, dadurch ist es möglich Endgerät-spezifische Einstellungen zu setzen. Die Einstellungen können aber auch weiterhin global für alle Endgeräte gespeichert werden.
* Es können verschiedene Farb Presets für Tag/Nacht bestimmt werden. Der Wechsel geschieht dann automatisch zum Sonnenaufgang/-untergang.
* Beschreibungen der Style Settings werden in Abhängigkeit vom global language-Attribut in Deutsch oder Englisch dargestellt.
* Command-Bar ist fest an der Oberseite, scrollt also nicht mit und hat mehrere Funktionen:

* Digital-Uhr wird angezeigt (einstellbar)

* Zeigt aktuellen Raum bzw. Geräte Namen an (einstellbar)
* Informationen/Fehlermeldungen wie "Connection lost" werden angezeigt
* Zusätzlicher Button für Raw-Code Eingabe wie beim f18 Style (einstellbar) (Danke an rudolphkoenig)
* Command-History wird gespeichert und kann mit den hoch/runter Tasten bedient werden und mit CTRL+ENTER wird die Eingabe in "{}" eingeklammert (einstellbar) (Danke an FHEMAN)
* Geräte können gesucht werden, ab dem dritten Zeichen werden Geräte in einer Liste vorgeschlagen und können mit den hoch/runter Tasten ausgewählt werden (einstellbar) (Danke an Phill und ThoTo)
Performance:
Der Style nutzt relativ viel Javascript, was aufgrund des nicht ganz so einheitlichen FHEMWEB HTML Outputs nötig ist um es wie gewünscht zu stylen. Dies kann auf schwächeren Geräten zu Performance Problemen führen. Daher gibt es folgende Optionen:

* "Animationen aktivieren": dadurch wird z.B. das Öffnen/Schließen des Menüs animiert, dies reduziert aber die Performance!
* "Performance verbessern": wenn diese Option aktiviert wird, wird nicht unbedingt benötigtes Javascript Styling nach 500ms abgebrochen. Genauer gesagt führt dies dazu, dass Webcmds (Slider, Selects, Inputs, etc.) bei einem Zeilenumbruch nicht die optimale Breite haben. Im Gegenzug ist die Seite dann schneller nutzbar. Dies sollte aber nur für Räume mit vielen Devices (wie "Everything") relevant sein.
* "Mehrspalten Layout": Wenn man dies auf "single" setzt, wird die Performance nochmals verbessert
* Zusammenfassend: Für schwache Geräte wird empfohlen Animationen zu deaktivieren, "Performance verbessern" zu aktivieren und "Mehrspalten Layout" auf "single" zu setzen
Bekannte Bugs:

* Das Handle eines Sliders wird beim Skalieren nicht aktualisiert, gibt es hier ein trigger den man anstoßen kann?
* Die Funktion "Display plot values" ist bei skalierten SVGPlots buggy, da die Funktion wohl immer von der Originalgröße ausgeht.
* Tooltips und Slider Werte werden im Safari an der falschen Position dargestellt wenn die Zoomfaktor Option ungleich 1 ist.
* Tooltips werden im Safari abgeschnitten.
Potentielle Bugs:

* Ich habe bisher nur (ausgiebig) mit Chrome/Firefox unter Windows sowie Android getestet, mit allen denkbaren Breiten. Wie es bei IE/Safari aussieht, weiß ich nicht, ich hoffe wie geplant. Bugreports sind erwünscht, da ich keine Apple Geräte habe.
* Da es keinen wirklichen HTML Standard für FHEM gibt, könnte es sein, dass gewisse Module HTML-Output erzeugen, der nicht richtig gestyled wird.
Hinweise:

* Da flex selbst die Möglichkeit bietet Tabellen zur sortieren bzw. automatisch auf zwei Spalten aufzuteilen, wird die Spalteneinteilung vom FHEMWEB column-Attribut ignoriert. Das Attribut kann allerdings weiterhin dazu verwendet werden um Gruppen zu sortieren und auszublenden. Wenn man in den Einstellungen die Option "Mehrspalten Layout" auf custom setzt, dann wird die Spalteneinteilung nun beachtet und kann per Drag'n'Drop bearbeitet werden
* Die implementierte Zoom-Funktion verursacht teilweise Probleme mit falsch positionierten Elementen (z.B. während der Menü-Sortierung), daher empfehle ich die Zoom Funktion des Browsers zu verwenden!
Installation:

* Repository hinzufügen: update add https://raw.githubusercontent.com/nagel86/fhem-flex/master/controls_fhem-flex.txt
* Update forcieren: update all https://raw.githubusercontent.com/nagel86/fhem-flex/master/controls_fhem-flex.txt
* Unter "Select style" dann "flex" auswählen
* Einstellungen beliebig anpassen und sich daran erfreuen ;D
Neue Funktionen / Wünsche:

* Ich bin offen für Änderungsvorschläge und baue auch gerne neue (sinnvolle) Funktionen ein. Wenn jemand eine Idee hat, einfach hier schreiben.

Bier?
Der Style steht frei und unentgeltlich zur Verfügung. Ich sehe das als mein Tribut an die Community, da ich schließlich auch sehr von FHEM profitiere. Da ich mittlerweile doch schon viele viele viele Stunden arbeit in den Style gesteckt habe, freue ich mich über ein Motivations-Bier  8) Vielen Dank im Voraus!
https://paypal.me/pools/c/8gUXHjxlDP

rudolfkoenig:

--- Zitat ---der Style hat den Suffix "touchpad", da das viewport Attribut nur ausgewertet wird, wenn ein Style "touchpad" oder "smallscreen" im Namen hat. Gibt es dafür einen Grund?
--- Ende Zitat ---
Ja, historisch. Ich empfehle es im JavaScript zu machen, wie f18.

xanker:

--- Zitat von: rudolfkoenig am 24 Juni 2019, 20:40:38 ---Ja, historisch. Ich empfehle es im JavaScript zu machen, wie f18.

--- Ende Zitat ---
Hatte ich anfangs sogar so gemacht, bis ich im Source-Code von FHEM Web nachgeschaut habe. Problem wenn man es über Java-Script setzt, dass es zu kleinen Verzögerungen führen kann, was bedeutet, dass für den Bruchteil einer Sekunde alles die falsche Größe hat...unschön.

Reinhart:
Hallo Xanker!

Danke für deinen neuen Style, gerade in diesem Thema tut sich ja sonst nicht viel.

Ich habe gleich ein paar Anmerkungen. Ich habe in letzter Zeit den f18 lieben gelernt, weil er gerade in der Mobile Ansicht sehr gut lesbar ist.
Bei der automatischen Skalierung des Clavo wird diese Technik aber zum Nachteil weil alles sehr klein und damit schlecht lesbar wird. Ist beim f18 etwas zu groß, so kann ich das Handy drehen (siehe Readinggroup2) und es ist klar und deutlich. Der Abstand zwischen Icon und Text ist sehr groß was letztlich alles sehr klein macht. Beim Clavo kann ich zwar horizontal scrollen ist aber für die Übersicht nicht unbedingt von Vorteil.
Wenn ich nun etwas schalten will und ich sehe durchs scrollen den Text nicht, tapt man da im Dunkeln.

Bei der Ansicht meiner vielen Lichtschalter (das ist keine Readingsgroup) ist das scrollen eher hinderlich weil der Abstand zwischen dem Text und Schaltknopf sehr groß ist, beim f18 klappt es gut. Bei der Ansicht im Browser fallen diese Dinge kaum auf, ich habe ebenfalls mit Chrome getestet.

Ich glaube man sollte die Mobileansicht nicht unterschätzen, den in 70% der Fälle greif ich auf Fhem über das Handy zu (wenn ich im Garten sitze oder auswärts oder auf Urlaub bin) , entweder über HTML oder die Alexa App und lass mir die gewünschten Daten vorlesen.

Ansonsten funktioniert deine erste Version schon sehr gut und er hat er auch ein frisches nettes Aussehen. Eventuell kannst du an den Abständen noch etwas schrauben oder einstellbar gestallten. Wenn du später noch die Farben vorgeben kannst wäre das sicher ein Vorteil, denn die neuen Displays der Handys verbrauchen ja bei schwarzem Hintergrund keinen oder weniger Strom. Ansonsten finde ich deine Blau/Weiß Kombination ja sehr schön gewählt, aber Farbkombinationen sind immer Ansichtssache.

Mobile Test mit Android 9 (EMUI 9.1.0.132)

LG
Reinhart

xanker:

--- Zitat von: Reinhart am 25 Juni 2019, 11:15:10 ---Danke für deinen neuen Style, gerade in diesem Thema tut sich ja sonst nicht viel.

--- Ende Zitat ---
gerne doch :)


--- Zitat von: Reinhart am 25 Juni 2019, 11:15:10 ---[...]weil alles sehr klein und damit schlecht lesbar wird. [...] Beim Clavo kann ich zwar horizontal scrollen ist aber für die Übersicht nicht unbedingt von Vorteil.

--- Ende Zitat ---
Genau das sollte nicht sein. Mein Ziel war ja dass KEIN horizontales scrollen nötig ist. Es sollte von der Größe alles so sein, wie es auf den (mobilen) Screenshots von mir aussieht. Du hast ganz klar vergessen den viewport im FHEMWEB-Device zu setzen (siehe "Voraussetzung"). Ich habe sicherheitshalber eine Überprüfung per Javascript eingebaut. Ich empfehle trotzdem den viewport im FHEMWEB Device zu setzten (siehe mein voriger Post).


--- Zitat von: Reinhart am 25 Juni 2019, 11:15:10 ---Ich glaube man sollte die Mobileansicht nicht unterschätzen, den in 70% der Fälle greif ich auf Fhem über das Handy zu.

--- Ende Zitat ---
Ich auch, daher habe ich mir ja auch die Arbeit gemacht den Style zu erstellen :)


--- Zitat von: Reinhart am 25 Juni 2019, 11:15:10 ---Ansonsten funktioniert deine erste Version schon sehr gut und er hat er auch ein frisches nettes Aussehen. Eventuell kannst du an den Abständen noch etwas schrauben oder einstellbar gestallten. Wenn du später noch die Farben vorgeben kannst wäre das sicher ein Vorteil, denn die neuen Displays der Handys verbrauchen ja bei schwarzem Hintergrund keinen oder weniger Strom. Ansonsten finde ich deine Blau/Weiß Kombination ja sehr schön gewählt, aber Farbkombinationen sind immer Ansichtssache.

--- Ende Zitat ---
Wenn sich mehr Leute daran Interesse haben, oder ich einfach nur Lust darauf habe es zu implementieren, dann werde ich das mit den Farben noch machen. Ich hatte mir auch schon überlegt einen "Dark" Style daraus zu machen.

Edit:
Deine Readingsgroup sieht durchaus etwas komisch aus. Der Abstand zwischen den Icons und dem Namen ist viel zu groß. Bei mir sieht eine Readingsgroup wie im angehängten Screenshot aus. Hast du evtl. css-styles (Attribute style, cellStyle, etc.) im Readingsgroup Device gesetzt, welcher das verursacht?

Grüße
xanker

Navigation

[0] Themen-Index

[#] Nächste Seite

Zur normalen Ansicht wechseln