Neues FTUI Widget Swipe Event ALPHA

[Syrex-o]

Hallo Liebe FHEM Enthusiasten,

mich hat es jetzt schon seid einer ganzen Zeit genervt, dass ich das Menü in der Tablet UI nicht "sliden"/ "wichen kann, so wie es in anderen Apps möglich ist.
Falls es so etwas schon gibt, dann tut es mir leid.

Einfach die widget_swipeevent.js in den js Ordner packen und anfangen zu definieren.
Ich bitte stark darum, dass weitere Einsatzmöglichkeiten für das Widget gefunden werden, damit die Funktionen erweitert werden können.

Was kann das Widget
- Menü und andere Objekte auf Basis von "Wisch Gesten" steuern
- Klick Events durch wischen ermöglichen
- alle "Wisch" Richtungen sollen unterstützt werden. Derzeit aufgrund von zu wenig Kreativität nur links und rechts
- Links bzw. rechts wischen auf der Oberfläche, um das Menü einzublenden (übernimmt sonst das Klicken auf den Menü Button)
- Auf Zustände reagieren, um keine Doppelbelegungen zu verursachen
- Richtung für das öffnen bestimmen

Wichtig für das Widget
Ihr müsst eurem "Wisch Button" der vorher geklickt wurde eine eindeutige ID zuweisen, damit das Widget den Button erkennt.
(später soll es das vielleicht automatisch erkennen)
Wenn ihr nun also das Menü bedienen wollt, dann muss in der index.html das slideout widget eine eindeutige ID erhalten.
Beispiel:

Code Auswählen Erweitern


<div[b] id="slideout"[/b] data-type="slideout" class="col-1-8 big center-align notouch"></div>


Was ist alles individuell einstellbar

• data-reactor: Auswahl des Elements bei dem die Änderung auf das Klick Event erfolgt (default: html Für das Menü wird dort durch Klicken eine Klasse hinzugefügt)
• data-change: Die Klasse/Änderung die das Element annimmt durch das Klick Event (default: slideout-open Änderungen Können in der Konsole des Browsers identifiziert werden)
• data-opendirX: Bestimmt die Richtung, in der der Öffnen Befehl ausgeführt wird (default: right)
• data-target: Das Ziel, auf das reagiert werden soll. Definiert durch eure vergebene ID (default: #slideout)
• data-swipeX: die Empfindlichkeit, bei der das Event ausgeführt wird in X-Richtung (default: Die Breite des Displays / 2,5 Eigene Angaben als Zahl)
• data-swipeY: die Empfindlichkeit, bei der das Event ausgeführt wird in Y-Richtung (default: Die Höhe des Displays / 4 Eigene Angaben als Zahl)Derzeit unbelegt

Beispielhafte Minimalanforderungen an das Widget

Code Auswählen Erweitern


<div data-type="swipeevent"
        data-target="#slideout"
        data-change="slideout-open">
        </div>


Wichtig
ALPHA bedeutet in diesem Zusammenhang, dass das Widget in seinen Möglichkeiten noch stark eingeschränkt ist.
Folgendes soll noch implementiert werden:
- Aktionen ausführen, die keine Klick Events sind
- Hoch- und Runterwischen unterstützen (bisher noch keine sinnvolle Benutzung dafür gefunden)
- Auf Änderungen von Devices Readings reagieren und Aktionen ausführen (bislang keine Einsatzmöglichkeiten gefunden)
- Mehrere Finger Wisch Gesten erkennen und auf Basis dieser Aktionen ausführen

Ich wünsche viel Spaß beim Wischen 

[Eisix]

Hallo,

wenn du reines wischen nach rechts/links/oben/unten willst kannst du das auch jetzt schon machen. Du musst einfach deine page entsprechend größer definieren. Mache ich bei meiner Handy Version so. Ich habe drei Bildschirm füllende Ansichten nebeneinander und kann so zwischen denen hin und her wischen.

Gruß
Eisix

[Syrex-o]

wenn du reines wischen nach rechts/links/oben/unten willst kannst du das auch jetzt schon machen. Du musst einfach deine page entsprechend größer definieren. Mache ich bei meiner Handy Version so. Ich habe drei Bildschirm füllende Ansichten nebeneinander und kann so zwischen denen hin und her wischen.

Irgendwie ist das nicht das selbe für mich.
Aber vielleicht stehe ich ja da mit meiner Meinung alleine da. 

Grüße

[Eisix]

Hallo,

Stimme ich zu ist nicht das selbe. Wenn ich die Woche dazu komme probiere ich dein Widget mal aus und gebe dir Feedback.

Gruß
Eisix

[Syrex-o]

Hey,

Stimme ich zu ist nicht das selbe. Wenn ich die Woche dazu komme probiere ich dein Widget mal aus und gebe dir Feedback.

Freut mich. 

Denk aber bitte daran, dass der Code am besten in der index.html seinen Platz findet, damit er auf alle Seiten übernommen wird.

Grüße

[roman1528]

Moin...

okay... ja... cool...

ABER 

ich habe z.B. mein Slideout-Menü auch der rechten Seite... das sollte man dann auch von rechts nach links wischen können XD

man sollte also irgendwie angeben können von wo nach wo man wischen möchte^^

Grüße^^

[Syrex-o]

Hey,

ABER 

Daran habe ich tatsächlich nicht gedacht. 

Ist jetzt implementiert. zu erreichen mit: data-opendirX="left"

P.S. Suche noch Vorschläge um Funktionen hinzuzufügen.

Grüße