Tablet UI, Viewports und Android Tablets

Begonnen von zap, 06 Januar 2016, 21:25:52

Vorheriges Thema - Nächstes Thema

zap

Ich versuche gerade, eine UI mit Tablet UI aufzubauen. Die größte Herausforderung dabei ist, dass die Oberfläche Pixel genau auf dem Tablet dargestellt wird. Dabei muss man die CSS Pixelsize bzw. das Device CSS Pixelverhältnis kennen. Beim IPAD Air ist das 2, d.h. von den 2048 Pixeln Breite bleiben exakt 1024 für die Darstellung von Tablet UI übrig. Wenn man das berücksichtigt, bekommt man auf dem IPAD eine perfekte Pixel genaue Abbildung hin.

Da mir aber mein IPAD zu schade ist, es an die Wand zu hängen, habe ich 2 Android Tablets gekauft. Und damit fing das Drama an. Gleicher Ansatz: Device Pixel Verhältnis ermitteln. Das ist einmal 1.33 beim 7" Tablet und einmal 1.5 beim 10". Wieder eine Tablet UI Seite passend zu diesen Werten gebaut. Ergebnis: Müll. Seite wird zu groß oder zu klein dargestellt. Als Browser für den Kiosk Mode habe ich Lockdown und Dolphin getestet. Jeder Browser liefert andere Bildschirmauflösungen. Der viewport Tag in der Tablet UI Seite scheint völlig ignoriert zu werden.

Wie habt Ihr das bei Android gelöst? Welchen Browser setzt Ihr ein? Welche Lösungsansätze gibt es?
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

Gunther

Ehrlicherweise verstehe ich nur Bahnhof.

Soweit mir bekannt ist, musst Du nur mit der Auflösung spielen.

Hier mal Beispiele von mir:
    * - Denver TAD-70112 WiFi: 7 Zoll 800x480
    * -   Breite: 7 Felder / Höhe: 5 Felder
    * -    <meta name="widget_base_width" content="144">
    * -    <meta name="widget_base_height" content="112">
         * -    <meta name="widget_margin" content="1">

    * - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800
    * -   Breite: 9 Felder / Höhe: 5 Felder
    * -    <meta name="widget_base_width" content="138">
    * -    <meta name="widget_base_height" content="155">
         * -    <meta name="widget_margin" content="2">

Versuch einfach mal.
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

zap

Und das funktioniert bei Dir? Wie sieht der Viewport Tag aus? Initial-Scale=1?

Wenn ich diesem Ansatz folge, also die Auflösung des Tablets durch die Grid-Maße teile und entsprechend viele Kacheln definiere, wird das Layout im Tablet Browser entweder umgebrochen oder es wird so gezoomt (und dabei die Viewport Einstellungen ignoriert), dass es in das Fenster passt.

