TabletUI für Tablet und Smartphone

Begonnen von benz_freak, 03 März 2016, 12:17:41

Vorheriges Thema - Nächstes Thema

benz_freak

Hallo zusammen,
ich würde gerne FTUI für mein 14Zoll Tablet und eine für mein Handy bauen.
eine Möglichkeit wäre das mit dem template-Modul http://forum.fhem.de/index.php/topic,43110.0.html zu machen.
Ist mir aber auf dem ersten Blick zu kompliziert und ich brauche nicht die ganzen Infos vom Tablet auf dem Handy.

1. Wie habt ihr das gemacht?

2. Wie installiere ich eine zweite FTUI Instanz und wird die dann auch upgedatet mit
update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

MFG Benny

oggy

Ich habe es Quick-n-dirty mit einer anderen index-Datei gelöst.

Tablet-Seite --> https://192.168.1.2:8083/fhem/ftui/
Smartphone-Seite --> https://192.168.1.2:8083/fhem/ftui/#index_m1.html

roman1528

Moin.

Die Möglichkeit von oggy ist gut. Aber was machst du wenn du tatsächlich mehrere Seiten darstellen möchtest?

Ich nutze FTUI auch auf Tablet und Smartphone. Mit PageTab-Widget!!!

Dazu habe ich neben /www/tablet den Ordner /www/mobile angelegt. Dort sind die HTML-Dateien für's Smartphone drin. Sowie (/mobile/css) eine *-user.css für's Smartphone (geänderte Abstände usw. weil alles etwas kleiner ist) und (/mobile/images) für Smartphonespezifische Bilder wie z.B. ein Hintergrundbild. Ansonsten greift die "Mobile-UI" auf die gleichen /css, /lib, /fonts und /js zu wie die "Tablet-UI"...

Die Anpassung an die Auflösung habe ich (bei Tablet und Smartphone) wie folgt gemacht.

- Ein Hintergrundbild in der passenden Auflösung gesucht/erstellt (Passende Auflösung (Darstellungs- oder Css-Auflösung) ist nicht immer gleich der Bildschirmauflösung!!!)

- Die "widget-base-width" und "widget-base-height" so lange angepasst bis man einen einigermaßen gleichmäßigen Außenrand hat. Dabei ist drauf zu achten, Das pro gridster-Element wenigstens 1 (ein) Botton/Switch/Symbol vernünftig Platz hat. Vorher eventuell mit der x- und y-Anzahl der gridster-Elemente jonglieren.

Du kannst dir dazu MEIN FTUI (siehe Signatur) anschauen. Dort sind beide Versionen in eine .ZIP verpackt. Wenn man sich etwas durch die <head>-Tags in den jeweiligen index.html durchworschtelt kommt man drauf. Eventuell als Demo installieren in einem extra-Ordner.

Viel Spaß^^

Grüße^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

FhemPiUser

ich habe eine gemeindame index.html, die per javascript abfragt, ob es ein handy oder tablet ist und dann entsprechend das grid anpasst. du findest den code in dem demo thread...

oggy

Zitat von: roman1528 am 03 März 2016, 20:11:38
Aber was machst du wenn du tatsächlich mehrere Seiten darstellen möchtest?

Ich nutze FTUI auch auf Tablet und Smartphone. Mit PageTab-Widget!!!

bei mir ist die index.html, die Tablet-Version und die index_m1.html ist meine Smartphone-Version. Wenn ich die Smartphone-Version wie oben aufrufe, holt er sich die Gridster-Einstellungen zwar von der Tablet-Version, zeigt dann aber die mobile Version an. In der index_m1.html verweise ich per PageTab-Widget nur auf die mobilen Seiten und umgekehrt in der index.html nur auf die Tablet-Versionen

Eine extra mobile Gridster-Version habe ich aufgegeben, da ich 4 unterschiedliche Darstellungen auf meinen Geräten hatte. Die 3 Tablets und beide Handys zeigen die Seiten jeweils unterschiedlich an. Ich habe mir dann eine Zellen-Auflösung rausgesucht, die bei allen passt und dann dementsprechend nur die Anzahl der Reihen und Zeilen angepasst. ... wie immer führen viele Wege nach Rom. :)

roman1528

Zitat von: oggy am 04 März 2016, 09:35:37
bei mir ist die index.html, die Tablet-Version und die index_m1.html ist meine Smartphone-Version. Wenn ich die Smartphone-Version wie oben aufrufe, holt er sich die Gridster-Einstellungen zwar von der Tablet-Version, zeigt dann aber die mobile Version an. In der index_m1.html verweise ich per PageTab-Widget nur auf die mobilen Seiten und umgekehrt in der index.html nur auf die Tablet-Versionen

Eine extra mobile Gridster-Version habe ich aufgegeben, da ich 4 unterschiedliche Darstellungen auf meinen Geräten hatte. Die 3 Tablets und beide Handys zeigen die Seiten jeweils unterschiedlich an. Ich habe mir dann eine Zellen-Auflösung rausgesucht, die bei allen passt und dann dementsprechend nur die Anzahl der Reihen und Zeilen angepasst. ... wie immer führen viele Wege nach Rom. :)

Geil!
Würde ich mein Smartphone im Landscape nutzen... Beste Lösung^^ auf jeden fall!

Aber da ich auch von unterwegs darauf zu greifen kann (Dyn-DNS / Basic-Auth) und man dann häufig nur eine Hand frei hat habe ich meine "Mobile-FTUI" im Portrait Modus gestaltet... Da passt deine Vorgehensweise leider nicht -.-
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

benz_freak

Danke für eure Antworten ich werde mich mal am WE daran machen.
Ich werde Romans vorlagen nutzen schön das da auch die fhem.cfg dabei ist das macht es leichter.
Nochmals Herzlichen Dank euch beiden

MFG Benny

SirMarco

Zitat von: FhemPiUser am 03 März 2016, 21:30:04
ich habe eine gemeindame index.html, die per javascript abfragt, ob es ein handy oder tablet ist und dann entsprechend das grid anpasst. du findest den code in dem demo thread...

Der Code würde mich interessieren  ;) Welchen Demo Thread meinst du?

FhemPiUser

ich habe nur eine index.html für mobile und tablet, da ich nicht zwei versionen pflegen wollte. ich frage per javascript in der index.html zu beginn ab, ob es ein smartphone oder ipad browser client ist. enstprechend passt er dann die gridster anordnung von jedem "<li data-row / data-col" an. bei einem smartphone alles nur untereinander mit maximal sizex=2, bei einem tablet nebeneinander und untereinander so, dass die breite des tablets optimal ausgenutzt wird...

SirMarco

Zitat von: FhemPiUser am 02 Mai 2016, 19:29:07
ich habe nur eine index.html für mobile und tablet, da ich nicht zwei versionen pflegen wollte. ich frage per javascript in der index.html zu beginn ab, ob es ein smartphone oder ipad browser client ist. enstprechend passt er dann die gridster anordnung von jedem "<li data-row / data-col" an. bei einem smartphone alles nur untereinander mit maximal sizex=2, bei einem tablet nebeneinander und untereinander so, dass die breite des tablets optimal ausgenutzt wird...

Klingt interessant. Magst du ein Beispiel posten?   8)

FhemPiUser


setstate

Dein Lösungsansatz gefällt mir sehr gut. Ich überlege schon die ganze Zeit, wie man das in eine allgemeine Funktion für FTUI gießen könnte.  8)