TabletUI an Bildschirmgröße anpassen

Dr. Boris Neubert · 04 September 2016, 13:25:38

Hallo,

aufbauend auf dem index_page_left_demo.html der 2.2er-Evaluationsversion möchte ich eine Seite aufbauen, die sich genau in die Dimensionen des Original-Raspberry-Touchscreens einpasst (800x480), und zwar idealerweise durch automatische Skalierung.

Die Zeile

Code Auswählen

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
sollte es erledigen, aber chromium-browser scheint dies zu ignorieren. Ich bekomme Scrollbars.

Wie bewerkstellige ich das?

Viele Grüße
Boris

setstate · 04 September 2016, 16:38:46

die meta Anweisung "viewport" ist hier nur zum Verhindern von Zoomen (Zwei-Finger-Geste) bei mobilen Geräten gedacht.

Mit Gridster ist es nicht möglich, dynamische Seiten für unterschiedliche Devices zu bauen. Gridster berechnet anhand der Vorgaben von Basis-Weite/Höhe und der Anzahl der Spalten und den Breiten der li-Elemente die Gesamt-Breite/Höhe als Festwert

Man muss für ein kleineres Display die Basiswerte verringern, oder die Spalten/Zeilen verringern.

Code Auswählen


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

Wenn man flexibel sein will, muss man Flexgrid einsetzen. Dafür habe ich aber noch nicht genügend Demos und zuwenig Konstellationen getestet. (kommt noch)
Erste Demo: flex_demo_4x4_empty.html

Dr. Boris Neubert · 04 September 2016, 20:23:49

Vielen Dank.

Für Gitter mit 6 Zeilen und 10 Spalten (480:800) habe ich nun diese Einstellung gewählt:

Code Auswählen

    <meta name="widget_margin" content="3">
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="74">

ujaudio · 03 Januar 2017, 16:19:04

Ich habe auch noch ein Verständnisproblem zur Bildschirmgröße: Meine Einstellungen sind:

Code Auswählen

    <meta name="widget_base_width" content="80">
    <meta name="widget_base_height" content="40">
    <meta name="widget_margin" content="1">

dann habe ich 4 Elemente definiert (row1-4, column1) und erwarte 4 Elemente untereinander. Es werden aber 3 nebeneinander und das 4. darunter angezeigt (siehe Bild). Die Definition ist aber v.o.n.u. plug-bicycle-heart-railroad.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     *
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="80">
    <meta name="widget_base_height" content="40">
    <meta name="widget_margin" content="1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

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

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
    <link rel="stylesheet" href="jar/style.css">
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>My-FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#cccccc"
    data-off-color="#cccccc"
    data-on-background-color="#999999"
    data-off-background-color="#333333"
    data-icon="fa-plug"
    data-background-icon="fa-square"
    class="bigger">
  </div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#cccccc"
    data-off-color="#cccccc"
    data-on-background-color="#999999"
    data-off-background-color="#333333"
    data-icon="fa-bicycle"
    data-background-icon="fa-square"
    class="bigger">
  </div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#cccccc"
    data-off-color="#cccccc"
    data-on-background-color="#999999"
    data-off-background-color="#333333"
    data-icon="fa-heart-o"
    data-background-icon="fa-square"
    class="bigger">
  </div>
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#cccccc"
    data-off-color="#cccccc"
    data-on-background-color="#999999"
    data-off-background-color="#333333"
    data-icon="jar-Eisenbahn"
    data-background-icon="fa-square"
    class="bigger">
  </div>
</li>
</ul>
</div>
</body>
</html>

Nachtrag: Ich habe mich nun einige Zeit damit beschäftigt: Es gibt wohl irgendeinen "Automatismus", der einen wesentlichen Einfluss hat und die konkrete Position in Zeile und Spalte wie in der index.html angegeben ignoriert - oder ich habe noch irgendetwas übersehen, aber so langsam gehen mir die Ideen aus. Vermutlich hat TabletUI noch irgendeine Logik, die ich noch nicht erkannt habe.

Dr. Boris Neubert · 08 Januar 2017, 20:22:20

Hallo Jürgen,

Zitat von: ujaudio am 03 Januar 2017, 16:19:04
dann habe ich 4 Elemente definiert (row1-4, column1) und erwarte 4 Elemente untereinander. Es werden aber 3 nebeneinander und das 4. darunter angezeigt

ich habe das gleiche Problem: die Icons sollten in einer 3x4-Anordnung auf den Bildschirm passen. Es wird aber dennoch ein Umbruch eingefügt. Ich hatte dann bald nach meinem Beitrag von September die Lust verloren und TabletUI erst einmal zur Seite gelegt.

Viele Grüße
Boris

paul79 · 08 Januar 2017, 21:03:33

Hallo,

etwas Dynamik kann man schon einbauen.

z.B. so, bei einer breite von 1280 Pixel gibt es eine andere Größe der Gitter als sonst. Kann man natürlich auch weiter einsetzten für die Position.

Code Auswählen