D.h. Tablet Auflösung ist 1280x800. Ich setze die Werte auf widget_base_width=144, widget_base_height=112, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width. Dann müsste ich also horizontal mindestens 8 Felder und vertikal 7 Felder unterbringen können. Funktioniert aber nicht, d.h. es wird umgebrochen oder eben soweit ausgezoomt, dass es passt (eigentlich dürfte der Browser bei den Viewport Einstellungen gar nicht zoomen.

m.E. kann das gar nicht funktionieren, da bei den mobilen Browsern Bildschirm-Pixel != Browser-Pixel sind (einfach mal nach viewport und tablet googeln). Die Browser-Auflösung ist immer um einen Faktor n (DevicePixelRatio) geringer als die physikalische Tablet-Auflösung (beim iPad Air 2 ist n=2). D.h. auf meinem Tablet mit 1280 Pixeln physikalischer Breite und DevicePixelRatio=1.3 bleiben für das Layout noch 984 Pixel horizontal. Bei einer widget_base_width=144 ergibt das maximal 6 Felder.

So, beim iPad funktioniert diese Rechnung, bei den Android Tablets (einmal Samsung, einmal Huawei) nicht.

Welchen Browser verwendest Du unter Android?
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

math78

Hallo zap,

welche Einstellungen hast Du denn für Dein iPAD Air 2 genommen.

Danke Dir.

Matthias

Gunther

Zitat von: zap am 07 Januar 2016, 08:03:44
Und das funktioniert bei Dir? Wie sieht der Viewport Tag aus? Initial-Scale=1?

Wenn ich diesem Ansatz folge, also die Auflösung des Tablets durch die Grid-Maße teile und entsprechend viele Kacheln definiere, wird das Layout im Tablet Browser entweder umgebrochen oder es wird so gezoomt (und dabei die Viewport Einstellungen ignoriert), dass es in das Fenster passt.

D.h. Tablet Auflösung ist 1280x800. Ich setze die Werte auf widget_base_width=144, widget_base_height=112, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width. Dann müsste ich also horizontal mindestens 8 Felder und vertikal 7 Felder unterbringen können. Funktioniert aber nicht, d.h. es wird umgebrochen oder eben soweit ausgezoomt, dass es passt (eigentlich dürfte der Browser bei den Viewport Einstellungen gar nicht zoomen.

m.E. kann das gar nicht funktionieren, da bei den mobilen Browsern Bildschirm-Pixel != Browser-Pixel sind (einfach mal nach viewport und tablet googeln). Die Browser-Auflösung ist immer um einen Faktor n (DevicePixelRatio) geringer als die physikalische Tablet-Auflösung (beim iPad Air 2 ist n=2). D.h. auf meinem Tablet mit 1280 Pixeln physikalischer Breite und DevicePixelRatio=1.3 bleiben für das Layout noch 984 Pixel horizontal. Bei einer widget_base_width=144 ergibt das maximal 6 Felder.

So, beim iPad funktioniert diese Rechnung, bei den Android Tablets (einmal Samsung, einmal Huawei) nicht.

Welchen Browser verwendest Du unter Android?

nutze webviewcontrol

bei meinen Tablets passt die Auflösung 1:1
habe gar kein scale drin
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

zap

#5
Dann scaled eben Webview Contol automatisch, wobei ich das nicht haben möchte, da sonst einige Elemente ggf. zu klein dargestellt werden (meine alten Augen können nicht mehr so wie früher ;-)

Beim IPAD Air 2 ist die CSS Auflösung 1024x768 (wie auch bei den anderen "normalen" iPADs). D.h. wenn man ein FTUI Layout auf 1024x768 auslegt, passt das bei initial scale = 1 optimal auf das Display (ohne zoom, ohne Scrollen oder umbrechen).

Hier gibt es eine Übersicht der CSS Auflösungen verschiedener Tablets: http://www.canbike.org/CSSpixels/

Man kann die CSS Auflösung bzw. die DevicePixelRatio (Verhältnis zwischen physikalischer und CSS Auflösung) mit folgender kleinen HTML-Datei ermitteln:


<html>
<head>
</head>
<body>
<h1>Test</h1>
<a href="javascript:window.alert(window.devicePixelRatio)">Device Pixel Ratio</a><br/>
<a href="javascript:window.alert(window.screen.availHeight)">CSS BrowserHeight</a><br/>
<a href="javascript:window.alert(window.screen.availWidth)">CSS BrowserWidth</a>
</body>
</html>


Einfach die Links anklicken. Dann wird der entsprechende Wert angezeigt.

Um eine optimale 1:1 Darstellung zu erhalten, muss man neben den Werten widget_base_width und widget_base_heigt auch widget_margin einbeziehen. Zwischen einzelnen Grid-Feldern ist der Abstand = 2*widget_margin. Am Rand 1*widget_margin. Auch wenn ein Grid-Feld sich über 2 Felder erstreckt, ist der Abstand enthalten. Dem body-Tag sollte man folgende Attribute spendieren, damit nicht ein zusätzlicher Rand entsteht:

<body topmargin="0" leftmargin="0" margin="0">

Die Auflösung einer FTUI Seite bei gegebener Grid-Größe (widget_base_...), Anzahl Felder (grids_xy) sowie Grid-Abstand (widget_margin) kann man wie folgt berechnen:


XRES = widget_base_width * grids_x + (2+2*(grids_x-1)) * widget_margin
YRES = widget_base_height * grids_y + (2+2*(grids_y-1)) * widget_margin


XRES und YRES beziehen sich auf die CSS-Auflösung, nicht die physikalische. Lässt sich natürlich mit kleiner Umformung auch verwenden, um die Grid-Width zu bestimmen, wenn man eine Auflösung optimal ausnutzen möchte:


widget_base_width = (XRES - (2+2*(grids_x-1)) * widget_margin)/grids_x
widget_base_height = (YRES - (2+2*(grids_y-1)) * widget_margin)/grids_y


Das Ergebnis auf die nächste ganze Zahl abrunden.

P.S. mit "rumspielen" bis es passt habe ich es nicht so. Hinter den meisten Dingen steckt eine gewisse Logik oder Systematik
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

math78

Hallo zap,

Danke für Deine Infos.

Leider bin ich mit den Seiten-Einstellungen nicht so vertraut. 
Als Anhang mal meine Einstellungen (x-Achse 9 Felder, y-Achse 6 Felder):

<!DOCTYPE html>
<html>
<head>
        <title>HOME</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="114">
        <meta name="widget_base_height" content="128">
      <meta name="widget_margin" content="2">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=sho
rtpoll every 30sec -->
      <meta name="gridster_disable" content="1">
        <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
      
      <meta http-equiv='cache-control' content='no-cache'>
      <meta http-equiv='expires' content='0'>
      <meta http-equiv='pragma' content='no-cache'>

        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
      <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
      <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-tablet.css" />

        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
         <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
         <script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
         <script type="text/javascript">var wvcDevices = {'TAB3':'TAB3'}; var wvcUserCssFile="webviewcontrol.css"</script>
</head>

<body>
   
<div class="gridster">

<ul>

<li class="halbTransparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_home_button.html">
</li>

</ul>
</div>
     
</body>
</html>

Ist das OK so?

Zur Zeit habe ich zusätzlich das Problem, dass die Einstellungen bis vor ein paar Tagen soweit ganz gut aussahen, jedoch ohne dass ich etwas geändert habe, die Seite nun komplett auf der linken Seite untereinander dargestellt wird. Hast Du da auch eine Idee?????
Ich verzweifele langsam. Auf meinem IMAC sieht das Tablet UI in der vorgegeben Form ganz normal aus!!!

Danke!!!!!!!!!

zap

Wie gesagt: Die Darstellung und maximal verwendbare Auflösung sind vom Tablet abhängig. Das kann mit dem Desktop Browser super aussehen und auf dem Tablet ist es trotzdem Mist. Wenn Elemente untereinander angezeigt werden, deutet das darauf hin, dass der Browser einen automatischen Umbruch macht, d.h. Dein Layout zu breit ist.

Aufgrund Deiner Angaben ergibt sich eine Layout-Größe von mindestens 1062x792. Mindestens deshalb, weil Du im Body-Tag die Ränder nicht auf 0 gesetzt hast und je nach Browser damit noch einige Pixel dazu kommen.

Die Frage ist nun: Welche Auflösung hat Dein Tablet? Die kannst Du mit der HTML Datei aus meinem vorherigen Post ermitteln oder findest sie evtl. unter

http://www.canbike.org/CSSpixels/

An diese nutzbare Auflösung musst Du Dein Layout anpassen. Und Du solltest natürlich den Browser im echten Vollbild Mode ausführen, d.h. ohne die Android Status Leisten. Sonst verringert sich die nutzbare Auflösung nochmal um die Höhe dieser Leisten.
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

math78


Jens_B



Hallo Zap,
ich habe hier ein Acer Iconia 7 Zolle (physikalische Auflösung 1280x800) ) und ein iPad2. FTUI wird mit den Standardeinstellungen prima auf dem iPad angezeigt...
Ich dachte in meinem Unvermögen, prima das ipad hat 1024x768 wenn ich also jetzt ein 7Zoll Android mit 1280x800 kaufe, wird da auch alles komplett angezeigt (zwar kleiner aber komplett, als Kontrollschirm reicht es).
Pustekuchen, das 7 Zoll Android zeigt nicht die komplette Seite an. Genau wie deine Erfahrung es sagt.

Ich dachte ich bekomme eine Lösung hin, wie auf beiden Devices dieselbe Seite korrekt angezeigt wird. Geht wohl leider nicht.
Jetzt dachte ich mir, wenn man deinen Code irgendwie in die Seite einbaut (bloss wie?) und vorher abfragt um welches devices es sich handelt, könnte das doch klappen?

Gruß
Jens

RaspberryPi 4 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Shelly Devices
Fritz!Box 7590Ax

ekur

Hallo zap,

hier mal für Dich weitere Werte:
Ich verwende ein Samsung Tab 2 7Zoll als Anzeige, laut Produktseite hat das Gerät eine Auflösung von 1280 x 800.

Wenn ich Dein Script in eine HTML Seite packe und im Firefox mit Fullscreenerweiterung lade erhalte ich folgende Werte

DPR     1
CSS H  552
CSS W 1024

Die Werte passen irgendwie nicht zusammen. Mit DPR 1 sollte 1280*800 rauskommen, oder?
Ein weiterer Punkt  bei Android 4.4 könnte sein, dass im unteren Bereich ein kompletter Balken für die Googletasten drauf geht. Diese werden zwar beim FF im Fullscreenmodus ausgeblendet, aber der Bereich wird nicht zum Anzeigen der Seite verwendet, er wird einfach schwarz.

Das deckt sich dazu auch nicht  mit meinen Dateien, ich kann hier bei einer Widgetgröße von W90 und H115 mit Scalegrößen von 1.0 in der Breite genau 10 und in der Höhe 4 1/4 anzeigen, das wären dann also 900 mal 490 (wobei hier mit dem Googletastenbalken eventuell die 552 rauskommen könnten).
Webviewcontrol zeigt bei mir das gleiche an wie der FF, zoomt also nicht automatisch. Leider kann Webviewcontrol den Stream meiner Cam nicht anzeigen, die Androidtsten werden nicht ausgeblendet und die ganze Steuerung funktioniert auch nicht.
FHEM 5.8 auf Intel NUC, Visualisierung TabletUI auf Lenovo Tab10, Datenlogging MySQL
CUL_HM  HM-CC-RT-DN, HM-RC, HM-LC-BL1-FM, HM-PBI-4-FM, HM-SEC-SD, HM-SEC-SCo
ZWave
OWDevice:DS1420,DS18B20 an Intel NUC

zap

Zitat von: Jens_B am 25 Februar 2016, 07:51:14

Hallo Zap,
ich habe hier ein Acer Iconia 7 Zolle (physikalische Auflösung 1280x800) ) und ein iPad2. FTUI wird mit den Standardeinstellungen prima auf dem iPad angezeigt...
Ich dachte in meinem Unvermögen, prima das ipad hat 1024x768 wenn ich also jetzt ein 7Zoll Android mit 1280x800 kaufe, wird da auch alles komplett angezeigt (zwar kleiner aber komplett, als Kontrollschirm reicht es).
Pustekuchen, das 7 Zoll Android zeigt nicht die komplette Seite an. Genau wie deine Erfahrung es sagt.

