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

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

binford6000

Hallo Sebastian,
Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).

VG Sebastian

Gisbert

#151
Hallo Sebastian2, ;D

bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
define Leverkusen.OpenWeatherMapWeblink weblink htmlCode { WeatherAsHtmlV("Leverkusen.OpenWeatherMap") }
attr Leverkusen.OpenWeatherMapWeblink sortby 997

define Leverkusen.DarkSkyWeblink weblink htmlCode { WeatherAsHtmlV('Leverkusen.DarkSky','d') }
attr Leverkusen.DarkSkyWeblink sortby 998


Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.

Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999


Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.

Viele Grüße Gisbert
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

xanker

#152
Zitat von: choetzu am 13 Juli 2019, 23:01:59
Ganz anderes: ist es eigentlich generell möglich im Menu Gruppen zu ordnen? Nun kommt als erstes "Tablet Ui", dann die Räume, dann Logfile/Commandref&Co und dann die CMDALias oder andere Links... Ich finde nichts passendes dazu. Wenn nicht, dann evtl. in deinem Style machbar? Heisst ja flex ;)
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)


Zitat von: nuccleon am 15 Juli 2019, 22:49:22
Es gibt noch ein Problem mit dem 'save' Button im 'edit Files' Editor.
Wenn man den Button (save 99_myUtils.pm) drückt, wird die Datei nicht gespeichernt, sondern die Änderungen werden verworfen.
Browser Firefox 67.0.4
Echt verflixed...Ich kann mir absolut nicht erklären woran das liegt, ich habe den ganzen Code durchgesucht, aber mir ist nichts annährend aufgefallen. Aber ich werde das Problem sicher noch ausfindig machen, könnte allerdings noch etwas dauern.


Zitat von: binford6000 am 16 Juli 2019, 14:23:54
Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).
Zitat von: Gisbert am 16 Juli 2019, 16:49:58
bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
...
Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.
...
Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999


Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.
Danke euch zwei, das werde ich noch beheben, wird aber wohl erst morgen klappen. Dafür habe ich heute die Möglichkeit hinzugefügt die Menü Einträge frei zu sortieren  ;D
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

nuccleon

#153
Zitat von: xanker am 16 Juli 2019, 19:15:32
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)
Cool gemacht! Wenn du mal gar nicht mehr weißt, was du tun sollst: Möglichkeit zum Einfügen einer Trennlinie im Menü implementieren :-D

Der save Button wäre mir schon relativ wichtig, sonst muss ich ja immer den style wechseln (oder die FHEMWEB instanz), wenn ich was programmiren möchte  ::)

Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Kuck dir mal die Gegenüberstellung der Screenshots von Firefox und Chrome an.
Meine Bildschirmauflösung ist übrigens 1920x1080. Ich erwähne es deshalb, da sich die Darstellung der Gruppen in Firefox ändert (Richtung Chrome) sobald ich das Browserfenster schmäler ziehe.

Ansonsten kann ich mich nur wiederholen. Super Job!

choetzu

#154
Zitat von: xanker am 16 Juli 2019, 19:15:32
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)

GENIALLL!!! Das erleichter vieles, v.a. wenn man nicht vom Fach ist... Ganz herzlichen Dank.

Auch bei mir geht es jedoch noch nciht einwandfrei. Siehe Bild. Ich habe Safari vs Chrome (rechts) gegenübergestellt. Während bei Chrome alles tiptop läuft, gehts bei Safari nicht. Aber gell, das kriegst du noch hin ;)

Lg c

EDIT: Geht nun auch im Safari. Vermutlich lag es am Browsercache... Hat sich also somit erledigt...
Wenn aber nun das mit dem Strich noch ginge, dann ist es perfekt.... ;)
Raspi3, EnOcean, Zwave, Homematic

Hellspawn

#155
Hallo,

cooles Design, habs bei mir Installiert und es macht richtig Spass.

Ich habe jetzt einmal die Räume bei mir sortiert. Im ersten Moment sieht alles gut aus, allerdings wenn ich die Räume einmal "öffne", schmeisst er die Sortierung bei mir durcheinander.

Ich habe meine Räume wie im Anhang sortiert... vielleicht liegt es an der Sortierung mit Raum -> Unterraum

