Develop Reference

Screen sharing in the ImageView of JavaFX

I am trying to build a JavaFX application, where I have a button named "Start" and an ImageView. With the robot class of JavaFX-12, I am trying to take a screenshot of the laptop screen when the button is clicked and show the images one by one during the runtime in the ImageView. My problem is that the JavaFX window does not respond and the program crashes (probably). Even putting the thread into sleep does not seem to work. I assume that it isn't working as I have not set any fps rule, but how can I do that? At the moment, I am creating writable images, converting them into a separate image with a number, saving them, and again reusing them. My goal is to create a screen sharing of the same laptop in the image view. I know that's difficult. I'm new to the JavaFx robot class (not he awt one). Any help is appreciated.
P.S.: The images are properly formed in the directory.
package sample;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Rectangle2D;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.VBox;
import javafx.scene.robot.Robot;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javax.imageio.ImageIO;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
ImageView iv = new ImageView();
iv.setFitWidth(100);
iv.setFitHeight(100);
Button b = new Button("Start");
VBox v = new VBox(10);
v.getChildren().addAll(b,iv);
b.setOnAction(event -> {
Robot r = new Robot();
WritableImage wi = new WritableImage(300,300);
WritableImage i;
Rectangle2D rect = Screen.getPrimary().getVisualBounds();
while(true){
i = r.getScreenCapture(wi,rect);
try {
ImageIO.write(SwingFXUtils.fromFXImage(i,null),"png",new File("F:/Pic/pic" + x + ".png"));
iv.setImage(new Image(new FileInputStream("F:/Pic/pic" + x + ".png")));
//Thread.sleep(500);
//iv.setImage(null);
} catch (Exception e) {
System.out.println(e);
}
}
});
primaryStage.setScene(new Scene(v, 500, 500));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

JavaFX is, like most UI frameworks, single-threaded. You must never block (e.g. sleep) or otherwise monopolize (e.g. while (true)) the JavaFX Application Thread. That thread is responsible for everything related to the UI and if it's not free to do its job then the UI will become unresponsive. Note that a render pass cannot happen until the FX thread returns from whatever it's doing, so setting the image of an ImageView in a loop will have no visible effect until some time after the loop terminates.
Also, a full-throttle while loop will attempt to get a screen capture as fast as the CPU can execute said loop. That is likely to be much faster than the rate at which your UI refreshes and is thus a waste of resources. The rate of screen captures should not exceed the frame rate.
If you need to loop on the FX thread and/or be constrained by the (JavaFX's) frame rate then use the javafx.animation API. In your case, an AnimationTimer seems apt. Here's an example which continuously screenshots the primary screen:
import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.StackPane;
import javafx.scene.robot.Robot;
import javafx.stage.Screen;
import javafx.stage.Stage;
public class App extends Application {
#Override
public void start(Stage primaryStage) {
ImageView view = new ImageView();
view.setFitWidth(720);
view.setFitHeight(480);
// Keep a reference to the AnimationTimer instance if
// you want to be able to start and stop it at will
new AnimationTimer() {
final Robot robot = new Robot();
final Rectangle2D bounds = Screen.getPrimary().getBounds();
#Override
public void handle(long now) {
WritableImage oldImage = (WritableImage) view.getImage();
WritableImage newImage = robot.getScreenCapture(oldImage, bounds);
if (oldImage != newImage) {
view.setImage(newImage);
}
}
}.start();
primaryStage.setScene(new Scene(new StackPane(view)));
primaryStage.show();
}
}
Some notes:
The AnimationTimer#handle(long) method is invoked once per frame. JavaFX tries to target 60 frames-per-second. If that's too fast (the above lags somewhat on my computer) then you can use the method's argument, which is the timestamp of the current frame in nanoseconds, to throttle the rate of screen captures. You could also look into using a Timeline or PauseTransition instead of an AnimationTimer. See JavaFX periodic background task for more information.
The above gives a Droste Effect (I think that's the term?) since the screen capture is displayed on the screen which is being captured.
My example does not include saving each image to a file. You seem to already understand how to do that so you should be able to easily adapt the code. It'd probably be a good idea, however, to move the I/O to a background thread. Unfortunately, that will likely require using different WritableImage instances for each capture to avoid the image being mutated by the FX thread while the background thread reads it. It may also require some tuning or dropped images; I'm not sure how well the I/O will keep up with the influx of screen captures (i.e. standard producer-consumer problems).
As an aside, your question explains you're attempting to share the entire screen. If that's the case then continue using Robot. However, if you only need to share something from the JavaFX application itself then consider using Node#snapshot(SnapshotParameters,WritableImage) or Scene#snapshot(WritableImage) (assuming you can't just send model data instead of images).

JavaFx Equivalent to Graphics context.rotate() for nodes

If I am drawing in a canvas, I can rotate the coordinate system of the graphicscontext without rotating anything that is already drawn in the corresponding canvas, same with translations.
Is there anything similar possible in a group? If I just rotate and translate it's children I don't get the right effect because translations orient themselves on the unrotated system of the group.
If not, is there anything like a 3d canvas with that functionality?

As Slaw pointed out, what i was looking for were the classes in the package javafx.scene.transform.
Here is an example: Let's say I want a Line starting from (200, 200) with a length of 200 in direction 60 degrees from the x-axis. This would be not so hard to do without the transform package aswell but it shall only serve as an easy example.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.scene.transform.Affine;
import javafx.stage.Stage;
public class Example extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage stage) throws Exception {
Group group = new Group();
Scene scene = new Scene(group, 400, 400);
stage.setScene(scene);
// Does not work as intended
Line line1 = new Line(0,0, 200, 0);
line1.setTranslateX(200);
line1.setTranslateY(200);
line1.setRotate(60);
// Does work as intended.
Line line2 = new Line(0, 0, 200, 0);
Affine affine = new Affine();
affine.appendTranslation(200, 200);
affine.appendRotation(60);
line2.getTransforms().add(affine);
group.getChildren().addAll(line1, line2);
stage.show();
}
}

