Swing Components in Default Processing Window

[vsquared]

I am new to Py5 but have used Processing for a few years and have a special interest in controls for the user interface. I have previously used Swing components in the default Processing window by adding them to the frame and deleting the default canvas. An example of what I have done in the past is here: https://discourse.processing.org/t/swing-components-in-default-processingwindow/35483. I would like to do something similar in Py5, but am unable to get the frame to accomplish this. My operating system is MacOS with Sonoma 14.1.1. Below is the Py5 code that I use in a Thonny editor to get the window object and canvas. I have been told that I might have a defective py5 installation, but have no idea how it is supposed to work. I have successfully placed Swing components on both a JFrame and an AWT Frame, but currently am unable to do any event handling. I would prefer to use the frame of the default window if possible. Thanks in advance for any help.

# Using Imported mode for py5

_wndW = 600
_wndH = 600


def setup():
    size(_wndW, _wndH)
    wnd = get_surface()
    print("Py5Surface = ", wnd)
    wnd.set_title("Default")
    canvas = get_surface().get_native()
    print("canvas = ", canvas)

#     This doesn't work
#     frame = get_surface().get_native().get_frame()


def draw():
    background(209)


# Output
"""
Py5Surface =  <py5.surface.Py5Surface object at 0x150c08d90>
canvas =  processing.awt.PSurfaceAWT$SmoothCanvas[canvas0,0,0,600x600]
"""
# Error when trying to obtain frame of default Processing window
# With this code: frame = get_surface().get_native().get_frame()
"""
AttributeError: 'processing.awt.PSurfaceAWT.SmoothCanvas' object has no attribute 'get_frame'
"""

Previous Work Done in Processing 4:

[vsquared]

Link above is apparently dead; will try again: https://discourse.processing.org/t/swing-components-in-default-processingwindow/35483

[vsquared]

Looks like it's bad also. Don't know what else to do. I'll add a screen shot.

[hx2A]

Hi, @vsquared ! Thanks for trying py5.

I would try getFrame() instead of get_frame(), since get_native() will return the native Java object, which probably uses camel case. Coding what you are attempting will be a bit tricky because you will be mixing Python and Java code together. Also, your IDE's code completion won't work for the Java objects so you'll want to read Java Docs to get the list of methods and how to use them.

I would also recommend reading JPype's AWT Swing documentation:

https://jpype.readthedocs.io/en/latest/userguide.html#awt-swing

py5 uses JPype to connect to Java so whatever JPype does to work with Swing will help you here.

You are moving into territory that I am not familiar with. Good luck, and please keep me in the loop so I can learn from what you are doing!

[vsquared]

getFrame() runs without error:
frame = javax.swing.JFrame[frame0,110,80,600x628,layout=java.awt.BorderLayout,title=Default,normal,defaultCloseOperation=HIDE_ON_CLOSE,rootPane=javax.swing.JRootPane[,0,28,600x600,layout=javax.swing.JRootPane$RootLayout,alignmentX=0.0,alignmentY=0.0,border=,flags=16777673,maximumSize=,minimumSize=,preferredSize=],rootPaneCheckingEnabled=true]

Now I should be able to start building Swing components in the default window. Thanks a million. There may be more questions later.

[hx2A]

Now I should be able to start building Swing components in the default window. Thanks a million. There may be more questions later.

Excellent, very happy I could point you in the right direction. If there are more Swing questions later I might not be that useful but I will do what I can. The JPype folks might be able to help also, depending on what you are faced with. Good luck!

[vsquared]

The following demo will give you some idea of what is possible. Swing components were placed in the default Processing window using the same technique that was used in Processing 4. Once the frame is obtained it is important to remove the canvas in order for the controls to show up. On a Mac it is necessary to retain draw() even though it is non-functional; otherwise there is a flash and the window disappears at app launch. I was unable to use a separate thread for the swing components (as required in Processing), but in py5 that doesn't appear to be a problem (as far as I am aware at this point). For some reason I couldn't get the ComboBox to work correctly (it only shows up when clicked on and there are no up/down arrows displayed), but I left the REMmed out code in anyway. The next hurdle is to get event handling to work. The controls are there, but they don't do much at this point. At any rate, the demo should serve as proof of concept.

# Use Imported mode for py5 Thonny editor

from java.awt import *
from javax.swing import *
import numpy as np

_wndW = 500
_wndH = 700

