Platzierung der Gridster-Elemente schlägt fehl

Begonnen von IcemanNRW, 07 Oktober 2017, 10:56:35

Vorheriges Thema - Nächstes Thema

IcemanNRW

Hallo zusammen,

ich habe seit vorgestern ein Menü mittels Pagebutton eingebaut (nach Anleitung vom Pagebutton-Wiki).

Es funktioniert auch soweit, nur ich kann in den Inhalts-Seiten keine Elemente mehr mittels "data-row" und "data-col" platzieren. Die Elemente werden einfach in, bzw. ab der ersten Reihe angezeigt.

Anbei der Code der index.html:
<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.6.*
     * 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="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1"> <!--verhindert, dass man die grids verschieben kann-->
    <meta name="gridster_base_width" content="112"> <!--Wohl identisch mit "widget_base_width"-->
    <meta name="gridster_base_height" content="67"> <!--Wohl identisch mit "widget_base_heigth"-->
    <meta name="gridster_margin" content="4"> <!--Abstand zwischen den einzelnen Widgets-->

<!-- Puls Tablet: Pixel-Ratio 1,3312500; BrowserHeight: 601; BrowserWidth:962-->

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

    <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 class="gridster">
        <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="8">
<header><div data-type="label" class="medium">Menü</header>
            <div class="cell">
                <div data-type="pagebutton" data-url="#1_index.html"      data-load="#1_index" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*/||.*index.html||.*#1_index.html)" data-icon="fa-home" class="default top-space "></div><div data-type="label" class="narrow compressed small shadow darker">Home</div>
                <div data-type="pagebutton" data-url="#1_light.html"      data-load="#1_light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_light.html||.*#2_light_etage_.*.html)" data-icon="fa-lightbulb-o" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Licht</div>
                <div data-type="pagebutton" data-url="#1_heating.html"    data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Heizung</div>
                <div data-type="pagebutton" data-url="#1_rollaeden.html" data-load="#1_rollaeden" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_rollaeden.html||.*#2_rollaeden_etage_.*.html)" data-icon="oa-fts_shutter_50" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Rolläden</div>
                <div data-type="pagebutton" data-url="#1_wetter.html"    data-load="#1_wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_wetter.html||.*#2_wetter_.*.html)" data-icon="oa-weather_cloudy" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Wetter</div>
                <div data-type="pagebutton" data-url="#1_sonstiges.html"    data-load="#1_sonstiges" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_sonstiges.html||.*#2_sonstiges_.*.html)" data-icon="oa-edit_settings" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Sonstiges</div>
<div class="absolute bottom bottom-space-2x">
<div data-type="clock" data-format="H:i" class="container bigger orange"></div>
<div data-type="clock" data-format="l" class="cell orange"></div>
<div data-type="clock" data-format="d.m.Y" class="cell orange"></div>
                </div>
</div>
</div>
        </li>
       
<li data-row="1" data-col="2" data-sizex="7" data-sizey="8">
            <div class="page" id="1_index"></div>
            <div class="page" id="1_light"></div>
            <div class="page" id="1_heating"></div>
            <div class="page" id="1_rollaeden"></div>
            <div class="page" id="1_wetter"></div>
            <div class="page" id="1_sonstiges"></div>
</li>
        </ul>
    </div>
</body>
</html>


Die 1_index.html sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton
-->

</head>
<body>
  <div class="page" id="1_index">
    <div class="gridster">
    <ul>

<li data-row="3" data-col="2" data-sizex="3" data-sizey="4">
        <header>Letztes Foto Haustür:</header>
<div class="nocache" data-type="popup" data-refresh="2" data-height="600px" data-width="960px">
<div data-type="image"
data-refresh="2"
data-url="http://192.168.178.5/cgi-bin/viewer/video.jpg?resolution=640x480"
class="nocache"></div>
<div class="dialog nocache">
<header>Haustür Livebild:</header>
<div class="container">
<div data-type="image" data-size="" data-refresh="2" data-url="http://192.168.178.5/video2.mjpg"></div>
</div>
</div>
</div>
</li>


