Hi,
ich habe meine TablettUI ursprünglich mal auf ein 12,3 Zoll Tablett erstellt, jetzt bin ich aber auf ein 13,3 Zoll umgestiegen, und hab nun einen schwarzen radn, ich würde gerne die UI automatisch an die Auflösung anpassen, aber wie kann ich das machen?
Hallo,
viewport wäre eine Möglichkeit
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no">
Im Beispiel habe ich es kleiner gemacht.
Gruß
Eisix
Hi,
erstmal danke für deine Rückmeldung, also das habe ich bei mir so schon drin
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Aber was hilft mir das? Ich stelle die FTUI ja auf verschiedenen Devices mit verschiedenen größen da, wo sich die seite automatisch anpassen sollte/müsste
Hallo,
Das einfachste ist dann eine index.html pro Displaygröße zu erstellen. Der Rest der HTML Dateien bleibt dann gleich. Mit den scale Werten mußt du probieren bis es bei der entsprechenden Größe passt.
Gruß
Eisix
Hallo,
ich habe jetzt mal meinen Standartwert
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
auf
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=no" />
geändert, allerdings hat sich danach auf dem Wandtablett nichts geändert. Auf dem Wandtablett müsste das Bild ja auch etwas breiter werden, nicht aber höher, wie geht das? Wenn ich nur separate index....html Dateien anlege, würde ja dann auch nur die Hauptseite angepasst, aber ja nicht die unterseiten oder? Die müsste ich ja dann auch je Device anlegen?
Hallo,
Initial-scale mußt du ändern. Das gibt die Größe beim laden an. Max-scale auf was du zomen kannst.
Der Eintrag in der jeweiligen Index.html reicht da du von da aus alles in dem gleichen Kontext lädst.
Gruß
Eisix
Hi,
hab die index für das Tablett jetzt auf
<meta name="viewport" content="width=device-width, initial-scale=1.2, maximum-scale=1.2, user-scalable=no" />
abgeändert, aber es scheint keine auswirkungen zu hauben, nach einem reload der Seite sieht es genauso aus wie vorher.....
Hallo,
Probier mal in die andere Richtung z.B. 0.8.
Hier ist noch weiterführende Links
https://developer.mozilla.org/de/docs/Mozilla/Mobile/Viewport_meta_tag
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
(https://developer.mozilla.org/de/docs/Mozilla/Mobile/Viewport_meta_tag%3Cbr%20/%3Ehttps://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)
Gruß
Eisix
Leider auch keine änderung habe es jetzt mit verschiedensten einstellungen auf dem tablett unter Fully, sowie am Laptop unter Opera getestet, es ändert sich nichts
Aus deinem Link habe ich auch mal das
<meta name="viewport" content="width=800, initial-scale=1">
aber auch da ändert sich nichts
Vielleicht als test ob die Index Datei auch wirklich die ist die du änderst mal was eintragen was auf jeden Fall sichtbar sein sollte. Also ein Label oder was anderes was nichts mit dem meta Tag zu tun hat. Nur um diese Fehlerquelle auszuschließen. Ansonsten fällt mir dann nichts mehr ein.
Gruß
Eisix
Hab grad einfach mal einen ganzen teil der index.html entfernt, und das wird auch dann nicht angezeigt, ist also die richtige datei
Hi,
keiner mehr eine idee?
Ist Deine Definition der Tablet-UI-Instanz so, dass die index das führende Element ist, also dort die Definitionen stattfinden?
Was ist wenn Du testweise die Gridgröße veränderst?
Hast Du vielleicht etwas drin, was die initial-scale-Funktion überschreibt?
Poste doch mal Deine index.html. Vielleicht findet einer der Experten hier den Hasenfuß.
Hi,
hier die gewünschte index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>Smarthome</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="127">
<meta name="widget_base_height" content="108">
<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=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<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/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.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>
<!-- Enable this lines for usage with WebViewControl --><!-- -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->
</head>
<body>
<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->
<div class="gridster">
<ul>
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<br>
<div data-type="pagetab" data-url="index.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Status</div>
</li>
<!-- ========= Räume =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="5">
<br>
<div data-type="pagetab" data-url="Wohnzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Wohnzimmer</div>
<div data-type="pagetab" data-url="Kueche.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-kitchen" ></div>
<div data-type="label" class="cell darker">Küche</div>
<div data-type="pagetab" data-url="Flur_Erdgeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Flur Erdges.</div>
<div data-type="pagetab" data-url="Gaeste_WC.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-spa" ></div>
<div data-type="label" class="cell darker">Gäste WC</div>
<div data-type="pagetab" data-url="Aussen.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-store" ></div>
<div data-type="label" class="cell darker">Außen</div>
<div data-type="pagetab" data-url="Kellerflur.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Kellerflur</div>
</li>
<li data-row="2" data-col="9" data-sizex="1" data-sizey="5">
<br>
<div data-type="pagetab" data-url="Kellerbar.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-local_bar" ></div>
<div data-type="label" class="cell darker">Kellerbar</div>
<div data-type="pagetab" data-url="Buero.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-border_color" ></div>
<div data-type="label" class="cell darker">Büro</div>
<div data-type="pagetab" data-url="Flur_Obergeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Flur Oberges.</div>
<div data-type="pagetab" data-url="Schlafzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-bed" ></div>
<div data-type="label" class="cell darker">Schlafzimmer</div>
<div data-type="pagetab" data-url="Kinderzimmer_Mila.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-face" ></div>
<div data-type="label" class="cell darker">Kinderzimmer Mila</div>
<div data-type="pagetab" data-url="Kinderzimmer_Laya.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-face" ></div>
<div data-type="label" class="cell darker">Kinderzimmer Laya</div>
</li>
<!-- ========= Gruppen ========== -->
<!-- ====================================== -->
<li data-row="1" data-col="2" data-sizex="8" data-sizey="1">
<br>
<table style="width:100%">
<tr>
<td style="width:10%">
<div data-type="pagetab" data-url="Heizung.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="oa-temp_temperature_max" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Steckdosen.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-plug" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Reciever.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-hd" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Server.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-desktop" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Fenster.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="oa-fts_window_roof" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Alarm.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-add_alert" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Telefon.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-settings_phone" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Zentrale.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-info" ></div>
</td>
<td style="width:10%">
<div data-type="pagetab" data-url="Plots.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-show_chart" ></div>
</td>
</tr>
<tr>
<td style="width:10%">
<div data-type="label" class="cell darker">Heizung</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Steckdosen</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Reciever</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Server</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Fenster</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Alarm</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Telefon</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Zentrale</div>
</td>
<td style="width:10%">
<div data-type="label" class="cell darker">Plots</div>
</td>
</tr>
</table>
</li>
<!-- ============= Uhrzeit/Datum ================ -->
<!-- ====================================== -->
<li data-row="4" data-col="2" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Datum/Zeit</header><br>
<div class="cell darker">
<div class="algin-center">
<font color="#ff8c00">
<div class="big" data-type="clock" data-format="d-m-Y H:i:s"></div>
</font>
</div>
</div>
</li>
<!-- ========= SystemInfo ========== -->
<!-- ====================================== -->
<li data-row="6" data-col="2" data-sizex="4" data-sizey="1">
<header class="headerTransparent">Systeminfo</header><br>
<div data-type="readingsgroup" data-device="rd_SysInfo" data-max-update="86400"></div>
</li>
<!-- ============= Anrufe ================== -->
<!-- ======================================= -->
<li data-row="6" data-col="6" data-sizex="3" data-sizey="1">
<header class="headerTransparent">ANRUFE</header>
<table width="100%" class="">
<tr>
<td>
<!-- Zuordnung des Status zu entsprechendem Icon -->
<div class="narrow" data-type="symbol" data-device="Anruferliste"
data-get="1-state" data-states='["<=","=>","=> X","=> ((o))","=> [=]","=> O_O"]'
data-icons='["mi-phone_forwarded","oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answering"]'
data-colors='["blue","green","red","firebrick","green","blue"]'></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="5" class=""></div>
<div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Anruferliste" data-get="1-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="1-name" data-substitution="toString().substr(0,18)"></div>
<div data-type="label" data-device="Anruferliste" data-get="1-number"></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="1-duration"></div>
</td>
<td>
<div data-type="image"
data-device="Anruferliste"
data-get="1-number"
data-path="http://192.168.188.47:8085/fhem/www/tablet/Anrufe/"
data-suffix=".jpg"
data-height="37px"
data-width="45px"></div>
</td>
</tr>
<tr>
<td>
<div class="narrow" data-type="symbol" data-device="Anruferliste"
data-get="2-state" data-states='["<=","=>","=> X","=> ((o))","=> [=]","=> O_O"]'
data-icons='["mi-phone_forwarded","oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answering"]'
data-colors='["blue","green","red","firebrick","green","blue"]'></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="2-timestamp" data-part="5" class=""></div>
<div data-type="label" data-device="Anruferliste" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="Anruferliste" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="Anruferliste" data-get="2-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="2-name" data-substitution="toString().substr(0,18)"></div>
<div data-type="label" data-device="Anruferliste" data-get="2-number"></div>
</td>
<td>
<div data-type="label" data-device="Anruferliste" data-get="2-duration"></div>
</td>
<td>
<div data-type="image"
data-device="Anruferliste"
data-get="2-number"
data-path="http://192.168.188.47:8085/fhem/www/tablet/Anrufe/"
data-suffix=".jpg"
data-height="37px"
data-width="45px"></div>
</td>
</tr>
</table>
</li>
<!-- =========Anrufe PopUp================= -->
<!-- ====================================== -->
<div data-type="popup"
data-device="Anruferliste"
data-get="1-state"
data-get-on="=> ((o))"
data-get-off="(=> X|=>|=> O_O)"
data-height="500px"
data-width="500px">
<div class="dialog">
<header>Anruf</header>
<div data-type="image"
data-device="Anruferliste"
data-get="1-number"
data-path="http://192.168.188.47:8085/fhem/www/tablet/Anrufe/"
data-suffix=".jpg"
data-height="400px"
data-width="400px"></div>
<div data-type="label"
data-device="Anruferliste"
data-get="1-name"></div>
<div data-type="label"
data-device="Anruferliste"
data-get="1-number"></div>
</div>
</div>
<!-- =========Kamera PopUp================= -->
<!-- ======================================
<div data-type="popup"
data-device="Kameras"
data-get="cmd"
data-get-on="video"
data-height="500px"
data-width="500px">
<div class="dialog">
<li data-row="2" data-col="2" data-sizex="1" data-sizey="2">
<header>Alarm</header>
<div data-type="video"
data-controls="True"
data-device="Kameras"
data-get="videoFilename"
data-path="http://192.168.188.47:8085/fhem/tablet/BlinkCamera/Kameras/thumbnail/camera/"
data-width="400"
data-height="200"
class="nocache"></div>
</div>
</div>
</li>
-->
<!-- ========= Wetter ========== -->
<!-- ====================================== -->
<li data-row="2" data-col="2" data-sizex="1" data-sizey="2">
<div class="container weather">
<header>HEUTE</header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc1_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc1_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc1_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc1_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc2_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc2_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc2_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc2_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc2_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc3_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc3_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc3_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc3_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc3_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc4_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc4_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc4_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc4_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc4_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc5_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc5_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc5_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc5_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc5_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
</li>
<li data-row="2" data-col="7" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc6_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc6_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc6_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc6_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc6_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
<li data-row="2" data-col="8" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div data-type="label"
data-device="YahooWetter"
data-get="fc7_day_of_week"
style="display:inline"></div></header>
<br>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="YahooWetter"
data-get="fc7_icon"
data-imageset="kleinklima"
style="width:100px"></div>
<br>
<div data-type="label"
data-device="YahooWetter"
data-get="fc7_condition"
data-substitution="toString().substr(0,30)"></div>
<br>
Temp: <div data-type="label"
data-device="YahooWetter"
data-get="fc7_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
/ <div data-type="label"
data-device="YahooWetter"
data-get="fc7_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline"></div>
</td>
</tr>
</table>
</div>
</li>
</li>
</li>
</li>
<!-- ========= Mülltermine ========== -->
<!-- ====================================== -->
<li data-row="4" data-col="4" data-sizex="3" data-sizey="1">
<header class="headerTransparent">Mülltermine</header>
<div class="hbox items-space-around">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="GelbeTonneIn" data-get='STATE' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-colors='["#E6E600","#E6E600","#E6E600"]' class="big"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="BiomuellIn" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-colors='["#996633","#996633","#996633"]' class="big"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="PapierIn" data-get='STATE' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-colors='["#4747D1","#4747D1","#4747D1"]' class="big"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="RestmuellIn" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-colors='["gray","gray","gray"]' class="big"></div>
</li>
<!-- ============== Fenster ================ -->
<!-- ======================================= -->
<li data-row="5" data-col="4" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Fenster</header>
<br>
<div class="inline">
<table style="width:100%">
<tr>
<td style="width:33%">
<div data-type="symbol" data-device="Fenster_neben_Couch" data-icons='["oa-fts_window_1w","oa-fts_window_1w_tilt","oa-fts_window_1w_open"]' data-get-on='["closed","tilted","open"]'
data-colors='["#00ff00","#ff0000","#ff0000"]' class="small narrow" ></div>
</td>
<td style="width:33%">
<div data-type="symbol" data-device="Fenster_ueber_Heizung" data-icons='["oa-fts_window_1w","oa-fts_window_1w_tilt","oa-fts_window_1w_open"]' data-get-on='["closed","tilted","open"]'
data-colors='["#00ff00","#ff0000","#ff0000"]' class="small narrow" ></div>
</td>
<td style="width:33%">
<div data-type="symbol" data-device="Terassen_Tuer" data-icons='["oa-fts_window_1w","oa-fts_window_1w_tilt","oa-fts_window_1w_open"]' data-get-on='["closed","tilted","open"]'
data-colors='["#00ff00","#ff0000","#ff0000"]' class="small narrow" ></div>
</td>
</tr>
<tr>
<td style="width:33%">
<div data-type="label" class="narrow darker">Couch</div>
</td>
<td style="width:33%">
<div data-type="label" class="narrow darker">Heizung</div>
</td>
<td style="width:33%">
<div data-type="label" class="narrow darker">Terrassen Tür</div>
<td>
</tr>
</table>
</div>
</li>
<!-- ============== Reciver ================ -->
<!-- ======================================= -->
<li data-row="5" data-col="6" data-sizex="3" data-sizey="1">
<header class="headerTransparent">Reciever</header>
<br>
<div class="inline">
<div class="left">
<table>
<tr>
<td style="width:33%">
<div data-type="symbol" data-device="CoreElec" data-get-on='["off","absent","on"]' data-icons='["fa-television"]' data-colors='["#ff0000","#ff0000","#00ff00"]' class="small narrow" ></div>
<br>
</td>
<td style="width:33%">
<div data-type="symbol" data-device="Uno_Schlafzimmer" data-get-on='["absent","on"]' data-icons='["fa-television"]' data-colors='["#ff0000","#00ff00"]' class="small narrow" ></div>
<br>
</td>
<td style="width:33%">
<div data-type="symbol" data-device="Uno_Kellerbar" data-get-on='["absent","on"]' data-icons='["fa-television"]' data-colors='["#ff0000","#00ff00"]' class="small narrow" ></div>
<br>
</td>
</tr>
<tr>
<td style="width:33%">
<div data-type="label" class="narrow darker">Schlafzimmer</div>
</td>
<td style="width:33%">
<div data-type="label" class="narrow darker">Kellerbar</div>
</td>
<td style="width:33%"
<div data-type="label" class="narrow darker">CoreElec</div>
</td>
</tr>
</table>
</div>
</div>
</li>
<!-- ============== Server ================ -->
<!-- ======================================= -->
<li data-row="4" data-col="7" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Server</header>
<div class="inline">
<br>
<table>
<tr>
<td>
<div data-type="symbol" data-device="WHS_2011" data-icons='["fa-server"]' data-get-on='["on","off"]' data-colors='["#00ff00","#ff0000"]' class="small narrow" ></div>
</td>
<td>
<div data-type="symbol" data-device="WinServer" data-icons='["fa-server"]' data-get-on='["on","off"]' data-colors='["#00ff00","#ff0000"]' class="small narrow" ></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="narrow darker">WHS 2011</div>
</td>
<td>
<div data-type="label" class="narrow darker">Backup Server</div>
</td>
</tr>
</table>
</div>
</li>
<!-- ============== Alarmstatus ================ -->
<!-- ======================================= -->
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header class="headerTransparent">Einbruchalarm</header>
<div data-type="switch" data-device="Alarm" class="cell darker" data-icons='["oa-secur_locked","oa-secur_open"]' data-background-icons='["",""]' data-set-states='["off","on"]' data-states='["on","off"]' data-colors='["#ff0000","#00ff00"]' ></div>
</li>
<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
<header class="headerTransparent">Feueralarm</header>
<div data-type="symbol" data-device="Feueralrm_Dummy" class="cell darker" data-icons='["fa-fire-extinguisher"]' data-get-on='["on","off"]' data-colors='["#ff0000","#00ff00"]' class="small narrow" ></div>
</li>
</ul>
</div>
</body>
</html>
"widget_base_width" und "widget_base_height" musst Du wahrscheinlich neu kalkulieren... oder weg nehmen und gridster_cols und gridster_rows benutzen. gridster passt nicht automatisch die Grösse an, wenn diese _base_ metas gesetzt sind. Das sind einfach pixels. Siehe https://wiki.fhem.de/wiki/FTUI_Layout_Gridster
Ausserdem würde ich versuchen die Html-Syntax korrigieren.
Z.B. Zeile 528 ist ein /li zu viel
Genauso Zeile 611, 612, 613, 619
Das div Zeile 619 hat kein /div
Zeile 691 fehlt ein > am Ende
Zeile 738 hast Du 2x class
Deine rowspans sind falsch kalkuliert
Nutzt Du wirklich WebviewControl? Wenn nicht, kommentiere die entspr. Zeilen wieder aus
Hi,
erstmal Danke für deine Fehler suche, hab die alle mal korrigiert.
Was meinst du mit
ZitatDeine rowspans sind falsch kalkuliert
und was müsste ich da machen?
Mit geänderten
"widget_base_width" und "widget_base_height"
bin ich jetzt ein Stück weiter gekommen, wenn ich dort anpassungen vornehme, dann gibt es auch die änderungen.
Das Ergebnis ist dann allerdings das ich viele Elemente in den diversen <div> neu positionieren muss, da die Container größer werden.
Jetzt habe ich aus der index.html eine zweite gemacht namens indexWohnzimmer.html, welche ich in Fully auf meinem Tablett als Start Seite eingerichtet habe, allerdings werden immer die Werte der index.html genommen, wieso?
Danke
Zitat von: Tommy82 am 08 Dezember 2019, 13:20:40
Jetzt habe ich aus der index.html eine zweite gemacht namens indexWohnzimmer.html, welche ich in Fully auf meinem Tablett als Start Seite eingerichtet habe, allerdings werden immer die Werte der index.html genommen, wieso?
Danke
Wie rufst Du die Seite auf (url)?
Zitat von: Tommy82 am 08 Dezember 2019, 13:20:40
Mit geänderten
"widget_base_width" und "widget_base_height"
bin ich jetzt ein Stück weiter gekommen, wenn ich dort anpassungen vornehme, dann gibt es auch die änderungen.
Das Ergebnis ist dann allerdings das ich viele Elemente in den diversen <div> neu positionieren muss, da die Container größer werden.
Wie gesagt, statt _base_ metas, lieber gridster_cols und gridster_rows benutzen
Zitat von: amenomade am 08 Dezember 2019, 13:31:35
Wie rufst Du die Seite auf (url)?
Über ein
http://192.168.188.47:8085/fhem/ftui/index.htmlbzw.
http://192.168.188.47:8085/fhem/ftui/indexWohnzimmer.html, hab aber dann gesehen das sich beim Aufrufen der Link so verändert
http://192.168.188.47:8085/fhem/ftui/indexWohnzimmer.html#index.html, nachdem ich das #index entfernt habe geht es auch.
Was bedeutet das
#index.html??
Zitat von: amenomade am 08 Dezember 2019, 13:33:10
Wie gesagt, statt _base_ metas, lieber gridster_cols und gridster_rows benutzen
Ok, das würde aber ja dann bedeutet das ich alles umbauen muss oder?
Was müsste ich denn z.b. hier ändern wenn ich mein aktuelles Layout beibehalten möchte, nur die Icon's jetzt neu in dem Container zentriert platziert haben möchte?
<!-- ============== Server ================ -->
<!-- ======================================= -->
<li data-row="4" data-col="7" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Server</header>
<div class="inline">
<br>
<table>
<tr>
<td>
<div data-type="symbol" data-device="WHS_2011" data-icons='["fa-server"]' data-get-on='["on","off"]' data-colors='["#00ff00","#ff0000"]' class="small narrow" ></div>
</td>
<td>
<div data-type="symbol" data-device="WinServer" data-icons='["fa-server"]' data-get-on='["on","off"]' data-colors='["#00ff00","#ff0000"]' class="small narrow" ></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="narrow darker">WHS 2011</div>
</td>
<td>
<div data-type="label" class="narrow darker">Backup Server</div>
</td>
</tr>
</table>
</div>
</li>Im Moment sieht das so aus wie im Anhang.
Ich weiss nicht, was Du mit indexWohnzimmer.html gebastelt hast. Wenn Du 1:1 kopiert hast, dann zeig er ja die gleiche Werte.
Wenn Du drin irgendwelche Pagebutton Subseite hast, dann ladet er das natürlich auch.
Mit data-type="pagetab" data-url="index.html", wechselt er dann zu indexWohnzimmer.html#index.html
Das bedeutet: lade in der Seite indexWohnzimmer.html das Teil index.html (siehe HTML anchor)
ZitatOk, das würde aber ja dann bedeutet das ich alles umbauen muss oder?
Nein, wenn deine Kacheln ordentlich definiert und positioniert sind, sollte die Grösse der Kacheln an Bildschirmgrösse anpassen.
Zitat<li data-row="4" data-col="7" data-sizex="2" data-sizey="1">
bedeutet 4.Zeile, 7.Spalte, ein 2-breit und 1-hoch Kachel. ABER: gridsger optimiert die Positionierung. Wenn nichts links davon liegt, schiebt er das nach links.
Du musst wirklich https://wiki.fhem.de/wiki/FTUI_Layout_Gridster lesen
Ok,
werd ich mir dann nochmal angucken, wie könnte ich aber in der aktuelle variante mein Anzeige Problem das die Icons nicht im gleichen abstand dargestellt werden lösen?
Danke