Slider Widget rollt nicht

[ulli]

Hallo,
Ich habe das Problem das sich das Slider Widget nicht weiter rollen lässt.
Ich wische zu einer beliebigen Seite und der Slider zeigt entsprechend die nächste Seite an, aber so bald ich "loslasse" rollt er wieder zurück....
An was kann das liegen?

[ulli]

Hat keiner eine idee?
Der swipe sieht wie folgt aus

Code Auswählen Erweitern

<div data-type="swiper" data-height="160px" data-width="200px" class="nopagination top-space">
<ul>
<li class="Transparent">
<div data-type="switch" data-device="WK_InternetRadio" data-get-on="setPLAY" data-get-off="setSTOP" data-icon="fa-rss" class="" data-on-background-color="cornflowerblue"></div>
<div data-type="push" data-device="WK_InternetRadio" data-set-on="next" data-icon="fa-arrow-right" class=""></div>
<div data-type="select" data-device="WK_InternetRadio" data-list="channels" data-get="now_playing_name" data-set="now_playing_name" class="cell w2x" ></div>
<div data-type="image" data-device="WK_InternetRadio" data-get="now_playing_img" data-size="50" class=""> </div>
</li>
<li class="Transparent">
<div data-type="switch" data-device="Display" data-get="currentMusicApp" data-get-on="spotifymusic" data-get-off="!on" data-set-on="spotifyMusic play" data-set-off="spotifyMusic stop" data-icon="fa-spotify" class=""></div>
<div data-type="push" data-device="Display" data-set="spotifyMusic" data-icon="fa-arrow-left" data-cmd="set" data-set-on="back" class=""></div>
<div data-type="push" data-device="Display" data-set="spotifyMusic" data-icon="fa-arrow-right" data-cmd="set" data-set-on="next" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicArtist" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicTrack" class=""></div>
</li>
<li class="Transparent">
<div data-type="switch" data-device="Display" data-get="currentMusicApp" data-get-on="googlemusic" data-get-off="!on" data-set-on="googleMusic play" data-set-off="googleMusic stop" data-icon="fa-google" class=""></div>
<div data-type="push" data-device="Display" data-set="googleMusic" data-icon="fa-arrow-left" data-cmd="set" data-set-on="back" class=""></div>
<div data-type="push" data-device="Display" data-set="googleMusic" data-icon="fa-arrow-right" data-cmd="set" data-set-on="next" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicArtist" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicTrack" class=""></div>
</li>
<li class="Transparent">
<div data-type="switch" data-device="Display" data-get="currentMusicApp" data-get-on="amazonmusic" data-get-off="!on" data-set-on="amazonMusic play" data-set-off="amazonMusic stop" data-icon="fa-amazon" class=""></div>
<div data-type="push" data-device="Display" data-set="amazonMusic" data-icon="fa-arrow-left" data-cmd="set" data-set-on="back" class=""></div>
<div data-type="push" data-device="Display" data-set="amazonMusic" data-icon="fa-arrow-right" data-cmd="set" data-set-on="next" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicArtist" class=""></div>
<div data-type="label" data-device="Display" data-get="currentMusicTrack" class=""></div>
</li>
</ul>
  </div>
</div>

[setstate]

klappt bei mir 1a. Hast du das Problem mit Maus und Touch, oder nur bei Touch (das habe ich noch nicht bei mir probiert)?

Was passiert, wenn du "navbuttons" in class reinnimmst? Wie reagiert dann das Umblättern?

[ulli]

Das scheint wieder das Problem von der 1er zu sein.....manchmal wird nicht alles geladen von der seite.
Nach ein paar refresh der Seite funktioniert es.
Kennst du inzwischen den Grund das nicht immer alle Inhalte geladen werden?

[setstate]

Die 1er Dateien habe ich mir seit einem halben Jahr nicht mehr angesehen ... Was ich aber bei der 2.2er Version verbessert habe, waren das Laden der Abhängigkeiten und Optimierungen beim Laden der Module.
Auch habe ich jetzt endlich raus, wie die HTML Seite bezüglich JS, CSS und Html5 tags korrekterweise aussehen muss (z.B. wo muss "defer" stehen und wo nicht).

[ulli]

Hmm aber warum gibt es den Fehler immer noch.
Kann ich diesbezüglich was falsch machen?

