FTUI version 3

[setstate]

---------  Achtung ------------

das Update von 01.09.2024 sollte nicht ungesehen auf Prod Systemen ausgerollt werden. Es gibt sehr viele Änderungen bezügliche der Größen Angaben, die die UI plötzlich total verschoben aussehen lassen.
Ihr solltet das erst in einem Testsystem einspielen und die Änderungen vornehmen.

Hintergrund war, ich habe darauf umgestellt, dass bei einer UI, die unter iOS läuft, auch die Text Größe des Systems übernommen wird. Wenn man also in den iOS System Settings auf Text: 120% gestellt hat, sieht die Schriftgröße in der mobilen FTUI Seite genau so groß aus und ändert sich automatisch mit. Siehe mobile_full.html

Dadurch ergeben sich viele Änderungen, die leider gemacht werden müssen im HTML, damit es wieder gut aussieht.

Änderungen, die ich Machern musste sieht man schön in den Examples im Commit:

https://github.com/knowthelist/ftui/commit/3608022c0f41340bbea68960492ef3a066655997#diff-1e2f5bed36f58db1b07453ca3f150fcbad4016c7c7c35c6fc3c1ae2f472a6f40

[normen]

---------  Achtung ------------

das Update von 01.09.2024 sollte nicht ungesehen auf Prod Systemen ausgerollt werden. Es gibt sehr viele Änderungen bezügliche der Größen Angaben, die die UI plötzlich total verschoben aussehen lassen.
Ihr solltet das erst in einem Testsystem einspielen und die Änderungen vornehmen.

Das kann ich bestätigen. Auf meinem iPhone und iPad sind die Fonts jetzt alle hoffnungslos zu groß, ich habe aber keine besonderen Einstellungen in iOS dazu und wüsste gar nicht wie ich den Text in FTUI jetzt kleiner kriegen soll, sogar Größe "1" ist zu groß. Muss ich jetzt auf explizite Einheiten in em umsteigen? Oder kann man irgendwie die Basisgröße einstellen?

Edit: Das kann doch alles nicht richtig sein, die Zahlen in einem ftui-knob sind viel zu groß, und das mit den Standard iOS Einstellungen und ohne dass ich auf die Fontgröße eingehe im HTML tag...? 

Edit2: Und alle icons sind zu klein und kaum erkennbar..?

Edit3: Hab mal ein vorher-nachher angehängt, das mit den roten Feldern ist vorher..

Edit4: Also der Sprung von icon size "0" zu icon size "1" kommt mir verdächtig groß vor..

Edit5: Auf MacOS sind die Icons klein aber die Fonts nicht zu groß, d.h. der ftui-knob sieht normal aus. Wenn ich die Größe anpasse wird auf MacOS alles zu klein, irgendwas passt da nicht.

Edit6: Wenn ich auf iOS die Textgröße auf ganz klein stelle (in den iOS Einstellungen) dann sieht es auf MacOS und iOS gleich aus. Die Default-Einstellung ist aber auf "Mitte".

[grossmaggul]

Mir geht es ähnlich, ich weiß jetzt gar nicht an welcher Schraube ich drehen muss, um die Fontgrößen wieder "normal" zu bekommen, da ich in meinen Seiten nirgendwo die Fontgrößen verstellt habe.

[setstate]

Am besten noch garnicht updaten. 100% durchgestochen ist die Änderung bestimmt noch nicht. Grid Kacheln auf iOS habe ich noch garnicht getestet. Da muss bestimmt ein der einen oder anderen Stelle feingetuned werden. Ich wollte nur erstmal die duzende Files, die ich geändert habe, hochladen. Nicht dass alles verloren geht.

[grossmaggul]

Am besten noch garnicht updaten.

Das schreibst Du jetzt.

[Dracolein]

Am besten noch garnicht updaten.

Das schreibst Du jetzt.

Mein Reden. Ich habe grade wie so oft ein "update all" durchgeführt und jetzt ist mein gesamtes UI vollständig "im Eimer".

Wie kann ich das wieder rückgängig machen? Hilfe!

[grossmaggul]

Wie kann ich das wieder rückgängig machen? Hilfe!

Ich denke nur, wenn Du ein Backup hast.

[Dracolein]

restore update/2024-09-03

danke an die FHEM Basics, die mir grade den Arsch gerettet haben.

[normen]

Wie kann ich das wieder rückgängig machen? Hilfe!

Ich denke nur, wenn Du ein Backup hast.

Man kann in Github auch entweder den Commit davor auschecken oder in der Weboberfläche auf den Stand gehen und eine Zip herunterladen.

[normen]

Ich habe einen besseren fix für die, die automatische updates in FHEM benutzen:

Code Auswählen Erweitern

update delete https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
update add https://raw.githubusercontent.com/knowthelist/ftui/2deba39b47c41dc864af2b00c12b5e7064813d03/controls_ftui.txt
update

Voila - auf dem stand vor dem letzen update

Um später wieder zurück zum "master" zu gehen das ganze mit umgekehrtem delete/add

[grossmaggul]

Danke Dir, das klappt so!

[Sailor]

Moin tosammen

OK, verstanden.

Was muss ich also machen, wenn meine alte Zeile

Code Auswählen Erweitern

<ftui-label [text]       = "UI_DepartureDollern:departure_1_number"    class = size-2></ftui-label>
wieder auf die alte Größe zurück schrumpfen will?
Muss ich überall im Code alle Angaben wo "size-2" steht, auf "size-1" ändern?

Gruß
    Sailor

