Python: How to dynamically display image in label widget (tkinter) - python-3.x

Question

I am stuck trying to dynamically display a specific image on a tk page based on button clicked on a previous page. PageOne has 5 images with 5 buttons below each. Clicking on specific button should take the user to the second page and display image 3 if the 3rd button is clicked.
I have figured out how to pass a value of 1 to 5 depending on which button is clicked, and the images are saved pic1.gif,...pic5.gif so to return the correct image I just need to append the value to the file location.
I am struggling to figure out how to refresh PageTwo when it is accessed.
Any help would be greatly appreciated, thanks.
TITLE_FONT = ("Helvetica", 18, "bold")
class SampleApp(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
container = tk.Frame(self)
self.attributes("-fullscreen", False)
self.geometry('{}x{}'.format(1000, 1000))
container.pack(side="top", fill="both", expand=True)
container.grid_rowconfigure(0, weight=1)
container.grid_columnconfigure(0, weight=1)
self.frames = {}
for F in (PageOne, PageTwo):
frame = F(container, self)
self.frames[F] = frame
frame.grid(row=0, column=0, sticky="nsew")
self.show_frame(PageOne)
def show_frame(self, c):
frame = self.frames[c]
frame.tkraise()
class PageOne(tk.Frame):
praiseid = 0
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
def PraiseClick(button_id):
PageOne.praiseid = button_id
controller.show_frame(PageTwo)
users= [1,2,3,4,5]
for i in users:
location = str('C:/Users/XXXXXXX/Documents/pic'+str(i)+'.gif')
icon = tk.PhotoImage(file=location)
IDlabel = tk.Label(self,image=icon)
IDlabel.image = icon
IDlabel.place(x=i*100,y=200,width=100,height=100)
for j in users:
praisebutton = tk.Button(self,text="Click",width=10,command=lambda x=j: PraiseClick(int(x)))
praisebutton.place(x=j*100,y=300,width=100,height=44)
backbutton = tk.Button(self, text="Go to Start Page",
command=lambda: controller.show_frame(StartPage))
backbutton.place(x=100,y=50,width=200,height=44)
class PageTwo(tk.Frame):
def get_id(self):
return(PageOne.praiseid)
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
self.location = 'C:/Users/XXXXXXX/Documents/pic'+str(self.get_id())+'.gif'
icon = tk.PhotoImage(file=self.location)
self.IDlabel = tk.Label(self,image=icon)
self.IDlabel.image = icon
self.IDlabel.place(x=0,y=200,width=100,height=100)

Answer 1

The selected image from the PageOne is not drawn on the PageTwo because the drawing function is localized in the __init__() function and no event is raise when the PageTwo is redraw by calling the function tkraise().
Problem 1 - generate an event when calling tkraise() of the PageTwo.
Here, the OOP of Python will be the answer by overriding the function
tkraise() in the class PageTwo.
class PageTwo(tk.Frame):
...
def tkraise(self):
print('PageTwo.tkraise()')
tk.Frame.tkraise(self)
# then call the drawing icon
self.refresh_icon() # see Problem 2
Problem 2 - localize the drawing of the icon in a function of the class PageTwo.
To take into account of the new selected icon, create a function
refresh_icon() in the class PageTwo and call it from both
__init__() and tkraise() functions.
class PageTwo(tk.Frame):
...
def refresh_icon(self):
self.location = 'C:/Users/XXXXXXX/Documents/pic'+str(self.get_id())+'.gif'
icon = tk.PhotoImage(file=self.location)
self.IDlabel = tk.Label(self,image=icon)
self.IDlabel.image = icon
self.IDlabel.place(x=0,y=200,width=100,height=100)
Add at the end of the __init__() function.
class PageTwo(tk.Frame):
...
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
...
self.refresh_icon()
Bonus 1 - to prevent an Exception in case of missing image, add a check before.
Create a file_exists() function, then check before loading in
PhotoImage().
def file_exists(filepath):
try:
fp_file = open(filepath)
return (True)
except IOError:
return (False)
And in the function refresh_icon() of the class PageTwo:
self.location = 'C:/Users/XXXXXXX/Documents/pic'+str(self.get_id())+'.gif'
if (file_exists(self.location)):
icon = tk.PhotoImage(file=self.location)
...
Bonus 2 - clear the current IDlabel in case of image not loaded.
when creating a new Label in the PageTwo, the variable
self.IDlabel will store the new Image without deleting the old one.
Before creating a new one, call the destroy() function.
Add a declaration of the variable self.IDlabel and assign it to None in the __init__() function. Then call destroy() in the
class PageTwo(tk.Frame):
...
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)
...
self.refresh_icon()
self.IDlabel = None
...
def refresh_icon(self):
self.location = 'C:/Users/XXXXXXX/Documents/pic'+str(self.get_id())+'.gif'
if (self.IDlabel): # check label and destroy it
self.IDlabel.destroy()
if (file_exists(self.location)):
...