def textArea():
    txtArea = JTextArea("Welcome to Swing components for py5.")
    scrlPane = JScrollPane(txtArea)
    scrlPane.setBounds(20,20,200,200)
    frame.add(scrlPane)
    txtArea.setEditable(True)
    txtArea.setLineWrap(False)
    txtArea.setWrapStyleWord(True)
    txtArea.repaint()

def label():
    label = JLabel()
    label.setHorizontalAlignment(JLabel.CENTER);
    label.setBounds(250, 20, 110, 30)
    label.setText("Welcome to Py5.")
    label.setToolTipText("label")
    frame.add(label)
    label.repaint()

def button():
    btn = JButton("Press me.")
    btn.setBounds(250, 60, 100, 30)
    btn.setToolTipText("button")
    frame.add(btn)
    btn.repaint()
    
def slider():
    slider = JSlider(JSlider.HORIZONTAL, 5, 70, 20)
    slider.setBounds(250, 100, 120, 30)
    slider.setToolTipText("slider no ticks")
    frame.add(slider)
    
def checkBox():
    chkBox = JCheckBox("OK")
    chkBox.setBounds(370, 60, 60, 24)
    chkBox.setToolTipText("check box")
    frame.add(chkBox)
    chkBox.repaint()
    
def progressBar():
    pbar = JProgressBar()
    pbar.setBounds(250, 160, 200, 24)
    pbar.setValue(75)
    pbar.setToolTipText("progress bar")
    frame.add(pbar)
    pbar.repaint()
    
def tabbedPane():
    panel1 = JPanel()
    panel1.setBackground(Color.BLUE)
    panel2 = JPanel()
    panel2.setBackground(Color.GREEN)
    panel3 = JPanel()
    panel3.setBackground(Color.RED)
    tabbedPane = JTabbedPane()
    tabbedPane.setBounds(220, 230, 250, 150)
    tabbedPane.add("Tab 1", panel1)
    tabbedPane.add("Tab 2", panel2)
    tabbedPane.add("Tab 3", panel3)
    tabbedPane.setToolTipText("tabbed pane")
    frame.add(tabbedPane);
    tabbedPane.repaint()
    
"""
This doesn't work as expected: 1)no up/dwn arrows, 2)only shows up when clicked on
def comboBox():
    country = np.array(["France","Australia","Brazil","England","U.S.A","Spain","Germany","Japan"])
    comboBox = JComboBox(country)
    comboBox.setBounds(260, 200, 150, 30)
    comboBox.setToolTipText("comboBox")
    frame.add(comboBox)
    comboBox.repaint()
"""
    
def buildWnd():
    textArea()
    button()
    label()
    slider()
    checkBox()
    progressBar()
    tabbedPane()
#    comboBox()
    
def setup():
    global frame
    size(_wndW, _wndH)
    wnd = get_surface()    
    print("window =",wnd)
    canvas = wnd.get_native()
    print("canvas =",canvas)
    frame = canvas.getFrame()
    print("frame =",frame)
    wnd.set_title('Default Processing Window')
#   canvas must be removed for components to show up
    frame.remove(canvas)
    buildWnd()

#   This is non-functional but necessary for stable window on Mac; otherwise flash and no window
def draw():
    background(209)
    circle(100,300,50)

[vsquared]

This is done in the default Processing window; _not in a separate JFrame window. I'm curious to see if anyone besides me can run the code (particularly on some platform other than Mac).

[hx2A]

This is done in the default Processing window; _not in a separate JFrame window.

Oh, I must have misunderstood what frame.remove(canvas) does. See, I don't know much about Swing.

Wait, how come you don't see the result of circle(100,300,50)?

I'm curious to see if anyone besides me can run the code (particularly on some platform other than Mac).

I just ran it on Linux. It runs fine here.

[vsquared]

You don't see the circle because draw() is non-functional. I added that line of code just to prove that it really is non-functional. In Processing 4 I don't even add draw(), but in py5 on a Mac if you don't add draw() the window flashes and does not remain visible. It probably is some sort of bug, but you do what you have to do to get things to work. Glad to hear it runs on your Linux box. Thanks for testing. Also recall that the canvas was removed; there is nothing to draw into. There is a way to save part of the canvas by changing its bounds, eg lowering it in the window and adding your controls at the top so that you can have your cake and eat it too. Otherwise, the user would have to draw into a JPanel.

I know that Processing folks, and presumably py5 users also, really like to draw and are attracted to the simple code used to do so. If only a few buttons or controls are required in a toolbar like layout then saving part of the canvas would be a good compromise.