Ansonsten ist mir nichts aufgefallen , nice, wirklich :)

P.S. doch da ist noch was... wenn man am iPhone "zum HomeBildschirm" macht, dann werden einige Webseiten (FTUI z.B.) als WebApp gespeichert. Ich bin mir nicht ganz sicher, ich glaube das ist folgende Zeile im <head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">


könntest Du das noch hinzufügen.. dann macht er nämlich die Navigationsflächen weg...

Gruß
Carsten

xanker

#156
Zitat von: binford6000 am 16 Juli 2019, 14:23:54
Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).
Zitat von: Gisbert am 16 Juli 2019, 16:49:58
bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
...
Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.
...
Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999


Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.
Ist jetzt gefixed, zumindest die Darstellung. Mit dem sortby kann es noch Probleme geben, da flex selbst sortiert.


Zitat von: nuccleon am 16 Juli 2019, 21:58:33
Cool gemacht! Wenn du mal gar nicht mehr weißt, was du tun sollst: Möglichkeit zum Einfügen einer Trennlinie im Menü implementieren :-D
Das wäre etwas komplizierter. Man kann das aber (wenn auch etwas umständlich) jetzt schon. Bei jedem Klick auf "edit" wird eine neue leere Gruppe angehänge, sofern noch keine leere Gruppe am Ende ist. Somit müsste man halt ein bisschen hin und her schieben, aber das macht man ja nicht so oft.

Zitat von: nuccleon am 16 Juli 2019, 21:58:33
Der save Button wäre mir schon relativ wichtig, sonst muss ich ja immer den style wechseln (oder die FHEMWEB instanz), wenn ich was programmiren möchte  ::)
Fehler gefunden. geht jetzt.

Zitat von: nuccleon am 16 Juli 2019, 21:58:33
Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Kuck dir mal die Gegenüberstellung der Screenshots von Firefox und Chrome an.
Meine Bildschirmauflösung ist übrigens 1920x1080. Ich erwähne es deshalb, da sich die Darstellung der Gruppen in Firefox ändert (Richtung Chrome) sobald ich das Browserfenster schmäler ziehe.
Da kann ich leider nichts daran ändern. Firefox unterstützt die "column" CSS Befehle nicht wie es angedacht ist. Ich könnte zwar alles per Javascript sortieren, das wäre aber unnötig viel Aufwand. Bis Firefox das mal korrekt unterstützt, sollt man hier "showTablesSideBySide" deaktivieren (sofern es einen stört). Vielleicht finde ich auch noch einen "hack" dafür.

Zitat von: nuccleon am 16 Juli 2019, 21:58:33
Ansonsten kann ich mich nur wiederholen. Super Job!
Zitat von: Hellspawn am 17 Juli 2019, 11:09:51
cooles Design, habs bei mir Installiert und es macht richtig Spass.
Vielen Dank :)


Zitat von: Hellspawn am 17 Juli 2019, 11:09:51
Ich habe jetzt einmal die Räume bei mir sortiert. Im ersten Moment sieht alles gut aus, allerdings wenn ich die Räume einmal "öffne", schmeisst er die Sortierung bei mir durcheinander.
Ich habe meine Räume wie im Anhang sortiert... vielleicht liegt es an der Sortierung mit Raum -> Unterraum
...
P.S. doch da ist noch was... wenn man am iPhone "zum HomeBildschirm" macht, dann werden einige Webseiten (FTUI z.B.) als WebApp gespeichert. Ich bin mir nicht ganz sicher, ich glaube das ist folgende Zeile im <head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

Danke, ist beides erledigt. Gibt zwar noch ein Style Problem beim Draghandler von den gruppierten Räumen, aber das mache ich noch. Zudem sollten (vorerst) nur die Raum-Gruppen vershoben werden, nicht die Räume darin, das kann noch zu Problemen führen.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

choetzu

Hi Xanker
Darf man weiterhin Wünsch äussern? ;) wenn ja, wäre evtl die Möglichkeit nach Rundungen analog dark Style super!! Ansonsten schweig ich dann mal be Runde ..;)
Lg C
Raspi3, EnOcean, Zwave, Homematic

xanker