Ich dachte ich bekomme eine Lösung hin, wie auf beiden Devices dieselbe Seite korrekt angezeigt wird. Geht wohl leider nicht.
Jetzt dachte ich mir, wenn man deinen Code irgendwie in die Seite einbaut (bloss wie?) und vorher abfragt um welches devices es sich handelt, könnte das doch klappen?

Gruß
Jens

In die Richtung gehen auch meine Überlegungen. Habe ein 7" und ein 10" Android Tablet mit unterschiedlicher Auflösung. Ich denke, die dynamische Anpassung der Grid-Größe bekommt man nur mit JavaScript und/oder PHP hin. Mit Javascript könnte man direkt beim Laden die Seitenelemente manipulieren (wird aufwändig). Mit PHP könnte man den UserAgent oder die IP des Tablets abfragen und in Abhängigkeit davon eine FTUI Seite generieren.

Momentan ist es so, dass die kleinste Auflösung mein Layout bestimmt und beim 10" Tablet eben ein freier Rand bleibt.
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

zap

#12
Zitat von: ekur am 25 Februar 2016, 08:44:27
Ich verwende ein Samsung Tab 2 7Zoll als Anzeige, laut Produktseite hat das Gerät eine Auflösung von 1280 x 800.

Wenn ich Dein Script in eine HTML Seite packe und im Firefox mit Fullscreenerweiterung lade erhalte ich folgende Werte

