Need your help guys once again, building a GUI project and need to make it dynamically so the button, labels, entry box, background, and everything will resize when I'm changing the window size and fitting to the new window size.
So far this is the code with working background resizing only,
but there is main screen with labels, buttons etc.. and add to that, I need to add more 8 buttons that each one opening new window, on the new windows I will have to make them dynamically too... here an example of code:
from tkinter import *
from PIL import Image, ImageTk
class MainScreen(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.configure(background="black")
self.image = Image.open("bg.jpg")
# label for the background image
self.background = Label(self)
self.background.place(x=0, y=0)
self.bind('<Configure>', self._resize_image)
# Label 1 welcome message
Label(root, text="Welcome", bg="#12355F", fg="white",
font="tahoma 12 bold") .place(x=10, y=10)
# Label 2
Label(root, text="Add:", bg="#164883", fg="white",
font="tahoma 10 bold").place(x=10, y=80)
# Add Button + New Window Open
def openNewWindow():
def close_window():
newWindow.destroy()
newWindow = Toplevel(master)
newWindow.title("New Window")
window_height = 565
window_width = 970
screen_width = newWindow.winfo_screenwidth()
screen_height = newWindow.winfo_screenheight()
x_cordinate = int((screen_width / 2) - (window_width / 2))
y_cordinate = int((screen_height / 2) - (window_height / 2))
newWindow.geometry("{}x{}+{}+{}".format(window_width, window_height, x_cordinate, y_cordinate))
newWindow.configure(background="#071530")
# create a text box
output = Text(newWindow, width=75, height=6, wrap=WORD, background="white")
output.grid(row=2, column=0, columnspan=10, sticky=W, padx=170, pady=30)
# create lable
Label(newWindow, text="BLABLA", bg="#071530", fg="white", font="calibre 20 bold").grid(row=0,
column=0,
sticky=W,
padx=340,
pady=30)
Label(newWindow, text="Subtext.",
bg="black", fg="white", font="calibre 12 bold").grid(row=1, column=0, sticky=W, padx=230, pady=10)
# create lable
Label(newWindow, text="CLICK", bg="black", fg="white", font="calibre 12 bold").grid(row=3,
column=0,
sticky=W,
padx=320,
pady=10)
Label(newWindow, text="EXIT", bg="black", fg="white", font="calibre 12 bold").grid(row=3,
column=0,
sticky=W,
padx=550,
pady=10)
# create a button
Button(newWindow, text="Exit", width=6, command=close_window, bg="orange").grid(row=4, column=0, sticky=W,
padx=570, pady=1)
Button(newWindow, text="View", width=6, bg="orange").grid(row=4, column=0, sticky=W, padx=350, pady=1)
newWindow.mainloop()
# button 1 main menu = ADD
self.button = Button(self, text="Add", width=4, bg="orange", command=openNewWindow)
self.button.place(x=220, y=79.4)
def _resize_image(self,event):
if event.widget is self:
# resize background image to fit the frame size
image = self.image.resize((event.width, event.height))
self.background_image = ImageTk.PhotoImage(image)
self.background.configure(image=self.background_image)
root = Tk()
root.title("GUI")
window_height = 565
window_width = 970
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()
x_cordinate = int((screen_width/2) - (window_width/2))
y_cordinate = int((screen_height/2) - (window_height/2))
root.geometry("{}x{}+{}+{}".format(window_width, window_height, x_cordinate, y_cordinate))
e = MainScreen(root)
e.pack(fill=BOTH, expand=1)
root.mainloop()
You can do this by calling grid_remove() of the current frame and then grid() on the new frame. Or, being lazy you can call grid_remove() on everything so that you don't have to remember which page is current.
def _resize_image(self,event)::
'''Show a frame for the given page name'''
for frame in self.frames.values():
frame.grid_remove()
frame = self.frames[page_name]
frame.grid()
Note: the automatic resizing will stop working if you give the main window a fixed size with the geometry method on the root window, or if the user manually resizes the window. This is because tkinter assumes that if something explicitly requests a window size, that size should be honored.
If you always want the window to resize, you should reset the geometry to an empty string. You can add this as the last statement in the show_frame method:
frame.winfo_toplevel().geometry("")
Related
I am trying to display images in my game, which in time will correspond to rooms.
I have three main frames and I want to display images in the one called 'frame 3', but I am not unable to get the picture itself to display!
I made a method called RoomImages which is supposed to handle the roomImages. I have called this method in my constructormethod for the whole App class.
It displays no error messages and therefore I am unsure where the missing logic is.
I have attached a picture of what the output shows:
Output
import tkinter as tk
from Game import Game
from tkinter import messagebox
from PIL import ImageTk, Image
class App():
# Creates a Frame for the application
# and populates the GUI ...
def __init__(self, root):
#super().__init__(master=win)
self.game = Game()
#A menubar with the options Quit' which destroys the window
# and 'about' which displays a message box with the info from the method showAbout
menubar = tk.Menu()
menubar.add_command(label="Quit", command=root.destroy)
menubar.add_command(label="About", command=self.showAbout)
root.config(menu=menubar)
# Create two frames owned by the window root
# In order to use multiple layout managers, the frames
# cannot share a parent frame. Here both frames are owned
# by a top level instance root.
self.frame1 = tk.Frame(root, width=600, height=250, bg='WHITE', borderwidth=2)
self.frame1.pack_propagate(0) # Prevents resizing
self.frame2 = tk.Frame(root, width=600, height=150, bg='LIGHT GREY', borderwidth=2, padx=175)
self.frame2.grid_propagate(0) # Prevents resizing
self.frame3 = tk.Frame(root, width=600, height=250, bg='LIGHT BLUE', borderwidth=2, padx=275)
self.frame3.grid_propagate(0) # Prevents resizing
# This packs both frames into the root window ...
self.frame1.pack()
self.frame2.pack()
self.frame3.pack()
#image canvas for frame3 to display the current room
self.canvas_for_image = tk.Canvas(self.frame3, bg='LIGHT GREY', height=250, width=600, borderwidth=0, highlightthickness=0)
self.canvas_for_image.grid(row=0, column=0, sticky='nesw', padx=0, pady=0)
#self.canvas_for_image.pack(expand=YES, fill=BOTH)
self.frame3.columnconfigure(0, pad=5)
self.frame3.columnconfigure(1, pad=5)
self.frame3.rowconfigure(0, pad=5)
self.frame3.rowconfigure(1, pad=5)
#make a gridstructure for frame2 to be able to precisely place my buttons.
self.frame2.columnconfigure(0, pad=5)
self.frame2.columnconfigure(1, pad=5)
self.frame2.columnconfigure(2, pad=5)
self.frame2.columnconfigure(3, pad=5)
self.frame2.columnconfigure(4, pad=5)
self.frame2.columnconfigure(5, pad=5)
self.frame2.rowconfigure(0, pad=5)
self.frame2.rowconfigure(1, pad=5)
self.frame2.rowconfigure(2, pad=5)
self.frame2.rowconfigure(3, pad=5)
# Now add some useful widgets ...
self.textArea1 = tk.Label(self.frame1, text='')
self.textArea1.pack()
self.cmdArea = tk.Entry(self.frame2, text='')
self.cmdArea.grid(row = 3, column = 1)
self.buildGUI()
self.roomImages()
def showAbout(self):
"""uses the messagebox import to display info about the game"""
messagebox.showinfo("About", "A classic whodunnit where you have to find out who the murder is!")
def buildGUI(self):
self.doCmd = tk.Button(self.frame2, text='Run command',
fg='black', bg='blue',
command=self.doCommand)
self.doCmd.grid(row = 1, column = 1)
self.goDown = tk.Button(self.frame2, text='Down',
fg='black', bg='red',
command=self.processDownCommand)
self.goDown.grid(row=2, column=1)
self.goUp = tk.Button(self.frame2, text='Up',
fg='black', bg='red',
command=self.processUpCommand)
self.goUp.grid(row =0, column=1)
self.goLeft = tk.Button(self.frame2, text='Left',
fg='black', bg='red',
command=self.processLeftCommand)
self.goLeft.grid(row=1,column = 0)
self.goRight = tk.Button(self.frame2, text='Right',
fg='black', bg='red',
command=self.processRightCommand)
self.goRight.grid(row=1, column =2)
self.help = tk.Button(self.frame2, text='Help',
fg='black', bg='green',
command=self.processHelpCommand)
self.help.grid(row=1, column=4)
self.textArea1.configure(text=self.game.printWelcome())
def roomImages(self):
self.imageDict = {'apple': 'apple.png', 'banana': 'banana.png', 'bar': 'bar.png', 'cherries': 'cherries.png',
'grapes': 'grapes.png', 'lemon': 'lemon.png', 'melon': 'melon.png', 'orange': 'orange.png'}
self.apple = 'apple'
self.apple = f'images/{self.imageDict[self.apple]}'
#adding images
self.r1 = ImageTk.PhotoImage(Image.open(self.apple))
self.r1Label = tk.Label(self.frame3, image=self.r1)
def main():
win = tk.Tk() # Create a window
win.title("Adventure World with GUI") # Set window title
win.geometry("700x400") # Set window size
win.resizable(False, False) # Both x and y dimensions ...
# Create the GUI as a Frame
# and attach it to the window ...
myApp = App(win)
# Call the GUI mainloop ...
win.mainloop()
if __name__ == "__main__":
main()
I am working on a simple counter app in tkinter. I rigged up some code looking at few tutorial on web. All the functions of a counter are set up. But when it comes to the designing of the app, I want the Count, the Count button, and the reset button to be aligned at the center.
The code is as below
from tkinter import Label, Button, Tk
from tkinter import font
window = Tk()
window.geometry('500x500')
window.title("Counter")
window.count = 0
def increment():
window.count += 1
lbl.configure(text=window.count)
def reset():
window.count = 0
lbl.configure(text=window.count)
lbl = Label(window, text="0", font=("Apple Braille", 60))
lbl.grid(column=0, row=0)
btn1 = Button(window, text="Count", command=increment)
btn1.grid(column=0, row=1)
btn2 = Button(window, text="Reset", command=reset)
btn2.grid(column=1, row=1)
btn1['font'] = btn2['font'] = font.Font(size=30)
window.mainloop()
A Screenshot of my counter app is here
Any help in this aspect will be appreciated.
Thanks,
It is easier to use pack() instead of grid() for your requirement.
lbl = Label(window, text="0", font=("Apple Braille", 60))
lbl.pack()
# frame for the two buttons
frame = Frame(window)
frame.pack()
btn1 = Button(frame, text="Count", command=increment)
btn1.grid(column=0, row=1)
btn2 = Button(frame, text="Reset", command=reset)
btn2.grid(column=1, row=1)
If you want to put at the center of the window:
# frame for the label and buttons
frame = Frame(window)
frame.place(relx=0.5, rely=0.5, anchor="c") # put at center of window
lbl = Label(frame, text="0", font=("Apple Braille", 60))
lbl.grid(row=0, column=0, columnspan=2)
btn1 = Button(frame, text="Count", command=increment)
btn1.grid(column=0, row=1)
btn2 = Button(frame, text="Reset", command=reset)
btn2.grid(column=1, row=1)
I have an Python3 Tkinter Programm. I have 3 Frames in the Main Window and in one Frame an canvas with scroll Option - now i want resitze the Canvas Area .
Now if i resize it moves the Scroll Bar for Y out the Window and the scrollbar for x works also not as expected (get bigger but slide area don't change)
How i Mange it to resize an Canvas in an grid Layout - The Window must be the same size , the Scrollbas must be updatet and the Canvas Plane must be bigger.
an excerpt from my code:
import tkinter as tk
def menu_build():
caninfo[0] += 10
cangui.configure(width = caninfo[0])
#cangui.configure(scrollregion=cangui.bbox("all"))
def gui():
master = tk.Tk()
master.title( "Easy Switch" )
master.geometry("480x320")
frametop = tk.Frame(master, bg="blue", bd=2)
frametop.grid(column=0,row=0)
frameex = tk.Frame(master, bg="yellow", bd=2)
frameex.grid(column=1,row=1)
framegui = tk.Frame(master, bg="red", bd=2)
framegui.grid(column=0, columnspan=2, row=1)
menu = tk.Menu(master)
master.config(menu=menu)
filemenu = tk.Menu(menu)
menu.add_cascade(label="Config", menu=filemenu)
filemenu.add_command(label="Resize",command=menu_build)
global cangui
cangui = tk.Canvas(framegui, width=385, height=250)
#caninfo = [385,250]
cangui.grid(row=1, column=2)
scroll_x = tk.Scrollbar(framegui, orient="horizontal", command=cangui.xview)
scroll_x.grid(row=2, column=2, sticky="ew")
scroll_y = tk.Scrollbar(framegui, orient="vertical", command=cangui.yview)
scroll_y.grid(row=1, column=3, sticky="ns")
cangui.configure(yscrollcommand=scroll_y.set,xscrollcommand=scroll_x.set)
cangui.configure(scrollregion=cangui.bbox("all"))
cwcb = tk.Checkbutton(framegui, text="ccw").grid(row=2,column=0)
cangui.create_arc(90,90,110,110,style=tk.PIESLICE,width=4,start=0,extent=300)
master.mainloop()
global caninfo
caninfo = [385,250]
if __name__ == "__main__":
gui()
no need to resize the canvas Area
wrote an extra funktion
win = [int(cangui.cget("width")),int(cangui.cget("height"))]
draw_xy = cangui.bbox("all")
swin = (min(0,draw_xy[0]),min(0,draw_xy[1]),max(draw_xy[2],win[0]),max(draw_xy[3],win[1]))
cangui.configure(scrollregion=swin)
reason: canvas.bbox("all") gives only the positon from most upper/left grafic and i want 0/0
i only get one picture at the bottom but theres supposed to be 10 all in a vertical tower any idea? also was wondering if the tkinter scrollbar command could have images inside it if not is there any other way to have a scrollbar for lables?
def show_data(self):
print('------------------------------------------------------------------------')
print('data OK')
for i in range(10):
self.image = Image.open(self.data[i][7] + '.jpg')
self.photo = ImageTk.PhotoImage(self.image)
#result0 = Label(self.frame, text=self.data[i][0])
#result0.grid(row=i+3, column=1, sticky=W)
#result1 = Label(self.frame, text=self.data[i][1])
#result1.grid(row=i+3, column=2, sticky=W)
#result2 = Label(self.frame, text=self.data[i][2])
#result2.grid(row=i+3, column=3, sticky=W)
#result3 = Label(self.frame, text=self.data[i][3])
#result3.grid(row=i+3, column=4, sticky=W)
#result4 = Label(self.frame, text=self.data[i][4])
#result4.grid(row=i+3, column=5, sticky=W)
#result5 = Label(self.frame, text=self.data[i][5])
#result5.grid(row=i+3, column=6, sticky=W)
#result6 = Label(self.frame, text=self.data[i][6])
#result6.grid(row=i+3, column=7, sticky=W)
result7 = Label(self.frame, image=self.photo)
result7.grid(row=i + 3, column=8, sticky=W)
In order to keep the image used in label from being destroyed, you need to keep a reference to the image:
def show_data(self):
print('------------------------------------------------------------------------')
print('data OK')
for i in range(10):
photo = ImageTk.PhotoImage(file=self.data[i][7]+'.jpg')
result7 = Label(self.frame, image=photo)
result7.image = photo # keep a reference of the image
result7.grid(row=i + 3, column=8, sticky=W)
To have a scrollbar for the labels inside a frame, the most common way is to put the frame inside a canvas and then create a scrollbar to scroll the view region of the canvas:
# create a canvas and put it as the left side of window
canvas = Canvas(self.master, width=200, height=600) # assume self.master is Tk()
canvas.pack(side='left')
# create an vertical scrollbar and put it at the right side of window
scrollbar = Scrollbar(self.master, orient='vertical', command=canvas.yview)
scrollbar.pack(side='right', fill='y')
# configure the scrollbar to scroll the canvas in vertical direction
canvas.configure(yscrollcommand=scrollbar.set)
# create the frame as child of canvas to hold the labels
self.frame = Frame(canvas)
canvas.create_window((0,0), window=self.frame, anchor='nw')
# make sure to update the scrolling region if the frame is resized
self.frame.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox('all')))
I want to switch the frame, but not able to do it
1st Page(frame) should have red background color and "Hello" button and Frame size should have 900x650 as window size. When press "Hello" button it should swap to 2nd frame
2nd page (frame) should have green background color and "Hello" button and Frame size should have 900x650 as window size. When press "Hello" button it should swap to 1st frame
import Tkinter as tk
def raise_frame(frame):
print "Inside raise frame"
frame.tkraise()
root = tk.Tk()
root.geometry("900x650+220+20")
root.title("Testing")
frame1 = tk.Frame(root, width=900, height=650, background="red")
frame2 = tk.Frame(root, width=900, height=650, background="green")
B1= tk.Button(frame1, text="Hello", width =10, height=2, command = lambda:raise_frame(frame2)).place (x=200, y=200)
B2= tk.Button(frame2, text="Hello", width =10, height=2, command = lambda:raise_frame(frame1)).place (x=400, y=400)
frame1.pack( )
frame2.pack( )
root.mainloop()
Since you are using pack(), the second frame is placed below the first frame. You can check that by dragging the bottom part of the window. You'll see that there are 2 frames created with the red on the top, and the green on the bottom.
You can use grid() to place the frames on top of each other.
So, replace the lines
frame1.pack()
frame2.pack()
with
frame1.grid(row=0, column=0)
frame2.grid(row=0, column=0)