JavaFX Transparent Moveable Window

[vsquared]

The following source code will create a moveable transparent window with controls and graphics:

# https://docs.oracle.com/javase/8/javafx/api/javafx/stage/StageStyle.html
# https://medium.com/@keeptoo/making-a-borderless-javafx-window-movable-f7855eb33a51

# Uses Imported mode for py5

import javafx

_wndW = 400
_wndH = 400
xOffset = 0
yOffset = 0

def myBtnAction(event):
  global stage
  stage.close()

def pressedHandler(event):
  global stage,scene,xOffset,yOffset
  
  xOffset = event.getSceneX()
  yOffset = event.getSceneY()
  
def draggedHandler(event):
  global stage,xOffset,yOffset

  stage.setX(event.getScreenX()-xOffset)
  stage.setY(event.getScreenY()-yOffset)

def setup():
  global pane,stage,scene
  
  size(1, 1, FX2D)
  pane = javafx.scene.layout.Pane()
  stage = javafx.stage.Stage()
  scene = javafx.scene.Scene(pane,_wndW,_wndH)
# Button
  btn = javafx.scene.control.Button("Close")
  btn.setLayoutX(50)
  btn.setLayoutY(50)
  btn.setOnAction(myBtnAction)
  pane.getChildren().add(btn)
# Label
  label = javafx.scene.control.Label("Drag me")
  label.setLayoutX(150)
  label.setLayoutY(50)
  pane.getChildren().add(label)
# Rectangle
  r = javafx.scene.shape.Rectangle(50, 130, 100, 50)
  r.setStroke(javafx.scene.paint.Color.color(0.0, 1.0, 0.0, 0.95))
  r.setStrokeWidth(5)
  r.setArcWidth(15)
  r.setArcHeight(15)
  pane.getChildren().add(r);
  stage.setX(50)
  stage.setY(50)
  scene.setFill(None)
  scene.getRoot().setStyle("-fx-background-color: transparent")
  stage.initStyle(javafx.stage.StageStyle.TRANSPARENT);
  scene.getRoot().setOnMousePressed(pressedHandler)
  scene.getRoot().setOnMouseDragged(draggedHandler)
  stage.setScene(scene);
  stage.show()

[hx2A]

This is really cool! I love the idea of transparent windows. Now we need to figure out how to get the JavaFX drawing surface to be transparent. It would be really neat to be able to draw on a transparent canvas.

[vsquared]

It would be really neat to be able to draw on a transparent canvas.

Is this what you're talking about? Runs on both MacOS and Linux, but doesn't draw on Windows 11 (does allow click-through). Graphics is sharper on Linux than on Mac for some reason.

# Uses Imported mode for py5

import javafx
from javafx.scene.paint import *

def myBtnAction(event):
  global stage
  stage.close()

def MOUSE_PRESSED(evnt):
  global gc
  gc.moveTo(evnt.getX(), evnt.getY())

def MOUSE_DRAGGED(evnt):
  global gc,colorPicker
  gc.lineTo( evnt.getX(), evnt.getY())
  gc.stroke()
  gc.setStroke(colorPicker.getValue())
  gc.setLineCap(javafx.scene.shape.StrokeLineCap.ROUND)
  gc.setLineJoin(javafx.scene.shape.StrokeLineJoin.ROUND)

def setup():
  global pane,stage,scene, colorPicker, gc

  size(1, 1, FX2D)
  get_surface().set_visible(False)
  pane = javafx.scene.layout.Pane()
  stage = javafx.stage.Stage()
  scene = javafx.scene.Scene(pane,display_width,display_height)

# Canvas
  canvas = javafx.scene.canvas.Canvas()
  canvas.setLayoutX(0)
  canvas.setLayoutY(0)
  canvas.setWidth(display_width)
  canvas.setHeight(display_height)
  gc = canvas.getGraphicsContext2D()
  gc.setLineWidth(10.0)
  canvas.setOnMousePressed(MOUSE_PRESSED)      
  canvas.setOnMouseDragged(MOUSE_DRAGGED)
  pane.getChildren().add(canvas);

# Color Picker
  colorPicker = javafx.scene.control.ColorPicker(Color.BLUE)
  colorPicker.setLayoutX(60)
  colorPicker.setLayoutY(24)
  pane.getChildren().add(colorPicker)
  
# Quit Button
  btn = javafx.scene.control.Button("Q")
  btn.setStyle("-fx-background-radius:5em;"+"-fx-min-width:30px;"+"-fx-min-height:30px;"+"-fx-max-width:30px;"+"-fx-max-height:30px;")
  btn.setLayoutX(10)
  btn.setLayoutY(24)
  btn.setOnAction(myBtnAction)
  pane.getChildren().add(btn)
  
  stage.setX(0)
  stage.setY(0)
  scene.setFill(None)
  scene.getRoot().setStyle("-fx-background-color: transparent")
  stage.initStyle(javafx.stage.StageStyle.TRANSPARENT);
  stage.setScene(scene)
  stage.setAlwaysOnTop(True)
  stage.show()

Output:

[hx2A]

Yes, this is exactly what I had mind. Thanks! This is my favorite JavaFX experiment of yours. And adding the quit button was an important detail, thank you for that!