<li data-row="5" data-col="5" data-sizex="2" data-sizey="2">
        <header>Rolläden</header>
<div class=""
data-type="symbol"
data-device="Rollo_EG_Terrassentuer"
data-states='["Auf","Zu","Halb"]'
data-icons='["oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_50"]'
data-colors='["green","#505050","yellow"]'></div>
</li>


<li class="gridster" data-row="1" data-col="7" data-sizex="1" data-sizey="8">
        <header>Fenster</header>
        <div class="vbox">
<div class="vbox items-space-between left-space right-space">
<div>
<div data-type="symbol" data-device="FK_EG_Haustuer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Haustür EG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_EG_Kueche" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Küche EG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_EG_Terrassentuer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Terrassentür EG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_EG_Wohnzimmer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Wohnzimmer EG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_Keller_Hintertuer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Keller Hintertür</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_OG_Bad" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Bad OG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_OG_Gaestezimmer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Gästezimmer OG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_OG_Kinderzimmer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Kinderzimmer OG</div>
</div>
<div class="top-space"></div>
<div>
<div data-type="symbol" data-device="FK_OG_Schlafzimmer" class="compressed" data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="open" data-get-off="closed"></div>
<div data-type="label" class="small darker">Schlafzimmer OG</div>
</div>
</div>
</div>
</li>

<li data-row="1" data-col="8" data-sizex="1" data-sizey="8">
<header>Wetter</header>
<div class="top-space">Heute:</div>
<div data-type="weather" data-device="MeinWetter" data-get="fc1_condition" data-imageset="kleinklima" class="centered" img style="width:80%"></div>
<div class="sheet">
<div class="">
<div class="cell inline">Ist:</div>
<div class="cell inline normal white cell medium" data-type="label" data-device="MeinWetter" data-get="temp_c" data-unit=" &deg;C" class="cell medium"></div>
</div>
<div class="">
<div class="cell inline">Min:</div>
<div class="cell inline normal blue cell medium" data-type="label" data-device="MeinWetter" data-get="fc1_low_c" data-unit=" &deg;C"></div>
</div>
<div class="">
<div class="cell inline">Max:</div>
<div class="cell inline normal orange cell" data-type="label" data-device="MeinWetter" data-get="fc1_high_c" data-unit=" &deg;C"></div>
</div>
<div class="top-space-2x">Morgen:</div>
<div data-type="weather" data-device="MeinWetter" data-get="fc2_condition" data-imageset="kleinklima" class="centered" img style="width:80%"></div>
<div class="sheet">
<div class="">
<div class="cell inline">Min:</div>
<div class="cell inline normal blue cell medium" data-type="label" data-device="MeinWetter" data-get="fc2_low_c" data-unit=" &deg;C"></div>
</div>
<div class="">
<div class="cell inline">Max:</div>
<div class="cell inline normal orange cell" data-type="label" data-device="MeinWetter" data-get="fc2_high_c" data-unit=" &deg;C"></div>
</div>
<div class="top-space-2x">Übermorgen:</div>
<div data-type="weather" data-device="MeinWetter" data-get="fc3_condition" data-imageset="kleinklima" class="centered" img style="width:80%"></div>
<div class="sheet">
<div class="">
<div class="cell inline">Min:</div>
<div class="cell inline normal blue cell medium" data-type="label" data-device="MeinWetter" data-get="fc3_low_c" data-unit=" &deg;C"></div>
</div>
<div class="">
<div class="cell inline">Max:</div>
<div class="cell inline normal orange cell" data-type="label" data-device="MeinWetter" data-get="fc3_high_c" data-unit=" &deg;C"></div>
</div>
</div>
</div>
</div>
</li>


<li data-row="7" data-col="2" data-sizex="2" data-sizey="2">
<header>Spritmonitor</header>
<table width="100%" class="">
<tr>
          <th>Tankstelle</th>
          <th>Super</th>
