[FUIP] Resizable Views (Größe von Views manuell vorgeben)

[Thorsten Pferdekaemper]

Hallo,
bei einigen Views kann man in FUIP jetzt die Größe manuell ändern. Dadurch ergeben sich einige neue Gestaltungsmöglichkeiten, da man z.B. WeatherOverview und WeatherDetail gemeinsam in eine Zelle packen oder auch mehrere Charts in einer Zelle anordnen kann.
Dafür gibt es auf dem Konfigurations-Popup das Feld "resizable". Je nach View kann man dort "fixed", "auto" und "resizable" wählen:

• fixed: Der View legt seine Größe selbst fest. Das kann einfach eine feste Größe und Breite sein, aber auch je nach Inhalt unterschiedlich.
• auto: Der View nimmt den verbleibenden Platz in der Zelle ein. D.h. alles von seiner linken oberen Ecke bis zur rechten unteren Ecke der Zelle. Dabei ist es dem View (momentan) egal, ob er dadurch mit einem anderen View kollidiert.
• resizable: Wenn man diese Option wählt, dann erscheinen zwei weitere Felder mit der Breite und Höhe (in Pixeln). Prinzipiell kann man dort die gewünschte Größe eintippen. Man kann aber auch die Größe mit der Maus "ziehen". (Das Handle dafür ist manchmal schlecht zu sehen. In dem Fall am besten den editOnly-Modus benutzen.)

Diese Möglichkeit gibt es nicht für alle Views, sondern bisher nur für Batteries, Chart, Html, Title, WeatherDetail und WeatherOverview. Falls jemand das "resizable" für einen anderen View braucht, dann bitte Bescheid sagen.

Gruß,
   Thorsten

[ThomasReu]

Hallo Thorsten,

zunächst vielen herzlichen Dank, für Deine super Arbeit. FUIP ist wirklich gelungen!!

Ich kann zwar den Aufwand nicht abschätzen, und wahrscheinlich schlägst Du gleich die Hände über dem Kopf zusammen, dennoch würde ich mir die Funktionen "resizable" und "auto" für grundsätzlich alle Views wünschen, vorallem aber für Thermostat, Schutter (overview und detail).

Ein echtes Highlight wäre auch wenn bei "auto" die Views sich nicht überlagern sonderen nur den restlich verbleibenden Raum bis zur nächsten View einnehmen. Und das Element innerhalb der View horizontal und vertikal innerhalb des "auto"-Bereich zentriert ist. Zum Bsp. in der View "Html" wird zwar horizontal zentriert aber nicht vertikal, in der View "ReadingsGroup" ist die Tabelle "links-oben" ausgerichtet. Damit wirken die Tabellen (readingsGroup) im flex-layout beim drehen des Smartphone "in die Ecke gequetscht" aus.

Ich hoffe, mit dem Hinweis einen konstruktiven Beitrag geleistet zu haben und würde mich über die Umsetzung eines jeden einzelnen der o.g. Wünsche  sehr freuen.

Beste Grüße
Thomas

[willib]

Ich finde es super wie dein Projekt vorangeht. Ich wünsche mir noch die die Uhr als resizeable.

[Thorsten Pferdekaemper]

Hi,
das ist jetzt so viel auf einmal, dass ich das erst einmal sortieren muss. Im nächsten Beitrag werde ich dann anfangen, das ganze abzuarbeiten (also zumindest kommentieren). Also hier jetzt die Wunschliste, so wie ich sie verstehe:

1. "resizable" und "auto" für alle Views
2. "resizable"/"auto" für Thermostat
3. "resizable"/"auto" für ShutterControl
4. "resizable"/"auto" für ShutterOverview
5. Bei "auto": Überlappungen zu anderen Views vermeiden, also nur den Raum bis zum "nächsten" View einnehmen.
6. "Das Element" bei "auto" innerhalb der View horizontal und vertikal zentrieren
7. View "Html" ist bereits horizontal zentriert, sollte aber auch vertikal zentriert sein.
8. "resizable" für Clock View.

Gruß,
   Thorsten

[Thorsten Pferdekaemper]

So, jetzt fange ich mal an, nachzufragen und zu kommentieren.

1. "resizable" und "auto" für alle Views

