FTUI sieht auf dem Tablet anders aus.

Begonnen von D3ltorohd, 30 Oktober 2019, 12:09:26

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

D3ltorohd

30 Oktober 2019, 12:09:26
Hallo Com,

ich habe angefangen mir ein FTUI zu basteln, das ganze natürlich auf dem PC. Im dortigen Browser sieht das alles in Ordnung aus. Jetzt wollte ich mir das mal auf dem Tablet anschauen. Die Grids scheinen zu passen, nur der Inhalt nicht, viel zu groß und nicht an seinem Platz.

Wie kann ich sowas vermeiden,oder muss ich wo was einstellen, damit er das an die Größe des Tablets anpasst ?

Oder geht das nur durch herum testen, die Widgets verkleinern und wieder am Tablet schauen, wie es aussieht ?

Grüße,

Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

Eisix

#1
30 Oktober 2019, 15:51:02 Letzte Bearbeitung: 30 Oktober 2019, 15:54:20 von Eisix
Hallo,

viewport wäre eine Möglichkeit wenn deine Bildschirmauflösung das gleiche  Verhältnis in Breite und Höhe hat.

Code Auswählen

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


Im Beispiel habe ich es auf 0.8 kleiner gemacht.


Über die meta tags in der index.html kannst du die Grids einstellen.
Code Auswählen

    <meta name="widget_base_width" content="69">
    <meta name="widget_base_height" content="51">
    <meta name="widget_min_cols" content="17">


Bei Chrome oder Firefox kannst du im Developer Modus die Bildschirmgröße deines Gerätes für das du die Seite erstellst einstellen.

Mit einem HTML tester kannst du deine Seiten prüfen.

z.B.:   https://www.freeformatter.com/html-validator.html


Gruß
Eisix

dt2510

#2
30 Oktober 2019, 15:57:48
Ich arbeite mit vw/vh statt % oder px Angaben. 10vw sind z.B. 10% der horizontalen Auflösung des Viewports, 5vh analog dazu 5% der vertikalen Auflösung. So passt die Seite auf nahezu jedem Gerät.
Du solltest dann aber auch die Schrift- und Icongrößen in vh angeben, damit die mit skaliert werden. Die Seite passt sich auch beim Resize des Browserfensters an.

D3ltorohd

#3
30 Oktober 2019, 19:18:51
Wo müsste ich das mit hinschreiben ? Hier mal ein Code einer Seite..

Code Auswählen
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="page" id="content_home">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Müllkalender</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div class="large firebrick" data-type="label" data-device="MeinAbfall" data-get="STATE"></div>
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
<div class="cell">
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="Restmuellgefaess_days"
data-warn="Restmuellgefaess_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o fa-spin","fa-trash-o fa-blink","fa-trash-o"]'
data-background-icons='["none","none","none","none"]'
data-colors='["#888","#888","#888","#888"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Restmüll," data-get="Restmuellgefaess_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="Restmuellgefaess_date"></div>
</div>
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="Papiertonne_days"
data-warn="Papiertonne_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o fa-spin","fa-trash-o fa-blink","fa-trash-o"]'
data-background-icons='["none","none","none","none"]'
data-colors='["#0088CC","#0088CC","#0088CC","#0088CC"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Papier," data-get="Papiertonne_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="Papiertonne_date"></div>
</div>
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="GelberSack_days"
data-warn="GelberSack_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fs-bag","fs-bag fa-spin","fs-bag fa-blink","fs-bag"]'
data-background-icons='["none","none","none","none"]'
data-colors='["yellow","yellow","yellow","yellow"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Plastik," data-get="GelberSack_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="GelberSack_date"></div>
</div>
</div>
</div>
</div>
</div>
</li>

<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header>Wetter Rulfingen</header>
<table class="centered top-space">
<tr>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_4_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_4_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_4_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_4_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_8_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_8_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_8_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_8_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_12_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_12_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_12_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_12_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_16_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_16_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_16_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_16_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_20_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_20_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_20_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_20_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc1_0_time" class=" "></div>
<div data-type="weather" data-device="DWD" data-get="fc1_0_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc1_0_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc1_0_TTT" data-unit="%B0C%0A" data-fix="0" class="bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
</tr>
</table>
</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"> <!-- data-device="Buero_HT" Platzhalter, später Außentemp -->
<header>Wetter aktuell</header>
<div class="sheet">
                    <div class="row">
<div class="cell">
<div class="col-30">
<div data-type="weather" data-device="DWD" data-get="fc1_0_ww" data-imageset="amcharts" class="bigger"></div>
</div>
<div class="col-30">
<div data-type="wind_direction" data-device="DWD" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"></div>
<div class="cell big" data-type="label" data-device="DWD" data-get="wind" data-unit="km/h" data-fix="0"></div>
</div>
<div class="col-30">

