[GELÖST!] EINE FTUI-Oberfläche, versch Devices, VOLLE Displaybreite. Wie geht's?

Begonnen von DocCyber, 24 August 2016, 15:21:41

Vorheriges Thema - Nächstes Thema

DocCyber

Hallo Forum!

Ich komme nicht weiter, obwohl ich schon stundenlang gelesen habe.  :-[

Ich möchte eine FTUI-Oberfläche auf verschiedenen Devices verwenden.
Dabei soll jeweils die volle Display-Breite ausgenutzt werden.

Die Breite der FTUI-Oberfläche wird doch in index.html definiert, oder? Also z.B. so:
<meta name="viewport" content="width=device-width" > bzw
<meta name="widget_base_width" content="100">

Nun kann ich mich ja z.B. am WEBtablet via Port 8085 anmelden. Aber lege ich dadurch auch (zumindest indirekt) auch die Breite fest, die ich haben will?
Ich glaube nicht, denn FHEMWEB (also WEBtable, WEBphone,...) hat doch keinerlei Zuordnung zu einer bestimmten index.html?!  ???

Wie geht das also?
Kann mir jemand helfen?


Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

accessburn

Versuch mal das da:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Damit passen sich normalerweise Webseiten an die Displaygröße an.
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

DocCyber

Diese Zeile steht genau so bei mir drin.
Nutzt aber offenbar nix.
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

setstate

Mit Gridster gibt es keine automatische Breitenanpassung. Die wird fix beim Laden berechnet: widget_base_width X data-sizex.

Für einen anderen Bildschirm musst du eine zweite Seite basteln und die Maße anpassen.

Ich bin aber gerade dabei, einige neue CSS Klassen vorzubereiten, die mit CSS-Flexbox das etwas flexibler layoutbar machen.
Erstes Beispiel: https://forum.fhem.de/index.php/topic,56460.0.html

Immer die volle Breite, egal welcher Bildschirm. Auf einem kleinen Bildschirm (Telefon) ist es dann nur noch einspaltig.

Ich kämpfe aber noch mit den Details ... :o


DocCyber

Zitat von: setstate am 24 August 2016, 19:58:08
Für einen anderen Bildschirm musst du eine zweite Seite basteln und die Maße anpassen.

Und genau dabei kämpfe ich auch mit den Details. Wie geht das?

Natürlich baue ich für jedes Device eine separate index.html mit angepasstem Rastermaß. Die restlichen html-Dateien stehen an zentraler Stelle und gelten für alle Devices. So weit, so gut.
Aber wie bekomme ich die Verbindung hin zwischen z.B. Webtablet an Port 8085 und der zugehörigen index.html?
Wo und wie muss ich das definieren?
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

setstate

Port 8085 ist eine reine FHEMWEB Geschichte. Das kannst du auch in der fhem.cfg rausnehmen, wenn man das nicht benutzt, um Resourcen zu sparen.

Rufe deine mobile Seite einfach direkt mit Namen auf

http://fhemserver.local:8083/fhem/ftui/index_nav_mobil.html

DocCyber

Klar!!! Natürlich....!!! Darauf hätte ich selbst kommen müssen!!!!
Aber ich war so sehr auf WEBtablet usw fixiert, dass ich daran überhaupt nicht gedacht habe.  :-[  :-[  :-[

Vielen Dank!
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox