FTUI zeigt seit Umbau auf pagebuttons Slider nicht mehr richtig an

NewMatic · 22 November 2018, 15:40:31

Hallo liebes Forum,

in Anlehnung an https://forum.fhem.de/index.php/topic,67141.15.html habe ich meine UI auf Pagebuttons umgebaut. Ansich ging alles gut, aber ich schaff es nicht meinen Slider richtig anzuzeigen.
Testweise habe ich mal den Beispiel Code für einen dummen Dummy Slider von der Wiki genommen, aber selbst der zickt.

die Index.html sieht wie folgt aus:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
   
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

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

    <script src="js/fhem-tablet-ui.js" defer></script>
   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
   <!-- 
	 /* 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/
	 * - 
	 * - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
	 * -   Breite: 9 Felder / Höhe: 5 Felder
	 * -    <meta name="widget_base_width" content="138">
	 * -    <meta name="widget_base_height" content="155">
	 * - Denver TAD-70112 WiFi: 7 Zoll 800x480 512 MB Dualcore 1,3 GHz 8GB
	 * -   Breite: 7 Felder / Höhe: 5 Felder
	 * -    <meta name="widget_base_width" content="144">
	 * -    <meta name="widget_base_height" content="112">
	 * - IPhone 5s: 4 Zoll 1136 × 640 Dualcore 1 GB 1,3 GHz 64GB
	 * -   Breite: 7 Felder / Höhe: 5 Felder
	 * -    <meta name="widget_base_width" content="144">
	 * -    <meta name="widget_base_height" content="112">
	 */
	 
	 1024x768
	     <meta name="shortpoll_filter" content=".*">
	-->
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="41">
    <meta name="widget_base_height" content="42">
    <meta name="gridster_cols" content="30">
    <meta name="gridster_rows" content="18">
    
    <meta name="web_device" content="WEB">
    <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="widget_margin" content="1">
    <meta name="longpoll" content="1">
    <meta name="longpoll_type" content="websocket">
	<meta name="longpoll_filter" content=".*">  
    <meta name="debug" content="2">
    <meta name="toast" content="2">
    

    <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" />
	<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
	
    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->	
	<link rel="stylesheet" href="/lib/powerange.min.css" />
	<!--<link rel="stylesheet" href="/lib/openautomation.css" />-->
	<!--<link rel="stylesheet" href="/fhem/tablet10test/eigenefonts/gk/style.css">-->
	<link rel="stylesheet" href="/lib/material-icons.css" />
	<link rel="stylesheet" href="/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="./css/wopr.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/own.css">
	<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
	<link rel="stylesheet" href="user-tablet-ui.css" />

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

    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="3" data-sizey="18">
<header><div data-type="label" class="medium orange">Menu</div></header>

            <div class="cell">
                  
                <div data-type="pagebutton" data-url="#3_rooms_dg.html"     	data-load="#etage_dg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#3_rooms_dg.html)" 	    									data-icon="oa-control_building_s_dg" 	class="default top-space"></div>
                <div data-type="label" class="darker">DG</div>
                
                <div data-type="pagebutton" data-url="#2_etage_og.html"    		data-load="#etage_og" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_og.html||.*#3_rooms_og_.*.html)" 		data-icon="oa-control_building_s_og" 	class="prefetch top-space"></div>
                <div data-type="label" class="darker">OG</div>
                
                <div data-type="pagebutton" data-url="#2_etage_eg.html" 		data-load="#etage_eg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_eg.html||.*#1_etagen.html||.*#3_rooms_eg_.*.html)"		data-icon="oa-control_building_s_eg" 	class="top-space"></div>
                <div data-type="label" class="darker">EG</div>
                
                <div data-type="pagebutton" data-url="#2_etage_kg.html"      	data-load="#etage_kg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_kg.html||.*#3_rooms_kg_.*.html)" 		data-icon="oa-control_building_s_kg" 	class="top-space"></div>
                <div data-type="label" class="darker">Keller</div>
                
                <div data-type="pagebutton" data-url="#2_etage_au.html"    		data-load="#etage_au" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_etage_au.html||.*#3_rooms_au_.*.html)" 		data-icon="oa-control_building_outside" class="top-space"></div>
                <div data-type="label" class="darker">Aussen</div>
            </div>
        </li>
        <li data-row="1" data-col="3" data-sizex="26" data-sizey="18">
            <div class="page" id="etage_eg"></div>
            <div class="page" id="etage_dg"></div>
            <div class="page" id="etage_og"></div>
            <div class="page" id="etage_kg"></div>
            <div class="page" id="etage_au"></div>
         </li>  


</body>
</html>

und das ist die am Screenshot geöffnete Seite:

Code Auswählen

<html>
<title>FHEM</title>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <script src="js/fhem-tablet-ui.js" defer></script>
   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
	 
</head>
<body>
  <div class="page" id="rooms_og_badezimmer">
    <div class="gridster">
      <ul>         
												
		<div data-type="slider"   data-device='Dummy1'     data-min="10"     data-max="90"      class="cell" ></div>
    	<div data-type="label" class="cell">Light1</div> 
    
      </ul>
    </div>
   </div>
</body>
</html>

Hier ein Screenshot wie der Slider angezeigt wird.
Hat irgendjemand eine Idee, was ich hier falsch mache?

Bitte um eure Hilfe....

NewMatic · 23 November 2018, 11:02:25

hat keiner eine Idee?

setstate · 23 November 2018, 20:05:32

was mir auffällt: du benutzt Gridster, hast aber keine <li> Tags definiert.
So sieht die Gridster-Grundstruktur aus:

Code Auswählen


<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="4" data-sizex="3">
                <header>EXAMPLE1</header>
                <!-- place your widget here -->
            </li>
            <li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
                <header>EXAMPLE2</header>
                <!-- place your widget here -->
            </li>
            <li data-row="1" data-col="10" data-sizey="4" data-sizex="3">
                <header>EXAMPLE3</header>
                <!-- place your widget here -->
            </li>
            <li data-row="5" data-col="1" data-sizey="3" data-sizex="3">
                <header>EXAMPLE4</header>
                <!-- place your widget here -->
            </li>
            <li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
                <header>EXAMPLE5</header>
                <!-- place your widget here -->
            </li>
            <li data-row="5" data-col="10" data-sizey="3" data-sizex="3">
                <header>EXAMPLE6</header>
                <!-- place your widget here -->
            </li>
        </ul>
    </div>
</body>

FHEM Forum

FTUI zeigt seit Umbau auf pagebuttons Slider nicht mehr richtig an

NewMatic

NewMatic

setstate