Swipe Event?

[Sugan]

Hallo zusammen,

ich möchte ein Programm schreiben, bei dem ich ähnlich wie bei vielen Apps (z.B. bei WhatsApp) oder z.B. beim iTunes Coverflow durch eine "Wisch-Geste" durch eine Mediathek "wischen" kann.

Das Swipe Event von JavaFX hat mich nicht weitergebracht, da ich damit mit einem "Wisch" immer nur um ein Objekt weiter komme. Ich möchte aber erreichen, dass ich je nach Geschwindigkeit des "Wischens" mehrer Objekte weiter komme. Wenn ich langsam den Finger über den Bildschirm ziehe, sollen die Objekte mit der gleichen Geschwindigkeit mitziehen und wenn ich den Finger schneller bewege, dann sollen die Objekte auch nach der "Wisch Geste" noch weiter ziehen...

Gibt es hierfür ein spezielles Event? Oder eine ganz andere Lösung?
Mir würde auch schon die Begrifflichkeit weiterhelfen, da ich unter dem Stichwort "Swipe" immer nur das oben beschriebene "um einen weiterblättern" gefunden habe.


Vielen Dank!

Sugan

 

[Joose]

Gibt es hierfür ein spezielles Event? Oder eine ganz andere Lösung?

Ob es da ein spezielles Event gibt weiß ich nicht (glaub es aber weniger).
Eine ganz andere Lösung wäre dies einfach selber zu berechnen. Von der Position wo der Finger den Bildschirm berührt aus messen wie weit und schnell gewischt wird und entsprechend deine Liste (oder welches Control auch immer) entsprechend scrollen/blättern.
Ich muss dazu sagen das wäre mein erster Einfall dies selbst zu realisieren, wüsste aber keine bestimmten Werte bzw. Formel um dieses wischen entsprechend flüssig und annehmbar zu berechnen

 

[dzim]

Ginge mir gleich, wie @Joose - musst du wohl selbst machen.
Vielleicht aber kannst du auch den ScrollEvent nutzen. Schau mal in dem (etwas älteren) Beispiel hier:
https://docs.oracle.com/javafx/2/events/GestureEvents.java.htm
Eventuell hilft dir auch das hier:
http://stackoverflow.com/questions/22680658/javafx-scrollview-swipe-effect

 

[Sugan]

Zum selber ausrechnen, die Idee hatte ich auch schon, mit Position und Systemzeit Geschwindigkeiten ausrechnen usw.... Funktioniert auch halbwegs, aber erstens sehr rukelig und zweitens weiß ich nicht, wie ich es anstelle, dass der Benutzer schnell "wischt" und das Register/ die Mediathek dann durchläuft und der Benutzer diese Bewegung aber mit erneutem Berühren stoppen kann.

Schau mal in dem (etwas älteren) Beispiel hier:
https://docs.oracle.com/javafx/2/events/GestureEvents.java.htm
Eventuell hilft dir auch das hier:
http://stackoverflow.com/questions/22680658/javafx-scrollview-swipe-effect

Danke für die Links! Den ersten kenne ich zwar schon, aber durch das StackOverflow Forum werd ich mich mal durcharbeiten.

 

[dzim]

Eventuell nutzt du dann noch Transitionen, die das "ruckeln" ausgleichen. Ich hätte, ausser ein paar pauschale Ideen, auch keinen Plan, wie man es genau machen könnte. Und das klingt nicht so, als könnte ich mal eben in 10-15 min ein Beispiel zusammenschrauben. Also bin ich dafür zu faul

 

[Sugan]

Hallo zusammen,