</tr>
<tr>
          <td>
              <div class="inline">Shell Merl</div>
          </td>
          <td>
              <div data-type="label" data-device="TankstelleShell" data-get="SuperE5" class=""></div>
          </td>
</tr>
<tr>
          <td>
              <div class="inline">Markant</div>
          </td>
          <td>
              <div data-type="label" data-device="TankstelleMarkant" data-get="SuperE5" class=""></div>
          </td>
</tr>
<tr>
          <td>
              <div class="inline">AVEX</div>
          </td>
          <td>
              <div data-type="label" data-device="TankstelleAVEX" data-get="SuperE5" class=""></div>
          </td>
</tr>
<tr>
          <td>
              <div class="inline"> ARAL</div>
          </td>
          <td>
              <div data-type="label" data-device="TankstelleARAL" data-get="SuperE5" class=""></div>
          </td>
</tr>
</table>
</li>

<li data-row="7" data-col="4" data-sizex="2" data-sizey="2">
<header>Fahrzeiten</header>
<table width="100%" class="">
<tr>
<th>Ziel</th>
<th>Über</th>
<th>Aktuell</th>
</tr>
<tr>
<td>
<div data-type="label" class="inline">Bonn</div>
</td>
<td>
<div data-type="label" class="inline">Landstraße</div>
</td>
<td>
<div data-type="label" data-device="Arbeit1L" data-part=".*Aktuell:(.*).*"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="inline">Bonn</div>
</td>
<td>
<div data-type="label" class="inline">Autobahn</div>
</td>
<td>
<div data-type="label" data-device="Arbeit1A" data-part=".*Aktuell:(.*).*"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="inline">Köln</div>
</td>
<td>
<div data-type="label" class="inline">Landstraße</div>
</td>
<td>
<div data-type="label" data-device="Arbeit2L" data-part=".*Aktuell:(.*).*"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="inline">Köln</div>
</td>
<td>
<div data-type="label" class="inline">Autobahn</div>
</td>
<td>
<div data-type="label" data-device="Arbeit2A" data-part=".*Aktuell:(.*).*"></div>
</td>
</tr>
</table>
</li>
    </ul>
    </div>
  </div>
</body>
</html>


Weiterhin ist mir aufgefallen, dass bei Neuladen der Seite ein weißer Punkt oben angezeigt wird (der sich einmal von rechts in die Mitte verschiebt). Auf dem PC-Browser fällt er bei der Anzeige nachher nicht auf, auf dem Tablet sieht man diesen Punkt oben und dadurch verschieben sich anscheinend auch die Fenster nach unten. Vlt. hängt das mit dem Problem oben zusammen...
Ich habe diesen Punkt einmal mittels Screenshot eingefangen, siehe Anhang. Nicht wundern, der Inhalt der Seite ist in dem Screenshot nicht zu sehen, er wird aber kurz nach Anzeige des Punkt geladen.

Hat jemand eine Idee wo der Fehler ist?

Gruß

P.S. Ich habe schon beide Codes nach überflüssigen "&"-Zeichen durchsucht, ob sich vlt. ein Punkt in HTML-Sprache eingeschlichen hat, ist aber alles ok.

Standarduser

In Deiner index.html sind 2 Fehler:

Auf Zeile 52 fehlt ein </div>
Auf Zeile 66 ist ein </div> zu viel


<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.6.*
     * 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="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1"> <!--verhindert, dass man die grids verschieben kann-->
    <meta name="gridster_base_width" content="112"> <!--Wohl identisch mit "widget_base_width"-->
    <meta name="gridster_base_height" content="67"> <!--Wohl identisch mit "widget_base_heigth"-->
    <meta name="gridster_margin" content="4"> <!--Abstand zwischen den einzelnen Widgets-->

<!-- Puls Tablet: Pixel-Ratio 1,3312500; BrowserHeight: 601; BrowserWidth:962-->

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

    <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 class="gridster">
        <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="8">