Zitat von: choetzu am 17 Juli 2019, 18:58:43
Hi Xanker
Darf man weiterhin Wünsch äussern? ;) wenn ja, wäre evtl die Möglichkeit nach Rundungen analog dark Style super!! Ansonsten schweig ich dann mal be Runde ..;)
Lg C
Klaro, Wünsche darf man immer äußern, ob ich sie einbaue ist eine andere Frage  ;D
Was meinst du mit "nach Rundungen"?! Abgerundete Ecken bei den Tabellen?
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

choetzu

Zitat von: xanker am 17 Juli 2019, 20:21:21
Klaro, Wünsche darf man immer äußern, ob ich sie einbaue ist eine andere Frage  ;D
Was meinst du mit "nach Rundungen"?! Abgerundete Ecken bei den Tabellen?

Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Raspi3, EnOcean, Zwave, Homematic

Gisbert

Hallo Sebastian,

ich habe gerade ein update gefahren, da ja anscheinend einige Änderungen im Modul vorgenommen wurden.

Die "weather_as_html"-Darstellungen sehen jetzt gut aus, wobei ich allerdings nicht verstehe, dass die vor den Diagrammen stehen, obwohl sie absichtlich eine höhere Nummer bei dem sortt-by-Attribut haben.
Diese Darstelung ist jetzt tabellenartig, soweit so gut.
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999

Die Tabelle nimmt auf einem großen Bildschirm die ganze Breite ein (Diagramme habe ich auf 55% begrenzt), beim kleinen Bildschirm ist es gut lesbar, aber der größte Teil (rechts) ist abgeschnitten und nicht scrollbar.

Auf dem kleinen Bildschirm gibt es jetzt aber folgende Probleme/Rückschritte nach dem update, welches ich heute gegen 17.Juli - 22:00 durchgeführt habe:

  • Die Diagramme werden gefühlt doppelt so groß angezeigt und sind gleichzeitig nicht scrollbar. Wenn plotEmd auf 1 steht, dann sehen die Diagramme wieder toll aus.
  • Der Callmonitor ist schlecht lesbar, alles in einer Spalte, die knapp 8mm breit ist; auf einem großen Bildschirm nimmt er die ganze Bildschirmseite ein, wobei Überschriften und Inhalt nicht übereinander stehen.
  • Die Karte im Blitzer-Modul ist jetzt vorhanden, jedoch wird nur ca. 5% der zur Verfügung stehenden Fläche ausgenutzt, der Rest ist grau

Andere Änderungen, die positiv verlaufen sind, erwähne ich hier nicht separat.
Bei der Vielzahl von Wünschen, die auf dich einprasseln und vermutlich auch noch widersprüchlich sind, ist es gar nicht so leicht hinterherzukommen.
Bitte verstehe es als konstruktive Kritik eines Interssierten, der deinen flex style gerne dauerhaft einsetzen möchte.

Viele Grüße Gisbert
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

Icinger

Hätte noch eine kleine Bitte:
Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?

Danke und lg,

Stefan
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

xanker

Zitat von: choetzu am 17 Juli 2019, 22:07:15
Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Ich schaue mal ob ich das ohne viel Aufwand eingebaut bekomme. Normalerweise ist das kein Problem, allerdings habe ich alles auf "border-collapse: collapse" aufgebaut, da viele verschachtelte Tabellen durch FHEMWEB erzeugt werden und sich somit sicherstellen lässt, dass die Tabellen Ränder zusammenfallen (collapse) und somit alle gleich dick sind. Das macht allerdings Probleme mit abgerundeten Ecken.

Zitat von: Gisbert am 17 Juli 2019, 23:00:30
Bei der Vielzahl von Wünschen, die auf dich einprasseln und vermutlich auch noch widersprüchlich sind, ist es gar nicht so leicht hinterherzukommen.
Bitte verstehe es als konstruktive Kritik eines Interssierten, der deinen flex style gerne dauerhaft einsetzen möchte.
Ich verstehe das nicht falsch, im Gegenteil, ich bin froh über Bugreports, da ich unmöglich alles durchtesten kann, schon gar nicht bei jeder kleinen Änderung. Ich habe heute mal angefangen den FHEMWEB HTML Output per Javascript komplett neu zu strukturieren um alles so einheitlich wie möglich zu machen. Das spart am Ende viel CSS-Code ein und Änderungen bzw. deren Effekte sind vorhersehbarer. Da ich dieses Wochenende anderweitig beschäftigt bin, werde ich wohl erst kommende Woche dazu kommen.