Allow only visual overflow of JavaFX node

I got quite simple question but I can't find answer to my case.
My goal is to "allow" only visual overflow of node and prevent resize of parent node like this:
I want to allow visual overflow of child (right) but I want to prevent resize of parent and clip it as black rectangle (left).
I am aware of setClip method but this way I get situation (#1) where child is clipped visually.
Is it possible in JavaFX to allow visual overflow?
I need it becauase I can't deal with centering of node in StackPane when nested children overflow but would be good to avoid clipping them. I want to get first situation but now i get second one:
Is there other solution to my problem?

If you set the absulute position and size of the children yourself, you can make the parent layout ignore a child by setting the managed property to false. Unmanaged nodes are not repositioned/resized by the parent and are ignored when calculating the layout bounds of the parent.
child.setManaged(false);

This is standard behavior for JavaFX Regions:
Every Region has its layout bounds, which are specified to be (0, 0, width, height). A Region might draw outside these bounds. The content area of a Region is the area which is occupied for the layout of its children. This area is, by default, the same as the layout bounds of the Region, but can be modified by either the properties of a border (either with BorderStrokes or BorderImages), and by padding. The padding can be negative, such that the content area of a Region might extend beyond the layout bounds of the Region, but does not affect the layout bounds.
Here's a short example:
import javafx.application.Application;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
pane.setBackground(new Background(new BackgroundFill(Color.BLACK, null, null)));
pane.setMaxSize(500, 300);
Rectangle rect = new Rectangle(100, 100, Color.FIREBRICK);
rect.setOnMousePressed(this::handleMousePressed);
rect.setOnMouseDragged(this::handleMouseDragged);
pane.getChildren().add(rect);
StackPane root = new StackPane(pane);
primaryStage.setScene(new Scene(root, 600, 400));
primaryStage.show();
}
private Point2D origin;
private void handleMousePressed(MouseEvent event) {
origin = new Point2D(event.getX(), event.getY());
event.consume();
}
private void handleMouseDragged(MouseEvent event) {
Rectangle rect = (Rectangle) event.getSource();
rect.setTranslateX(rect.getTranslateX() + event.getX() - origin.getX());
rect.setTranslateY(rect.getTranslateY() + event.getY() - origin.getY());
event.consume();
}
}
This has a Rectangle whose parent is a Pane but allows you to drag the Rectangle anywhere, even outside the bounds of the Pane.

