TabletUI wird nicht immer korrekt dargestellt

morph · 02 September 2019, 12:20:58

Ich habe ein Problem mit meinem TabletUI,

Jedesmal wenn ich auf "Aktualisieren" klicke, bzw. wenn ich es öffne kommen abwechselnd die richtige und dann die falsche Anzeige. Könnte mir jemand helfen?

Aus dem Code kann ich nichts falsches auslesen.

PT_menu.html

Code Auswählen

<header style="border-top-left-radius:8px;border-top-right-radius:8px;">Men&uuml;</header>

<div data-type="pagetab" 
	data-url="PT_index_home.html"
	data-on-color="#E6FF57"
  data-off-color="#808080"
	data-on-background-color="#E6FF57"
	data-off-background-color="#A6BF17"
  data-icon="fa-home"
  data-background-icon="fa-circle-thin"
  class="cell" >
</div>

PT_index_home.html

Code Auswählen

<div class="gridster">
	<ul>
		<!-- ========= Menu ======================= -->
		<li data-row="1" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_aussen.html"
        class="halbTransparent"></li>
        
		<!-- ========= Klima ====================== -->
		<li data-row="2" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_innen.html"
        class="halbTransparent"></li>
        
		<!-- ============= Uhrzeit ================ -->
		<li data-row="1" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_uhr.html"
		class="halbTransparent"></li>
        
		<!-- ============= Wohnzimmer-Licht ======= -->
        <li data-row="3" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_index_wichtig.html"
		class="halbTransparent"></li>
        
		<!-- ============= Multimedia ============= -->
		<li data-row="3" data-col="3" data-sizex="3" data-sizey="2" data-template="PT_inc_multimedia.html"
		class="halbTransparent"></li>
        
		<!-- ========= Content-Büro ============== -->
		<li data-row="3" data-col="6" data-sizex="2" data-sizey="2" data-template="PT_inc_buero_licht.html"
		class="halbTransparent"></li>
        
        <!-- ========= Content-Media ============== -->
        <li data-row="5" data-col="1" data-sizex="7" data-sizey="1" data-template="PT_index_schalter_unten.html"
		class="halbTransparent"></li>	
        
	</ul>
</div>

Vielen Dank im Voraus. Patrick

amenomade · 02 September 2019, 12:29:54

Wichtiger wären
- die Headers in der Hauptseite (index.html?)
- Logauszüge aus dem Browser (mit F12)

Hast Du was an die .css Dateien geändert?

morph · 02 September 2019, 15:48:12

Gern.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<title>Castle</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="134">
	<meta name="widget_base_height" content="140">
	<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="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	<meta name='gridster_disable' content='1'>
  <meta name="fhemweb_url" content="http://192.168.4.48:8083/fhem">
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.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/fhemSVG.css" />
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>
	
</head>
<body>

<div class="gridster">
	<ul>
        
        <!-- ============= Uhrzeit ================ -->
		<li data-row="1" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_uhr.html"
		class="halbTransparent"></li>
        
		<!-- ========= Menu ======================= -->
		<li data-row="1" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_aussen.html"
        class="halbTransparent"></li>
        
		<!-- ========= Klima ====================== -->
		<li data-row="2" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_innen.html"
        class="halbTransparent"></li>
        
		<!-- ============= Wohnzimmer-Licht ======= -->
        <li data-row="3" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_index_wichtig.html"
		class="halbTransparent"></li>
        
		<!-- ============= Multimedia ============= -->
		<li data-row="3" data-col="3" data-sizex="3" data-sizey="2" data-template="PT_inc_multimedia.html"
		class="halbTransparent"></li>
        
		<!-- ========= Content-Büro ============== -->
		<li data-row="3" data-col="6" data-sizex="2" data-sizey="2" data-template="PT_inc_buero_licht.html"
		class="halbTransparent"></li>
        
        <!-- ========= Content-Media ============== -->
        <li data-row="5" data-col="1" data-sizex="7" data-sizey="1" data-template="PT_index_schalter_unten.html"
		class="halbTransparent"></li>	
        
	</ul>
</div>

</body>
</html>

Ich hab nun das alles in die Index.html eingetragen, und nun taucht der "Fehler" nicht mehr auf.

Ob anderweitige Dateien verändert wurden kann ich nicht sagen, da ich das ganze mehr oder weniger "gemoppst" habe und für mich dann nur noch angepasst habe.

Gruß, Patrick

FHEM Forum

TabletUI wird nicht immer korrekt dargestellt

morph

amenomade

morph