FTUI (verschiedene) Display-Auflösungen?

[oliverr]

Hallo zusammen,

habe mich mal daran gemacht, mich mit FTUI zu beschäftigen und es ist wirklich toll, was man damit machen kann. Vielen Dank dafür.

Irgendwie steige ich nicht durch, bzw. verstehe nicht, wie man die Anzeige-Auflösung an sein Tablet anpasst. Und wie ist es evtl. möglich mehrere Auflösungen für verschiedene Geräte-Auflösungen bereit zu stellen?
Wo kann man das gescheit und gut erklärt nachlesen oder kann es jemand gut erklären?
Evtl. wäre das noch was für die FAQ

Grüße,
Oliver

[Ajuba]

Ich bin selbst erst vor zwei Wochen eingestiegen und über das gleiche Problem gestolpert.
Obwohl die Dokumentation tatsächlich sehr knapp gehalten ist steht darüber sogar was ganz prominent am Anfang des Wikis unter "Konfiguration"
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI

widget_margin  1 bis 9999  Abstände der Gridsterelemente verändern. 
widget_base_width  1 bis 9999  Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern. 
widget_base_height  1 bis 9999  Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern. 

Außerdem kommt das im FAQ tatsächlich im Beispiel auch vor unter "Wie baue ich ein Menü mit dem Pagetab Widget auf?"
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ

Du legst dir also mal ein Raster zurecht

Code Auswählen Erweitern

  <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">



und definierst dann deine Felder folgendermaßen

Code Auswählen Erweitern

<li data-row="1" data-col="4" data-sizex="6" data-sizey="4">
   <header>EXAMPLE2</header>
   <!-- place your widget here -->
</li>


Wenn du es perfekt auf deinen Bildschirm anpassen willst musst du die Display Auflösung durch die gewünschten Felder dividieren und dann noch den Margin*2 abziehen.
Jeweils für Höhe und Breite und du hast deine "widget_base_width" und "widget_base_height".

ACHTUNG wenn du mit PageTab auf unterschiedliche Seiten springst, kannst du das Raster nur einmal im Index definieren. Das schlägt dann auf alle aufgerufenen Seiten durch.
Siehe dazu auch meine eigene Anfrage und die Antworten dazu:
https://forum.fhem.de/index.php/topic,61499.0.html

[oliverr]

Hi Ajuba,

hatte insgeheim gehofft das es einfacher geht
Habe mir eine Kleinigkeit in Excel zusammen gebaut, der das Berechnen übernimmt.

Und wenn ich es richtig woanders gesehen habe, muss man quasi für eine weitere Auflösung für ein anderes Device, die ganze Sache duplizieren in einem extra Verzeichnis.

Danke,
Oliver

[Lonie]

Ich weiß nicht genau wie es bei setstate mit der zukünftigen Entwicklung/Dokumentation voran geht. Mit etwas wissen im Bereich css kann man aber auch auf Flexbox umsteigen. Dabei entfällt der Bedarf mehrere ftui Instanzen für unterschiedliche Geräteklassen zu pflegen.

https://forum.fhem.de/index.php/topic,56460.msg479951.html

[derNeue]

Code Auswählen Erweitern

Wenn du es perfekt auf deinen Bildschirm anpassen willst musst du die Display Auflösung durch die gewünschten Felder dividieren und dann noch den Margin*2 abziehen.

also mein Display ist 1024 x 600 ich möchte 20 Felder haben....

1024:20=51,2 widget_base_width
600 : 20 = 30 widget_base_height

was ist denn jetzt Margin*2 abziehen ??

Danke

[Ajuba]

Der Margin (Rand) ist um jedes Feld außen rundherum und muss somit nach dem dividieren durch die Felder links und rechts (also 2 mal) bzw. oben und unten (also 2 mal) abgezogen werden.

Bei 2 pixel Margin heisst das

1024:20 -2x2=47,2 -> widget_base_width =47
600 : 20 -2x2= 26 -> widget_base_height =26

[derNeue]

das verstehe ich aber immer noch nicht.......

dann ist das 1200x600 Display ja nur
944x520.......ist das richtig ?

[Ajuba]

Warum jetzt auf einmal 1200 Breite? Vorher hast du noch 1024 geschrieben?

Trotzdem nochmals, jedes Gitterlement hat einen Rahmen rundherum. - Nicht nur außen!!!
Wenn du nur die "beschreibbare Fläche" berechnen willst hast du theoretisch recht. Aber selbst da stimmt deine Berechnung nur für die Höhe (26x20=520). Bei der Breite ist 47x20=940 und nicht 944. Da nun jedes Gitterelement noch außen rum den Rahmen hat zählst du bei jedem noch 2 mal (links und rechts) 2 Pixel dazu, also 20x4=80. 940+80 macht in Summe 1020. Die restlich fehlenden 4 Pixel kommen von Abrunden der 47,2.

Probiers einfach mal aus.

[derNeue]

Sorry, klar war es 1024

[derNeue]

gelöst