py5 Sketch + JavaFX controls

[hx2A]

Currently on a bumpy train to PyCon but was able to write a working py5 Sketch that uses JavaFX controls:

import py5

color_picker = None


def set_fill_event(event):
    # color_picker = event.getSource()
    py5.fill("#" + color_picker.getValue().toString()[2:])


def setup():
    global color_picker
    py5.size(500, 500, py5.FX2D)

    from javafx.scene.control import ColorPicker as JavaFXColorPicker

    canvas = py5.get_surface().get_native()
    pane = canvas.getParent()

    color_picker = JavaFXColorPicker()
    color_picker.setTranslateX(-180)
    color_picker.setTranslateY(-220)
    color_picker.setOnAction(set_fill_event)

    pane.getChildren().add(color_picker)


def draw():
    py5.rect(py5.mouse_x, py5.mouse_y, 10, 10)


py5.run_sketch()

I knew this would be possible with the latest py5 release and its support for JavaFX. I'm happy I had some (somewhat) quiet time to work on it.

That JavaFXColorPicker import statement needs to be where it is. If I move it to the top of the file, it will throw an exception and complain JavaFX was not initialized. I'll look into this later to see if I can fix that in a future release.

@vsquared, you know JavaFX controls better than anyone. Please expand this example with what you know to make something magnificent!

[hx2A]

For this example to work, you need to have executed this code once (just once):

import py5_tools

py5_tools.processing.download_library('JavaFX')

JavaFX needs to be installed this way to trigger py5's support for the JavaFX modules.

[hx2A]

It seems to me that py5 should ship with all the necessary javafx modules and install them in a place where it always knows where they are instead of relying on the user to add them to the 'jars' folder.

py5 can't ship with JavaFX for the same reason that Processing can't ship with JavaFX. The JavaFX library, with all the native libraries, is quite large. It would significantly increase download sizes and complicate installation for everyone. Python libraries downloaded from pypi are typically quite small, but py5 is 12MB. This is much larger than average. There are size constraints for packages on pypi that I as a maintainer must manage.

I agree that relying on the user to add JavaFX or anything else to a jars folder is not the most accessible solution. That's why I added these new features to the new version of py5. Now the user just needs to run one line of code just once to download and install JavaFX.

In Thonny I always get this warning:

The new version of py5 solves this problem.

[vsquared]

The new version of py5 solves this problem.
It's not intuitively obvious to me how to update py5; are there published 'howto' instructions somewhere? Rather than requiring the user to remember some code to install javafx would it be possible to put it on your Thonny menu?

[GoToLoop]

py5 can't ship with JavaFX for the same reason that Processing can't ship with JavaFX.

Processing 3 has always shipped JavaFX. They've stopped at current version 4.

[hx2A]

It's not intuitively obvious to me how to update py5; are there published 'howto' instructions somewhere?

It's the same way you'd update any other Python library. Something like:

pip install --upgrade py5

In Thonny you can use the built-in GUI, available through "Tools" -> "Manage packages..."

https://github.com/thonny/thonny/wiki/InstallingPackages

[vsquared]

Thanks, Thonny makes it easy.

[vsquared]

Your initial demo post may be simplified to this:

# Uses Imported mode for py5

import javafx.geometry.Pos
  
def setup():
    global colorPicker
    
    size(500, 500, FX2D)
    canvas = get_surface().get_native()
    pane = canvas.getParent()
    colorPicker = javafx.scene.control.ColorPicker()
    pane.setAlignment(colorPicker, javafx.geometry.Pos.TOP_LEFT)
    pane.getChildren().add(colorPicker)

def draw():
    fill("#" + colorPicker.getValue().toString()[2:])
    rect(mouse_x, mouse_y, 10, 10)

Apparently the root pane for the default Processing window is a StackPane which defaults to a CENTER alignment. This can be changed for each control as shown. The only other thing that's not intuitively obvious is how to convert the color picker value to three separate r,g,b values for use in fill().

[hx2A]

Cool, I knew it could be improved! Thanks!

[vsquared]

Looks like someone else had the idea of getting the pane from the PSurfaceFX canvas back in 2016.
processing/processing#4750