I have a trouble with Tkinter buttons:) Please help!

Python Help
1

Hello there! I really need help with TkInter library. I worked on my Mac and created a small and easy game on it. When I started to design it ( like adding colors and pictures ), I noticed that my design isn’t correct! Here I will show you. I used this code:

path = '/Users/emiliustube/Desktop/Brain_Boiler/bg.png'
img = ImageTk.PhotoImage(Image.open(path))

path2 = '/Users/emiliustube/Desktop/Brain_Boiler/bone.png'
img2 = ImageTk.PhotoImage(Image.open(path2))

root['bg'] = 'black'
#playsound('/Users/emiliustube/Desktop/Brain_Boiler/music.mp3', False)
root.title('Calculator Game')
root.wm_attributes('-alpha',0.97)
root.geometry('500x500')

root.resizable(width=False, height=False)

canvas = Canvas(root, height = 500, width = 500)
canvas.pack()

frame = Frame(root)
frame.place(relwidth=1, relheight=1)



title = Label(frame, text="Calculator Game", fg='yellow', bg = "black", font = ("Arial", 50))
title.place(relx = 0.1, rely = 0.1)


canvas.create_image(30,30,image=img2)

play = Button(frame,image = img2, command = Main, text = "Play!", highlightthickness=0, bd = 0, font = ("Arial",60, "bold"))
play.place(relx = 0, rely = 0.4)

rules = Button(frame, text = "Rules", image = img2, fg = "black", command = Rules, highlightthickness=0, bd = 0, font = ("Arial",60, "bold"))
rules.place(relx = 0, rely = 0.6)

exit_button = Button(frame, text = "Exit", image = img2, fg = "black", highlightthickness=0, bd = 0, command=root.destroy, font = ("Arial",60, "bold")) 
exit_button.place(relx = 0, rely = 0.8)

text2 = Label(frame, text = "Commands:", fg = "yellow", bg = "systemTransparent")
text2.place(relx = 0.7, rely = 0.86)

input = Entry(frame, bg = 'white', fg = "black", font = ("Arial", 25))
input.place(relx = 0.7, rely = 0.9)
root.attributes('-fullscreen', True)

And here is the result:

Снимок экрана 2024-07-09 в 18.24.58
Снимок экрана 2024-07-09 в 18.24.581920×1232 37.8 KB

I really don’t understand why my buttons are with this white frame… I also checked the format of my image but it is still .png . You can see in my code that I also tried to set it with borders or highlightthickness but it didn’t get result. Please help me to remove this white background on the buttons to look like just bone buttons.

Waiting for your answers!

2

Is this the only problem you’re trying to solve here?

What colour do you think the frame should be instead, and why?

From what you said, it sounds like you mean that the area outside the bone should be transparent. Is that right?

Did you try to use an image editor first, to make sure that the actual .png images make this area transparent?

Where the code says, for example

rules = Button(frame, text = "Rules", image = img2, fg = "black", command = Rules, highlightthickness=0, bd = 0, font = ("Arial",60, "bold"))

what do you hope the bd = 0 part should mean?

3

bd = 0, with that I tried to remove borders of the button and you are right when you said that I want to do transparent colour of the button. Also I tried just to replace background colour to transparent but with that the picture just gone

4

You need to use an image editor to make the part outside the bone transparent, but keep the part inside white.

5

I already used the image editor to transparent the background of the bone. Here is the image:
bone

But it didn’t help:( If I didn’t understand you please tell me :sweat_smile:

6

Oh.

Tkinter’s built-in image loading doesn’t support this. You need to use another tool to load the image, such as PIL. Once you have a proper tk.PhotoImage that includes transparency, the rest of the Tkinter code should work fine.

See:

In the example from the answer there, ImageTk comes from PIL.

7

I tried to add this to my code to see how the image has been stored:

from PIL import Image
im = Image.open("/Users/emiliustube/Desktop/Brain_Boiler/bone.png")
print( im.mode)

And it showed me this:

emiliustube@MacBook-Pro-Emil ~ % /usr/local/bin/python3 /Users/emiliustube/Desktop/Brain_Boiler/Game.py
RGBA

I read about this on the site that you gave me and I think it is normal :thinking: but I’m not sure. I remember that I also added a library to correct shrifts, colors and buttons itself for Mac but unfortunately I dont remember anything else about this library. May be this information will help…

8

Yes, RGBA is the expected result for the im.mode, because the image has transparent parts.

I looked at the OP code again and it seems that you already use ImageTk.PhotoImage correctly, so I don’t know anything else I can tell you. Sorry.

9

Everything is fine, thanks for trying! I hope that anyone else will help:)