Skip to main content

tkinter Is Weird? Right?,Big Picture

 tkinter Is Weird? Right?

I will say it again for the people in the back. tkinter is horrible. I only showed you this so you will have more love and appreciation for what's coming up next. Click "mark lesson as complete" and skip ahead to Day 70 if tkinter is not your thing.
Most GUI creators have a lovely drag & drop interface that makes life easy. tkinter doesn't, so it can feel awkward, fiddly, and frustrating at times.


However, it does give you full control of your GUI, and it's always good to learn the magic behind the scenes so you have a better understanding of what's going on.
Today, we're going to add images into our tkinter GUI.


๐Ÿ‘‰ Let's start with the basic boilerplate GUI and define an image. To do this, I need to build a canvas and then create the image.


import tkinter as tk
window = tk.Tk()
window.title("Hello World") 
window.geometry("300x200") 

hello = tk.Label(text = "Hello World") 
hello.pack() 
button = tk.Button(text = "Click me!") 
button.pack()
#### NEW BIT ######
canvas = tk.Canvas(window, width = 300, height=150) # Creates a placeholder for the image in the window.
canvas.pack()
image = tk.PhotoImage(file="theFeels.png") # Sets the file name of the image
canvas.create_image(150,1,image=image) #creates image and sets the co-ordinates for it (150 is horizontal center).
######
tk.mainloop()


Note that I've had to upload the image file to my repl. You can just drag & drop it over to your files menu.


Big Picture

You may have noticed that your image is HUGE.
๐Ÿ‘‰ We can use subsample to resize it. I've just included the relevant lines here.

image = tk.PhotoImage(file="theFeels.png") 
image = image.subsample(5) # makes the image smaller by a factor of 5
canvas.create_image(150,1,image=image)

๐Ÿ‘‰ Here's the code that solves that problem. I'm also going to make the button change the image on click. All changes to the code are identified with comments.


import tkinter as tk
window = tk.Tk()
window.title("Hello World") 
window.geometry("300x200") 
def changeImage(): # new Subroutine
  canvas.itemconfig(container, image = newImage) # itemconfig updates our canvas when this sub is called
hello = tk.Label(text = "Hello World") 
hello.pack() 
button = tk.Button(text = "Click me!", command=changeImage) # Given the button a command to call the changeImage subroutine.
button.pack()

canvas = tk.Canvas(window, width = 300, height=150) 
canvas.pack()
image = tk.PhotoImage(file="theFeels.png") 
image = image.subsample(5)
newImage = tk.PhotoImage(file="success.png") # filename of the replacement image assigned to newImage
newImage = newImage.subsample(5) # scaled down the new image
container = canvas.create_image(150,1,image=image) # Assigned create image to the container variable

tk.mainloop()


Comments

Popular posts from this blog

FOR LOOP , RANGE

  FOR LOOP  A  while  loop is perfect to use when we  don't  know how many times we want the loop to repeat.  If we have an idea of how many times we want the loop to repeat, we can use a  for  loop to loop code in exactly the same way the  while  loop did.  EXAMPLE :  for counter in range(10):   print(counter) RANGE  The  range  function creates a list of numbers in the range you create. If you only give it one number, it will start at  0  and move to a state where the final number is  one less  than the number in the brackets. In this case, the final number would be  9 .  EXAMPLE :  total = 0 for number in range(100) :   total += number   print(total)

OS LIBRARY , TIME LIBRARY

  What is the os library? It allows us to "talk" to the console. One of the most powerful things we can do with this library is allow it to clear the console EXAMPLE: import os print("Welcome") print("to") print("Replit") os.system("clear") username = input("Username: ")  Time Library We can import a second library by placing a  ,  after the name of the first library. EXAMPLE: import os, time print("Welcome") print("to") print("Replit") time.sleep(10) os.system("clear") username = input("Username: ")  NOTE:  from replit import audio import os, time def play():   source = audio.play_file('audio.wav')   source.paused = False # unpause the playback   while True:     stop_playback = int(input("Press 2 anytime to stop playback and go back to the menu : ")) # giving the user the option to stop playback     if stop_playback == 2:       source.paused = True # let'...

ALL ABOUT WHILE LOOP

 WHILE LOOP  A  while  loop allows your code to repeat itself based on a condition you set.   EXAMPLE : counter = 0 while counter < 10:   print(counter)   counter +=1 Infinite Loop  You have to be  really  careful that you don't accidentally invoke an infinite loop! This is where the computer will loop code until the end of time. Without a break. Forever.  This is just saying "count to 10 by 1 each time." to make the loop end. Don't forget, if your  condition  is a  >  then you might need to  -= . This will subtract from the variable instead of adding to it.   EXAMPLE : counter = 0 while counter < 10:   print(counter)    counter += 1