PS: Büdde, Büdde nächstes Mal ein solches Update mit Vorwarnung. Danke!

[Gasmast3r]

Hy hatte das Update gemacht und size-1 größer als normal size--1 kleiner als normal damit konnte ich dann alles wieder in eine tragbare Größe ändern.

[setstate]

Ja, man muss alles anfassen, kleiner oder größer machen, damit es wieder passt.
Beispiele:

Code Auswählen Erweitern

<!-- vorher -->
<ftui-icon name="window-shutter" class="size-4"></ftui-icon>
<!-- nachher -->
<ftui-icon name="window-shutter" size="3"></ftui-icon>

ftui-icon und ftui-label kennt das size-Attribute, deshalb class="size-X" weg und size="3" (eins weniger). class="size-X" kann man sich für andere Elemente aufsparen, wenn man z.B. ganze Blöcke auf einmal größentechnisch festlegen will. Zum Beispiel so:

Code Auswählen Erweitern

  <ftui-grid shape="round" class="size-6" responsive>

    <ftui-grid-tile height="3" width="1" color="blue">3x1</ftui-grid-tile>
    <ftui-grid-tile height="2" width="2" color="red">2x2</ftui-grid-tile>
    <ftui-grid-tile height="1" width="3" color="blue">1x3</ftui-grid-tile>
    <ftui-grid-tile height="1" width="1" color="red">1x1</ftui-grid-tile>

  </ftui-grid>
Durch das class="size-6" bei ftui-grid bekommt alles, was innerhalb des ftui-grid ist, riesige Schrift. Dann braucht man das nicht bei jedem label/text einzeln angeben.

Code Auswählen Erweitern

<!-- vorher -->
          <ftui-label id="co2" size="5">CO²</ftui-label>
          <ftui-label size="7" [text]="WCLuft | part(1) | toInt()">
            <span slot="unit" class="size-2">ppm</span>
          </ftui-label>
<!-- nachher -->
          <ftui-label id="co2" size="4">CO²</ftui-label>
          <ftui-label size="4" [text]="WCLuft | part(1) | toInt()">
            <span slot="unit" class="size--1">ppm</span>
          </ftui-label>
size von 5 auf 4, size von 7 auf 4 (weil es mir so dann einfach besser gefiel).
Aber hier - Achtung (das kam häufig vor): span im unit-slot vom Label passen jetzt alle nicht mehr. Vorher bezogen sich die Angaben auf die Größe des Body. Jetzt bezieht sich die Größe immer auf den Parent. Also wenn wenn das Label Size="4" (2em) hat, bekommt die Unit (%, ppm o.ä.) bei class="size-2" (1.5em) dann 150% von 2em -> 3em.
Ich möchte die Einheit meist kleiner haben als den Wert, also muss man jetzt class="size--1" (-1 = 0,75em = 75%) angeben. 


Man kann size bei ftui-label und ftui-icon aber auch in %, px, em oder rem angeben, und muss nicht unbedingt die size Tabelle benutzen, die hinterlegt ist.

| size | font-size  |
|------|------------|
|-4     | 0.125em  |
|-3     | 0.25em    |
|-2     | 0.5em      |
|-1     | 0.75em    |
|0      | 1em         |
|1      | 1.25em    |
|2      | 1.5em      |
|3      | 1.75em    |
|4      | 2em         |
|5      | 2.5em      |
|6      | 3em         |
|7      | 3.5em      |
|8      | 4em         |
|9      | 5em         |
|10    | 10em       |
|11    | 11em       |
|12    | 12em       |

[x86]

setstate, erstmal vielen vielen Dank für deine unermüdliche Arbeit an ftui-v3! Es ist ja erstmal ein gutes Zeichen, wenn bei einem solchen Projekt (auch unverhofft) größere Updates kommen, und ich glaube ich spreche für sehr viele, wenn ich dir für die Zurverfügungstellung dieses fantastischen Frameworks ganz herzlichen Dank ausspreche!!

Jedoch - ... auch ich war durch ein regelmäßiges "update all" sehr überrascht von der Änderung, die bei mir ebenfalls diverse Layouts zerschossen hat.     Halb so wild, ich hab auch Backups und könnte auch wieder zurück, aber ich möchte ja schon zukünftig auf dem korrekten "branch" sein und... durch deine Nachricht bin ich jetzt verwirrt.

Am besten noch garnicht updaten. 100% durchgestochen ist die Änderung bestimmt noch nicht. [...]

Man sollte noch nicht updaten heißt, es wird evtl. nochmal ein Update kommen, dass "von selbst" alles wieder so herrichtet, dass es mit normal eingestellter iOS-Schriftgröße wieder genauso aussieht wie vorher?

Oder sollte / müsste man auf jeden Fall die ganzen em-Größen in den eigenen Layouts nun anpassen?

Die Sache ist, dass ich bei etlichen Labels usw. bislang überhaupt keine explizite Größenangabe im Code brauchte, es hat (sowohl in einem Mobile-View als auch in einem Grid-View) eigentlich immer alles super gepasst. Was ich vermeiden möchte, ist natürlich, jetzt mit viel Aufwand an jedem einzelnen Label in meinen Views eine Größenangabe hinzufügen, was nach einem weiteren Update dann wieder rückgängig gemacht werden müsste...

Kannst du uns evtl. etwas "mitnehmen" auf deine Roadmap/deine zukünftigen Änderungspläne mit den nächsten Updates. Das wäre mega!

Vielen lieben Dank und viele Grüße!
Fabian