Seitennavigation in FTUI - ich verzweifel

Begonnen von JochenSi, 13 August 2017, 21:26:45

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

JochenSi

13 August 2017, 21:26:45
Guten Abend,

ich zweifel so langsam an mir selbst. Ich versuche seid über einem Tag eine ganz einfache Navigation auf meiner Tablet UI Seite hinzubekommen und schaffs nicht. Ich habe heute Pagetab und Pagebutton wie es auf den FHEM Tablet UI Seiten im FHMEWiki steht in mir jeder erdenklichen Form ausprobiert und immer Probleme gehabt. Die einzig teilweise funktionierende Konfig habe ich von dieser Seite:
https://knowthelist.github.io/fhem/tablet/demo_widgets.html
Ich habe den Code kopiert und auf meine Bedürfnisse angepasst.
In meinem Firefox auf dem PC und dem iPad funktioniert das ohne Fehlermeldungen. Auf dem iPad (Safari) und dem Raspberry (Firefox) nicht, es meldet "Lost connection to FHEM" und springt dann auf die FHEM Oberfläche.

Hier der Code in der index.html:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
   
    <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 name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="demo" content="0"> <!-- 1=demo data;0=normal mode-->

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.min.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/pgm2/jquery.min.js" defer></script>
    <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>

    <title>FTUI Demo Widgets</title>
</head>
<body>
<div class="gridster">
<ul>


<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
    <header>WIDGETS</header>
    <!-- place your widget here -->
    <div class="top-space inline">
        <div data-type="pagebutton"
        data-url="battery.html"
        data-off-background-color="#337ab7"
        data-icon="fa-battery">
        </div>
        <div class="cell">Batteriestaende</div>
    </div>
    <div class="top-space inline">
        <div data-type="pagebutton"
        data-url="light.html"
        data-off-background-color="#337ab7"
        data-icon="fa-lightbulb-o" >
        </div>
        <div class="cell">Licht</div>
    </div>
</li>

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


und hier der Code der battery.html:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <!--
    /* FHEM tablet ui */
    /*
    * UI builder framework for FHEM
    *
    * Version: 1.4.4
    * 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)
    *
    */
    -->
    <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 name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="demo" content="0"> <!-- 1=demo data;0=normal mode-->

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.min.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/pgm2/jquery.min.js" defer></script>
    <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>

    <title>FTUI Demo Colorwheel</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="6" data-sizey="5">
    <header>WIDGET COLORWHEEL</header>
    <!-- place your widget here -->
    <div class="left cell">
        <div data-type="link" class="left large thin"
             data-icon-left="fa-chevron-left"
             data-url="index.html">
            Widgets
        </div>
        <div class="left-align bigger thin ">Colorwheel</div>
        <div class="left-align darker">&nbsp; Widget</div>
    </div>
</li>
</ul>
</div>
</body>
</html>

Meiner Meinung muss der Fehler in der index.html liegen, da ich auch nicht in die light.html springen kann. Der inhalt der light.html ist:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
 
    <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 name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="demo" content="0"> <!-- 1=demo data;0=normal mode-->

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.min.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/pgm2/jquery.min.js" defer></script>
    <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>

    <title>FTUI Licht</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="6" data-sizey="5">
    <header>LICHT</header>
    <!-- place your widget here -->
</li>
</ul>
</div>
</body>
</html>
Alle drei Dateien liegen in /opt/fhem/www/tablet/ auf einem raspberry und gehören dem fhem-Benutzer.

Ich nehme an es ist wieder mal der Error 40. ......... 40 cm vorm Monitor ;-)

Grüße Jochen

Standarduser

#1
15 August 2017, 07:43:27
Hi jochen,

Vielleicht solltest du mal alles verwerfen und komplett neu anfangen. Du arbeitest mit einem längst überholten Stand, was ich nicht nur an der Versionsnummer im Head-Bereich erkenne, sondern auch daran, was Du alles im Head-Bereich stehen hast.

