Autor Thema: Tablet UI, Viewports und Android Tablets  (Gelesen 16410 mal)

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Tablet UI, Viewports und Android Tablets
« am: 06 Januar 2016, 21:25:52 »
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, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1560
  • Perl? Copy & Paste... ;-)
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #1 am: 06 Januar 2016, 21:37:55 »
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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #2 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?
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline math78

  • Full Member
  • ***
  • Beiträge: 198
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #3 am: 19 Januar 2016, 22:35:03 »
Hallo zap,

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

Danke Dir.

Matthias

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1560
  • Perl? Copy & Paste... ;-)
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #4 am: 19 Januar 2016, 23:14:42 »
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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #5 am: 20 Januar 2016, 14:59:48 »
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
« Letzte Änderung: 20 Januar 2016, 17:40:08 von zap »
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline math78

  • Full Member
  • ***
  • Beiträge: 198
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #6 am: 20 Januar 2016, 23:20:18 »
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!!!!!!!!!

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #7 am: 21 Januar 2016, 07:54:14 »
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, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline math78

  • Full Member
  • ***
  • Beiträge: 198
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #8 am: 22 Januar 2016, 17:45:46 »
Danke Dir, hat mir geholfen. :D

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #9 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

RaspberryPi 3 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Pilight
Fritz!Box 7590

Offline ekur

  • Full Member
  • ***
  • Beiträge: 123
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #10 am: 25 Februar 2016, 08:44:27 »
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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #11 am: 25 Februar 2016, 09:51:22 »

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, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #12 am: 25 Februar 2016, 10:09:16 »
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.
« Letzte Änderung: 25 Februar 2016, 10:27:54 von zap »
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #13 am: 25 Februar 2016, 10:30:24 »

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 3 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Pilight
Fritz!Box 7590

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #14 am: 25 Februar 2016, 11:02:52 »
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, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #15 am: 25 Februar 2016, 12:05:03 »
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.

Ah, das klingt interessant. Einen Apache (auf einem Pi 2) habe ich hier eh laufen, der mir unter weewx meine Wetterdaten anzeigt. Bin allerdings in der Hinsicht wirklich nur Anwender, da ich jetzt auch nicht wüsste wie ich das FTUI auf dem Apache umziehe (einfach das Tablet Verzeichnis dort in den www Ordner packen?)

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

Offline ekur

  • Full Member
  • ***
  • Beiträge: 123
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #16 am: 25 Februar 2016, 13:20:32 »
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.

Es wird immer interessanter. Ich habe das Tablet auf CM 12.1 (also Android 5.1) upgedatet wegen deinem Hinweis für den "Immersiven Modus" und :

-webviewcontrol funktioniert komplett (Hier jetzt noch die Android Tasten raus und es wäre perfekt)

Die Werte sind

Webview               FF

DPR     1                DPR 1
CSS H  600          CSS H  552
CSS W 1024        CSS W 1024

Ich muss mich hier korrigieren (Schande), die Werte von Webview entsprechen den nativen Werten des 7 Zoll Tablet. Ich habe auch noch mal in der Liste aus deinem link nachgesehen, dort stehen die Samsung alle mit einem DPR 1 drin. Nichts desto trotz kann ich nur 900 in der Breite und 490 in der Höhe anzeigen (WvC und FF).


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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #17 am: 25 Februar 2016, 13:56:47 »
@ekur:

Ich denke, die unterschiedlichen Werte in der Höhe kommen daher, dass einige Browser hier die Statusleiste einrechnen und andere nicht.
Versuche mal testweise ein Layout, das nur 400 Pixel hoch ist, dafür aber 1024 breit. Wenn das funktioniert, liegt es daran, dass der Browser im Fall wenn das Layout zu hoch ist rechts Platz für die Scroll-Leiste einrechnet. Außerdem auf jeden Fall beim Body-Tag left-margin, top-margin und margin auf "0" setzen. Und initialscale sollte natürlich 1 sein.

@Jens_B:

eine Anleitung für den Umzug von Tablet UI auf Apache findest Du hier:

http://forum.fhem.de/index.php/topic,48057.msg399955.html#msg399955

Deine bestehende Apache Config kannst Du erweitern, indem Du einfach einen neuen VirtualHost mit einem exklusiven Port konfigurierst.
« Letzte Änderung: 25 Februar 2016, 13:59:33 von zap »
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline ekur

  • Full Member
  • ***
  • Beiträge: 123
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #18 am: 25 Februar 2016, 20:07:32 »
@ekur:

Ich denke, die unterschiedlichen Werte in der Höhe kommen daher, dass einige Browser hier die Statusleiste einrechnen und andere nicht.
Versuche mal testweise ein Layout, das nur 400 Pixel hoch ist, dafür aber 1024 breit. Wenn das funktioniert, liegt es daran, dass der Browser im Fall wenn das Layout zu hoch ist rechts Platz für die Scroll-Leiste einrechnet. Außerdem auf jeden Fall beim Body-Tag left-margin, top-margin und margin auf "0" setzen. Und initialscale sollte natürlich 1 sein.


@zap:
Ich muss jetzt mal blöd fragen, ich gehe davon aus dass

Body-Tag left-margin, top-margin und margin

im Headerteil der html Datei stehen sollten, bei mir stehen die nicht dort. Wie wäre die richtige syntax für die Werte? Was left-margin und top margin machen ist mir klar (Rand nach links und oben), aber was wird durch margin beeinflusst?
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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #19 am: 25 Februar 2016, 22:01:15 »
Wenn Du pagetabs verwendest, gibt es zumindest in der ersten index Datei ein body tag, sonst in jeder html datei.

Sollte dann so aussehen

<body style="margin: 0px; padding: 0px;">

Seiten Text