DPR     1
CSS H  552
CSS W 1024

Die Werte passen irgendwie nicht zusammen. Mit DPR 1 sollte 1280*800 rauskommen, oder?

Nein, die passen nicht. Hast Du das mal mit verschiedenen Browsern getestet? Bei einem 7" Tablet glaube ich nicht an DPR=1. D.h. die CSS-Resolution sollte korrekt sein. Bzgl. Statusleiste: Ab Android 5 gibt es den sog. Immersive Mode. Es gibt diverse Apps, die diesen aktivieren. Damit sollten die Leisten deaktiviert werden.

Bei der CSS-Height hätte ich 640 erwartet, da das Seitenverhältnis (in Deinem Fall 1,6) sich nicht ändern sollte. Ggf. wird hier bei der Abfrage die Höhe der Statusleiste abgezogen.
2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB

Jens_B

Zitat von: zap am 25 Februar 2016, 09:51:22

Momentan ist es so, dass die kleinste Auflösung mein Layout bestimmt und beim 10" Tablet eben ein freier Rand bleibt.

Damit könnt ich ja leben, aber zur Zeit wird halt auf dem kleineren trotz höherer Auflösung nicht alles angezeigt.
Jedenfalls nervt es mich etwas, das iPad war da wesentlich unkomplizierter;-) aber für ne reine Anzeige einfach zu teuer.

Gruß
Jens
RaspberryPi 4 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Shelly Devices
Fritz!Box 7590Ax

zap

Zitat von: Jens_B am 25 Februar 2016, 10:30:24
Damit könnt ich ja leben, aber zur Zeit wird halt auf dem kleineren trotz höherer Auflösung nicht alles angezeigt.
Jedenfalls nervt es mich etwas, das iPad war da wesentlich unkomplizierter;-) aber für ne reine Anzeige einfach zu teuer.

Sehe ich auch so. Habe ebenfalls ein iPad und habe mir für Smarthome Androids geholt.

Ich habe mein FTUI auf Apache umgestellt. Da gibt es mit den Server Side Includes eine ganz hübsche Möglichkeit, Content in Abhängigkeit von Server-Variablen (z.B. die IP Adresse des Tablets) auszuliefern. Das werde ich mal testen.

2xCCU3, Fenster, Rollläden, Themostate, Stromzähler, Steckdosen ...)
Entwicklung: FHEM auf AMD NUC (Ubuntu)
Produktiv inzwischen auf Home Assistant gewechselt.
Maintainer: FULLY, Meteohub, HMCCU, AndroidDB