Schau dir das mal an, setz neu auf und übernimm anschließend Deine erstellten Inhalte aus dem Body-Bereich.

So kommst Du bestimmt am schnellsten zum Ziel.

JochenSi

#2
15 August 2017, 18:05:33
Hi danke für deine Antwort nur helfen tut sie mir leider überhaupt nicht.
Wie man aus den Codebeispielen erkennen kann habe ich gerade angefangen. Also wäre ein "verwerfen" kein Problem. Nur wie soll ich "neu" anfangen? Denn wie ich schon geschrieben habe, habe ich alle möglichen mir erkennbaren Kombinationen von der https://wiki.fhem.de/wiki/FHEM_Tablet_UI Seite versucht.
Ich habe FTUI mittels Update auf die neueste Version geupdatet. Die META Infos habe ich auch von der Seite bzw. den folgenden.
Einige der der METAs verstehe ich einige nicht und übernehme gerne einen Standard.
Wo kann ich denn Infos finden wie man einen aktuellen Header erzeugt?

Grüße Jochen

setstate

#3
15 August 2017, 20:20:47
- Es felt in der index.html der Bereich, der vom Inhalt durch die Sub-Pages ausgetauscht werden soll

Code Auswählen

<!DOCTYPE html>
<html>
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


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

    <title>FTUI Demo Widgets</title>
</head>
<body>
<div class="gridster">
<ul>


    <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
        <header>WIDGETS</header>
        <!-- place your widget here -->
        <div class="top-space inline">
            <div data-type="pagebutton"
                        data-url="#battery.html"
                        data-off-background-color="#337ab7"
                        data-icon="fa-battery"
                 data-active-pattern=".*battery.html"
                         data-load="#content1">
            </div>
            <div class="cell">Batteriestaende</div>
        </div>
        <div class="top-space inline">
            <div data-type="pagebutton"
                        data-url="#light.html"
                        data-off-background-color="#337ab7"
                        data-icon="fa-lightbulb-o"
                 data-active-pattern=".*light.html"
                         data-url="#light.html"
                         data-load="#content2">
            </div>
            <div class="cell">Licht</div>
        </div>
    </li>
    <li data-row="2" data-col="1" data-sizex="9" data-sizey="8">
        <div class="page" id="content1"></div>
        <div class="page" id="content2"></div>
    </li>
   
</ul>
</div>
</body>
</html>


- Die Subpages haben nicht die nötige Form
  - keine Header nötig
  - class="page" id="xxxx"


https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/subpages/content_lights.html

Code Auswählen


<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content2">
        <section>
            <div class="large col-1-2 left-align">Garten</div>
            <div data-type="switch" data-device="GartenLicht"
                 class="big thin col-1-2 right-align"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align">Herd</div>
             <div data-type="switch" data-device="HerdLicht_Sw"
                  class="big thin col-1-2 right-align"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align">Galerie</div>
             <div data-type="switch" data-device="GalerieLicht"
                  class="big thin col-1-2 right-align"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align">Schrank</div>
             <div data-type="switch" data-device="PowerAV_Sw"
                  class="big thin col-1-2 right-align"></div>
         </section>
    </div>
</body>
</html>

Jojo11

#4
20 August 2017, 13:29:54
Wenn Du die aktuelle Version verwendest, könnte es auch hiermit zusammenhängen: https://forum.fhem.de/index.php/topic,75637.0.html

Schöne Grüße
Jo

jemu75

#5
21 August 2017, 14:06:38
Ich empfehle für die Seitennavigation das Responsive Menü. Funktioniert in aller Hinsicht einwandfrei und passt sich zudem optimal dem jeweiligen Bildschirm an. Ein Beilspiel habe ich hier mal gezeigt .https://forum.fhem.de/index.php/topic,67709.msg675012.html#msg675012
Drucken
Nach oben Seiten1
Benutzer-Aktionen