</div>
</div>
</div>
</div>
</li>
</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header><Geburtstage</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div class="large firebrick" data-type="label" data-device="GeburtstagsView" data-get="STATE"></div>
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
<div class="cell">
<div class="col-30">
<div data-type="symbol"
data-device="GeburtstagsView"
data-get="c-today"
data-states='["1","0","([2-9])"]'
data-icons='["fa-birthday-cake","fa-birthday-cake","fa-birthday-cake warn"]'
data-colors='["orange","#888","orange"]'
class="top-space big">
</div>
<div class="top-narrow" data-type="label" data-device="GeburtstagsView" data-pre-text=" " data-get=" "></div>
<div class="" data-type="label" data-device="GeburtstagsView" data-get=" "></div>
</div>
<div class="col-30">

</div>
<div class="col-30">

</div>
</div>
</div>
</div>
</div>
</li>

    <li data-row="2" data-col="1" data-sizex="2" data-sizey="2">ROW 2 | COL 1 | X 2 | Y 2</li>
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="3">ROW 2 | COL 3 | X 1 | Y 3</li>
    <li data-row="2" data-col="4" data-sizex="1" data-sizey="1">ROW 2 | COL 4 | X 1 | Y 1</li>

    <li data-row="3" data-col="4" data-sizex="1" data-sizey="2">ROW 3 | COL 4 | X 1 | Y 2</li>
                                 
    <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">ROW 4 | COL 1 | X 1 | Y 1</li>
    <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">ROW 4 | COL 2 | X 1 | Y 1</li>
</ul>

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


Meine Index würde so aussehen.

Code Auswählen
<!DOCTYPE html>
<html>
<head>
<title>FHEM - Hausautomatisierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Mobile-Web-Config -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
<!-- Favicon-Icon -->
<link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
<!-- Cache -->
    <!--<meta http-equiv="Cache-Control" content="no-store" />-->
<!-- FTUI-Settings -->
<meta name="debug" content="0">
<meta name="longpoll_type" content="websocket" />
<meta name="toast" content="1"> <!-- 1,2,3...= n Toast-Messages, 0: No Toast-Messages -->
<!-- Scripts -->
    <script type="text/javascript" src="js/fhem-tablet-ui.min.js" defer></script>
<!-- Icon Fonts -->
<link rel="stylesheet" href="fonts/roman/style.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" type="text/css" />
<!-- Custom CSS -->
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
    <link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="lib/weather-icons-wind.min.css"/>
<link rel="stylesheet" href="lib/weather-icons-wind.css"/>
<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />
<link rel="stylesheet" href="lib/openautomation.css" />
</head>

Schade, das man hier nicht einfach mit X und Y arbeiten kann und einfach alles und jedem höhe und breite mitgeben kann, so wird das immer irgendwo an einem Raster ausgerichtet. Das ist schon ganz schön schwierig manchmal, das alles so zu positionieren, wie man gerne hätte.
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

D3ltorohd

#4
10 November 2019, 10:32:49
Zitat von: dt2510 am 30 Oktober 2019, 15:57:48
Ich arbeite mit vw/vh statt % oder px Angaben. 10vw sind z.B. 10% der horizontalen Auflösung des Viewports, 5vh analog dazu 5% der vertikalen Auflösung. So passt die Seite auf nahezu jedem Gerät.
Du solltest dann aber auch die Schrift- und Icongrößen in vh angeben, damit die mit skaliert werden. Die Seite passt sich auch beim Resize des Browserfensters an.

Hättest du mir mal einen Codeschnippsel, wie das dann eingesetzt aussieht ?
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

yersinia

#5
10 November 2019, 19:22:50
zB so; anstelle von
Code Auswählen
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
den Teil von height:3px;width:100%; durch height:3vh;width:100vw; ersetzen:
Code Auswählen
<div style="display:inline-block;height:3vh;width:100vw;background-color:#1D1F20;"></div>
viele Grüße, yersinia
----
FHEM 6.4 (SVN) on RPi 4B with RasPi OS Bookworm (perl 5.36.0) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

D3ltorohd

#6
10 November 2019, 20:16:12
Zitat von: yersinia am 10 November 2019, 19:22:50
zB so; anstelle von
Code Auswählen
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
den Teil von height:3px;width:100%; durch height:3vh;width:100vw; ersetzen:
Code Auswählen
<div style="display:inline-block;height:3vh;width:100vw;background-color:#1D1F20;"></div>

Danke werde ich testen. Und wie soll das bei Bildern und Texten aussehen, kommt das in die Claas mit rein dann ?
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

dt2510

#7
11 November 2019, 07:41:43
Zitat von: D3ltorohd am 10 November 2019, 20:16:12
Danke werde ich testen. Und wie soll das bei Bildern und Texten aussehen, kommt das in die Claas mit rein dann ?

Bei Schrift verwende ich z.B.

Code Auswählen
<div style="font-size:2vh;">blabla</div>

Bei Bildern gibt es normalerweise width/height Angaben. Man kann auch mit Kommastellen arbeiten, z.B. 1.5vh
Drucken
Nach oben Seiten1
Benutzer-Aktionen