Zitat von: Icinger am 18 Juli 2019, 15:10:11
Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?
Jepp werde ich machen, aber wie zuvor geschrieben, wird das wohl erst nächste Woche klappen.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

xanker

#163
Ich habe heute doch noch etwas Zeit gefunden und ein update commited. Es gibt ein paar wesentliche Änderungen:

  • HTML Code wurde neu strukturiert, dies sollte (eigentlich) alle Struktur Probleme mit Modul HTML Output beheben
  • Einstellung "showReadingsGroupAsTable" wurde entfernt, da es keinen Sinn gibt sie als Flex-Container darzustellen
  • showTablesSideBySide betrifft jetzt nicht mehr Modul HTML Output, also auch keine Readingsgroup! Dies bedeutet, dass nur Device-Groups nebeneinander dargestellt werden, Modul HTML Output hingegen wird einspaltig darunter dargestellt. Wenn man möchte, dass der Modul HTML Output auch nebeneinander dargestellt wird, muss man beim entsprechenden Device das group-Attribut setzen! Dies hätte auch den Vorteil, dass man die Gruppe dann per FHEMWEB column-Attribut sortieren/ausblenden kann. (Hinweis: damit man dann z.B. bei Readingsgroups keine doppelten Header hat, muss man das noheading-Attribut setzen)
  • Ansonsten gibt es noch ein paar kleine neue Features, z.B. wird jetzt automatisch zum "attr" Feld gescrollt, wenn man in der Device-Übersicht ein Attribut anklickt.


Zitat von: nuccleon am 16 Juli 2019, 21:58:33
Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Ich habe eine Lösung gefunden, jetzt funktioniert es auch wie gewünscht beim Firefox.

Zitat von: choetzu am 17 Juli 2019, 22:07:15
Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Das gestaltet sich leider - wie erwartet - etwas komplizierter. Ich werde es wohl nicht einbauen (zumindest nicht für die kompletten Tabellen), da das einen Rattenschwanz an Änderungen nach sich ziehen würde. Wenn du möchtest, kann ich aber eine Option hinzufügen um zumindest die oberen Ecken von den Tabellen-Headern abzurunden?!

Zitat von: Gisbert am 17 Juli 2019, 23:00:30
Auf dem kleinen Bildschirm gibt es jetzt aber folgende Probleme/Rückschritte nach dem update, welches ich heute gegen 17.Juli - 22:00 durchgeführt habe:

  • Die Diagramme werden gefühlt doppelt so groß angezeigt und sind gleichzeitig nicht scrollbar. Wenn plotEmd auf 1 steht, dann sehen die Diagramme wieder toll aus.
  • Der Callmonitor ist schlecht lesbar, alles in einer Spalte, die knapp 8mm breit ist; auf einem großen Bildschirm nimmt er die ganze Bildschirmseite ein, wobei Überschriften und Inhalt nicht übereinander stehen.
  • Die Karte im Blitzer-Modul ist jetzt vorhanden, jedoch wird nur ca. 5% der zur Verfügung stehenden Fläche ausgenutzt, der Rest ist grau
Die Probleme sind alle behoben.

Zitat von: Icinger am 18 Juli 2019, 15:10:11
Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?
Erledigt. Ich habe es jetzt für beides so implementiert, dass so weit runter gescrollt wird, dass man noch die Buttons sieht. Und ich habe eine Lösung gefunden, dass das attr-Feld immer oberhalb der Attributes-Tabelle ist.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Gisbert

Hallo Sebastian,

du hast nicht zuviel versprochen - es sieht jetzt toll aus, deine Lösung ist noch besser, als ich sie erwartet habe.

Vielen Dank, du hast echt was geleistet - und die vielen anderen Entwickler selbstverständlich auch - aber hier geht es um deine Beiträge.
Thumbs up, leider gibt es kein passendes Smiley dafür.

Viele, herzliche Grüße
Gisbert
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY