JavaFX TransparentWindow Drawing (Discussion)

Processing
1

Hello @svan,

I don’t care to turn a Gallery Topic into a discussion that may be distracting from the the work and will provide feedback here instead. I should have done this initially and deleted my posts from there.

The Gallery is for sharing and discussing your work… feel free to use any of this content I am sharing.

Regarding this Gallery topic:
JavaFX TransparentWindow Drawing

It works on W10 with these additions:

// Add to top:
import processing.javafx.*;
import javafx.scene.paint.Color; // The type Color is ambiguous

gc = canvas.getGraphicsContext2D();
  
// Added these two lines:
gc.setFill(new Color(1, 1, 1, 0.01)); // ensure a visually transparent (or near-transparent) window/area still participates in mouse event handling in Windows       
gc.fillRect(0, 0, displayWidth, displayHeight);
    
gc.setLineWidth(10.0);

Visitors to this topic:
You will have to add the JAR files for JavaFX to the sketch as well to work with Windows.
A search will yield topics on this.

:)

1 Like
2

Congratulations, you fixed it in Windows 11! Draws a little slow, but that’s not all bad (could be the mouse that I’m using). Output looks good.

jfx
jfx2350×1905 369 KB

1 Like
3

Hello folks!

My lifelong learning journey includes (it is a long list) learning some new programming languages and libraries.

I am learning Java and JavaFX with VSCode outside of the Processing environment but also want to be able to migrate it easily to Processing for future and vice versa.

I adapted the code @svan provided and it will work in both Processing and VSCode Java with some commenting of code.

This is the Processing version with the VSCode parts commented:

// Processing:
import processing.javafx.*;

// VSCode:
//package demomavenfx0;

// Processing (below) + VSCode (uncomment all):
//import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
//import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
//import javafx.scene.control.ColorPicker;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;

import javafx.stage.Stage;
//import javafx.stage.StageStyle;
import javafx.stage.Screen;

// Processing:
ColorPicker colorPicker;

void setup()
  {
  size(1, 1, FX2D);
  surface.setVisible(false);  
 
  colorPicker = new ColorPicker(Color.BLUE);

// VSCode:
//public class DrawingApp extends Application {

//    private ColorPicker colorPicker;  
  
//    @Override
//    public void start(Stage stage) {

// Processing:  
        Stage stage = new Stage();  // Comment for VSCode

// Processing + VSCode:  
        double width = Screen.getPrimary().getBounds().getWidth();
        double height = Screen.getPrimary().getBounds().getHeight();

        Pane pane = new Pane();

        // Canvas
        Canvas canvas = new Canvas(width, height);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        gc.setLineWidth(10);
        gc.setLineCap(javafx.scene.shape.StrokeLineCap.ROUND);
        gc.setLineJoin(javafx.scene.shape.StrokeLineJoin.ROUND);

        // Tiny fill to make canvas drawable
        gc.setFill(new Color(1, 1, 1, 0.01));
        gc.fillRect(0, 0, width, height);

        // Drawing logic
        canvas.addEventHandler(MouseEvent.MOUSE_PRESSED, e -> {
            gc.beginPath();
            gc.moveTo(e.getX(), e.getY());
            gc.setStroke(colorPicker.getValue());
            gc.stroke();
        });

        canvas.addEventHandler(MouseEvent.MOUSE_DRAGGED, e -> {
            gc.lineTo(e.getX(), e.getY());
            gc.setStroke(colorPicker.getValue());
            gc.stroke();
        });

        // Color picker setup
        colorPicker = new ColorPicker(Color.BLUE);
        colorPicker.setLayoutX(60);
        colorPicker.setLayoutY(24);

        // Quit button
        Button quitButton = new Button("Q");
        quitButton.setLayoutX(10);
        quitButton.setLayoutY(24);
        quitButton.setOnAction(e -> stage.close());

        // Add in correct order: canvas first, then controls
        pane.getChildren().addAll(canvas, colorPicker, quitButton);

        Scene scene = new Scene(pane, width, height);
        scene.setFill(Color.TRANSPARENT);
        pane.setStyle("-fx-background-color: transparent;");

        stage.initStyle(StageStyle.TRANSPARENT);
        stage.setAlwaysOnTop(true);
        stage.setScene(scene);
        stage.show();
    }

// VSCode:
//    public static void main(String[] args) {
//        launch(args);
//    }
//}

Reference:
How to set up JavaFX on VS Code

That was fun!

:)

1 Like
4

Thonny with Imported mode for py5 also makes a good editor to port javafx code to and from Processing.