Dummerweise müsste ich dafür auch jeden einzelnen View anfassen. Ich könnte da vielleicht einen allgemeinen Mechanismus bauen, der das einfacher macht, aber was dann genau passiert ist von View zu View unterschiedlich und für mich nicht so einfach zu überblicken. Außerdem ist mir nicht ganz klar, was im Allgemeinen die Erwartung wäre. In den meisten Fällen dürfte einfach der Platz um den eigentlichen Inhalt herum größer werden. Wenn man das will, dann kann man den View auch einfach verschieben und halt mehr Platz zwischen den Views lassen.
Daher werde ich das wahrscheinlich erstmal nicht für alle Views machen. ("nicht für alle Views" ist was anderes als "für alle Views nicht"...)

Bei den folgenden Punkten würde ich schon gerne was machen, aber ich weiß nicht so recht, was genau.

2. "resizable"/"auto" für Thermostat

Das Ding hat momentan zwei verschiedene Größen (normal und big). FTUI bietet laut Doku 5 Größen an (mini, small, normal, big, bigger). Das könnte ich einbauen, oder wird hier eine "freie" Größenangabe gewünscht? Das Problem dürfte dann sein, dass man auch die Schriftgrößen etc. anpassen muss. Zusammen mit der restlichen Seite könnte das dann schnell Kraut und Rüben werden.
Was genau ist hier die Erwartung für resizable/auto?
(Übrigens mag ich den Thermostat View gar nicht wirklich. Meiner Meinung nach ist die Bedienung auf dem Handy eine ziemliche Katastrophe. Ich muss da mal was neues bauen.)

3. "resizable"/"auto" für ShutterControl

ShutterControl besteht momentan aus 5 (bis 7) FTUI-Widgets. Wie sollen die sich zueinander verhalten, wenn der View vergrößert wird? Sollen sich die Abstände vergrößern, oder gar das Rollladen-Icon? Was ist mit den Tasten? Auch größer? Was soll passieren, wenn es kleiner gemacht wird?
...siehe oben: Was ist die Erwartung?

4. "resizable"/"auto" für ShutterOverview

Auch hier: Was soll das bringen? Das Icon würde dadurch auch nicht größer. ...oder ist das die Erwartung?

5. Bei "auto": Überlappungen zu anderen Views vermeiden, also nur den Raum bis zum "nächsten" View einnehmen.

Das hatte ich tatsächlich schon angefangen, aber ich bin auf ein paar Problemchen gestoßen und habe es dann erst einmal bleiben lassen. Wenn man z.B. einen anderen View unten rechts vom "auto" View hat, dann ist nicht klar, ob man dem "auto"-View erst einmal die volle Breite gibt und dann ein bisschen mehr Höhe oder erst einmal die volle Höhe und dann ein bisschen mehr Breite. Man könnte bestimmte Regeln einführen, wie z.B. möglichst die Fläche zu maximieren oder möglichst das Seitenverhältnis beizubehalten. ...man merkt schon, dass das kompliziert werden kann.
Jetzt kommt noch dazu, dass so eine Funktion kaum einen Zusatznutzen hat. Es kommt nur darauf an, wo die linke obere Ecke der anderen Views ist. Das ist aber konstant, selbst wenn sich die Zellengröße dynamisch verändert (bei Layout "flex"). D.h. man kann einfach auf "resizable" schalten und die Größe entsprechend anpassen. Klar, es ist "netter", wenn das System das übernimmt, aber so viel bringt's halt nicht.
...oder gibt es hier andere Erwartungen, als ich vermute? 

6. "Das Element" bei "auto" innerhalb der View horizontal und vertikal zentrieren

Das ist aber oft nicht so sinnvoll. Z.B. bei Batteries, WeatherOverview und WeatherDetail passt sich der View komplett an die verfügbare Größe an. D.h. das bringt's dann nur bei Views, die zwar "auto" können, aber nicht so richtig. (Jetzt sind wir wieder bei den Erwartungen...) Im Prinzip ist das auch nur sinnvoll, wenn man Layout "flex" hat und die Zelle mehr Platz bekommt, als man beim Anlegen/Ändern festgelegt hat. Müsste man da nicht den kompletten Inhalt der Zelle zentrieren?
So etwas hatte ich übrigens schon, aber es kam dann vor, dass man auf dem Handy deshalb scrollen musste. ...aber das muss ich mir vielleicht nochmal ansehen.
Was ist eigentlich mit "das Element" gemeint? Im Allgemeinen besteht ein View aus mehreren Widgets, und die bestehen oft aus mehreren (HTML/DOM-)Elementen.
Wieso eigentlich nur bei "auto" und nicht "resizable"?
 

