Adding an image to a button in Tkinter - python

I am trying to add an image to a button, but I have got some issues when I try to execute the current code. All it shows is an image with no words. I can't even see the button either. Is there some way of fixing my current code?
from tkinter import *
import tkinter as tk
root = tk.Tk()
root.geometry("960x600")
canvas = Canvas(root, width=500, height=500)
canvas.pack()
imagetest = PhotoImage(file="giftest.gif")
canvas.create_image(250, 250, image=imagetest)
button_qwer = Button(root, text="asdfasdf", image=imagetest)
root.mainloop()

You need to pack (or grid) your button in the window, here is how you could do:
import tkinter as tk
from tkinter import PhotoImage
def print_hello():
print('hello')
root = tk.Tk()
root.geometry("960x600")
imagetest = PhotoImage(file="giftest.gif")
button_qwer = tk.Button(root, text="asdfasdf", image=imagetest, command=print_hello)
button_qwer.pack() # <-- don't forget to place the button in the window
root.mainloop()
You can have both text and image displayed on your button, using the compound option, like this:
button_qwer = tk.Button(root, image=imagetest, text="asdfasdf", compound="top", command=print_hello)
compound options are bottom, center, left, none, right, or top

You are making the button successfully but you are not drawing it onto the screen/interface. Use pack , place or grid.
button_qwer = Button(root, text="asdfasdf", image=imagetest)
button_qwer.pack()
Your full code can be like:
from tkinter import *
import tkinter as tk
root = tk.Tk()
root.geometry("960x600")
canvas = Canvas(root, width=500, height=500)
canvas.pack()
imagetest = PhotoImage(file="giftest.gif")
canvas.create_image(250, 250, image=imagetest)
button_qwer = Button(root, text="asdfasdf", image=imagetest)
button_qwer.pack()
root.mainloop()

Related

Tkinter center Label in the GUI

import tkinter as tk
from tkinter import *
HEIGHT = 600
WIDTH = 600
root = tk.Tk()
def button_event1():
import ThreePlayers
print(ThreePlayers)
def button_event2():
import TwoPlayersGame
print(TwoPlayersGame)
def button_event3():
print("")
def button_event4():
print("")
def button_event5():
quit()
root = Tk()
root.title('Connect 4 Game')
canvas = tk.Canvas(root, height=HEIGHT, width=WIDTH)
canvas.pack()
L = Label(root, text="Welcome to 3P Connect 4!!!",font=("Ariel",20,"bold", "underline"))
L.config(anchor=CENTER)
L.pack()
button = tk.Button(root, text="3 Player Game", command=button_event1)
button.pack()
button = tk.Button(root, text="2 Player Game", command=button_event2)
button.pack()
button = tk.Button(root, text="1 Player Game", command=button_event3)
button.pack()
button = tk.Button(root, text="Options", command=button_event4)
button.pack()
button = tk.Button(root, text="QUIT", command=button_event5)
button.pack()
root.mainloop()
Above is my Code for a Tkinter GUI but I want the have the label at the center of the root/window how do I do that? Currently its sitting on top of the buttons everything else is fine the button events and such works
In my opinion, you should have used place or grid instead of pack. Because pack only gives few alignment options.
otherwise, maybe divide the main window into two frames then pack the label at the top of the lower frame
frame = Frame(root)
frame.pack()
bottomframe = Frame(root)
bottomframe.pack( side = BOTTOM )
L = Label(root, text="Welcome to 3P Connect 4!!!",font=("Ariel",20,"bold", "underline"))
L.pack(side = TOP)
I wish this helps. but you should use grid for better alignment or place.
You can use the following commands to place the label in the center
L = Label(root, text="Welcome to 3P Connect 4!!!",font=("Ariel",20,"bold", "underline"))
# L.config(anchor=CENTER)
# L.pack()
L.place(x=HEIGHT/2, y=WIDTH/2, anchor="center")
Similarly, you can also use button.place(x=100, y=25) for buttons
REF: Tkinter: Center label in frame of fixed size?

