Python: How to dynamically display image in label widget (tkinter)

Paul

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)
J. Piquard

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)):
            ...

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to update the image of a Tkinter Label widget?

Python, Display openCv image in Tkinter in Label

How to update Tkinter Label widget?

Display the output of a function in a tkinter label widget

tkinter: getting label widget to display output

python tkinter how to change the label of a widget on a particular grid space?

How do I change the text size in a label widget, python tkinter

How to display image with upload button in and resize it with window resize (Dynamically)with Tkinter python, I need to add upload button

Python tkinter how to display an image in real time?

How to display image in python Tkinter from url

how to display blob as image in a table in tkinter python

Python Tkinter Display Image

Python Tkinter label widget doesn't update

Why does Python tkinter label widget not update?

python tkinter module Label widget wrapped in oop

How can i display a long string (paragraphs) in a label widget on multiple lines with a y scrollbar? (tkinter)

How to get the Label widget from tkinter?

Using an image as an class object attribute, then opening that image in a Tkinter label widget

Python tkinter - How to reload label's image every second?

How can I upload the selected image into the label with using python tkinter?

Can't display image dynamically in loop with tkinter

Tkinter, Python: How do I save text entered in the Entry widget? How do I move a label?

Tkinter Label Widget Justify

Python Tkinter - How to return a Widget

How can i display a resized image in python tkinter

How to dynamically display an image in VueJS?

How to display Image dynamically on UI?

How to display PIL Image dynamically

Python Tkinter remove/delete Image from Label