FTUI: Ich kann Swiper nicht richtig navigieren

Burk · 15 September 2018, 18:18:54

hallo,

ich habe zum FTUI widget Swiper ein noch ungelöstes Problem, bei dem ich um Hilfe bitte - stehe wohl mal wieder auf dem Schlauch...

Auf der UI habe ich Folgendes umgesetzt, was auch funktioniert

HTML Seite zur Steuerung und Programmierung der Rolladen ("SubPageRolladen.html")

1. "SubPageRolladen.html" ruft das Template "RolladenSwitchTmpl.html" auf und übergibt den Rolladennamen als Variable. Ich kann damit einen Rolladen schalten (hoch, runter, stop).

2. "SubPageRolladen.html" ruft weiterhin das Template "RolladenTimerTmpl.html" auf. Da ich mehrere Timer habe, erfolgt dieser Aufruf vier mal innerhalb eines Swiper Elements. Hiermit kann ich für diesen Rolladen einstellen: Zeit, Fahrposition 0-100%, wochentäglich/wochenende).

Alle drei htmls sind über Gridster formatiert.

Jetzt möchte ich den Swiper aus 2.) aber nicht durch "Wischen" bedienen, sondern über einen kleinen switch. Ich habe an Multibutton gedacht, da ich ja insgesamt vier Timer durchschalten möchte. Dieser soll in "RolladenSwitchTmpl.html" als weiterer Button aufgenommen werden.

Das Funktioniert aber nicht wunschgemäß: jede Bedienung dieses multibuttons führt mich wieder auf den ersten Timer zurück. Wenn ich also zu Beginn auf dem ersten Timer bin, passiert nichts, wische ich von Hand auf einen der anderen Timer und betätige dann den multibutton, dann fährt der Swiper auf Timer 1 zurück. Ich habe es auch mal mit dem Widget "switch" probiert, wobei ich dann nur eine (oder zwei?) Zielpositionen angeben kann, das Verhalten ist aber identisch.

Anbei meine drei htmls:

SubPageRolladen.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="124">
    <meta name="widget_base_height" content="83">
    <meta name="gridster_margin" content="0">
    <meta name="widget_margin" content="0">
    <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="0"> <!-- 1=output to console;0=no output -->
    <meta name="gridster_disable" content="1">

    <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" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/weather-icons.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.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>Jalousietimer</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="3">
<header>Wohnzimmer</header><br>

<div data-type="swiper" class="hashnav nopagination">
<ul>
<li><div data-template="https://fhem.my-router.de:8083/fhem/ftui/RolladenTimerTmpl.html",
         data-parameter='{"PAR01":"WZ_01","PAR02":"WZ_01_Position","PAR03":"WZ_01_iteration"}'></div></li>

<li><div data-template="https://fhem.my-router.de:8083/fhem/ftui/RolladenTimerTmpl.html",
         data-parameter='{"PAR01":"WZ_02","PAR02":"WZ_02_Position","PAR03":"WZ_02_iteration"}'></div></li>

<li><div data-template="https://fhem.my-router.de:8083/fhem/ftui/RolladenTimerTmpl.html",
         data-parameter='{"PAR01":"WZ_03","PAR02":"WZ_03_Position","PAR03":"WZ_03_iteration"}'></div></li>

<li><div data-template="https://fhem.my-router.de:8083/fhem/ftui/RolladenTimerTmpl.html",
         data-parameter='{"PAR01":"WZ_04","PAR02":"WZ_04_Position","PAR03":"WZ_04_iteration"}'></div></li>
</ul>
</div>
</li>

<li data-row="4" data-col="1" data-sizex="1" data-sizey="2">
<div data-template="https://fhem.my-router.de:8083/fhem/ftui/RolladenSwitchTmpl.html",
     data-parameter='{"PAR00":"WZ_Jalousie"}'></div></li>

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

RolladenTimerTmpl.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
<title>JalousieEinzeltimer</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="3">
<div data-type="datetimepicker"
     data-device="Jalousietimer"
     data-get="PAR01"
     data-set="PAR01"
     data-step="5"
     data-cmd="setreading"
     data-datepicker="false"
     data-format="H:i"
     class="big thin blue centered"></div><br>
