PySimpleGUI how to place a button on top of image

Question

here is example with image and "image as button" but i want to place a litte button on the image, it is possible ? with normal python i can do that with image.place(40,40....) method and how to do that with "PySimpleGUI"

import PySimpleGUI as sg

# Define the layout with an image and a button on top of it
layout = [
    [sg.Image(filename='image.png', background_color='white')],
    [sg.Button('Click Me', image_filename='image.png', button_color=('white', 'white'))]
]

# Create the window
window = sg.Window('Button on Image', layout)

# Event loop
while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break

# Close the window
window.close()

it can be done with : button.place(x=50, y=50) , but it is tkinter, and theme would be lost. — DIMM_V2, Apr 30 '23 at 18:37

score 2 · Accepted Answer · answered May 01 '23 at 02:14

2

tkinter code required here, so no comment about it.

import PySimpleGUI as sg

layout = [
    [sg.Image(filename='image1.png', background_color='white', key='IMAGE')],
    [sg.Button('Click Me', image_filename='image2.png', button_color=('white', 'white'), pad=(0, 0))]
]

window = sg.Window('Button on Image', layout, finalize=True)

window.refresh()
click = window["Click Me"].widget
w1, h1 = window['IMAGE'].get_size()
w2, h2 = window['Click Me'].get_size()
master = click.master
master.place(x=(w1-w2)//2, y=(h1-h2)//2, bordermode=sg.tk.INSIDE)

window.move_to_center()
window.read(close=True)

answered May 01 '23 at 02:14

Jason Yang

11,284
2
9
23

thx , this is working . more easier example than i understand is : master.place(x=(250), y=(150), bordermode=sg.tk.INSIDE) – DIMM_V2 May 01 '23 at 09:46
How do you use place method, if tkinter is not imported? – DIMM_V2 May 01 '23 at 10:15
1

tkinter imported by pysimplegui, that's why i used sg.tk for it. – Jason Yang May 01 '23 at 10:27
normally you dont need to add as.tk because it works already with master.place(x=150, y=25) without sk.tk , but any way i have the question how can we use the place method ? it is because we use window[text].widget ? – DIMM_V2 May 20 '23 at 11:25
PySimpleGUi place all elements only by `pack` method, so I use `window[text].widget` to get tkinter widget to call another method `place` which I found it can work with `pack` at the same time when layout. Some constant defined under tkinter, like `INSIDE`, that's why I use `sg.tk` here. – Jason Yang May 20 '23 at 13:39

score 0 · Answer 2 · answered May 20 '23 at 11:32

Working Example,simplified.

import PySimpleGUI as sg

layout = [
    [sg.Image(filename='1.png', key='IMAGE')],
    [sg.Button('2nd_image_on_top', image_filename='2.png', button_color=('cyan', 'cyan'), pad=(0, 0))]
]

window = sg.Window('Button on Image', layout, finalize=True)
# window.refresh()
click = window["2nd_image_on_top"].widget
# w1, h1 = window['IMAGE'].get_size()
# w2, h2 = window['2nd_image_on_top'].get_size()
master = click.master
master.place(x=150, y=25)
# window.move_to_center()
window.read(close=True)

PySimpleGUI how to place a button on top of image

2 Answers2

Linked