ich hab jetzt n bisschen was geschrieben und es klappt soweit auch schonmal...

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Bilderleiste extends Application {

    private static final int imageNumber = 8;
    private static final int imageWidth = 400;
    private static final double imageAspectRatio = (double)4/3;
    private static final double imagesPerScene = 1.5;
    private static final int scrollbarHeight = 30;
   
    Image[] images = new Image[imageNumber];
    ImageView[] pics = new ImageView[imageNumber];
    BorderPane borderpane = new BorderPane();
    HBox hbox = new HBox();
    ScrollBar scrollbar = new ScrollBar();
   
    double start, newStart, startTime, speed;

    @Override
    public void start(Stage stage) {    
          for (int i = 0; i < imageNumber; i++) {
              images[i] = new Image(getClass().getResourceAsStream("fw" +(i+1)+ ".jpg"));
              pics[i] = new ImageView(images[i]);
              pics[i].setFitWidth(imageWidth);
              pics[i].setPreserveRatio(true);
              hbox.getChildren().add(pics[i]);
          }
         
          borderpane.getChildren().add(hbox);
          borderpane.setBottom(scrollbar);
          Scene scene = new Scene(borderpane, imageWidth*imagesPerScene, imageWidth/imageAspectRatio+scrollbarHeight);
          stage.setScene(scene);
          stage.setTitle("Bilderleiste");
         
          scrollbar.setLayoutX(scene.getWidth()-scrollbar.getWidth());
        scrollbar.setMin(0);
        scrollbar.setOrientation(Orientation.HORIZONTAL);
        scrollbar.setPrefHeight(scrollbarHeight);
        scrollbar.setMax(imageWidth*imageNumber-scene.getWidth()); 
        scrollbar.valueProperty().addListener((new ChangeListener<Number>(){
            public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val){
                hbox.setLayoutX(-(double)new_val);
            }
        }));
       
        hbox.setOnMousePressed(event -> {
            start= event.getX();;
            newStart=start;
            startTime=System.currentTimeMillis();
        });
        hbox.setOnMouseDragged(event ->{
            double xValue = hbox.getLayoutX()+event.getX()-newStart;
            if(xValue>scrollbar.getMin())
                hbox.setLayoutX(scrollbar.getMin());        
            else if(xValue<-scrollbar.getMax())
                hbox.setLayoutX(-scrollbar.getMax());
            else
                hbox.setLayoutX(xValue);
            scrollbar.setValue(-hbox.getLayoutX());
            newStart = event.getX();
        });
        hbox.setOnMouseReleased(event -> {
            double deltaTime = System.currentTimeMillis()-startTime;
            double distance = event.getX()-start;
            speed=Math.abs(distance/deltaTime);
        });
       
          stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Aktuell läuft das über die Maus und nicht mit Touch, weil ich auf dem Rechner, an dem ich das schreibe kein Touch habe, aber das ließe sich ja leicht ersetzen...
Und falls ihr euch das kopiert und ausprobiert, braucht ihr noch min. so viele Bilder im selben Ordner, wie bei imageNumber angegeben und benennt sie fw1.jpg, fw2.jpg, fw3.jpg usw.

Folgende Frage: wie mache ich jetzt weiter? also er rechnet die Geschwindigkeit aus aber was mache ich, damit die HBox weiterläuft (zb. ab einer bestimmten Geschwindigkeit)?
Hab da im Moment einfach keine Idee...

Eventuell nutzt du dann noch Transitionen, die das "ruckeln" ausgleichen.

Haste dazu nähere Infos oder nen Link? Danke!

Vielen Dank im Vorraus

Sugan

 

[dzim]

Wenn ich deinen Code richtig verstehe, dann könntest du an den Stellen eine TranslateTransition verwenden, an denen du layoutX auf der HBox setzt. Aber: Ich muss wirklich sagen, dass das eine reine Vermutung ist! Denn translateX ist etwas anderes als layoutX... Ob es am Ende das gleiche tut... Keine Ahnung! (Und wieder: Sorry, aber ohne das selbst zu implementieren, ist es schwer etwas dazu zu sagen.)

 

[Sugan]

Denn translateX ist etwas anderes als layoutX... Ob es am Ende das gleiche tut... Keine Ahnung!

Ja es tut das gleiche, zumindest soweit ich das in meinem Programm beurteilen kann... Aber es ruckelt tatsächlich etwas weniger... Insofern: Danke!

 

[Sugan]

Hi zusammen, ich bin inzwischen viel weiter mit meinem Programm.

Da man ja seine Lösung für eventuelle Mitleser posten soll: Ja, ich habe alles selber berechnet, falls die Rechnung tatsächlich erwünscht ist, schreibt mich an
Den Rest habe ich über einen Thread geregelt, der im Hintergrung die Bilder verschiebt und das Programm kann trotdem gleichzeitig die Gesten des Nutzers bearbeiten und den Thread ggf. canceln.

LG