[hx2A]

but in py5 on a Mac if you don't add draw() the window flashes and does not remain visible.

Wait, what? Is this for all py5 Sketches, separate from what you are doing in this discussion thread?

This shouldn't be a thing. I have a MacOS computer here and do not experience that, and haven't heard of that from others.

[vsquared]

Try this on your Mac. Doesn't work on my system; flash, poof, it's gone!

def setup():
    size(400,400)

@villares told me others have complained also.

Update:
After updating py5 from 0.8 to 0.10 it appears that this is no longer an issue.

[vsquared]

The following demo shows how to change the size of the canvas to allow room for controls at the top, thereby retaining the functionality of draw(). Buttons are placeholders only and will need to be hooked up later when it is known how to install event handlers.

# Use Imported mode for py5 Thonny editor

from java.awt import *
from javax.swing import *

_wndW = 600
_wndH = 500

# Buttons are non-functional (placeholders for now, will need to be hooked up later)
def btn1():
    btn1 = JButton("Open")
    btn1.setBounds(30, 20, 80, 24)
    frame.add(btn1)
    btn1.repaint()
    
def btn2():
    btn2 = JButton("Save")
    btn2.setBounds(120, 20, 80, 24)
    frame.add(btn2)
    btn2.repaint()
 
def btn3():
    btn3 = JButton("Color")
    btn3.setBounds(210, 20, 80, 24)
    frame.add(btn3)
    btn3.repaint()

def btn4():
    btn4 = JButton("Quit")
    btn4.setBounds(_wndW - 120, 20, 80, 24)
    frame.add(btn4)
    btn4.repaint()
   
def buildWnd():
    btn1()
    btn2()
    btn3()
    btn4()
    
def setup():
    global frame
    size(_wndW, _wndH)
    wnd = get_surface()    
    print("window =",wnd)
    canvas = wnd.get_native()
    print("canvas =",canvas)
    frame = canvas.getFrame()
    print("frame =",frame)
    wnd.set_title('Default Processing Window')
#   canvas resized to allow room for controls
    canvas.setBounds(0, 60, _wndW, _wndH)
    buildWnd()

#   This is functional; canvas was retained (bounds changed to allow room for controls)
def draw():
    background(209)
    fill(0,255,0)
    circle(300,200,150)

[villares]

It looks fine on Linux. I even made things in draw animate. The buttons don't do anything, right?

I think you should really look into fixing your Mac env to make py5 work also on module mode...

[vsquared]

I haven't worked out event handling yet, so the buttons are non-functional. How did you animate the drawing?

[hx2A]

Buttons and GUI elements would be a great addition to py5. Someday I'd like to get the Processing libraries LazyGUI or ControlP5 to work with py5...this should be possible, with some modification to the code.

[villares]

How did you animate the drawing?

With circle(300,200,150 + 150 * sin(frame_count / 10))

[vsquared]

Very creative; I usually use a slider.

Please explain to me again why I might want to use module mode on a Mac. Adding the py5. prefix to everything just seems like more work.

[villares]

Just to make sure your system is working right... for me, the auto-complete works best in general with module mode... but I use a lot of imported mode.

[hx2A]

Yes, module mode is a bit more typing with py5. everywhere, but if you are doing something that combines py5 commands with other Python stuff, it becomes a more minor thing.

A side note, my fingers are so used to typing py5. that I often catch myself automatically adding 5 after "py". I will write "py5thon", etc.

[vsquared]

As it turns out it's pretty simple to add a slider to change the circle diameter. Just make a global of the slider and use its value to draw the circle. Also added r,g,b sliders to change color of circle (would normally use JColorChooser hooked to a button).

# Use Imported mode for py5 Thonny editor

from java.awt import *
from javax.swing import *
from javax.swing.event import *
from java.awt.event import *

_wndW = 600
_wndH = 550

# Quit button is non-functional ( will need to be hooked up later)

def redSlider():
    global redSlider
    redSlider = JSlider(JSlider.HORIZONTAL, 0, 255, 0)
    redSlider.setBounds(20, 20, 100, 24)
    redSlider.setToolTipText("red");
    frame.add(redSlider)
    redSlider.repaint()
    
def redLabel():
    redLabel = JLabel("Red")
    redLabel.setBounds(60, 35, 350, 24)
    frame.add(redLabel)
    redLabel.repaint()
    