JavaFX slow performance on canvas when drawing freestyle with pen

I was trying out the code here for making a JavaFX app which allows my stylus pen to draw on a canvas: Canvas does not draw smooth lines
The performance is extremely painful when trying to draw on a canvas. It will freeze for half a second, and then start drawing. Only after it starts drawing is it fine. Beforehand though when you first press down with the mouse/pen, the delay is pretty brutal and makes it unusable.
Here is the code I used:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.effect.BoxBlur;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
import javafx.stage.Stage;
public class Test extends Application {
private GraphicsContext gc;
#Override
public void start(Stage stage) {
Canvas canvas = new Canvas(500, 500);
canvas.setOnMouseDragged(e -> {
gc.lineTo(e.getX(), e.getY());
gc.stroke();
});
canvas.setOnMousePressed(e -> gc.moveTo(e.getX(), e.getY()));
gc = canvas.getGraphicsContext2D();
gc.setLineCap(StrokeLineCap.ROUND);
gc.setLineJoin(StrokeLineJoin.ROUND);
gc.setLineWidth(1);
BoxBlur blur = new BoxBlur();
blur.setWidth(1);
blur.setHeight(1);
blur.setIterations(1);
gc.setEffect(blur);
Group root = new Group(canvas);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
stage.setFullScreen(true);
}
public static void main(String[] args) {
launch(args);
}
}
Is there any way to fix the performance issue? My desktop computer is pretty solid and can run high-end games, so its not the performance on my computer.
NOTE: I should also say that the delay that occurs when you first press the mouse on the canvas is bad enough to cause mouse clicks to drop.
EDIT: To confirm it wasnt the OnMousePressed, I commented it out and it did not help.

Apparently my driver was conflicting somehow with Java, which means JavaFX is fine. After getting help from the tablet company and some fixes, this doesn't happen with the latest drivers.

Autosize text area into tabpane in javaFX

I hava 3 tabs in a TabPane that each one has a text area with different texts and different length.
I want to autosize text area according to it's length in each tab.
I don't understand what should I do ? using scene builder ? css ?javaFX methods ?
Thank's in Advance ...

I think you are asking that the text areas grow or shrink according to the text that is displayed in them?
If so, see if this code helps:
import java.util.concurrent.Callable;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class AutosizingTextArea extends Application {
#Override
public void start(Stage primaryStage) {
TextArea textArea = new TextArea();
textArea.setMinHeight(24);
textArea.setWrapText(true);
VBox root = new VBox(textArea);
Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
// This code can only be executed after the window is shown:
// Perform a lookup for an element with a css class of "text"
// This will give the Node that actually renders the text inside the
// TextArea
Node text = textArea.lookup(".text");
// Bind the preferred height of the text area to the actual height of the text
// This will make the text area the height of the text, plus some padding
// of 20 pixels, as long as that height is between the text area's minHeight
// and maxHeight. The minHeight we set to 24 pixels, the max height will be
// the height of its parent (usually).
textArea.prefHeightProperty().bind(Bindings.createDoubleBinding(new Callable<Double>(){
#Override
public Double call() throws Exception {
return text.getBoundsInLocal().getHeight();
}
}, text.boundsInLocalProperty()).add(20));
}
public static void main(String[] args) {
launch(args);
}
}
If you want to make this reusable, then you could consider subclassing TextArea. (In general, I dislike subclassing control classes.) The tricky part here would be to execute the code that makes the TextArea expand once it has been added to a live scene graph (this is necessary for the lookup to work). One way to do this (which is a bit of a hack, imho) is to use an AnimationTimer to do the lookup, which you can stop once the lookup is successful. I mocked this up here.