Color button background permanently when clicked, and without pressure effect?

I built a button image (first image), but I manually added the neighboring text as plain text. I would like to make sure that clicking on the button (image or text) the background color of the button becomes permanent (second image).
I don't like the effect of pressing the button, I just want the background color of the button. Can I modify the button I created by merging image + text into a single selection? Or do you have to create the button in another way? If so, can you show me how? I found some buttons on the web, but they're not how I want them: I don't like that it looks like a button (I don't want the rectangular outline, I don't want the effect of pressing). How can I do?
Code:
from tkinter import *
from tkinter import ttk
from tkinter import messagebox
import tkinter as tk
from tkinter import ttk
from PIL import ImageTk, Image
root = Tk()
root.title("xxxx")
root.geometry("1920x1080+0+0")
root.config(bg="#f0f0f0")
root.state("normal")
topbar=Frame(root, width=2200, height=43, background="#e10a0a")
topbar.place(x=0, y=0)
leftbar=Frame(root, width=250, height=1400, background="white")
leftbar.place(x=1, y=44)
button1= tk.PhotoImage(file="/image.png")
btn1 = tk.Button(root, image=button1, borderwidth=0, highlightthickness=0, bg="white", text="sdsdsd", foreground='green')
btn1.place(x=2, y=43)
text1 = Label(root, text="aaaaa", bg="white", foreground='black', font='Verdana 12')
text1.place(x=70, y=58)
button2= tk.PhotoImage(file="/image.png")
btn2 = tk.Button(root, image=button2, borderwidth=0, highlightthickness=0, bg="white", text="sdsdsd", foreground='green')
btn2.place(x=2, y=100)
text2 = Label(root, text="bbbbbb", bg="white", foreground='black', font='Verdana 12')
text2.place(x=70, y=120)
UPDATE 1
After using compound, I get this. I don't know if it's the best solution. I get closer, but I still don't have what I need. I would like to stretch the selection color to the end of the white rectangle, then I would like to permanently color the background of the button
UPDATE 2
By applying width = 224, I fix the button background color length problem, but the button is centered. Now there is space to his left, before it wasn't there. I would like it in the starting position on the left
You can combine image and text in a button by setting compound option.
Also suggest to use pack() instead of place() for laying out the frames and buttons for your case.
And I think the parent of those buttons should be leftbar instead of root.
Below is the modified code:
from tkinter import messagebox
import tkinter as tk
from tkinter import ttk
from PIL import ImageTk, Image
root = tk.Tk()
root.title("xxxx")
root.geometry("1920x1080+0+0")
root.config(bg="#f0f0f0")
root.state("normal")
topbar = tk.Frame(root, background="#e10a0a", height=43)
topbar.pack(fill='x') # use pack() instead of place()
leftbar = tk.Frame(root, width=250, background="white")
leftbar.pack(side='left', fill='y') # use pack() instead of place()
leftbar.pack_propagate(0) # disable size auto-adjustment
def clicked(btn):
for w in leftbar.winfo_children():
w['bg'] = 'white' if w is not btn else 'yellow'
button1 = tk.PhotoImage(file="/image.png")
btn1 = tk.Button(leftbar, image=button1, borderwidth=0, highlightthickness=0,
bg="white", text="aaaaa", foreground='green', compound='left', anchor='w')
btn1.pack(fill='x') # use pack() instead of place()
btn1['command'] = lambda: clicked(btn1)
button2 = tk.PhotoImage(file="/image.png")
btn2 = tk.Button(leftbar, image=button2, borderwidth=0, highlightthickness=0,
bg="white", text="bbbbb", foreground='green', compound='left', anchor='w')
btn2.pack(fill='x') # use pack() instead of place()
btn2['command'] = lambda: clicked(btn2)
root.mainloop()
The output:

