I'm working on a simple app and it features a pie chart. My goal is that if a user hovers their mouse over any section of the chart, it will expand and present more information. In my program, the chart is made of 3 arcs. Here's my code.
import javafx.scene.Group; //Maybe too many imports, I just use em all
import javafx.scene.Scene; //because I'm lazy
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.Rectangle;
import javafx.event.EventHandler;
import javafx.event.ActionEvent;
import javafx.event.Event;
import javafx.application.Application;
import javafx.scene.shape.*;
import javafx.scene.shape.Line;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.input.MouseEvent;
import javafx.animation.ScaleTransition;
import java.lang.Thread;
public class AnimatingDemo extends Application{
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
//create 3 arc variables
Arc arc1 = new Arc();
Arc arc2 = new Arc();
Arc arc3 = new Arc();
//set up arc1 in place and to right color
arc1.setFill(Color.rgb(35,25,43,1.0));
arc1.setCenterX(250);
arc1.setCenterY(250);
arc1.setRadiusX(100.0f);
arc1.setRadiusY(100.0f);
arc1.setStartAngle(315);
arc1.setLength(-90);
arc1.setType(ArcType.ROUND);
//set up and color arc2
arc2.setFill(Color.rgb(39,70,144,1.0));
arc2.setCenterX(250);
arc2.setCenterY(250);
arc2.setRadiusX(100.0f);
arc2.setRadiusY(100.0f);
arc2.setStartAngle(90);
arc2.setLength(-135);
arc2.setType(ArcType.ROUND);
//set up and color arc3
arc3.setFill(Color.rgb(54,65,86,1.0));
arc3.setCenterX(250);
arc3.setCenterY(250);
arc3.setRadiusX(100.0f);
arc3.setRadiusY(100.0f);
arc3.setStartAngle(225);
arc3.setLength(-135);
arc3.setType(ArcType.ROUND);
//create root group
Group root = new Group();
//set up window
//add nodes to root
root.getChildren().addAll(arc1,arc2,arc3);
Scene scene = new Scene(root, 500,500);
stage.setTitle("Testing arc animation");
stage.setScene(scene);
stage.show();
}
}
This is just a sample I made so I can recreate the problem, but it gets the point across. I did research about various methods of animation in Javafx. The animation class seemed most viable, so I tried it in my program. I used the following code:
arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
ScaleTransition st = new ScaleTransition(Duration.millis(1500),arc1);
st.setByX(0.3);
st.setByY(0.3);
st.setCycleCount(1);
st.setAutoReverse(false);
st.play();
}
});
I repeated it 3 times for each arc but that's redundant here.
Anyway, the result is that both ends of the arc scale, so the pi chart looks messy and isn't centered anymore, also the scaling increases depending on the size of the arc so it's inconsistent.
I then decided to move onto a more basic method, using thread.sleep().
arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
for(int a = 0; a < 10; a++) {
try {
arc1.setRadiusX(arc1.getRadiusX() + 1);
arc1.setRadiusY(arc1.getRadiusY() + 1);
Thread.sleep(100);
}
catch(InterruptedException e) {
e.printStackTrace();
}
}
}
});
this doesn't work either, the circle just instantly expands by the given amount of units I wanted (instantly).
So my question is, what can I do? Is there a method to prevent the skewing in the animation class? Can I make the thread.sleep animation fluent in some way? Any advice helps, thank you for your time!
P.S. If it needs more comments let me know
I'm not sure this is exactly what you are looking for, since you went with Arc's instead of a proper PieChart, but I used the PieChart class and did everything you did and it works out just fine.
Here I took the PieChart.Data class and made three separate ones just for testing.
I added an EventFilter by calling .getNode() on the PieChart.Data variable, and then just pasted your method you supplied above.
Again, I assume there was a reason you used Arc instead of PieChart, but I got it to work this way.
#Override
public void start(Stage stage) {
ObservableList<PieChart.Data> data = FXCollections.observableArrayList();
PieChart pieChart = new PieChart(data);
PieChart.Data one = new PieChart.Data("one", 50.0);
PieChart.Data two = new PieChart.Data("two", 33.0);
PieChart.Data three = new PieChart.Data("three", 17.0);
data.addAll(one, two, three);
one.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
ScaleTransition st = new ScaleTransition(Duration.millis(1500),one.getNode());
st.setByX(0.3);
st.setByY(0.3);
st.setCycleCount(1);
st.setAutoReverse(false);
st.play();
});
two.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
ScaleTransition st = new ScaleTransition(Duration.millis(1500),two.getNode());
st.setByX(0.3);
st.setByY(0.3);
st.setCycleCount(1);
st.setAutoReverse(false);
st.play();
});
three.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
ScaleTransition st = new ScaleTransition(Duration.millis(1500),three.getNode());
st.setByX(0.3);
st.setByY(0.3);
st.setCycleCount(1);
st.setAutoReverse(false);
st.play();
});
//create root group
Group root = new Group();
//set up window
//add nodes to root
root.getChildren().addAll(pieChart);
Scene scene = new Scene(root, 500,500);
stage.setTitle("Testing arc animation");
stage.setScene(scene);
stage.show();
}
Related
I am creating a game in which I am checking for collisions between two ImageView objects, but when I use the intersects method it doesn't quite work the way I want it to. Score in checkCollision() method is counted to huge size and even though first image is not touching second collision is already happening and I don't know why - my program should add a +1 whenever one object touches another.
Here code sample after improvemets based on minimal reproducible example:
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.util.ArrayList;
public class TestCollision extends Application {
private Thread collisionThread;
private Scene scene;
private Pane pane;
private ImageView wolfIv;
private ArrayList<ImageView> eggsList;
private int score;
#Override
public void start(Stage primaryStage) throws Exception {
pane = new Pane();
scene = new Scene(pane,800, 600);
Image wolf = new Image("/images/wolf.png");
wolfIv = new ImageView(wolf);
eggsList = new ArrayList<>();
eggsList.add(new ImageView(new Image(getClass().getResourceAsStream("/images/egg.png"))));
eggsList.get(0).setFitHeight(45);
eggsList.get(0).setFitWidth(35);
pane.getChildren().add(eggsList.get(0));
MoveTo moveToEgg = new MoveTo();
moveToEgg.setX(60.0f);
moveToEgg.setY(95.0f);
Path eggPath = new Path();
eggPath.getElements().add(moveToEgg);
eggPath.getElements().add(new CubicCurveTo(190,200,190, 200,190,480));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setNode(eggsList.get(0));
pathTransition.setPath(eggPath);
pathTransition.setCycleCount(PathTransition.INDEFINITE);
pathTransition.setAutoReverse(false);
pathTransition.play();
wolfIv.setFitWidth(200);
wolfIv.setFitHeight(250);
wolfIv.setX(140);
wolfIv.setY(218);
pane.getChildren().addAll(wolfIv);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.show();
collisionCheckThread();
}
public void checkCollision(ImageView imageView, ImageView imageView2){
if(imageView.getBoundsInParent().intersects(imageView2.getBoundsInParent())){
score++;
System.out.println(score);
System.out.println("Boom");
}
}
public void collisionCheckThread()
{
collisionThread = new Thread(){
#Override
public void run(){
while(scene.getWindow().isShowing() == true){
checkCollision(wolfIv,eggsList.get(0));
}
}
};
collisionThread.start();
}
public static void main(String[] args) {
launch(args);
}
}
The reason the score "becomes huge" is that the background thread is repeatedly checking for collisions as fast and as often as it can. Any time it checks and the bounds intersect, it adds one to the score.
The reason you see incorrect results sometimes, such as a collision being detected immediately when none should happen, is more complex. This occurs because values (in particular the boundsInParent of the two image views) are being changed on one thread (the FX Application thread) and observed on another thread (your background thread) without proper synchronization. JavaFX, like most UI toolkits, is designed as a single-threaded toolkit, and so there is no way to add synchronization to this.
What actually happens here is due to something called "hoisting". The code in your background thread is essentially
public void run(){
while(scene.getWindow().isShowing() == true){
if(imageView.getBoundsInParent().intersects(imageView2.getBoundsInParent())){
score++;
System.out.println(score);
System.out.println("Boom");
}
}
}
It is legal, per the Java Language Specification, for a JVM to optimize code in certain ways. For variables that are not declared volatile, and without synchronization, the JVM is allowed to reorder code assuming that each thread is independent of each other. Under this assumption, since there are no changes to the boundsInParent made in this thread, the code can be treated as being equivalent to
public void run(){
if(imageView.getBoundsInParent().intersects(imageView2.getBoundsInParent())){
while(scene.getWindow().isShowing() == true){
score++;
System.out.println(score);
System.out.println("Boom");
}
}
}
Furthermore, this optimization may be made at an arbitrary time (when the JVM decides it may be beneficial), so if you are accessing the boundsInParent from a thread other than the FX Application Thread, the behavior of this code becomes essentially non-deterministic.
For more information, I recommend reading the relevant items in Joshua Bloch's book Effective Java. (No one who has spent more than an hour programming in Java should be without this book.)
Using a background thread here is completely the wrong approach anyway.
What you actually want to do, I assume, is add one to the score (and perhaps perform other actions) when the state of the images changes from "not intersecting" to "intersecting". You can do this by creating a BooleanBinding with the correct value, and which is bound to the two boundsInParent properties. Then register a listener with that binding and react when it changes from false to true:
BooleanBinding collision = Bindings.createBooleanBinding(
() -> wolfIv.getBoundsInParent().intersects(eggsList.get(0).getBoundsInParent()),
wolfIv.boundsInParentProperty(),
eggsList.get(0).boundsInParentProperty()
);
collision.addListener((obs, wasCollision, isNowCollision) -> {
if (isNowCollision) {
score++;
System.out.println(score);
System.out.println("Boom");
}
});
Here's a complete runnable example which demonstrates this:
import java.util.ArrayList;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.BooleanBinding;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;
public class TestCollision extends Application {
private Scene scene;
private Pane pane;
private ImageView wolfIv;
private ArrayList<ImageView> eggsList;
private int score;
#Override
public void start(Stage primaryStage) throws Exception {
pane = new Pane();
scene = new Scene(pane,800, 600);
WritableImage wolf = new WritableImage(1, 1);
wolf.getPixelWriter().setColor(0, 0, Color.RED);
wolfIv = new ImageView(wolf);
eggsList = new ArrayList<>();
WritableImage egg = new WritableImage(1, 1);
egg.getPixelWriter().setColor(0, 0, Color.YELLOW);
eggsList.add(new ImageView(egg));
BooleanBinding collision = Bindings.createBooleanBinding(
() -> wolfIv.getBoundsInParent().intersects(eggsList.get(0).getBoundsInParent()),
wolfIv.boundsInParentProperty(),
eggsList.get(0).boundsInParentProperty()
);
collision.addListener((obs, wasCollision, isNowCollision) -> {
if (isNowCollision) {
score++;
System.out.println(score);
System.out.println("Boom");
}
});
eggsList.get(0).setFitHeight(45);
eggsList.get(0).setFitWidth(35);
pane.getChildren().add(eggsList.get(0));
MoveTo moveToEgg = new MoveTo();
moveToEgg.setX(60.0f);
moveToEgg.setY(95.0f);
Path eggPath = new Path();
eggPath.getElements().add(moveToEgg);
eggPath.getElements().add(new CubicCurveTo(190,200,190, 200,190,480));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setNode(eggsList.get(0));
pathTransition.setPath(eggPath);
pathTransition.setCycleCount(PathTransition.INDEFINITE);
pathTransition.setAutoReverse(false);
pathTransition.play();
wolfIv.setFitWidth(200);
wolfIv.setFitHeight(250);
wolfIv.setX(140);
wolfIv.setY(218);
pane.getChildren().addAll(wolfIv);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Instead of giving a fixed value as a target is there any way to continuously change the keyvalues's target value while the animation is running.
To achieve this goal I have bound the target value with a node's width property which changes continuously.But bind is not working at all when the animation starts the target value doesn't update and stuck.
This is the code for the animation
public void setGlowAnimation(){
System.out.println("WIDTH "+width.getValue());
KeyValue value = new KeyValue(glowshape.centerXProperty(),width.getValue(),Interpolator.EASE_OUT);
KeyFrame keyframe1 = new KeyFrame(Duration.millis(2000),value);
glow_timeline = new Timeline();
glow_timeline.setCycleCount(Timeline.INDEFINITE);
glow_timeline.setAutoReverse(true);
glow_timeline.getKeyFrames().add(keyframe1);
}
public void init(){
indetermination();
setStartAnimation();
createEllipse();
width = new SimpleDoubleProperty();
width.bind(this.widthProperty());
setGlowAnimation();
}
I don't think you can modify a Timeline while it is active like that. Consider using a Transition instead:
import javafx.animation.Animation;
import javafx.animation.Interpolator;
import javafx.animation.Transition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class AdaptiveAnimation extends Application {
#Override
public void start(Stage primaryStage) {
Circle circle = new Circle(0, 100, 25, Color.CORNFLOWERBLUE);
Pane pane = new Pane(circle);
Interpolator interp = Interpolator.EASE_BOTH ;
Transition transition = new Transition() {
{
setCycleDuration(Duration.millis(2000));
}
#Override
protected void interpolate(double frac) {
double x = interp.interpolate(0, pane.getWidth(), frac);
circle.setCenterX(x);
}
};
transition.setCycleCount(Animation.INDEFINITE);
transition.setAutoReverse(true);
Scene scene = new Scene(pane, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
transition.play();
}
public static void main(String[] args) {
launch(args);
}
}
This is a little jumpy while you're resizing the window, but it provides the basic idea.
I am creating slot machine application with javafx. Desired behavior: separated pictures have to appear in pane as real slot machine drum during animation (pictures of cherry, lemon, number sever and etc should look like one whole peace for user) like showing on picture.
slot machine
My problem is I can't put together separate images to scrolling in slot machine window seamless.
I have made a lot of search about this problem but didn't find any working solutions. I have tried to add all images in ArrayList and then set them as node to TranslateTransition reference during animation process. But initial image stack in windows.
import javafx.animation.Interpolator;
import javafx.animation.ParallelTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class TestClass extends Application {
private BorderPane borderPane = new BorderPane();
private GridPane gridPane = new GridPane();
#Override
public void start(Stage primaryStage) throws Exception {
ImageView image1 = new ImageView(createImage(Color.RED));
ImageView image2 = new ImageView(createImage(Color.GREEN));
ImageView image3 = new ImageView(createImage(Color.BLUE));
gridPane.setLayoutX(50);
gridPane.setLayoutY(50);
gridPane.setPadding(new Insets(5, 5, 5, 5));
gridPane.setAlignment(Pos.CENTER);
gridPane.setVgap(5);
gridPane.add(image1, 0, 0);
gridPane.add(image2, 1, 0);
gridPane.add(image3, 2, 0);
gridPane.setMaxWidth(image1.getFitWidth() * 3);
gridPane.setMaxHeight(image1.getFitHeight());
Rectangle clip = new Rectangle(732, 230);
clip.setLayoutX(30);
clip.setLayoutY(10);
clip.setStroke(Color.BLACK);
// clip.setFill(null);
gridPane.setClip(clip);
borderPane.setCenter(gridPane);
Scene scene = new Scene(borderPane, 900, 500);
primaryStage.setScene(scene);
primaryStage.setTitle("SlotMachine");
primaryStage.show();
ImageView[] images = { image1, image2, image3 };
TranslateTransition t1 = new TranslateTransition();
for (ImageView i : images) {
t1.setDuration(Duration.millis(2000));
t1.setNode(i);
t1.setFromX(image1.getX());
t1.setFromY(image1.getY() - gridPane.getHeight());
t1.setToX(image1.getX());
t1.setToY(image1.getY() - image1.getFitHeight() / 2 + gridPane.getHeight());
t1.setCycleCount(2);
t1.setAutoReverse(false);
t1.setInterpolator(Interpolator.LINEAR);
}
TranslateTransition t2 = new TranslateTransition();
for (ImageView i : images) {
t2.setDuration(Duration.millis(2000));
t2.setNode(i);
t2.setFromX(image2.getX());
t2.setFromY(image2.getY() - gridPane.getHeight());
t2.setToX(image2.getX());
t2.setToY(image2.getY() - image2.getFitHeight() / 2 + gridPane.getHeight());
t2.setCycleCount(2);
t2.setAutoReverse(false);
t2.setInterpolator(Interpolator.LINEAR);
}
TranslateTransition t3 = new TranslateTransition();
for (ImageView i : images) {
t3.setDuration(Duration.millis(2000));
t3.setNode(i);
t3.setFromX(image3.getX());
t3.setFromY(image3.getY() - gridPane.getHeight());
t3.setToX(image3.getX());
t3.setToY(image3.getY() - image3.getFitHeight() / 2 + gridPane.getHeight());
t3.setCycleCount(2);
t3.setAutoReverse(false);
t3.setInterpolator(Interpolator.LINEAR);
}
ParallelTransition pt = new ParallelTransition(t2, t3, t1);
pt.play();
}
private final Image createImage(Color color) {
Rectangle rect = new Rectangle(32, 32);
rect.setFill(color);
return rect.snapshot(null, null);
}
public static void main(String[] args) {
launch(args);
}
}
Please help. Thank you in advance
From what I can tell, it doesn't look like you are using Model/View/Controller architecture; using this architecture is the easiest way (in my opinion) to implement a gui like this. In your case, you could model your logic from the following psuedo-code:
In Controller:
//changes x or y coordinate (depending on direction of movement) of top left corner
//the controller should change the values of x or y that are stored in your model
moveImageMethod(image);
In View:
//Number of ms between timer events, play with this number to make it smooth
private static final int TIMER_INTERVAL = 1000/30;
//constructor
public View(){
<your other stuff, event handlers, etc.>
this.timer = new Timer(TIMER_INTERVAL, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
handleTimerTick();
}
});
}
// Start the animation timer.
public void startTimer() {
timer.start();
}
protected void handleTimerTick(){
controller.moveImageMethod(image);
<other stuff you might need/want>
repaint();
}
<your graphics methods>
I'm struggling with making an animation showing the searchin in Binary Search Tree in JavaFX.
The goal is to make a visualization of comparing the value of tree node with possibility to:
pause and play it any time
being able to play the animation backwards (to go at least one step back),
give a user an ability to play the animation step-by-step or whole at once.
The preview of visualization
My vision was to make a series of TranslateTransitions(TT) added in one SequentialTransition(ST). If the animation is marked as "step-by-step" the each TT pauses the whole ST in their OnFinished handler. However this kinda works only for going one-way.
My question is. What is the best approach to maintain going fluent and step-by-step animation in reverse direction ?
I was thinking about:
maybe making another sequence of inverse transitions (but how to tell
it from which step to continue ?)
somehow work with rate property ? is it possible to change it while the ST is running ?
Thank you very much for your answers.
In general, you can change the rate property of an Animation while it is in progress. The idea of using a SequentialTransition is appealing, but it doesn't work as easily as you might think. The problem arises when the sequential transition is paused at the boundary between two individual transitions: you don't have any way to tell which of the individual transitions is considered the current one (i.e. the next one or the previous one). So when you try to reverse the rate and play, the sequential transition can get confused and immediately think it's at the end of the one it's trying to play.
You might be able to hack this a little by using Animation.getCurrentTime() and Animation.jumpTo(...) to "nudge" the sequential transition a tiny amount in the correct direction before starting to play any step, but I think it's probably easier just to manage the individual transitions on their own instead of using a SequentialTransition.
Here's a simple example of using this technique to move a rectangle around:
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
import javafx.animation.Animation;
import javafx.animation.Animation.Status;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.BooleanBinding;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ReverseSequentialTransitionTest extends Application {
#Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
Rectangle rect = new Rectangle(50, 50, 250, 150);
rect.setFill(Color.color(.5, .5, .1));
pane.getChildren().add(rect);
TranslateTransition ttForward = new TranslateTransition(Duration.seconds(1), rect);
ttForward.setFromX(0);
ttForward.setToX(400);
TranslateTransition ttDown = new TranslateTransition(Duration.seconds(1), rect);
ttDown.setFromY(0);
ttDown.setToY(100);
TranslateTransition ttBackward = new TranslateTransition(Duration.seconds(1), rect);
ttBackward.setFromX(400);
ttBackward.setToX(0);
TranslateTransition ttUp = new TranslateTransition(Duration.seconds(1), rect);
ttUp.setFromY(100);
ttUp.setToY(0);
List<Animation> transitions = Arrays.asList(ttForward, ttDown, ttBackward, ttUp);
IntegerProperty nextTransitionIndex = new SimpleIntegerProperty();
Button playButton = new Button("Play Forward");
playButton.setOnAction(event -> {
int index = nextTransitionIndex.get();
Animation anim = transitions.get(index);
anim.setOnFinished(evt -> nextTransitionIndex.set(index+1));
anim.setRate(1);
anim.play();
});
Button reverseButton = new Button("Play backward");
reverseButton.setOnAction(event -> {
int index = nextTransitionIndex.get()-1;
Animation anim = transitions.get(index);
anim.setOnFinished(evt -> nextTransitionIndex.set(index));
anim.setRate(-1);
anim.play();
});
// This is not really part of the answer to the current question, but the
// next three statements just disable the buttons when appropriate.
// This is a binding which is true if and only if any of the transitions are
// currently running:
BooleanBinding anyPlaying = createAnyPlayingBinding(transitions);
// Disable playButton if we are at the end of the last transition, or if
// any transitions are playing:
playButton.disableProperty().bind(
nextTransitionIndex.greaterThanOrEqualTo(transitions.size())
.or(anyPlaying)
);
// Disable reverseButton if we are at the beginning of the first transition,
// or if any transitions are currently playing:
reverseButton.disableProperty().bind(
nextTransitionIndex.lessThanOrEqualTo(0)
.or(anyPlaying));
HBox controls = new HBox(5);
controls.setAlignment(Pos.CENTER);
controls.getChildren().addAll(playButton, reverseButton);
BorderPane root = new BorderPane();
root.setCenter(pane);
root.setBottom(controls);
primaryStage.setScene(new Scene(root, 800, 400));
primaryStage.show();
}
private BooleanBinding createAnyPlayingBinding(List<Animation> transitions) {
return new BooleanBinding() {
{ // Anonymous constructor
// bind to the status properties of all the transitions
// (i.e. mark this binding as invalid if any of the status properties change)
transitions.stream()
.map(Animation::statusProperty)
.forEach(this::bind);
}
#Override
protected boolean computeValue() {
// return true if any of the transitions statuses are equal to RUNNING:
return transitions.stream()
.anyMatch(anim -> anim.getStatus()==Status.RUNNING);
}
};
}
public static void main(String[] args) {
launch(args);
}
}
In JDK 7, the event handler for the playButton looks like this:
playButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
final int index = nextTransitionIndex.get();
Animation anim = transitions.get(index);
anim.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent evt) {
nextTransitionIndex.set(index + 1) ;
}
});
anim.setRate(1);
anim.play();
}
});
and similarly for reverseButton. You will need to declare a couple of things as final as well. The createAnyPlayingBinding method is something like
private BooleanBinding createAnyPlayingBinding(final List<Animation> transitions) {
return new BooleanBinding() {
{
for (Animation transition : transitions) {
this.bind(transition.statusProperty();
}
}
#Override
protected boolean computeValue() {
// return true if any of the transitions statuses are equal to RUNNING:
for (Animation anim : transitions) {
if (anim.getStatus() == Status.RUNNING) {
return true ;
}
}
return false ;
}
};
}
I am using JavaFX to build a GUI and I'm having problems on knowing the mouse location when resized. The idea is that if a mouse gets on the very edge of the GUI it changes to a double sided arrow indicating that you can now press the mouse and resize the window.
I need the location of the mouse pointer on this edge, but I don't know how to do that. I need to know in which direction the window is resized.
Updated Added new options and discussed pros and cons.
This is tricky. The issue is that the window keeps track of its top, left, width, and height. When it is resized from the right or bottom, things are easy enough: the width or height change. But when it is resized from the left, both x and width must change. These two changes do not happen atomically, as x and width are stored as two independent properties.
The first approach to this is to keep track of the mouse coordinates, and just see if it's in the left half or the right half. (Obviously you can do the same with the height.) This approach is independent of any implementation details, but the user can cause it to fail by being extremely careful with the mouse. If you move the mouse to the right edge of the window to the exact pixel of the window boundary, then resize, you can see incorrect output.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
class MouseLocation {
double x,y ;
}
MouseLocation mouseLocation = new MouseLocation();
scene.setOnMouseMoved(event -> {
mouseLocation.x = event.getX();
mouseLocation.y = event.getY();
});
primaryStage.widthProperty().addListener((obs, oldWidth, newWidth) -> {
if (mouseLocation.x < primaryStage.getWidth() / 2) {
System.out.println("Resized from left");
} else {
System.out.println("Resized from right");
}
});
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The second approach is to keep track of the last known horizontal range of the window (minX and maxX), and update that range when the width changes. Then you can check to see whether the minX or maxX has changed. The problem with this approach is that it's dependent on undocumented implementation details. It appears (on my system, using the current version, etc) that when the window is resized from the left, x is changed first, then the width is changed. If that were to change in a subsequent release, the following would break:
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
class MutableDouble {
double value ;
}
MutableDouble windowLeftEdge = new MutableDouble();
primaryStage.widthProperty().addListener((obs, oldWidth, newWidth) -> {
if (primaryStage.getX() == windowLeftEdge.value) {
System.out.println("Resized from right");
} else {
System.out.println("Resized from left");
}
windowLeftEdge.value = primaryStage.getX() ;
});
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The third approach (that I can think of) is to coalesce changes that happen quickly into a single change. This is a bit tricky to program correctly, so instead of doing it from scratch, I used the third party ReactFX framework which models "event streams" and has a built-in mechanism for combining events that happen in quick succession. This is probably the most robust of the three solutions presented here, but at the cost of either a degree of complexity, or the inclusion of an external framework.
import java.time.Duration;
import org.reactfx.Change;
import org.reactfx.EventStream;
import org.reactfx.EventStreams;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.value.ObservableValue;
import javafx.geometry.BoundingBox;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class ReactFXVersion extends Application {
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
ObservableValue<Bounds> windowBounds = Bindings.createObjectBinding(() ->
new BoundingBox(primaryStage.getX(), primaryStage.getY(), primaryStage.getWidth(), primaryStage.getHeight()),
primaryStage.xProperty(), primaryStage.yProperty(), primaryStage.widthProperty(), primaryStage.heightProperty());
EventStream<Change<Bounds>> bounds = EventStreams.changesOf(windowBounds)
.reduceSuccessions((previousChange, nextChange) ->
new Change<>(previousChange.getOldValue(), nextChange.getNewValue()),
Duration.ofMillis(10));
bounds.subscribe(boundsChange -> {
Bounds newBounds = boundsChange.getNewValue();
Bounds oldBounds = boundsChange.getOldValue();
if (newBounds.getWidth() != oldBounds.getWidth()) {
if (newBounds.getMinX() != oldBounds.getMinX()) {
System.out.println("Resized from left");
} else if (newBounds.getMaxX() != oldBounds.getMaxX()) {
System.out.println("Resized from right");
}
}
if (newBounds.getHeight() != oldBounds.getHeight()) {
if (newBounds.getMinY() != oldBounds.getMinY()) {
System.out.println("Resized from top");
} else if (newBounds.getMaxY() != oldBounds.getMaxY()) {
System.out.println("Resized from bottom");
}
}
});
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}