7. View "Html" ist bereits horizontal zentriert, sollte aber auch vertikal zentriert sein.

Das ist zentriert? ...muss ich mir mal anschauen. Im Prinzip ist die Idee beim Html View, dass man sowas selbst macht. ...aber ich schau mir mal an, was man dafür machen müsste. (Aber siehe auch 6.)

8. "resizable" für Clock View.

Was ist hier die Erwartung? Möglicherweise soll auch die Schrift größer/kleiner werden? ...oder sogar die Datums-Zeile wegfallen, wenn kein Platz ist? Ansonsten ist es doch witzlos, oder?

Gruß,
   Thorsten

[willib]

zu 8:
Ich hatte es so verstanden dass immer der Inhalt und oder die Schrift größer wird. Ansonsten ist es in der Tat witzlos.
Das Datum muss nicht automatisch verschwinden. Ich fände da eine Option am view "mit oder ohne Datum" besser.
Nach wie du meinst.
Danke.

[Thorsten Pferdekaemper]

Hi,
das Folgende ist zu den Punkten 6 und 7.

Und das Element innerhalb der View horizontal und vertikal innerhalb des "auto"-Bereich zentriert ist.

Wie schon angedeutet glaube ich, dass man das nicht wirklich allgemein lösen kann. Außerdem dürfte es im Allgemeinen nicht die von Dir gewünschte Wirkung haben. (Erklärung folgt.)

Zum Bsp. in der View "Html" wird zwar horizontal zentriert aber nicht vertikal,

Nein, wird eigentlich nicht. Es sitzt nur im FTUI für das body-Tag "text-align:center". Das bewirkt, dass Texte zentriert werden. Wenn man sich aber z.B. einen HTML-View mit einem <div> einer fixen Größe baut, dann wird das überhaupt nicht zentriert. (Man kann das aber relativ leicht selbst im HTML machen.)

in der View "ReadingsGroup" ist die Tabelle "links-oben" ausgerichtet. Damit wirken die Tabellen (readingsGroup) im flex-layout beim drehen des Smartphone "in die Ecke gequetscht" aus.

Ich habe mir mal das ganze zwei Stunden lang betrachtet und ein bisschen was ausprobiert. Die Lösung dazu ist meiner Meinung nach gerade nicht "sizing=auto" und dann drinnen zentrieren. Das Problem ist ja eigentlich nicht, dass der View innerhalb "seines Bereiches" zentriert sein müsste, sondern dass sich der zusätzliche Platz durch das "Wachsen" der Zelle gleichmäßig um den angezeigten Bereich verteilen müsste. Wenn man nur einen View in der Zelle hat, dann ist das Ergebnis dasselbe, aber bei mehreren Views könnte ja nur einer (wirklich) "auto" haben und nur dessen Inhalt würde dann zentriert.
Die bessere Lösung wäre meiner Meinung nach in etwa so: Wenn kein View "auto" ist (zumindest bei der momentanen Implementierung von "auto"), dann müsste der zusätzliche Platz gleichmäßig rechts und links verteilt werden. (Vertikal ist egal, da das verwendete Flexbox-Modell nur horizontal wächst und schrumpft.)
Ich denke, dass ich das mal probieren werde.

Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
ich habe mal was gebastelt...
Im Flex-Layout wird jetzt der zusätzliche Platz bei "wachsenden" Zellen gleichmäßig auf links und rechts verteilt. (Nur wenn kein View sizing=auto hat, siehe unten.) D.h. alles, was im Änderungsmodus zentriert ist, bleibt auch zentriert, wenn die Zellen mehr Platz bekommen. Dabei bleiben aber die Positionen der Views in einer Zelle zueinander erhalten. ...ok, vielleicht ein bisschen umständlich zu erklären. Probiert's halt mal aus.
Jetzt zu der Sache mit dem "sizing=auto": In dem Fall soll der View ja gerade auch den zusätzlichen Platz bekommen. Oder anders: Es bleibt gar kein Platz übrig, den man verteilen könnte. D.h. wenn mindestens ein "auto-View" in der Zelle ist, dann bleiben die Views links kleben.

Ich denke mal, dass sich dadurch ein bisschen der Punkte 6 und 7 erledigt hat. Vielleicht sogar auch ein paar Sachen vom Rest. Wenn ich keine Rückmeldung zu den Punkten 1 bis 7 bekomme, dann gehe ich davon aus, dass alles erledigt ist. (Punkt 8, also die Uhr, schaue ich mir noch an.)