Tkinter how to use a button to hide current window and open new one

Im trying to use a tkinter button that when clicked opens another window and hides the current one with the button inside.
def game():
window = tk.Toplevel()
window.geometry("1280x720")
root = tk.Tk()
root.title('testgame')
root.resizable(False,False)
root.geometry("500x500")
pbutton = tk.Button(root, text='Play', width=25, command=game and root.withdraw).place(relx = 0.5,rely = 0.5, anchor = 'center')
root.mainloop()
You can try something like this:
import tkinter as tk
root = tk.Tk()
#In order to hide main window
root.withdraw()
tk.Label(root, text="Main Window").pack()
aWindow = tk.Toplevel(root)
def change_window():
#remove the other window entirely
aWindow.destroy()
#make root visible again
root.iconify()
root.deiconify()
tk.Button(aWindow, text="This is aWindow", command=change_window).pack()
root.mainloop()

Python canvas colour change by button

I am a python self learner. I was stuck on some practice.
My idea was to create a pop out GUI with buttons that can change the canvas colour.
from Tkinter import *
import ttk
import tkMessageBox
root = Tk()
root.title("Colour!")
canvasColor = "yellow"
def buttonRed() :
canvas = Canvas(root, bg = "red", height=100, width=100)
canvas.grid(row=0,column=2)
button = ttk.Button(root, text="Red", command = buttonRed)
button.grid(row=2,column=1)
button2 = ttk.Button(root, text ="Green", command = buttonGreen)
button2.grid(row=2,column=2)
button3 = ttk.Button(root, text="Blue", command = buttonBlue)
button3.grid(row=2,column=3)
canvas = Canvas(root, bg = canvasColor, height=200, width=200)
canvas.grid(row=0,column=2)
root.configure(background='white')
root.mainloop()
i haven't put in the green and blue button command yet, but instead of creating a new canvas when the colour button clicked, i just wanted to have the default canvas colour change.
Any help will be much appreciated!
Thanks in advance.
I think this is what you need -
from Tkinter import *
import ttk
import tkMessageBox
root = Tk()
root.title("Colour!")
canvasColor = "yellow"
def buttonRed() :
canvas.config(background="red")
def buttonGreen() :
canvas.config(background="green")
def buttonBlue() :
canvas.config(background="blue")
button = ttk.Button(root, text="Red", command = buttonRed)
button.grid(row=2,column=1)
button2 = ttk.Button(root, text ="Green", command = buttonGreen)
button2.grid(row=2,column=2)
button3 = ttk.Button(root, text="Blue", command = buttonBlue)
button3.grid(row=2,column=3)
canvas = Canvas(root, bg = canvasColor, height=200, width=200)
canvas.grid(row=0,column=2)
#canvas.config(background="black")
root.configure(background='white')
root.mainloop()

How to set tkinter Message border

I have tried all ways to set tkinter message widget border, but still receive any effect. I wonder if it does not have a border attribute? But I can set label and Text border using the same code. Here is my code snippet:
from tkinter import *
root = Tk()
frame = Frame(root)
message = Message(frame, text="hello world", width=200)
message.config(fg="red", borderwidth=100, highlightcolor="green")
frame.pack()
message.pack()
root.minsize(300, 200)
root.mainloop()
this's result:
OS Version:OS X 10.11.4
Python version: 3.52
You are setting the borderwidth correctly. The issue is that you can't see the changes you are implementing, until your add background colour and change the relief of the Frame and Message widget. Now try changing the borderwidths with this revised code, and I trust you get the "gotcha" moment.
from tkinter import *
root = Tk()
frame = Frame(root, background='yellow', borderwidth=20, relief=RAISED)
message = Message(frame, text="hello world", width=200)
message.config(fg="red", borderwidth=50, highlightcolor="green",
background='light blue', relief=SUNKEN)
frame.pack()
message.pack()
root.minsize(300, 200)
root.mainloop()

Categories

Resources