[gelöst] Anzeige in Tablet UI nicht korrekt

moerte · 11 Januar 2019, 10:02:58

Hallo meine lieben..
ich habe ein Problem mit der Anzeige meines Tablet UI.
Bekomme im Vollbild unten immer einen weißen Streifen.
ich komm einfach nicht weiter, wenn ich an den gridstern rumspiele, verschiebt es sich Teilweise noch schlimmer. (Im Anhang ein Bild)
Angezeigen lasse ich mir das tablet UI hauptsächlich auf einen 23 Zoll Medion All in one Touch PC.

Könnte da evtl mal jemand drüber schauen?
Würde mich über hilfe sehr freuen !!!

hier die index:

Code Auswählen


<!DOCTYPE html>
<html>

<head>
    <meta name="longpoll_maxage" content="0">
    <meta name="longpoll_filter" content=".*">
    <meta http-equiv="Cache-Control" content="no-store" />
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
    

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
    <!-- Custom Fonts -->
    <link rel="stylesheet" href="fonts/roman/style.css" />
    <link rel="stylesheet" href="fonts/material/style.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/fhem-green1-ui.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user1.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>

	
    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->


    <title>FHEM-Tablet-UI</title>
</head>

<body>
<div data-type="tts" data-device="speak"></div>
    <div class="gridster">
        <ul>
	
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="15" style="background:#333333;">
                <header style="background:#86b300;">KAMERA</header>
				<div class="">
                    <div data-type="popup" data-height="90%" data-width="90%">
               <div data-type="image"
                             data-url="xxx"
                             data-refresh="1"
                             width="100%"
                             height="100%"
                             class="nocache">
                        </div>
                        <div class="dialog">
                            <header>LIVEKAMERA</header>
                            <div data-type="image"
                                 data-url="xxx"
                                 data-refresh="1"
                                 width="100%"
                                 height="100%"
                                 class="nocache">
                            </div>
                        </div>
                    </div>
                </div>
                <header style="background:#86b300;" data-type="link"
                     data-url="content_home.html" data-width="100%" data-color="white">MENU</header>
                <div data-type="link" class="default medium top-space-mobile-2 left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-home"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_home"
                     data-url="#content_home.html"
                     data-active-color="#86b300"
                     data-active-pattern="(.*index.html|.*#content_home.html)">
                    Home
				</div>
                	
               
				<div style="display:inline-block;height:2px;width:80%;background-color:#86b300;"></div>
                <div data-type="link" class="prefetch medium top-space-mobile left-space-2 big cell"
                     data-width="205"
                     data-icon-left="mi-add_alert"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_alarm"
                     data-url="#content_alarm.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_alarm.html">
                    Alarm
                </div>
				
				<div data-type="link" class="prefetch medium top-space-mobile-2 left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-sitemap"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_netzwerk"
                     data-url="#content_netzwerk.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_netzwerk.html">
                    Netzwerk
                </div>
				
                <div style="display:inline-block;height:2px;width:80%;background-color:#86b300;"></div>
                <div data-type="link" class="prefetch medium top-space-mobile left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-bath"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_bad"
                     data-url="#content_bad.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_bad.html">
                    Bad
                </div>
                <div data-type="link" class="prefetch medium top-space-mobile-2 left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-bed"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_schlafen"
                     data-url="#content_schlafen.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_schlafen.html">
                    Schlafen
                </div>
                <div data-type="link" class="prefetch medium top-space-mobile-2 left-space-2 big cell"
                     data-width="205"
                     data-icon-left="ro-sofa"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_wohnen"
                     data-url="#content_wohnen.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_wohnen.html">
                    Wohnen
                </div>
				<div data-type="link" class="prefetch medium top-space-mobile-2 left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-car"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_auto"
                     data-url="#content_auto.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_auto.html">
                    Auto
                </div>
                <div style="display:inline-block;height:2px;width:80%;background-color:#86b300;"></div>
                <div data-type="link" class="prefetch medium top-space-mobile left-space-2 big cell"
                     data-width="205"
                     data-icon-left="oa-scene_garden"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_draussen"
                     data-url="#content_draussen.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_draussen.html">
                    Garten
                </div>
				<div style="display:inline-block;height:2px;width:80%;background-color:#86b300;"></div>
                <div data-type="link" class="prefetch medium top-space-mobile left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fs-christmas_tree"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_weihnacht"
                     data-url="#content_weihnacht.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_weihnacht.html">
                    Weihnacht
                </div>  
				<div style="display:inline-block;height:2px;width:80%;background-color:#86b300;"></div>
                <div data-type="link" class="prefetch medium top-space-mobile left-space-2 big cell"
                     data-width="205"
                     data-icon-left="fa-cogs"
                     data-color="white"
                     data-text-align="center"
                     data-load="div#content_system"
                     data-url="#content_system.html"
                     data-active-color="#86b300"
                     data-active-pattern=".*#content_system.html">
                    System
                </div>            
            </li>
            
            <li data-row="1" data-col="3" data-sizex="8" data-sizey="15">
                <div class="page" id="content_home"></div>
				<div class="page" id="content_alarm"></div>
				<div class="page" id="content_netzwerk"></div>
                <div class="page" id="content_wohnen"></div>
                <div class="page" id="content_schlafen"></div>
                <div class="page" id="content_bad"></div>
                <div class="page" id="content_auto"></div>
				<div class="page" id="content_draussen"></div>
                <div class="page" id="content_weihnacht"></div>
				<div class="page" id="content_system"></div>
            </li>
			
			
        </ul>
    </div>
	

</body>

</html>

Edit: für den home code ist der code zu lang ... daher hab ichh ihn mal angehängt

roman1528 · 11 Januar 2019, 10:24:40

Moin.
Cool... du benutzt meinen Custom-Font

Code Auswählen


    <meta name="widget_base_height" content="71">

einfügen und immer Pixel für Pixel größer/kleiner machen bis es deinen Ansprüchen genügt.
Damit änderst du die Höhe einer gridster-Einheit.

Das ganze gibt es dann auch für die Breite:

Code Auswählen


    <meta name="widget_base_width" content="74">

Grüße^^

moerte · 11 Januar 2019, 10:33:59

hehehehe

vielen Dank für die schnelle Antwort !!!
Werde ich dann gleich mal testen.
Muss ich diese nur in der index einfügen oder in jeder html?

1000 DANK

Edit: genau das war es!! vielen Dank!!!! in der index einfach eingefügt und jetzt schaut es toll aus .. Danke Danke Danke

roman1528 · 11 Januar 2019, 10:41:34

Gerne

FHEM Forum

[gelöst] Anzeige in Tablet UI nicht korrekt

moerte

roman1528

moerte

roman1528