<!DOCTYPE html>
<html>
	<head>
				<script type="text/javascript">
				  function getWidth()
				  {
					xWidth = null;
					if(window.screen != null)
					  xWidth = window.screen.availWidth;

					if(window.innerWidth != null)
					  xWidth = window.innerWidth;

					if(document.body != null)
					  xWidth = document.body.clientWidth;

					return xWidth;
				  }
				</script>
		<title>FHEM-Tablet-UI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
		
		<script type="text/javascript">		
		if (getWidth() == "1280" ) {
			document.write('<meta name="widget_base_width" content="173">');
			document.write('<meta name="widget_base_height" content="150">');
		}
		else {
			document.write('<meta name="widget_base_width" content="127">');
			document.write('<meta name="widget_base_height" content="110">');
		};
		</script>

Gruß Paul

setstate · 09 Januar 2017, 09:32:29

Man könnte solch einen Automatismus bauen, aber ich könnte mir auch vorstellen, wenn ich mehr Breite habe, würde ich auf diesem Gerät lieber eine Spalte mehr einbauen, um mehr anzeigen zu können.

Was ich mir aber auch gut vorstellen könnte, wäre statt der Basis eher die gewünschten Spalten / Zeilen Anzahl vorzugeben und eine Berechnung passt die Basis entsprechend des Bildschirms an.

paul79 · 09 Januar 2017, 12:24:42

oder für Landscape und Portrait Modus, einmal Button links und rechts bzw. einmal oben und unten

Dr. Boris Neubert · 09 Januar 2017, 18:11:44

Zitat von: setstate am 09 Januar 2017, 09:32:29
Was ich mir aber auch gut vorstellen könnte, wäre statt der Basis eher die gewünschten Spalten / Zeilen Anzahl vorzugeben und eine Berechnung passt die Basis entsprechend des Bildschirms an.

Bevor eine Lösung gesucht wird, die nicht auf die Anforderung passt: es geht darum, dass trotz vermeintlich richtiger Bemessung der Elemente ein Umbruch erfolgt, der nach Auffassung der User nicht dorthin gehört. Ich schreibe vermeintlich, weil ich nicht ausschließen kann, dass ich das Teil einfach nur falsch bediene. Ich poste demnächst mal eine Konfiguration von mir, die ebenfalls ein derartiges Problem aufweist.

paul79 · 09 Januar 2017, 18:59:23

Hallo,

hier ist eine gute Beschreibung der Berechnung von zap

https://forum.fhem.de/index.php/topic,46897.msg395218.html#msg395218

daraus habe ich mir ein Excel Sheet gebaut was ganz gut funktioniert.

Gruß Paul

setstate · 09 Januar 2017, 19:13:29

Zitat von: ujaudio am 03 Januar 2017, 16:19:04

dann habe ich 4 Elemente definiert (row1-4, column1) und erwarte 4 Elemente untereinander. Es werden aber 3 nebeneinander und das 4. darunter angezeigt (siehe Bild). Die Definition ist aber v.o.n.u. plug-bicycle-heart-railroad.
....
Nachtrag: Ich habe mich nun einige Zeit damit beschäftigt: Es gibt wohl irgendeinen "Automatismus", der einen wesentlichen Einfluss hat und die konkrete Position in Zeile und Spalte wie in der index.html angegeben ignoriert - oder ich habe noch irgendetwas übersehen, aber so langsam gehen mir die Ideen aus. Vermutlich hat TabletUI noch irgendeine Logik, die ich noch nicht erkannt habe.

Ein kurzer Blick in die Row und Definition zeigt die Fehler

erstes
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">

row:1 + 2 -> die nächste freie Reihe wäre 3

nächstes
<li data-row="2" data-col="1" data-sizex="1" data-sizey="2">

row:2 überlagert sich also mit der ersten Definition.

Die Gridster-Logik muss sich also was ausdenken, damit es zu keinen Überlagerungen kommt. Das Ergebnis ist dann bestimmt unerwartet.

ujaudio · 09 Januar 2017, 19:53:25

Den Fehler habe ich letztendlich auch gefunden und meine Bedienoberfläche mittels tabletUI funktioniert - und meine Frau ist begeistert

Allerdings sehe ich ein Problem auf mich zukommen: Irgendwann ist das Tablet kaputt und das nächste hat garantiert eine andere Bildauflösung mit der Folge, dass ich wieder Hand anlegen muss

Trotzdem an dieser Stelle: Danke nicht nur für die Funktion an sich, sondern insbesondere auch für den Support!!!

Thyraz · 10 Januar 2017, 09:49:01

TabletUI ist ja nicht an gridster gebunden, auch wenn die Beispielkonfiguration damit ausgeliefert wird.
Flexgrid ist ja schon genannt worden.
Ich hatte mir mal eine kleine Testseite mit Bootstrap gemacht, das hat auch einwandfrei geklappt.

setstate · 10 Januar 2017, 10:06:12

Genau, aber als Einsteiger braucht man einen ersten einfachen Lösungsansatz, der so funktionieren sollte, wie man sich das vorstellt.

Das hat mir auch gestern auch keine Ruhe gelassen und ich habe jetzt hier die nächste Version (fast) fertig (2.5), die im Header nur die fhem-tablet-ui.js hat und alles andere automatisch lädt und die Gridster-Dimensionen selbst berechnet, damit der Bildschirm voll gefüllt ist.
Wenn doch Meta-Tag gefunden werden, werden diese benutzt, für eigene Einstellungen. Auch werden die entsprechenden Icon-Sets (css-files) automatisch geladen, wenn sie in Benutzung sind.
Es wird also einfacher, man verliert aber keine Flexibilität.