[setstate]

Pauschal kann man da nix genaues sagen.

Ich würde zuerst eine leere HTML Seite nehmen und langsam  mit Widgets befüllen, bis der Fehler auftritt, um die Ursache einzukreisen

empfohlene Template Seite:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <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="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <!-- 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="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FTUI Dev</title>
</head>
<body>
<div class="gridster">
<ul>
  <li data-row="1" data-col="1" data-sizex="3" data-sizey="4">
    <header>EXAMPLE1</header>
    <!-- place your widget here -->
</li>
<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
  <header>EXAMPLE2</header>
  <!-- place your widget here -->
</li>
<li data-row="1" data-col="4" data-sizex="6" data-sizey="4">
   <header>EXAMPLE3</header>
   <!-- place your widget here -->
</li>
<li data-row="1" data-col="10" data-sizex="3" data-sizey="4">
    <header>EXAMPLE4</header>
    <!-- place your widget here -->
</li>
<li data-row="5" data-col="10" data-sizex="3" data-sizey="3">
  <header>EXAMPLE5</header>
  <!-- place your widget here -->
</li>
<li data-row="5" data-col="4" data-sizex="6" data-sizey="3">
  <header>EXAMPLE6</header>
  <!-- place your widget here -->
</li>
</ul>
</div>
</body>
</html>



[Stivmaster]

Hallo

ich habe das gleiche Problem.
Swiper mit 2 Seiten, zur zweiten kann ich nicht wechseln. Auf dem PC funktionierts, nur mit Touch nicht. Browser ist der FullyFullScrenn Browser.

ich hab das dann mit der class"navbuttons" probiert, dann kann ich zumindest umschalten. Funktioniert auch nicht immer.

Meine Seiten hatte ich mit der 2.2 komplett neu aufgebaut. Alles mit Menü so wie in den Beispielen angegeben.
Aufgefallen ist mir, wenn ich Frühzeitig, also während dem Laden umschalte, also content der Seite mit den Slidern wird ausgewählt, dann funktioniert auch der Swiper nachher.
Zudem ist mir aufgefallen, dass, wenn ich eben nicht vorzeitig umschalte und erst die Index seite fertig laden lasse, dann nach dem Umschalten im Swiperfeld auch der 2te Punkt (Swiperpunkt, ich hoffe ihr wisst was ich meine) fehlt.

[takaze]

Guten Morgen zusammen,

ich habe gerade ein ähnliches Problem. Ich konnte die Ursache soweit eingrenzen, dass es offenbar mit Pagebutton, bzw. der Benutzung des Link widgets für das Umschalten auf andere Seiten zu tun hat.

Folgendes ist mir dabei aufgefallen:

1. Befindet sich der Swiper auf einer "Unterseite", ist also nach dem Neuladen nicht direkt sichbar, und das Neuladen der FTUI wird ohne (!) "Anker" vorgenommen, bzw initial aufgerufen, hängt dieser

zB => ...../fhem/ftui/index_page_top_demo.html => OHNE z.B. #page_content1.html

2. Wird FTUI mit einem zu pagetab bzw dem link widget gehörenden Anker mit einer anderen Seite ohne Swiper neu geladen hängt dieser ebenfalls

zB => ........./fhem/ftui/index_page_top_demo.html#page_content1.html

3. beim Neuladen der FTUI mit dem Anker der Unterseite, die den Swiper enthält, lässt sich dieser bedienen, sowohl mit tabs auch als mit "swipe"

zB => ...../fhem/ftui/index_page_top_demo.html#page_content2.html

4. das Neuladen der Seite nach bedienen des Swiper führt dazu, das die standart index seite geladen wird, was auch zum hängen des Swipers führt

zB => ...../fhem/ftui/index_page_top_demo.html#page_content2.html#room3

Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt. Zum "debuggen" habe ich setstates demo seite index_page_top_demo.html auf der zweiten Unterseite den Demo Swiper von hier verpasst und sonst nichts verändert. Ich häng euch die Dateien hier mal an.

Viele Grüße,
Florian

[Schalter]

Hallo, gab es hierzu mal eine Lösung?

Beste Grüße, Schalter

[ulli]

Bei mir nicht...nutzen inzwischen nicht mehr