<div data-type="knob"
     data-device="Jalousietimer"
     data-get="PAR02"
     data-set="PAR02"
     data-min="0"
     data-max="100"
     data-step="5"
     data-cmd="setreading"
     class="small"
     data-unit="%"></div>
<div data-type="select"
        data-device="Jalousietimer"
        data-items='["weekdays","weekend","oneTime","off"]'
        data-get="PAR03"
        data-set="PAR03"
        data-cmd="setreading"></div>
</li>
</ul>
</div>
</body>
</html>

und

RolladenSwitch.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
<title>RolladenSwitchTmpl</title>
</head>
<body>

<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
<header>Schalten</header><br>
<div class="doublebox-h centered">
    <div data-type="push" data-device="PAR00"
     data-icon="fa-angle-up" data-background-icon="fa-square-o"
     data-set-on="on"></div>
    <div data-type="push" data-device="PAR00"
    data-icon="fa-angle-down" data-background-icon="fa-square-o"
    data-set-on="off"></div>
</div>
<div class="doublebox-h centered">
    <div data-type="push" data-device="PAR00"
     data-icon="fa-hand-stop-o" data-background-icon="fa-square-o"
     data-set-on="Stop"></div>
    <div data-type="multistatebutton" data-device=""
     class="swipertab"
     data-icon="fa-arrow-right" data-background-icon="fa-square-o"
     data-set-on='["2","3","4","1"]'
     data-color="blue"
     data-background-color="grey"></div>
</div>
</li>

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

Ich habe FTUI offenbar nicht richtig mitgeteilt, welchen der vier Timer ich ansteuern möchte - wie mache ich das?

Burk · 15 September 2018, 19:21:24

....noch eine Ergänzung:

Nachdem ich in die SubPageRolladen.html nun weitere Rolläden in die col 2-5 eingetragen habe, stelle ich fest, dass der multibutton auf alle Rolladen gemeinsam wirkt (wie oben beschrieben)

Ich muss also auch noch herausfinden, wie ich die Befehle auf das richtige Widget zusteuere.....

Burk · 25 September 2018, 00:27:09

Hat niemand eine Idee?
Die Navigation braucht - wie es mir scheint - nur den richtigen Bezug, und genau das bekomme ich nicht hin...

setstate · 25 September 2018, 07:36:07

Die Steuerung erfolgt aktuell per URL-Hash. Zum Beispiel ein Link ändert die URL per data-url="#room4" in ./swiper.html#room4, dann reagiert der Swiper darauf, wenn das entsprechende Swiper-li Element data-hash gesetzt hat.

Code Auswählen

<li data-hash="room4">

Hier ein Demo von vor vielen Jahren. Muss ich mal neu machen

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="debug" content="0"> <!-- 1=output to console;0=no output -->
    <meta name="demo" content="1"> <!-- 1=demo data;0=normal mode-->

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

    <title>FTUI Demo Tabs with Swiper</title>
</head>
<body>
<div class="gridster">
<ul>
  <li data-row="1" data-col="1" data-sizex="4" data-sizey="9">
  <header>WIDGET SWIPER</header>
  <!-- place your widget here -->
  <div class="left cell">
      <div data-type="link" class="left large thin"
           data-icon-left="fa-angle-left"
           data-url="demo_solutions.html">Solutions
      </div>
      <div class="left-align bigger thin ">Swiper <br/>& Link</div>
      <div class="left-align darker">&nbsp; Example</div>
  </div>
  <div class="row container round padding bg-gray gray col-2-3 top-space left left-space left-align">
     <b>Tabs with Swiper</b>
     is a solution to implement<br/>
     tab buttons with the link widget<br/>
     which controls a swiper widget<br/>
     for paging
  </div>
  <div class="bottom absolute bottom-space">
      <div data-type="link" class="round left"
           data-color="lightgray"
           data-icon="fa-code"
           data-background-color="orange"
           data-url="javascript:void(window.open('view-source:'+location.href))">
           View Source Code
      </div>
      <div data-type="link" class="round right"
           data-color="orange"
           data-icon="fa-github"
           data-border-color="orange"
           data-url="https://github.com/knowthelist/fhem-tablet-ui">
           Show On Github
      </div>
  </div>
</li>