def greenSlider():
    global greenSlider
    greenSlider = JSlider(JSlider.HORIZONTAL, 0, 255, 255)
    greenSlider.setBounds(130, 20, 100, 24)
    greenSlider.setToolTipText("green")
    frame.add(greenSlider)
    greenSlider.repaint()
    
def greenLabel():
    greenLabel = JLabel("Green")
    greenLabel.setBounds(160, 35, 350, 24)
    frame.add(greenLabel)
    greenLabel.repaint()
    
def blueSlider():
    global blueSlider
    blueSlider = JSlider(JSlider.HORIZONTAL, 0, 255, 0)
    blueSlider.setBounds(240, 20, 100, 24)
    blueSlider.setToolTipText("blue")
    frame.add(blueSlider)
    blueSlider.repaint()

def blueLabel():
    blueLabel = JLabel("Blue")
    blueLabel.setBounds(270, 35, 350, 24)
    frame.add(blueLabel)
    blueLabel.repaint()
        
def sizeSlider():
    global sizeSlider
    sizeSlider = JSlider(JSlider.HORIZONTAL, 0, 400, 100)
    sizeSlider.setBounds(350, 20, 150, 24)
    sizeSlider.setToolTipText("size");
    frame.add(sizeSlider)
    
def sizeLabel():
    sizeLabel = JLabel("Size")
    sizeLabel.setBounds(400, 35, 350, 24)
    frame.add(sizeLabel)
    sizeLabel.repaint()
    
def quitBtn():
    quitBtn = JButton("Quit")
    quitBtn.setBounds(_wndW - 80, 20, 60, 24)
    frame.add(quitBtn)
    quitBtn.repaint()
    quitBtn.addActionListener
    print(ActionListener)
        
def buildWnd():
    redSlider()
    redLabel()
    greenSlider()
    greenLabel()
    blueSlider()
    blueLabel()
    sizeSlider()
    sizeLabel()
    quitBtn()
    
def setup():
    global frame
    size(_wndW, _wndH)
    wnd = get_surface()    
    print("window =",wnd)
    canvas = wnd.get_native()
    print("canvas =",canvas)
    frame = canvas.getFrame()
    print("frame =",frame)
    wnd.set_title('Default Processing Window')
#   canvas resized to allow room for controls
    canvas.setBounds(0, 60, _wndW, _wndH)
    buildWnd()

#   Functional since canvas was retained
def draw():
    background(209)
    fill(redSlider.getValue(),greenSlider.getValue(),blueSlider.getValue())
    circle(300,250,sizeSlider.getValue())

Improved version:
This version uses a single slider and a JColorChooser connected to a push button, which is normally the case.

# Use Imported mode for py5

from javax.swing import *
from java.awt import *

_wndW = 600
_wndH = 660

myColor = Color.GREEN

def myBtnAction(event):
    global myColor
    panel = JPanel()
    myColor = JColorChooser.showDialog(panel,"Choose color",Color.GREEN)
  
def setup():
    global frame
    global slider
    
    size(_wndW, _wndH)
    wnd = get_surface()    
    canvas = wnd.get_native()
    frame = canvas.getFrame()
    wnd.set_title('Default Processing Window')
    canvas.setBounds(0,60,_wndW,_wndH - 60)
          
    slider = JSlider(JSlider.HORIZONTAL, 0, 500, 100)
    slider.setBounds(180, 20, 200, 24)
    slider.setToolTipText("size");
    frame.add(slider)
    slider.repaint()
    
    btn = JButton("Color")
    btn.setBounds(400,20,80,24)
    frame.add(btn)
    btn.repaint()
    btn.addActionListener(myBtnAction)

def draw():
    background(209)
    fill(myColor.getRed(), myColor.getGreen(), myColor.getBlue())
    circle(300,300,slider.getValue())

[vsquared]

The following source code is an example of a JButton event handler:

from javax.swing import *

_wndW = 400
_wndH = 250

def myBtnAction(event):
   print("btn was hit.")

def setup():
    global frame
    size(_wndW, _wndH)
    wnd = get_surface()    
    canvas = wnd.get_native()
    frame = canvas.getFrame()
    wnd.set_title('Default Processing Window')
    frame.remove(canvas)
    btn = JButton("Click Me")
    btn.addActionListener(myBtnAction)
    btn.setBounds(120,60,100,24)
    frame.add(btn)
    btn.repaint()

def draw():
    background(209)