We Keep Coding

My JavaFX Slider does not change value, it appears frozen

My JavaFX slider does not change value when I'm trying to move.
My slider is inside a GridPane layout.
My code looks like this, if you need more just ask :
root = new GridPane();
root.setLayoutY(canvasHeight);
root.setGridLinesVisible(true);
root.setPadding(new Insets(10, 10, 10, 10));
root.setVgap(2);
Label lblAmount = new Label("Amount of fireworks : ");
GridPane.setConstraints(lblAmount, 0, 0);
root.getChildren().add(lblAmount);
Slider sliAmount = new Slider();
sliAmount.setMin(1);
sliAmount.setMax(10);
sliAmount.setValue(5);
sliAmount.setMaxWidth(100);
root.getChildren().add(sliAmount);
GridPane.setConstraints(sliAmount, 1, 0);
Label lblPSize = new Label("Size of particles : ");
GridPane.setConstraints(lblPSize, 0, 1);
root.getChildren().add(lblPSize);
root.getRowConstraints().add(new RowConstraints(15));
root.getColumnConstraints().add(new ColumnConstraints(140));
Here's a GIF to better understand what the problem is
Here's what it looks like in my small program :
EDIT : More code
Since my program is very small and has pretty much only the slider implemented here is all my code.
Main class
public class Main extends Application {
private final int CANVAS_WIDTH = 1600;
private final int CANVAS_HEIGHT = 750;
private final int MENU_HEIGHT = 150;
private GraphicsContext graphics;
private GUI gui;
#Override
public void start(Stage primaryStage) throws Exception{
gui = new GUI(CANVAS_WIDTH, CANVAS_HEIGHT, MENU_HEIGHT);
gui.setup();
Canvas canvas = new Canvas(CANVAS_WIDTH, CANVAS_HEIGHT);
graphics = canvas.getGraphicsContext2D();
clearCanvas();
gui.getRoot().getChildren().add(canvas);
primaryStage.setTitle("FireworkSim by Cedric Martens");
primaryStage.setScene(new Scene(gui.getRoot(), CANVAS_WIDTH, CANVAS_HEIGHT + MENU_HEIGHT, Color.rgb(137, 182, 255)));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
private void clearCanvas()
{
//graphics.setFill(Color.BLACK);
//graphics.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}
}
GUI class
public class GUI {
private GridPane root;
private int canvasWidth;
private int canvasHeight;
private int menuHeight;
public GUI(int canvasWidth, int canvasHeight, int menuHeight)
{
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.menuHeight = menuHeight;
}
public void setup()
{
root = new GridPane();
root.setLayoutY(canvasHeight);
root.setGridLinesVisible(true);
root.setPadding(new Insets(10, 10, 10, 10));
root.setVgap(2);
Label lblAmount = new Label("Amount of fireworks : ");
GridPane.setConstraints(lblAmount, 0, 0);
root.getChildren().add(lblAmount);
Slider sliAmount = new Slider();
sliAmount.setMin(1);
sliAmount.setMax(10);
sliAmount.setValue(5);
sliAmount.setMaxWidth(100);
root.getChildren().add(sliAmount);
GridPane.setConstraints(sliAmount, 1, 0);
Label lblPSize = new Label("Size of particles : ");
GridPane.setConstraints(lblPSize, 0, 1);
root.getChildren().add(lblPSize);
root.getRowConstraints().add(new RowConstraints(15));
root.getColumnConstraints().add(new ColumnConstraints(140));
}
public GridPane getRoot() {
return root;
}
}

You're placing the canvas directly in the grid pane created by the GUI class, without specifying any layout properties (row and column indexes, for example). So the canvas is directly overlaying the grid pane, and receives the mouse events, preventing the slider from receiving them. Instead, use a layout pane that lays things out appropriately. For example:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
private final int CANVAS_WIDTH = 1600;
private final int CANVAS_HEIGHT = 750;
private final int MENU_HEIGHT = 150;
private GraphicsContext graphics;
private GUI gui;
#Override
public void start(Stage primaryStage) throws Exception{
BorderPane root = new BorderPane();
gui = new GUI(CANVAS_WIDTH, CANVAS_HEIGHT, MENU_HEIGHT);
gui.setup();
Canvas canvas = new Canvas(CANVAS_WIDTH, CANVAS_HEIGHT);
graphics = canvas.getGraphicsContext2D();
clearCanvas();
root.setCenter(canvas);
root.setBottom(gui.getRoot());
primaryStage.setTitle("FireworkSim by Cedric Martens");
primaryStage.setScene(new Scene(root, CANVAS_WIDTH, CANVAS_HEIGHT + MENU_HEIGHT, Color.rgb(137, 182, 255)));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
private void clearCanvas()
{
graphics.setFill(Color.BLACK);
graphics.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}
}

Communication between classes/Listeners

I want to create an application with a button and a colour picker on the top and a canvas in the centre of a BorderPane. I created a main Class TestSceneBuilder and 2 listeners: one for the button and one for the ColorPicker. The question is: when I detect change in colour how do I pass it to my CerchioListener ?
Main Class:
public class TestSceneBuilder extends Application {
final int H = 300, W = 300; //height and width
BorderPane root;
#Override
public void start(Stage primaryStage) {
root = this.setScene();
Scene scene = new Scene(root, H, W);
primaryStage.setTitle("Test");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* This method is supposed to build the scene with all components:
* a button "Draw" that draws the rectangle
* a canvas
* a colorPicker
* #return
*/
BorderPane setScene(){
BorderPane border = new BorderPane();
final ColorPicker cp = new ColorPicker(Color.AQUA);
Canvas canvas = new Canvas(H, W);
Button btn = new Button("Draw");
/*CerchioListner should get the mouse clicked event and draw the circle*/
final CerchioListner l = new CerchioListner(canvas, cp.getValue());
btn.addEventHandler(MouseEvent.MOUSE_CLICKED, l);
/*ColorListener intercept the color change in ColorPicker cp and change the color of the
shape drawn*/
ColorListener cl = new ColorListener(cp);
cp.setOnAction(cl);
HBox hb = new HBox();
hb.getChildren().addAll(btn, cp);
border.setTop(hb);
BorderPane.setAlignment(hb, Pos.CENTER);
border.setCenter(canvas);
return border;
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
Button listener: CerchioListener
public class CerchioListner implements javafx.event.EventHandler{
Canvas canvas = null;
Color colore;
public CerchioListner(Canvas c, Color colore) {
this.canvas = c;
this.colore = colore;
}
public void changeColor(Color c) {
this.colore = c;
}
#Override
public void handle(Event t) {
disegna();
}
public void disegna(){
canvas.getGraphicsContext2D().setFill(colore);
canvas.getGraphicsContext2D().fillOval(20, 20, 20, 20);
}
}
Color Picker listener: ColorListener
public class ColorListener implements javafx.event.EventHandler{
ColorPicker cp = null;
public ColorListener(ColorPicker cp) {
this.cp = cp;
}
#Override
public void handle(Event t) {
Color c = cp.getValue();
System.out.println("handle CP "+cp.getValue());
//restituisciColoreSelezionato(c);
}
/*public Color restituisciColoreSelezionato(Color c){
return c;
}*/
}

There are several things that is not the best you can have:
You have a Canvas, which is not member of Main, just a local variable in setScene(), therefore it is only accessible in that method. As the Canvas is the most important part of your class, you should have it as a class member because you want to access it anywhere from the class.
The listener for the Button should not store any reference to the selected color and to the Canvas, it is stored by Main and the listener should use that member.
The listener of the ColorPicker should not store any reference to the ColorPicker itself. The ColorPicker should be a member to make it able to access the currently selected color anywhere in Main.
I have updated your code to include these modifications:
public class TestSceneBuilder extends Application {
final int H = 300, W = 300;
BorderPane root;
Canvas canvas;
ColorPicker cp;
Button btn;
#Override
public void start(Stage primaryStage) {
root = this.setScene();
Scene scene = new Scene(root, H, W);
primaryStage.setTitle("Test");
primaryStage.setScene(scene);
primaryStage.show();
}
BorderPane setScene(){
BorderPane border = new BorderPane();
cp = new ColorPicker(Color.AQUA);
canvas = new Canvas(H, W);
btn = new Button("Draw");
btn.setOnAction((event) -> {
canvas.getGraphicsContext2D().setFill(cp.getValue());
canvas.getGraphicsContext2D().fillOval(20, 20, 20, 20);
});
HBox hb = new HBox();
hb.getChildren().addAll(btn, cp);
border.setTop(hb);
BorderPane.setAlignment(hb, Pos.CENTER);
border.setCenter(canvas);
return border;
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
If you want to stay with external listeners:
Exchange this:
btn.setOnAction((event) -> {
canvas.getGraphicsContext2D().setFill(cp.getValue());
canvas.getGraphicsContext2D().fillOval(20, 20, 20, 20);
});
with
CerchioListener cerchioListener = new CerchioListener(canvas);
btn.setOnAction(cerchioListener);
cerchioListener.colorProperty.bind(cp.valueProperty());
and add the listener:
CerchioListener.java
public class CerchioListener implements EventHandler<ActionEvent> {
private Canvas canvas = null;
public ObjectProperty<Color> colorProperty = new SimpleObjectProperty<Color>(Color.WHITE);
public CerchioListener(Canvas c) {
this.canvas = c;
}
public Canvas getCanvas() {
return canvas;
}
public void setCanvas(Canvas canvas) {
this.canvas = canvas;
}
#Override
public void handle(ActionEvent t) {
canvas.getGraphicsContext2D().setFill(colorProperty.get());
canvas.getGraphicsContext2D().fillOval(20, 20, 20, 20);
}
}

JavaFx Application lags after time

in my Application below, red blocks are falling from the top of the screen. My problem is, that after 3-5 minutes the animation begins to lag and I can't figure out why.
I used a profiler and found out, that it's not a memory leak but it must be a resource leak, I am pretty sure because the Cpu Load increases over time.
If you want to, you can just implement the necessary classes and compile and run the code, then you should probably see the problem. (after 3-5 minutes)
Thanks for your help and have a great day! :)
public class RBYDebug extends Application {
Group root = new Group();
ArrayList<Rectangle> entities = new ArrayList<>();
Random random = new Random();
int sW = 1600; //screen Width
int sH = 980; //screen Height
int dy = 4; //vertical move speed
public static void main(String[] args){
Application.launch(args);
}
public void start(Stage primaryStage){
//Setup Entities
for (int i = 0; i < 40; i++){
double x = random.nextDouble() * sW;
double y = i * 50;
Rectangle rect = new Rectangle(x, -y -50, 50, 50);
rect.setFill(Color.RED);
entities.add(rect);
}
//Root-Group setup
root.getChildren().setAll(entities);
//Setup Scene
Scene scene = new Scene(root, sW, sH, Color.BLACK);
//Stage setup
primaryStage.setTitle("RBY Debug");
primaryStage.setScene(scene);
primaryStage.setResizable(false);
primaryStage.show();
//Setup Timer
AnimationTimer timer = new AnimationTimer(){
public void handle(long now){
update();
}
};
timer.start();
}
public void update(){
for (Rectangle i : entities){
if (i.getY() <= sH){
i.setY(i.getY() + dy);
}
else {
i.setY(-i.getHeight());
}
}
root.getChildren().setAll(entities);
}
}

Javafx KeyEvent and MouseEvent

I am trying to learn javafx. I did most of the code but I am having trouble with the start method.
What I wanted to do was add spots to the screen by clicking on it. And if I press either 1 or 0 future spots that will be added will change to some different color. Therefore, I know that I must use setOnMouseClicked
and setOnKeyPressed methods but there isn't much on the internet on it.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
public class Spots extends Application {
public static final int SIZE = 500;
public static final int SPOT_RADIUS = 20;
private LinkedList<Spot> spotList;
private Color color;
public static void main(String...args) {
launch(args);
}
public void start(Stage stage) {
stage.setTitle("Spots");
dotList = new SinglyLinkedList<>();
Group root = new Group();
Scene scene = new Scene(root, 500, 500, Color.BLACK);
Spot r;
// ...
stage.show();
}
private class Spot extends Circle {
public Spot(double xPos, double yPos) {
super(xPos, yPos, SPOT_RADIUS);
setFill(color);
}
public boolean contains(double xPos, double yPos) {
double dx = xPos - getCenterX();
double dy = yPos - getCenterY();
double distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
return distance <= SPOT_RADIUS;
}
}
}

The reason the circle is not accepting is that it is not focused. For nodes to respond to key events they should be focusTraversable. You can do that by
calling setFocusTraversable(true) on the node. I edited your start() method and here is the code I ended up with.
public void start(Stage primaryStage) throws Exception {
Pane pane = new Pane();
final Scene scene = new Scene(pane, 500, 500);
final Circle circle = new Circle(250, 250, 20);
circle.setFill(Color.WHITE);
circle.setStroke(Color.BLACK);
pane.getChildren().add(circle);
circle.setFocusTraversable(true);
circle.setOnKeyPressed(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent e) {
if ((e.getCode() == KeyCode.UP) && (circle.getCenterY() >= 5)) {
circle.setCenterY(circle.getCenterY() - 5);
}
else if ((e.getCode() == KeyCode.DOWN && (circle.getCenterY() <= scene.getHeight() - 5))) {
circle.setCenterY(circle.getCenterY() + 5);
}
else if ((e.getCode() == KeyCode.RIGHT) && (circle.getCenterX() <= scene.getWidth() - 5)) {
circle.setCenterX(circle.getCenterX() + 5);
}
else if ((e.getCode() == KeyCode.LEFT && (circle.getCenterX() >= 5))) {
circle.setCenterX(circle.getCenterX()-5);
}
}
});
//creates new spots by clicking anywhere on the pane
pane.setOnMouseClicked(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
double newX = event.getX(); //getting the x-coordinate of the clicked area
double newY = event.getY(); //getting the y-coordinate of the clicked area
Circle newSpot = new Circle(newX, newY,20);
newSpot.setFill(Color.WHITE);
newSpot.setStroke(Color.BLACK);
pane.getChildren().add(newSpot);
}
});
primaryStage.setTitle("Move the circle");
primaryStage.setScene(scene);
primaryStage.show();
}
Also take look at the answers for the following links:
Handling keyboard events
Cannot listen to KeyEvent in
JavaFX

Solution Approach
You can monitor the scene for key typed events and switch the color mode based on that. You can place an mouse event handler on your scene root pane and add a circle (of the appropriate color for the prevailing color mode) to the scene when the user clicks anywhere in the pane.
Sample Code
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;
// Java 8+ code.
public class Spots extends Application {
private static final int SIZE = 500;
private static final int SPOT_RADIUS = 20;
private Color color = Color.BLUE;
public void start(Stage stage) {
Pane root = new Pane();
root.setOnMouseClicked(event ->
root.getChildren().add(
new Spot(
event.getX(),
event.getY(),
color
)
)
);
Scene scene = new Scene(root, SIZE, SIZE, Color.BLACK);
scene.setOnKeyTyped(event -> {
switch (event.getCharacter()) {
case "0":
color = Color.BLUE;
break;
case "1":
color = Color.RED;
break;
}
});
stage.setScene(scene);
stage.show();
}
private class Spot extends Circle {
public Spot(double xPos, double yPos, Color color) {
super(xPos, yPos, SPOT_RADIUS);
setFill(color);
}
}
public static void main(String... args) {
launch(args);
}
}
Further Info
For detailed information on event handling in JavaFX, see the Oracle JavaFX event tutorial.

Generally, you'd use setOnAction as shown in the Oracle tutorials.
Example:
btn.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
System.out.println("Hello World");
}
});
If the particular Node you're trying to use does not have a clickHandler method, try doing something like this (on Group for example):
group.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.println("Hello!");
}
});

