tkinter key binding causes image to disappear - python-3.x

Question

I'm trying to bind arrow keys to buttons or at least the functions of the buttons (button_forward and button_back). The function of the buttons works, however, when I bind a key to the button the image just disappears.
It would also be awesome if someone could help me figure out how to create a loop to define the images and put them into a list. I'm just so lost when it comes to that.
The main purpose of the code is to be an image viewer that flashes an LED strip when an image changes.
I want to be able to control it using arrow keys to move forward and back between the images.
from tkinter import Tk, Button,Label, DISABLED
from PIL import ImageTk,Image
import board
import time
import neopixel
pixels = neopixel.NeoPixel(board.D18, 30)
root= Tk()
root.configure(bg='black')
root.title("please work")
# define, load, show
my_img1 = ImageTk.PhotoImage(Image.open("1.bmp"))
my_img2 = ImageTk.PhotoImage(Image.open("2.bmp"))
my_img3 = ImageTk.PhotoImage(Image.open("3.bmp"))
my_img4 = ImageTk.PhotoImage(Image.open("4.bmp"))
my_img5 = ImageTk.PhotoImage(Image.open("5.bmp"))
my_img6 = ImageTk.PhotoImage(Image.open("6.bmp"))
my_img7 = ImageTk.PhotoImage(Image.open("7.bmp"))
my_img8 = ImageTk.PhotoImage(Image.open("8.bmp"))
image_list = [my_img1, my_img2, my_img3, my_img4, my_img5, my_img6, my_img7, my_img8]
my_label = Label(image=my_img1)
my_label.grid(row = 0, column = 0, columnspan= 3, rowspan = 25, padx=440, pady= 5)
def forward(image_number, event = None):
global my_label
global button_forward
global button_back
my_label.grid_forget()
my_label = Label(image = image_list[image_number-1])
button_forward = Button(root, text = "next", command=lambda: forward(image_number+1))
button_back = Button(root, text = "previous", command = lambda: back(image_number-1))
if image_number == 7:
button_forward = Button(root, text = "next", state = DISABLED)
my_label.grid(row = 0, column = 0, columnspan = 3, rowspan = 25, padx=440, pady= 5)
button_back.grid(row = 23, column = 0)
button_forward.grid(row = 23, column = 2)
pixels.fill((255,0,0))
time.sleep(0.1)
pixels.fill((0,0,0))
time.sleep(0.5)
def back(image_number,):
global my_label
global button_forward
global button_back
my_label.grid_forget()
my_label = Label(image = image_list[image_number-1])
button_forward = Button(root, text = "next", command=lambda: forward(image_number+1))
button_back = Button(root, text = "previous", command = lambda: back(image_number-1))
my_label.grid(row = 0, column = 0, columnspan = 3, rowspan = 25, padx=440, pady= 5)
if image_number == 1:
button_back = Button(root, text = "previous", state = DISABLED)
button_back.grid(row=23, column = 0 )
button_exit.grid(row=23, column = 1 )
button_forward.grid(row=23, column = 2)
pixels.fill((255,0,0))
time.sleep(0.1)
pixels.fill((0,0,0))
time.sleep(0.5)
button_back = Button(root, text = "previous", command = back)
button_exit = Button(root, text = "Exit", command = root.quit)
button_forward = Button(root, text = "next", command =lambda:forward(2))
root.bind('<Left>', back)
root.bind('<Right>', forward)
button_back.grid(row=23, column = 0 )
button_exit.grid(row=23, column = 1 )
button_forward.grid(row=23, column = 2)
root.mainloop()

Answer 1

Your bindings cannot work because the event corresponding to the keypress will be passed instead of the image_number argument in back() and forward().
Also, you are recreating the widgets every time while you should only reconfigure them. So to change the label's image, you can do: my_label.configure(image=<new image>). Also instead of passing image_number as an argument, I would rather use a global variable, so that it will be easier to use the functions in the key bindings:
from tkinter import Tk, Button, Label, DISABLED, NORMAL
from PIL import ImageTk, Image
import board
import time
import neopixel
pixels = neopixel.NeoPixel(board.D18, 30)
root = Tk()
root.configure(bg='black')
root.title("please work")
# define, load, show
my_img1 = ImageTk.PhotoImage(Image.open("1.bmp"))
my_img2 = ImageTk.PhotoImage(Image.open("2.bmp"))
my_img3 = ImageTk.PhotoImage(Image.open("3.bmp"))
my_img4 = ImageTk.PhotoImage(Image.open("4.bmp"))
my_img5 = ImageTk.PhotoImage(Image.open("5.bmp"))
my_img6 = ImageTk.PhotoImage(Image.open("6.bmp"))
my_img7 = ImageTk.PhotoImage(Image.open("7.bmp"))
my_img8 = ImageTk.PhotoImage(Image.open("8.bmp"))
image_list = [my_img1, my_img2, my_img3, my_img4, my_img5, my_img6, my_img7, my_img8]
image_number = 1
# create the label only once
my_label = Label(root, image=image_list[image_number - 1])
my_label.grid(row=0, column=0, columnspan= 3, rowspan=25, padx=440, pady= 5)
def forward(event=None):
global image_number # global variable to keep track of the displayed image
image_number += 1
# change image in label
my_label.configure(image=image_list[image_number - 1])
if image_number == 8:
# last image, disable forward button
button_forward.configure(state=DISABLED)
elif image_number == 2:
# no longer first image, re-enable back button
button_back.configure(state=NORMAL)
pixels.fill((255,0,0))
time.sleep(0.1)
pixels.fill((0,0,0))
time.sleep(0.5)
def back(event=None):
global image_number
image_number -= 1
my_label.configure(image=image_list[image_number - 1])
if image_number == 1:
# first image, disable back button
button_back.configure(state=DISABLED)
elif image_number == 7:
# no longer last image, re-enable forward button
button_forward.configure(state=NORMAL)
pixels.fill((255,0,0))
time.sleep(0.1)
pixels.fill((0,0,0))
time.sleep(0.5)
button_back = Button(root, text="previous", command=back, state=DISABLED)
button_exit = Button(root, text="Exit", command=root.quit)
button_forward = Button(root, text="next", command=forward)
root.bind('<Left>', back)
root.bind('<Right>', forward)
button_back.grid(row=23, column=0)
button_exit.grid(row=23, column=1)
button_forward.grid(row=23, column=2)
root.mainloop()