[Gelöst] FTUI Anfängerfrage: Kacheln lassen sich nicht an gewünschter Stelle

Begonnen von hadenia, 09 Dezember 2021, 19:39:59

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

hadenia

09 Dezember 2021, 19:39:59 Letzte Bearbeitung: 13 Dezember 2021, 21:06:58 von hadenia
Stehe am Anfang und möchte mir eine Oberfläche zur Bedienung zusammenstellen, die auf dem Mobiltelefon mit dem Fully Kiosk Browser bzw. am PC in jedem Broser laufen soll. Links soll ein Seitenmenü sein.
Mein Problem: Obwohl ich bei den Listenelementen data-row und data-col angebe, erscheinen die Elemente "willkürlich" im Browserfenster anstatt an der Stelle, an der ich es mir wünsche ;-)

Die index.html hat aktuell nur das Seitenmenü:
Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* 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/
     */
    -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <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="1"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

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

    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <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" / -->
    <!-- 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 data-type="clicksound"
      data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]'
      data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]'
      data-length='[200,300,200,1400,200]'
      data-volume="70"
    ></div> -->
<div class="gridster">
    <ul>

      <li data-row="1" data-col="1" data-sizex="1" data-sizey="8" data-template="/fhem/tablet/nav_left.html"></li>

   </ul>
</div>
</body>

</html>


Das Seitenmenü:
Code Auswählen

<!-- <html>
<body> -->
    <header>RÄUME</header>

    <div class="cell">
        <div data-type="pagetab" data-url="/fhem/tablet/index_garten.html"  data-icon="fa-cloud" class="cell" data-text="Garten"></div>
        <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-home" class="cell" data-text="home"> </div>
        <div data-type="pagetab" data-url="/fhem/tablet/outdoor.html"  data-icon="fa-sun-o" class="cell" data-text="Garten"> </div>
        <div data-type="pagetab" data-url="/fhem/tablet/heating.html"  data-icon="fa-fire" class="cell" data-text="Heizung"> </div>
        <div data-type="pagetab" data-url="/fhem/tablet/livingroom.html"  data-icon="fa-lock" class="cell" data-text="Wohnzimmer"> </div>
        <div data-type="pagetab" data-url="/fhem/tablet/flur.html"  data-icon="fa-bar-chart" class="Flur"></div>
    </div>
<!-- </body>
</html> -->


Das Menü, welches zerwürfelt angezeigt wird:
Code Auswählen

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <!--
<div data-type="clicksound"
        data-sound='["ion-tap", "ion-water-droplet-2", "ion-button-tiny", "ion-cd-tray", "ion-water-droplet-3"]'
        data-bind-to='["+knob", "+circlemenu-outer", "+button", "+circlemenu-center", "+slider"]'
        data-length='[200,300,200,1400,200]'
        data-volume="70"
        ></div> -->


<div class="gridster">
  <ul>

        <li data-row="1" data-col="1" data-sizex="1" data-sizey="8" data-template="/fhem/tablet/nav_left.html"></li>

<!-- Schalter fuer Aussenlampen -->
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
    <header>Gartenleuchten</header>
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="2">
    <header>Leuchten Gartenweg</header>
         <div data-type="switch" data-device="ZWave_SWITCH_BINARY_17.02_GartenWegleuchte"></div>
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="2">
    <header>Wandleuchte Halle</header>
         <div data-type="switch" data-device="ZWave_SWITCH_BINARY_36.01_Wandleuchten_Halle"></div>
</li>

<li data-row="3" data-col="2" data-sizex="1" data-sizey="2">
    <header>Wandleuchte Nebeneingang</header>
         <div data-type="switch" data-device="ZWave_SWITCH_BINARY_17_TuerGarten"></div>
</li>

<!-- Schalter fuer Teich -->
<li data-row="4" data-col="2" data-sizex="2" data-sizey="1">
<header>Teich</header>
</li>

<li data-row="5" data-col="2" data-sizex="1" data-sizey="2">
<header>Bachlauf</header>
<div data-type="switch" data-device="ZWave_SWITCH_BINARY_29.01_Teich_Bachlauf"></div>
</li>

<li data-row="5" data-col="3" data-sizex="1" data-sizey="2">
<header>UV Lampe</header>
<div data-type="switch" data-device="ZWave_SWITCH_BINARY_29.02_Teich_UuW"></div>
</li>

<li data-row="6" data-col="2" data-sizex="1" data-sizey="2">
<header>Hauptschalter</header>
<div data-type="switch" data-device="ZWave_SWITCH_BINARY_27_Teich_Hauptschalter"></div>
</li>

</ul>



</div>
</body>
</html>


Einen Screenshot, wie das am PC mit Firefox aussieht, hänge ich an.

So soll es aussehen:
Links in Zeile 1 / Spalte eins das 1-spaltige Menü mit 8 Höheneinheiten => wird richtig angezeigt

Dann eine Überschrift Gartenleuchten in Zeile 1 mit der Breite von 2 Einheiten
In der Zeile Nr. 2 data-row="2" darunter 2x ein switch und das klappt schon nicht. Statt darunter sind die beiden Schalter daneben in der ersten Zeile.
Auf dem schmalen Mobilfunkdisplay ist die Überschrift Gartenleuchten  ganz unten.
Ich kann leider keine Logik in der Fehldarstellung erkennen, habe schon X Sachen probiert und gelesen aber ich bekomme die Elemente nicht an der Stelle angeordnet wo ich es möchte.
Was mache ich falsch, hat jemand einen Tipp für mich
Im Voraus vielen Dank für alle Tipps!

hadenia

#1
13 Dezember 2021, 21:07:55
Ich habe einfach nochmal von vorne angefangen und jetzt klappt alles wie es soll. Daher kann ich hier leider keinen Hinweis hinterlassen, falls jemand einähnliches Problem haben sollte.
Drucken
Nach oben Seiten1
Benutzer-Aktionen