<header><div data-type="label" class="medium">Menü</div></header>
            <div class="cell">
                <div data-type="pagebutton" data-url="#1_index.html"      data-load="#1_index" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*/||.*index.html||.*#1_index.html)" data-icon="fa-home" class="default top-space "></div><div data-type="label" class="narrow compressed small shadow darker">Home</div>
                <div data-type="pagebutton" data-url="#1_light.html"      data-load="#1_light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_light.html||.*#2_light_etage_.*.html)" data-icon="fa-lightbulb-o" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Licht</div>
                <div data-type="pagebutton" data-url="#1_heating.html"    data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Heizung</div>
                <div data-type="pagebutton" data-url="#1_rollaeden.html" data-load="#1_rollaeden" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_rollaeden.html||.*#2_rollaeden_etage_.*.html)" data-icon="oa-fts_shutter_50" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Rolläden</div>
                <div data-type="pagebutton" data-url="#1_wetter.html"    data-load="#1_wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_wetter.html||.*#2_wetter_.*.html)" data-icon="oa-weather_cloudy" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Wetter</div>
                <div data-type="pagebutton" data-url="#1_sonstiges.html"    data-load="#1_sonstiges" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="orange" data-on-color="#222222" data-active-pattern="(.*#1_sonstiges.html||.*#2_sonstiges_.*.html)" data-icon="oa-edit_settings" class="top-space"></div><div data-type="label" class="narrow compressed small shadow darker">Sonstiges</div>
<div class="absolute bottom bottom-space-2x">
<div data-type="clock" data-format="H:i" class="container bigger orange"></div>
<div data-type="clock" data-format="l" class="cell orange"></div>
<div data-type="clock" data-format="d.m.Y" class="cell orange"></div>
                </div>
</div>

        </li>
       
<li data-row="1" data-col="2" data-sizex="7" data-sizey="8">
            <div class="page" id="1_index"></div>
            <div class="page" id="1_light"></div>
            <div class="page" id="1_heating"></div>
            <div class="page" id="1_rollaeden"></div>
            <div class="page" id="1_wetter"></div>
            <div class="page" id="1_sonstiges"></div>
</li>
        </ul>
    </div>
</body>
</html>

IcemanNRW

Danke, ist geändert. Der weiße Punkt ist nun weg.

Leider funktioniert noch immer die Platzierung der einzelnen Elemente nicht....

Standarduser


IcemanNRW

Zitat von: Standarduser am 08 Oktober 2017, 15:45:07
Was funktioniert da nicht?

Ich habe verschiedene Gridster-Elemte (z.B. Kamera-Anzeige, Spritmonitor, Wetter, Fensterstatus, etc.) eingebunden.

Jedes einzelne dieser Elemente platziere ich über data-row/data-col.

Leider wird z.B. die Kamera in der erste 1 Spalte/1 Reihe angezeigt, obwohl sie an folgender Stelle stehen müsste:
<li data-row="3" data-col="2" data-sizex="3" data-sizey="4">

Standarduser

Zitat von: IcemanNRW am 08 Oktober 2017, 16:15:50
Ich habe verschiedene Gridster-Elemte (z.B. Kamera-Anzeige, Spritmonitor, Wetter, Fensterstatus, etc.) eingebunden.

Jedes einzelne dieser Elemente platziere ich über data-row/data-col.

Leider wird z.B. die Kamera in der erste 1 Spalte/1 Reihe angezeigt, obwohl sie an folgender Stelle stehen müsste:
<li data-row="3" data-col="2" data-sizex="3" data-sizey="4">

Man kann eine Kachel nicht frei auf der Fläche platzieren. Die Spalte kann man festlegen, allerdings müssen Reihen von oben nach unten aufgebaut werden.
Bei Deiner Kamera-Kachel, die in Zeile 3 platziert sein soll, fehlen also Kacheln, die Zeile 1 und 2 auffüllen. Es reicht dabei, die erste Spalte der darunter liegenden Kachel zu treffen.

Wenn Du an der Stelle nichts anzeigen willst, kannst Du eine leere Kachel einbauen, und die transparent machen. Etwa so:
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2" style="background: transparent"></li>