CODEWITHSUNDEEP
python-3.xtkinterimagebutton
ashwin ram kumar
ashwin ram kumar

Reputation: 161

Change image of button when pressed - Python 3.7 Tkinter

This may seem like a dumb question but couldn't find an answer on stackoverflow and I needed this for a project. Hope somebody can help.

Now, I am creating cross platform screen recorder. I have attached the current UI below. In the below UI, I want the pause button to change into a play button (swapping of images) or vice versa if again pressed. I am attaching the whole GUI code here. please help me out regarding this. I am working python 3.7 on Ubuntu OS but it should be applicable on all platforms.

Along with this, I wanted to also know how to set background for the whole window, I tried canvas but didn't seem to work. I also wanted to place a Logo beside the Label showing "Screen Videographer", is that possible if so may I know how to align it.

Current UI of the project

Here is the code below:-

from tkinter import *
from tkinter.ttk import *
from detect_screen_size import detect_screen_size
from PIL import Image, ImageTk
import tkinter as tk

paused= True

LOGO_PNG_PATH="pic/logo.png"
LOGO_PATH="pic/logo.ico"
BG_PATH = 'pic/bg_1.jpg'
LOGO_LINUX_PATH="@pic/logo_1.xbm"


def play():
    global paused,image2
    print("start of function",paused)
    if paused:
        image2=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/play.png")
        paused=False
        print("inside if function",paused)
    else:
        image2 = PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/symbol.png")
        paused=True
        print("inside if function", paused)

def pause():
    print("button hit")
def stop():
    print("button stop")
def record():
    print("button rec")
WIDTH, HEIGHT = 350, 100

root = Tk()
#root.geometry('{}x{}'.format(WIDTH, HEIGHT))
root.resizable(0, 0)
root.style = Style()
#('winnative', 'clam', 'alt', 'default', 'classic', 'vista', 'xpnative')
root.style.theme_use("clam")
if detect_screen_size().detect_os()=="Linux":
    root.iconbitmap(LOGO_LINUX_PATH)
else:
    root.iconbitmap(default=LOGO_PATH)
root.title("Screenvideographer")


frame_display = tk.Frame(relief=FLAT)
label = tk.Label(master=frame_display, text="Screen Videographer")
label.pack()
canvas = Canvas(root, width = 50, height = 50)
canvas.pack(side=LEFT)
img = PhotoImage(file=LOGO_PNG_PATH)
canvas.create_image(50,50, anchor=NW, image=img)


frame_display.pack()
frame_controls = tk.Frame(relief=FLAT)

image1=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/record.png")
image2=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/symbol.png")
image3=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/stop.png")



Button(master=frame_controls,width=35,image=image1,command=record).pack(side=LEFT,padx=7,pady=4)
Button(master=frame_controls,width=35,image=image2,command=play).pack(side=LEFT,padx=7,pady=4)
Button(master=frame_controls,width=35,image=image3,command=stop).pack(side=RIGHT,padx=7,pady=4)


frame_controls.pack()


root.mainloop()

Thank you!!

Upvotes: 0

Views: 2142

Answers (1)

acw1668
acw1668

Reputation: 46669

1) you should load the 4 images on program start:

img_record=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/record.png")
img_pause=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/symbol.png")
img_stop=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/stop.png")
img_play=PhotoImage(file="/media/admin_ash/New Volume/proj/screen rec/pic/gui_controls/play.png")

2) you need to separate the Button(...) and pack(...) statements for the play/pause button:

Button(master=frame_controls,width=35,image=img_record,command=record).pack(side=LEFT,padx=7,pady=4)
play_btn = Button(master=frame_controls,width=35,image=img_play,command=play)
play_btn.pack(side=LEFT,padx=7,pady=4)
Button(master=frame_controls,width=35,image=img_stop,command=stop).pack(side=RIGHT,padx=7,pady=4)

3) change the button image based on the current play state:

def play():
    global paused
    print("start of function", paused)
    if paused:
        play_btn.config(image=img_pause)
        paused = False
        print("inside if function", paused)
    else:
        play_btn.config(image=img_play)
        paused = True
        print("inside if function", paused)

4) edit stop() function to change back to play image:

def stop():
    global paused
    print("button stop")
    if not paused:
        play_btn.config(image=img_play)
        paused = True

5) if you want to show an image beside the Screen Videographer label, just use image and compound options of the label:

# logo = PhotoImage(file="/path/to/logo/image")
label = tk.Label(master=frame_display, image=logo, text="Screen Videographer", compound="left")

6) if you want to change the background color of the whole window, you need to change the background options of root window, frames inside root window and labels inside frames.

Upvotes: 2

Related Questions