Swiper - Auswahl eines expliziten Elements möglich? Oder besser Tabs?

[tomster]

Servus zusammen!

Ich schmeiß gerade (Mal wieder) das gesamte Layout meines FTUIs um. Dabei möchte ich nun auch meinen netzwerkfähigen Receivers einbinden.
Leider ist dessen Bedienstruktur etwas "umständlich"; sprich die Bedienung funktioniert quasi ebenenbasiert.

Ich hab vor etlichen Jahren Mal bei einem Projekt ein Swiper-Script benutzt, bei dem man eine ID in das entsprechende Element gesetzt hat, mit der man dann mit einem "externen" Button z.B. den gewünschten Slide 3 direkt anwählen konnte: Button1 -> Slide 3, Button2 -> Slide 1, etc.

Im voliegenden Fall:
Ein Gridster-Element mit einem Swiper-Widget und einer Button-Leiste darin. In den jeweiligen Slides sind dann die Bedienelemente passend für den jeweiligen Input (FMRadio, CD-Spieler, NetRadio, etc.). Klicke ich auf z.B. den ersten Button (oder Tab?) wird zum Einen ein Befehl à la set YAMAHA input FMRadio gesetzt und zum Anderen das Swiper-Element 1 "reingeswiped". Darin hab ich dann meine Widgets für die Bedienung der FMRadio-Funktion. Klicke ich auf den 2. Button/Tab hab ich die Elemente für NetRadio oder CD-Spieler und der Input wird entsprechend gewechselt. Damit müsste ich nur 1 Gridster-Element für den Netzwerkplayer belegen und wäre trotzdem flexibel mit den Widgets.

Ich bilde mir zwar ein, dass irgendjemand im Monster-FTUI-Thread schon Mal irgendwas mit Tabs gebaut hatte, aber ich finde das Posting nicht mehr. Wär vielleicht auch ein Ansatz...

Wenn jemand das Posting kennt/ findet bitte ich um Rückmeldung.
Wenn das Swiper-Widget bereits jetzt schon die direkte Auswahl kennt, bitte auch ein kurzes Aufbegehren.

[setstate]

Hallo tomster,

die Idee, für jede AVReceiver Source ein eigenes Bedienpanel zu benutzen, finde ich absolut genial.
Eine ähnliche Demo hatte ich schon mal gebaut. Das müsste dafür gut funktionieren:

http://knowthelist.github.io/fhem/tablet/demo_tabs_with_swiper.html#room2

Edit1:
Aber evtl. müsste Swiper noch etwas umgebaut werden, weil die URL Hash Thematik schon von Pagetab benutzt wird. Aber man kann Swiperpanels direkt aufrufen
swiper.slideTo(idx);
Edit2:
Am besten, der Swiper reagiert auf ein Reading und wechselt darauf die Seite. Dann könnte man beim AvReceiver ein UserReading anlegen, was dann 1,2,3,4.. je nach gewählter Source liefert. Und fertig ist der Lack

[tomster]

Das mit dem userReading klingt seehhhr gut! Dass ich da nicht selber draufgekommen bin

Geh ich Recht in der Annahme, dass die Jungs von idangero.us DEIN Swiper-Script in großen Teilen geklaut haben?
Nur um ein bissl mehr Munition für meine Trial'n'Error-JavaScript-Künste zu bekommen...

[setstate]

Andersherum, von denen ist die geniale Lib, die das Swiper Widget nutzt.
Die haben auch das tolle Framework7 Projekt, womit man herrliche  Fhem Mobil UIs bauen könnte. Das wird mein nächstes Projekt. 

Wie kann man für UserReadings Mappings definieren? Wenn Source gleich Sat dann 1, wenn webradio dann 2 usw.

[tomster]

War ja auch ein bissi ironisch gemeint, verzeihe.

Wegen des userReadings:

Ich weiß ja nicht, ob die meisten AV-Geräte in FHEM ein input-Reading haben. Weil sonst könnte man doch gleich dieses Reading verwenden.
Man müsste dann eben beim swiper ein data-id-source="YAMAHA:input"-Tag definieren und für jedes list-item ein z.B. <div id="Netradio">.
Was hältst Du davon?