Draw circle in border of rectangle in JavaFX

I want add some circles in border of a rectangle in event onMouseMoved.
Need to develop a graph using JavaFX and these circles will serve to connect the edges to the graph nodes.
See the image below:
I'm using JavaFX.
See you the code:
public class SampleDragAndDrop extends Application {
public static void main(String[] args) throws Exception {
launch(args);
}
#Override
public void start(final Stage stage) throws Exception {
DoubleProperty entity1X = new SimpleDoubleProperty(100);
DoubleProperty entity1Y = new SimpleDoubleProperty(100);
Entity entity1 = new Entity(Color.STEELBLUE, entity1X, entity1Y);
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
stage.setX(bounds.getMinX());
stage.setY(bounds.getMinY());
stage.setWidth(bounds.getWidth());
stage.setHeight(bounds.getHeight());
stage.setTitle("Draw circle in rectangle");
stage.setScene(new Scene(new Group(entity1), 400, 400, Color.ALICEBLUE));
stage.show();
}
class Anchor extends Circle {
Anchor(Color color, DoubleProperty x, DoubleProperty y) {
super(x.get(), y.get(), 20);
setFill(color.deriveColor(1, 1, 1, 0.5));
setStroke(color);
setStrokeWidth(2);
setStrokeType(StrokeType.OUTSIDE);
x.bind(centerXProperty());
y.bind(centerYProperty());
}
class Entity extends Rectangle {
Entity(Color color, DoubleProperty x, DoubleProperty y) {
setX(x.get());
setY(y.get());
setWidth(120);
setHeight(50);
setFill(color.deriveColor(1, 1, 1, 0.5));
setStroke(color);
setStrokeWidth(2);
setStrokeType(StrokeType.OUTSIDE);
setArcWidth(20);
setArcHeight(20);
x.bind(xProperty());
y.bind(yProperty());
enableDrag();
}
private void enableDrag() {
final Entity.Delta dragDelta = new Entity.Delta();
setOnMousePressed(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
// record a delta distance for the drag and drop operation.
dragDelta.x = getX() - mouseEvent.getX();
dragDelta.y = getY() - mouseEvent.getY();
getScene().setCursor(Cursor.MOVE);
}
});
setOnMouseReleased(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
getScene().setCursor(Cursor.HAND);
}
});
setOnMouseDragged(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
double newX = mouseEvent.getX() + dragDelta.x;
if (newX > 0 && newX < getScene().getWidth()) {
setX(newX);
}
double newY = mouseEvent.getY() + dragDelta.y;
if (newY > 0 && newY < getScene().getHeight()) {
setY(newY);
}
}
});
setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
if (!mouseEvent.isPrimaryButtonDown()) {
getScene().setCursor(Cursor.HAND);
}
}
});
setOnMouseExited(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
if (!mouseEvent.isPrimaryButtonDown()) {
getScene().setCursor(Cursor.DEFAULT);
}
}
});
setOnMouseMoved(new EventHandler<MouseEvent>(){
#Override
public void handle(MouseEvent mouseEvent) {
// Create circles in rectangle here
}
});
}
private class Delta {
double x, y;
}
}
}
How can I do?
Thank you!

This works:
// Create circles in rectangle here
// Not sure you really need these?
DoubleProperty leftX = new SimpleDoubleProperty();
DoubleProperty leftY = new SimpleDoubleProperty();
Anchor leftAnchor = new Anchor(Color.STEELBLUE, leftX, leftY);
leftAnchor.centerXProperty().bind(xProperty());
leftAnchor.centerYProperty().bind(yProperty().add(heightProperty().divide(2)));
((Group)getParent()).getChildren().add(leftAnchor);