Gruß,
    Thorsten

[Thorsten Pferdekaemper]

Hi,
zu Punkt 8 (die Uhr):
Das Ding kann jetzt auto und resizable. Die Schriftgröße geht automatisch mit. Bitte mal ausprobieren.
Gruß,
   Thorsten

[ThomasReu]

Hallo Thorsten,

herzlichen Dank für die schnelle Umsetzung!

Du hast völlig richtig erkannt meine Wünsche bezogen sich ausschliesslich auf das flex-Layout und "ja" mir ging es primär um die gleichmäßige Verteilung der Freiräume um das Widget herum wenn sich die Platzverhältnisse beim drehen des Smartphone von Hoch- nach Querformat ändern. So daß ich mit den aktuellen Anpassungen mehr als nur zufrieden bin. DANKE

Punkt 1 - 4, 6 und 7 sind damit erledigt.

Dennoch ein Hinweis zu Thermostat und Shutter. Ich finde den Thermostaten garnicht so unglücklich. Ich habe mir eine View mit dem "kleinen" Widget Thermostat als "readonly" gebastelt und darein ein PopUp konfiguriert mit dem "grossen" Widget plus einer PickListe für den ControlMode (auto, manuell usw.) funktioniert auch auf dem Handy super und man erkennt eben auch direkt an dem typischen Thermostat-Design was dahinter steckt. Gleiches für Shutter: ShutterOverview nur als Statusanzeige einmal anklicken öffnet PopUp mit ShutterControl. Somit verhindert man auch das direkte auslösen einer Aktion falls man mal versehentlich nur das Display berührt hat. Aber das ist persönliche Bedienphilosophie und nur als Hinweis zu verstehen.

zu Punkt 5.: Da muss ich mir auf Basis Deiner Hinweise und den jetzt gegeben Anpassungen das Verhalten noch einmal ansehen, eventuell ist auch der Punkt erledigt, ich gebe Dir dann eine Rückmeldung.

Nochmals Danke!
Thomas

[Thorsten Pferdekaemper]

[...]So daß ich mit den aktuellen Anpassungen mehr als nur zufrieden bin. DANKE

Bitteschön!

Dennoch ein Hinweis zu Thermostat und Shutter. Ich finde den Thermostaten garnicht so unglücklich. Ich habe mir eine View mit dem "kleinen" Widget Thermostat als "readonly" gebastelt und darein ein PopUp konfiguriert [...]

Das mit dem Popup hatte ich mir auch schon überlegt. ...und Du hast auch Recht, dass das Ding gut aussieht. Ich habe nur Probleme damit, die Soll-Temperatur einzustellen. Man (zumindest ich) muss immer mindestens dreimal draufklicken, bis es die gewünschte Temperatur hat.

Gruß,
   Thorsten

[ThomasReu]

Hallo Thorsten,

habe nun auch noch etwas mit readingsGroup experimentiert. Mit Deinen "neuen" Änderungen UND den Hinweisen von Dir zum Verhalten habe ich jetzt für all meine Views Lösungen gefunden und bin völlig zufrieden. DANKE! (machmal hilft eben auch nur ein gutes Gespräch  )

Besten Dank
Thomas

[Thorsten Pferdekaemper]

Mit Deinen "neuen" Änderungen UND den Hinweisen von Dir zum Verhalten habe ich jetzt für all meine Views Lösungen gefunden und bin völlig zufrieden.

Das freut mich!
Könntest Du mal einen Screenshot von Deiner Oberfläche hier reinstellen und auch die FUIP_....cfg-Datei anhängen?
Gruß,
   Thorsten

[ThomasReu]

Ja sehr gerne, wenn es Dir bei der weiteren Entwicklung von FUIP hilft! Ist allerdings noch eine Baustelle, ich bin noch beim Gestalten.

Ein Hinweis noch. Ich glaube beim Shutter Control hat sich ein kleiner Bug eingeschlichen. Ich meine, das Überlappen von Pfeilsymbol und Wert in der PickListe hat es in der Version vor Deinen Anpassungen nicht gegeben (siehe Screen "OG mit PopUp Shutter..."). Oder liegt es an meiner Konfiguration?

Beste Grüße
Thomas

[ThomasReu]

Nachtrag:

... das ist meine UI für das Smartphone, d.h. das Menue ist in der "Normalansicht" nicht sichtbar und funktioniert bei mir in Hoch- und Querformat.