Edith
Alternativ vielleicht auch ein Dummy, weil ich nicht weiß, ob ein FHEM-Update nicht das userReading wieder zerschiessen könnte, wenn am Modul was geschraubt wurde...

Edith2
Hab doch da tatsächlich was von MIR zu UserReadings gefunden. Ich bin wohl in einem Alter, in dem ich mich inzwischen selbst überraschen kann
http://forum.fhem.de/index.php/topic,37289.msg295665.html#msg295665

[tomster]

Ich hab heut ein bissl am Layout gespielt, wie ich mir diese Steuerung vorstelle (weil durch Javascript/ swiper.slideTo(2) steig ich immer noch nicht durch).

Dabei ist mir aufgefallen, dass ich eigentlich gerne Icons im Style vom Symbol-Widget verwenden würde. Leider kann man die ja nicht "schaltbar" machen.
Kann man das einbauen, oder kann man irgendwie das Switch-Widget so konfigurieren, dass es aussieht wie ein Symbol?

[setstate]

sieht gut aus! Ist das original, oder per Malprogramm zusammengeschoben?

Ich frage wegen des vertikalen Spinners, ob du solch eine Variante schon hast? Ich war bis jetzt zu faul das zu erweitern.

Zu Symbol:
Da Symbol, Push, Symbol, Button alle verwandt sind, kann man recht einfach deren Aussehen angleichen. Beispiel Switch im Symbol Look

Code Auswählen Erweitern


    <div data-type="switch"
         data-device="dummy1"
         data-on-color="#aa6900"
         data-off-color="#505050"
         data-background-icon="null"></div>


[tomster]

Danke, aber Mist, erwischt!
Klar, das ist ein bissl ge-Photoshopped, eben wegen dem vertikalen Spinner. Wobei ich nicht sicher bin, ob es nicht besser 2 Buttons werden sollen um die Lautstärke zu ändern. Draufbleiben-und-dann-setzen führt glaub ich in 95,4% der Fälle zu unerwünscht hoher Lautstärke und so richtig viel Platz hab ich auch nicht in dem Gridster-Element...

Die Switches bau ich in den kommenden Tagen Mal um, dann stell ich den Code Mal hier rein.

[setstate]

Die Swiper mit Tabelement Verknüpfung ist nun verfügbar.

Definitionsbeispiel:

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="3" data-sizey="2">
    <header>SWIPERTABS</header>
    <!-- place your widget here -->
    <div data-type="swiper"  data-height="160px" data-width="300px"
         data-device="AvReceiverZ2" data-get="input"
         data-states='["Airplay","Webradio","BD/DVD","PHONO"]'
         class="top-space-2x nopagination">
         <ul>
            <li><div class="noswipe row-3-3 container bg-gray center large">Airplay</div></li>
            <li><div class="noswipe row-3-3 container bg-gray center large">Webradio</div></li>
            <li><div class="noswipe row-3-3 container bg-gray center large">BD/DVD</div></li>
            <li><div class="noswipe row-3-3 container bg-gray center large">PHONO</div></li>
         </ul>
     </div>
     <div data-type="switch" data-icon="fa-apple" data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='Airplay' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-bars"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='Webradio' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-dot-circle-o"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='BD/DVD' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-circle"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='PHONO' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
</li>

durch das class="swipertab" bei den Switches, reagiert der Swiper auf deren setOn Events und swiped auf die entsprechende n-te Page (2-ter Switch -> 2-te Page usw.). Gibt auf einer Seite mehrere Swiper, kann man mit data-tabclass eine andere Class anstatt "swipertab" definieren

[tomster]

Goil! Funzt einwandfrei!
Vielen, vielen, vielen Dank, setstate!

Ein definierbares Reagieren auf ein setOff wär vielleicht auch nicht schlecht, um z.B. eine bestimmte Swiper-Page bei ausgeschaltetem Device anzeigen zu können, oder?

