{"id":1760,"date":"2020-12-21T10:24:02","date_gmt":"2020-12-21T10:24:02","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=1760"},"modified":"2021-10-08T06:56:23","modified_gmt":"2021-10-08T06:56:23","slug":"tkinter-thread-progressbar","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-thread-progressbar\/","title":{"rendered":"How to Display a Progress Bar while a Thread is Running in Tkinter"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn to display a progressbar while a thread is running in a Tkinter application.<\/p>\n\n\n\n

This tutorial assumes that you know how to use the after()<\/a><\/code> method and understand how threadings<\/a> work in Python. Also, you should know how to switch between frames using the tkraise() method<\/a>.<\/p>\n\n\n\n

In this tutorial, you’ll build a picture viewer that shows a random picture from unsplash.com using its API.<\/p>\n\n\n\n

If you make an HTTP request to the following API endpoint:<\/p>\n\n\n

https:\/\/source.unsplash.com\/random\/640<\/span>x480<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
…you’ll get a random picture with the size of 640×480.<\/p>\n\n\n\n
The following picture shows the final Image Viewer application:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
When you click the Next Picture <\/strong>button, the program calls the API from unsplash.com to download a random picture and displays it on the window.<\/p>\n\n\n\n
It’ll also show a progress bar<\/a> while the picture is downloading, indicating that the download is in progress:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
To call the API, you use the requests<\/code> module<\/a>. <\/p>\n\n\n\n
First, install the requests<\/code> module if it’s not available on your computer:<\/p>\n\n\n
pip install requests<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
class<\/span> PictureDownload<\/span>(Thread)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, url)<\/span>:<\/span>\n        super().__init__()\n\n        self.picture_file = None<\/span>\n        self.url = url\n\n    def<\/span> run<\/span>(self)<\/span>:<\/span>\n        \"\"\" download a picture and save it to a file \"\"\"<\/span>\n        # download the picture<\/span>\n        response = requests.get(self.url, proxies=proxyDict)\n        picture_name = self.url.split('\/'<\/span>)[-1<\/span>]\n        picture_file = f'.\/assets\/{picture_name}<\/span>.jpg'<\/span>\n\n        # save the picture to a file<\/span>\n        with<\/span> open(picture_file, 'wb'<\/span>) as<\/span> f:\n            f.write(response.content)\n\n        self.picture_file = picture_file\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this PictureDownload<\/code> class, the run()<\/code> method calls the API using the requests<\/code> module. <\/p>\n\n\n\n
The run()<\/code> method downloads a picture and saves it to the \/assets\/<\/code> folder. Also, it assigns the path of the downloaded picture to the picture_file<\/code> instance attribute.<\/p>\n\n\n\n
Third, define an App<\/code> class that inherits the Tk<\/code> class. The App<\/code> class represents the root window.<\/p>\n\n\n\n
def<\/span> __init__<\/span>(self, canvas_width, canvas_height)<\/span>:<\/span>\n    super().__init__()\n    self.resizable(0<\/span>, 0<\/span>)\n    self.title('Image Viewer'<\/span>)\n\n    # Progress frame<\/span>\n    self.progress_frame = ttk.Frame(self)\n\n    # configrue the grid to place the progress bar is at the center<\/span>\n    self.progress_frame.columnconfigure(0<\/span>, weight=1<\/span>)\n    self.progress_frame.rowconfigure(0<\/span>, weight=1<\/span>)\n\n    # progressbar<\/span>\n    self.pb = ttk.Progressbar(\n        self.progress_frame, orient=tk.HORIZONTAL, mode='indeterminate'<\/span>)\n    self.pb.grid(row=0<\/span>, column=0<\/span>, sticky=tk.EW, padx=10<\/span>, pady=10<\/span>)\n\n    # place the progress frame<\/span>\n    self.progress_frame.grid(row=0<\/span>, column=0<\/span>, sticky=tk.NSEW)\n\n    # Picture frame<\/span>\n    self.picture_frame = ttk.Frame(self)\n\n    # canvas width &amp; height<\/span>\n    self.canvas_width = canvas_width\n    self.canvas_height = canvas_height\n\n    # canvas<\/span>\n    self.canvas = tk.Canvas(\n        self.picture_frame,\n        width=self.canvas_width,\n        height=self.canvas_height)\n    self.canvas.grid(row=0<\/span>, column=0<\/span>)\n\n    self.picture_frame.grid(row=0<\/span>, column=0<\/span>)\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
When you click the Next Picture<\/code> button, the handle_download()<\/code> method executes:<\/p>\n\n\n
def<\/span> handle_download<\/span>(self)<\/span>:<\/span>\n    \"\"\" Download a random photo from unsplash \"\"\"<\/span>\n    self.start_downloading()\n\n    url = 'https:\/\/source.unsplash.com\/random\/640x480'<\/span>\n    download_thread = PictureDownload(url)\n    download_thread.start()\n\n    self.monitor(download_thread)\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The handle_download()<\/code> method shows the progress frame by calling the start_downloading()<\/code> method and starts the progress bar:<\/p>\n\n\n
def<\/span> start_downloading<\/span>(self)<\/span>:<\/span>\n    self.progress_frame.tkraise()\n    self.pb.start(20<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
It also creates a new thread that downloads the random picture and calls the monitor()<\/code> method to monitor the status of the thread.<\/p>\n\n\n\n
The following shows the monitor()<\/code> method:<\/p>\n\n\n
def<\/span> monitor<\/span>(self, download_thread)<\/span>:<\/span>\n    \"\"\" Monitor the download thread \"\"\"<\/span>\n    if<\/span> download_thread.is_alive():\n        self.after(100<\/span>, lambda<\/span>: self.monitor(download_thread))\n    else<\/span>:\n        self.stop_downloading()\n        self.set_picture(download_thread.picture_file)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The monitor()<\/code> method checks the status of the thread. If the thread is running, it schedules another check after 100ms. <\/p>\n\n\n\n
Otherwise, the monitor()<\/code> method calls the stop_downloading()<\/code> method to stop the progressbar, display the picture frame, and show the image.<\/p>\n\n\n\n
The following shows the stop_downloading()<\/code> method:<\/p>\n\n\n
def<\/span> stop_downloading<\/span>(self)<\/span>:<\/span>\n    self.picture_frame.tkraise()\n    self.pb.stop()   <\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The following shows the complete Image Viewer program:<\/p>\n\n\n
import<\/span> requests\nimport<\/span> tkinter as<\/span> tk\nfrom<\/span> threading import<\/span> Thread\nfrom<\/span> PIL import<\/span> Image, ImageTk\nfrom<\/span> tkinter import<\/span> ttk\nfrom<\/span> proxies import<\/span> proxyDict\n\n\nclass<\/span> PictureDownload<\/span>(Thread)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, url)<\/span>:<\/span>\n        super().__init__()\n\n        self.picture_file = None<\/span>\n        self.url = url\n\n    def<\/span> run<\/span>(self)<\/span>:<\/span>\n        \"\"\" download a picture and save it to a file \"\"\"<\/span>\n        # download the picture<\/span>\n        response = requests.get(self.url, proxies=proxyDict)\n        picture_name = self.url.split('\/'<\/span>)[-1<\/span>]\n        picture_file = f'.\/assets\/{picture_name}<\/span>.jpg'<\/span>\n\n        # save the picture to a file<\/span>\n        with<\/span> open(picture_file, 'wb'<\/span>) as<\/span> f:\n            f.write(response.content)\n\n        self.picture_file = picture_file\n\n\nclass<\/span> App<\/span>(tk.Tk)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, canvas_width, canvas_height)<\/span>:<\/span>\n        super().__init__()\n        self.resizable(0<\/span>, 0<\/span>)\n        self.title('Image Viewer'<\/span>)\n\n        # Progress frame<\/span>\n        self.progress_frame = ttk.Frame(self)\n\n        # configrue the grid to place the progress bar is at the center<\/span>\n        self.progress_frame.columnconfigure(0<\/span>, weight=1<\/span>)\n        self.progress_frame.rowconfigure(0<\/span>, weight=1<\/span>)\n\n        # progressbar<\/span>\n        self.pb = ttk.Progressbar(\n            self.progress_frame, orient=tk.HORIZONTAL, mode='indeterminate'<\/span>)\n        self.pb.grid(row=0<\/span>, column=0<\/span>, sticky=tk.EW, padx=10<\/span>, pady=10<\/span>)\n\n        # place the progress frame<\/span>\n        self.progress_frame.grid(row=0<\/span>, column=0<\/span>, sticky=tk.NSEW)\n\n        # Picture frame<\/span>\n        self.picture_frame = ttk.Frame(self)\n\n        # canvas width &amp; height<\/span>\n        self.canvas_width = canvas_width\n        self.canvas_height = canvas_height\n\n        # canvas<\/span>\n        self.canvas = tk.Canvas(\n            self.picture_frame,\n            width=self.canvas_width,\n            height=self.canvas_height)\n        self.canvas.grid(row=0<\/span>, column=0<\/span>)\n\n        self.picture_frame.grid(row=0<\/span>, column=0<\/span>)\n\n        # Button<\/span>\n        btn = ttk.Button(self, text='Next Picture'<\/span>)\n        btn['command'<\/span>] = self.handle_download\n        btn.grid(row=1<\/span>, column=0<\/span>)\n\n    def<\/span> start_downloading<\/span>(self)<\/span>:<\/span>\n        self.progress_frame.tkraise()\n        self.pb.start(20<\/span>)\n\n    def<\/span> stop_downloading<\/span>(self)<\/span>:<\/span>\n        self.picture_frame.tkraise()\n        self.pb.stop()\n\n    def<\/span> set_picture<\/span>(self, file_path)<\/span>:<\/span>\n        \"\"\" Set the picture to the canvas \"\"\"<\/span>\n        pil_img = Image.open(file_path)\n\n        # resize the picture<\/span>\n        resized_img = pil_img.resize(\n            (self.canvas_width, self.canvas_height),\n            Image.ANTIALIAS)\n\n        self.img = ImageTk.PhotoImage(resized_img)\n\n        # set background image<\/span>\n        self.bg = self.canvas.create_image(\n            0<\/span>,\n            0<\/span>,\n            anchor=tk.NW,\n            image=self.img)\n\n    def<\/span> handle_download<\/span>(self)<\/span>:<\/span>\n        \"\"\" Download a random photo from unsplash \"\"\"<\/span>\n        self.start_downloading()\n\n        url = 'https:\/\/source.unsplash.com\/random\/640x480'<\/span>\n        download_thread = PictureDownload(url)\n        download_thread.start()\n\n        self.monitor(download_thread)\n\n    def<\/span> monitor<\/span>(self, download_thread)<\/span>:<\/span>\n        \"\"\" Monitor the download thread \"\"\"<\/span>\n        if<\/span> download_thread.is_alive():\n            self.after(100<\/span>, lambda<\/span>: self.monitor(download_thread))\n        else<\/span>:\n            self.stop_downloading()\n            self.set_picture(download_thread.picture_file)\n\n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = App(640<\/span>, 480<\/span>)\n    app.mainloop()\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this tutorial, you’ve learned how to display a progressbar that connects to a running thread to indicate that an operation is still in progress.<\/p>\n
\n\t
\n\t\t
Was this tutorial helpful ?<\/div>\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
The root<\/code> window has two frames, one for displaying the Progressbar<\/a> and the other for showing the Canvas which holds the downloaded picture:<\/p>\n\n\n
Second, define a new class<\/a> that inherits from the Thread<\/a><\/code> class:<\/p>\n\n\n