JavaFX Controls in py5

[svan]

@hx2A

It would be neat if you could use py5 drawing commands to draw something that is inside a JavaFX window that also has those controls on it.

The FX2D window already has a StackPane (root) which is by default CENTER aligned. By adding a ‘regular’ Pane to the root we can then add JavaFX controls to it using setLayoutX/Y for control placement. draw() is functional in this window and therefore allows us to use familiar Processing drawing code.

import javafx

_wndW = 600
_wndH = 600
    
def setup():
  global slider,colorPicker
  
  size(_wndW, _wndH, FX2D)
  window_title("JavaFX DotView Default Window")  
  canvas = get_surface().get_native()
  root = canvas.getParent()
  pane = javafx.scene.layout.Pane()
  slider = javafx.scene.control.Slider(20, 500, 10)
  slider.setLayoutX(190)
  slider.setLayoutY(20)
  colorPicker = javafx.scene.control.ColorPicker(javafx.scene.paint.Color.GREEN)
  colorPicker.setLayoutX(400)
  colorPicker.setLayoutY(15)
  pane.getChildren().addAll(slider,colorPicker)
  root.getChildren().add(pane)
  
def draw():
  global slider, colorPicker
  
  background(209)
  Color = colorPicker.getValue()
  fill(int(Color.getRed()*255),int(Color.getGreen()*255),int(Color.getBlue()*255))
  circle(_wndW/2,_wndH/2, float(slider.getValue()))

Output: