TabletUI auf verschieden größen skalieren

Tommy82 · 15 September 2019, 20:43:30

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?

Eisix · 18 September 2019, 08:56:16

Hallo,

viewport wäre eine Möglichkeit

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 kleiner gemacht.

Gruß
Eisix

Tommy82 · 16 November 2019, 20:56:29

Hi,
erstmal danke für deine Rückmeldung, also das habe ich bei mir so schon drin

Code Auswählen

<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

Eisix · 17 November 2019, 10:58:21

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

Tommy82 · 17 November 2019, 17:43:25

Hallo,
ich habe jetzt mal meinen Standartwert

Code Auswählen

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

Code Auswählen

<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?

Eisix · 18 November 2019, 04:42:41

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

Tommy82 · 20 November 2019, 19:01:08

Hi,
hab die index für das Tablett jetzt auf

Code Auswählen

<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.....

Eisix · 20 November 2019, 21:00:23

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

Gruß
Eisix

Tommy82 · 20 November 2019, 21:26:53

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

Code Auswählen

<meta name="viewport" content="width=800, initial-scale=1">
aber auch da ändert sich nichts

Eisix · 20 November 2019, 22:00:39

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

Tommy82 · 20 November 2019, 22:04:44

Hab grad einfach mal einen ganzen teil der index.html entfernt, und das wird auch dann nicht angezeigt, ist also die richtige datei

Tommy82 · 01 Dezember 2019, 16:51:55

Hi,
keiner mehr eine idee?

Gunther · 02 Dezember 2019, 16:20:41

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ß.

Tommy82 · 07 Dezember 2019, 21:05:02

Hi,
hier die gewünschte index.html

Code Auswählen

<!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>

amenomade · 08 Dezember 2019, 01:31:45

"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