--edit--
Letzteres braucht's gar ned, wenn man entweder ein input-Reading hat, welches ohnehin auch "off" kennt, oder sich ein eigenes UserReading einbaut, dass neben den input Readings auch off kennt. Dann einfach im Swiper ein data-states='["Radio","CD","off"]' eintragen und bei den Switch-Widgets unterschiedliche get/set-Parameter. Also beispielsweise data-get="currentStatus" und data-set=input" einfügen und bei ausgeschaltetem Device wird auf die off-Page geswiped. Beim Einschalten wird dann automatisch auf den (vor dem Ausschalten) gewählten Input geschalten und dadurch auch auf die richtige Swipe-Page geswiped.
userReading zum Beispiel so:

Code Auswählen Erweitern


attr Yamaha userReadings currentStatus:(power|input) { ((ReadingsVal("Yamaha","power",0) eq "on")? ReadingsVal("Yamaha","input",""):"off")}
   

[tomster]

Nur, der Richtigkeit halber, Dein Beispielcode mit korrigierten noswipe-classes:

Code Auswählen Erweitern


<li data-row="1" data-col="3" data-sizex="3" data-sizey="2">
    <header>SWIPERTABS</header>
    <!-- place your widget here -->
    <div data-type="swiper"  data-height="160px" data-width="300px"
         data-device="AvReceiverZ2" data-get="input"
         data-states='["Airplay","Webradio","BD/DVD","PHONO"]'
         class="top-space-2x nopagination">
         <ul>
            <li class="noswipe"><div class="row-3-3 container bg-gray center large">Airplay</div></li>
            <li class="noswipe"><div class="row-3-3 container bg-gray center large">Webradio</div></li>
            <li class="noswipe"><div class="row-3-3 container bg-gray center large">BD/DVD</div></li>
            <li class="noswipe"><div class="row-3-3 container bg-gray center large">PHONO</div></li>
         </ul>
     </div>
     <div data-type="switch" data-icon="fa-apple" data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='Airplay' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-bars"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='Webradio' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-dot-circle-o"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='BD/DVD' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
     <div data-type="switch" data-icon="fa-circle"  data-device="AvReceiverZ2" data-get="input" data-set="input" data-get-on='PHONO' data-get-off='!on' data-set-off='' data-off-background-color="#2a2a2a" data-off-color="#505050" data-on-background-color="#2a2a2a" data-on-color="orange" class="swipertab small inline"></div>
</li>

[tomster]

Servus setstate!

Wurde an obiger "Funktion" in den letzten 10 Monaten irgendwas geschraubt?
Ich hab heute Mal wieder eine Seite eingebunden, die in Abhängigkeit des input-Readings meines Yamaha-Receivers den entsprechenden Swiper-Tab anzeigen soll. Dummerweise springt der Swiper bei einem Reading-Wechsel immer auf das letzte Swiper-Tab und bleibt da. Und das obwohl sich das input-Reading gar nicht geändert hat. Erst ein Reload der Seite zeigt wieder den richtigen Tab.
Kann es sein, dass das Update eines Events "zu schnell" ist für die Swiper-Funktionalität?

[tomster]

Hat sich erledigt. Mit einem data-tabclass für den Swiper, funktioniert es wieder wie gewünscht. Komisch, ich hab gar kein 2. Swiper-Set auf der Seite. Zumindest hab ich keins gefunden...

[Moe1980]

Ich hätte Interesse an der ursprünglichen Version. Durch Klick auf ein Wort (Label, Link, ganz egal) soll auf einen bestimmten Slide gewechselt werden. Hat jemand hierzu eine Lösung parat?

Edit:
Per swiper.slideTo bekomme ich es nun hin. Problem an der Sache - ich habe zwei Swiper auf einer Seite, somit bewegen sich beide Swiper.
Ich habe es auch versucht mit unterschiedlichen Klassen

Code Auswählen Erweitern


$('.swipe-to-kueche').click(function(e) {
e.preventDefault();
swiper.slideTo( $('.pag2').index(),1000,false );
})


Es bewegen sich dennoch beide Swiper.

[Moe1980]

Hab es nun nach langem Herumprobieren hinbekommen. So muss die Anweisungen ausschauen, dann klappts auch

Code Auswählen Erweitern


$('.swipe-to-kueche').click(function(event) {
event.preventDefault();
var idx = elem.find('.kueche').index();
if (idx > -1)
swiper.slideTo(idx);
})