</body>
 

Alternativ kannst Du das in Deiner ...user.css festlegen:

body {
  margin: 0px;
  padding: 0px;
}

Dann gilt es für alle body tags.
« Letzte Änderung: 26 Februar 2016, 07:48:02 von zap »
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #20 am: 01 März 2016, 14:15:41 »
Hallo zusammen,
falls es jemanden interessiert. Ich habe inzwischen auf einem Lenovo 8zoll (native Auflösung 1280x800) über ein paar adb Befehle die Pixelratio einfach ändern können.

adb shell wm density 200 && adb reboot

die original "density" ist 213 dpi (kann man mit adb shell dumpsys display | grep mBaseDisplayInfo auslesen)
Bei 200 dpi habe ich auf dem Display dann genau die breite wie beim ipad (nur unten fehlt etwas).
Wenn man die dpi noch weiter runterschraubt auf 170 zum Beispiel kann man noch mehr unterbringen.

Dafür muß das Gerät nicht gerootet werden, das ganze übersteht allerdings mw nach keinen reboot.
Wenn man es ganz richtig machen will, muß man es rooten und die build.prop anpassen.

Gruß
Jens


RaspberryPi 3 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Pilight
Fritz!Box 7590

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #21 am: 01 März 2016, 19:31:01 »
Wie führt man diesen "adb" Befehl aus? Hört sich interessant an. Ist vielleicht ne blöde Frage, aber ich komme aus der Apple-Welt und FTUI ist mein erster Kontakt mit Android.

Ich habe das mit meinen Tablets über Server Side Includes gelöst, indem ich je nach IP des Clients unterschiedliche initialscale Einstellungen verwende. Das setzt natürlich einen Apache Webserver voraus. Deine Lösung ist deutlich einfacher (wenn es auf nicht gerooteten Geräten funktioniert).
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #22 am: 01 März 2016, 22:00:54 »
Ich bin auch Apple User. Das ganze läuft über das Terminal und man muss die Android toolkits laden und dort adb und fastboot extrahieren .
Ich erkläre es genauer sobald ich an einem anderen endegerat bin
Gruß
Jens


Gesendet von meinem iPhone mit Tapatalk
RaspberryPi 3 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Pilight
Fritz!Box 7590

Offline rhrawr

  • New Member
  • *
  • Beiträge: 32
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #23 am: 02 März 2016, 00:48:07 »
Wie führt man diesen "adb" Befehl aus? Hört sich interessant an. Ist vielleicht ne blöde Frage, aber ich komme aus der Apple-Welt und FTUI ist mein erster Kontakt mit Android.

USB-Debugging am Tablet aktivieren und mit dem PC verbinden. "Minimal ADB und Fastboot" über die Quelle deines Vertrauens besorgen und du hast die benötigten Dateien. Im Installationsordner Shift+Rechte Maustaste und "Eingabeaufforderung hier öffnen" (Adminrechte). Über "adb devices" prüfen, ob das Gerät korrekt verbunden ist. Es sollte eine Liste mit einer Art Seriennummer ausspucken. Dann kannst du eigentlich loslegen.

(Falls du kein Windows-User bist, entsprechende Schritte in deinem OS durchführen.)

Gruß
Dennis
Raspberry Pi 3 als FHEM-Server (Homematic, Philips Hue, Z-Wave, Logitech Harmony)
Raspberry Pi 2 als TV-Ambilight
Fritz!Box 6490 Cable

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #24 am: 05 März 2016, 12:09:36 »
Wie führt man diesen "adb" Befehl aus? Hört sich interessant an. Ist vielleicht ne blöde Frage, aber ich komme aus der Apple-Welt und FTUI ist mein erster Kontakt mit Android.

Ich habe das mit meinen Tablets über Server Side Includes gelöst, indem ich je nach IP des Clients unterschiedliche initialscale Einstellungen verwende. Das setzt natürlich einen Apache Webserver voraus. Deine Lösung ist deutlich einfacher (wenn es auf nicht gerooteten Geräten funktioniert).

Also grundsätzlich ist es recht einfach:
http://stackoverflow.com/questions/31374085/installing-adb-on-mac-os-x

Über homebrew gehts dann quasi automatisch.
Dann das Android gerät per USB anschliessen, USB Debugging am Gerät einschalten/erlauben. Und bei der Frage am Android ob der Zugriff vom Pc erlaubt werden soll, akzeptieren.

Dann übers terminal die Befehle ausführen:

adb shell dumpsys display | grep mBaseDisplayInfo
(damit zeigt man sich die augenblickliche Auflösung an)

adb shell wm density 200 && adb reboot
(damit ändert man auf 200 dpi)

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

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3993
    • HMCCU
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #25 am: 05 März 2016, 13:33:14 »
Danke für den Hinweis! Ich bleibe trotzdem bei meiner initialscale Lösung. Der Nachteil der adb Geschichte ist, dass das nach einem Neustart weg ist. Dann muss ich das Tablet aus der Wandhalterung nehmen und die Prozedur wiederholen.
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline Jens_B

  • Full Member
  • ***
  • Beiträge: 399
Antw:Tablet UI, Viewports und Android Tablets
« Antwort #26 am: 06 März 2016, 17:06:56 »
Danke für den Hinweis! Ich bleibe trotzdem bei meiner initialscale Lösung. Der Nachteil der adb Geschichte ist, dass das nach einem Neustart weg ist. Dann muss ich das Tablet aus der Wandhalterung nehmen und die Prozedur wiederholen.

Ich habe das ausprobiert. Bleibt auch nach Neustart erhalten.
RaspberryPi 3 (Raspian Buster)FHEM+Homebridge
HMLAN für Homematic
Z-Wave USB Stick
Pilight
Fritz!Box 7590