<li data-row="1" data-col="4" data-sizex="8" data-sizey="9">
    <header>TABS WITH SWIPER</header>
    <!-- place your widget here -->
    <div class="top-space large thin">
        <div data-type="link" class="inline narrow"
             data-width="120" data-height="40"
             data-color="blue"
             data-background-color=""
             data-border-color="blue"
             data-active-color="white"
             data-active-background-color="blue"
             data-active-border-color="blue"
             data-active-pattern=".*room1"
             data-icon="fa-home"
             data-url="#room1">
            Room 1
        </div>
        <div data-type="link" class="inline narrow"
             data-width="120" data-height="40"
             data-color="blue"
             data-background-color=""
             data-border-color="blue"
             data-active-color="white"
             data-active-background-color="blue"
             data-active-border-color="blue"
             data-active-pattern=".*room2"
             data-icon="fa-gear"
             data-url="#room2">
            Room 2
        </div>
        <div data-type="link" class="inline narrow"
             data-width="120" data-height="40"
             data-color="blue"
             data-background-color=""
             data-border-color="blue"
             data-active-color="white"
             data-active-background-color="blue"
             data-active-border-color="blue"
             data-active-pattern=".*room3"
             data-icon="fa-music"
             data-url="#room3">
            Room 3
        </div>
        <div data-type="link" class="inline narrow"
             data-width="120" data-height="40"
             data-color="blue"
             data-background-color=""
             data-border-color="blue"
             data-active-color="white"
             data-active-background-color="blue"
             data-active-border-color="blue"
             data-active-pattern=".*room4"
             data-icon="fa-print"
             data-url="#room4">
            Room 4
        </div>
    </div>
    <div data-type="swiper" data-height="500px" data-width="600px"
         class="top-space-2x hashnav nopagination">
    <ul>
        <li data-hash="room1">
            <div class="row-2-3 container bg-gray">&nbsp;
                <div class="bigger thin">Room 1</div>
                <div class="top-space-3x inline">
                    <div data-type="thermostat" data-device="SchlafzimmerHeizung_Clima" ></div>
                    <div>Temp</div>
                </div>
                <div class="inline">
                    <div>
                        <div data-type="switch" data-device="dummy1" ></div>
                        <div>Licht</div>
                    </div>
                    <div>
                        <div data-type="symbol" data-device="dummy2" ></div>
                        <div>Fenster</div>
                    </div>
                </div>
            </div>
        </li>
        <li data-hash="room2">
            <div class="row-2-3 container bg-gray">&nbsp;
                <div class="bigger thin">Room 2</div>
                <div class="top-space-3x inline">
                    <div data-type="thermostat" data-device="KinderzimmerHeizung_Clima" ></div>
                    <div>Temp</div>
                </div>
                <div class="inline">
                    <div>
                        <div data-type="switch" data-device="dummy3" ></div>
                        <div>Licht</div>
                    </div>
                    <div>
                        <div data-type="symbol" data-device="dummy2" ></div>
                        <div>Fenster</div>
                    </div>
                </div>
            </div>
        </li>
        <li data-hash="room3">
            <div class="row-2-3 container bg-gray">&nbsp;
                <div class="bigger thin">Room 3</div>
                <div class="top-space-3x inline">
                    <div data-type="thermostat" data-device="BadHeizung_Clima" ></div>
                    <div>Temp</div>
                </div>
                <div class="inline">
                    <div>
                        <div data-type="switch" data-device="dummy1" ></div>
                        <div>Licht</div>
                    </div>
                    <div>
                        <div data-type="symbol" data-device="dummy2" ></div>
                        <div>Fenster</div>
                    </div>
                </div>
            </div>
        </li>
        <li data-hash="room4">
            <div class="row-2-3 container bg-gray">&nbsp;
                <div class="bigger thin">Room 4</div>
                <div class="top-space-3x inline">
                    <div data-type="thermostat" data-device="WohnzimmerHeizung_Clima" ></div>
                    <div>Temp</div>
                </div>
                <div class="inline">
                    <div>
                        <div data-type="switch" data-device="dummy3" ></div>
                        <div>Licht</div>
                    </div>
                    <div>
                        <div data-type="symbol" data-device="dummy2" ></div>
                        <div>Fenster</div>
                    </div>
                </div>
            </div>
        </li>
     </ul>
     </div>
</li>

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

FHEM Forum

FTUI: Ich kann Swiper nicht richtig navigieren

Burk

Burk

Burk

setstate