tkinter list of labels not displaying properly

user_17970660 0
Viewed 56

I'm setting up a simple GUI to display the status of network ports. If I use individual commands for each label, this works fine:

from tkinter import *

root = Tk()
root.geometry('400x225')
root.configure(background='white')
pFontsize = 10

p1 = Label(root, text = '1', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 1/14, rely = 2/10)
p2 = Label(root, text = '2', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 2/14, rely = 2/10)
p3 = Label(root, text = '3', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 3/14, rely = 2/10)
p4 = Label(root, text = '4', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 4/14, rely = 2/10)
p5 = Label(root, text = '5', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 5/14, rely = 2/10)
p6 = Label(root, text = '6', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 6/14, rely = 2/10)
p7 = Label(root, text = '7', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 7/14, rely = 2/10)
p8 = Label(root, text = '8', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 8/14, rely = 2/10)
p9 = Label(root, text = '9', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 9/14, rely = 2/10)
p10 = Label(root, text = '10', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 10/14, rely = 2/10)
p11 = Label(root, text = '11', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 11/14, rely = 2/10)
p12 = Label(root, text = '12', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 12/14, rely = 2/10)
p13 = Label(root, text = '13', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 1/14, rely = 5/10)
p14 = Label(root, text = '14', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 2/14, rely = 5/10)
p15 = Label(root, text = '15', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 3/14, rely = 5/10)
p16 = Label(root, text = '16', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 4/14, rely = 5/10)
p17 = Label(root, text = '17', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 5/14, rely = 5/10)
p18 = Label(root, text = '18', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 6/14, rely = 5/10)
p19 = Label(root, text = '19', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 7/14, rely = 5/10)
p20 = Label(root, text = '20', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 8/14, rely = 5/10)
p21 = Label(root, text = '21', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 9/14, rely = 5/10)
p22 = Label(root, text = '22', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 10/14, rely = 5/10)
p23 = Label(root, text = '23', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 11/14, rely = 5/10)
p24 = Label(root, text = '24', background = 'white',font=('Calibri', pFontsize),anchor='center').place(relwidth = 1/14, relheight = 1/10, relx = 12/14, rely = 5/10)

i1 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 1/14, rely = 3/10)
i2 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 2/14, rely = 3/10)
i3 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 3/14, rely = 3/10)
i4 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 4/14, rely = 3/10)
i5 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 5/14, rely = 3/10)
i6 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 6/14, rely = 3/10)
i7 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 7/14, rely = 3/10)
i8 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 8/14, rely = 3/10)
i9 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 9/14, rely = 3/10)
i10 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 10/14, rely = 3/10)
i11 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 11/14, rely = 3/10)
i12 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 12/14, rely = 3/10)
i13 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 1/14, rely = 6/10)
i14 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 2/14, rely = 6/10)
i15 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 3/14, rely = 6/10)
i16 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 4/14, rely = 6/10)
i17 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 5/14, rely = 6/10)
i18 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 6/14, rely = 6/10)
i19 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 7/14, rely = 6/10)
i20 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 8/14, rely = 6/10)
i21 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 9/14, rely = 6/10)
i22 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 10/14, rely = 6/10)
i23 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 11/14, rely = 6/10)
i24 = Label(root, background = 'black').place(relwidth = 1/14, relheight = 1/10, relx = 12/14, rely = 6/10)

root.mainloop()

Working

However, when I create a class then set up a list to do the same thing, I only see one label displayed:

from tkinter import *

root=Tk()
root.geometry('400x225')
#root.attributes('-fullscreen', True)
root.configure(background='white')

class networkPort:
    numFontsize = 10
    num = Label(root, background = 'white',font=('Calibri', numFontsize),anchor='center')
    indicator = Label(root, background = 'black')
 
ports = []
for i in range(24):
    ports.append(networkPort)
    ports[i].num.configure(text = str(i+1))
    if i > 11:
        y = 4
    else:
        y = 2
    ports[i].num.place(relwidth = 1/14, relheight = 1/10, relx = (i%12 + 1)/14, rely = y/10)
    ports[i].indicator.place(relwidth = 1/14, relheight = 1/10, relx = (i%12 + 1)/14, rely = y+1/10)

root.mainloop()

Not Working

I'm fairly new to Python, so I'm quite confident it's something I'm doing wrong here. Any suggestions?

tkinter python
2 Answers

You have used class variables instead of instance variables. There is only one set of class variables for a class, so you overwrite the class variables in each iteration.

Below is an example of using instance variables:

class NetworkPort:
    def __init__(self, master, num):
        numFontsize = 10
        self.num = Label(master, text=num, background='white', font=('Calibri', numFontsize), anchor='center')
        self.indicator = Label(master, background='black')

ports = []
for i in range(24):
    ports.append(NetworkPort(root, i+1))
    y = 4 if i > 11 else 2
    ports[i].num.place(relwidth=1/14, relheight=1/10, relx=(i%12+1)/14, rely=y/10)
    ports[i].indicator.place(relwidth=1/14, relheight=1/10, relx=(i%12+1)/14, rely=(y+1)/10)
user_53174030

I've managed to adjust it so you maintain the original proportions of the GUI under a class based structure:

from tkinter import *


class NetworkPort:
    def __init__(self, master):
        self.master = master
        master.geometry('400x225')
        master.configure(background='white')
        self.num_font_size = 10
        
        # List to be populated with indicator widgets
        self.widgets = []

        x = -1
        y = 0

        for i in range(24):

            # On 12 iteration move to new line (y), reset to first column (x)
            if i == 12:
                x = 0
                y = 3

            # Move to new column with each iteration
            else:
                x += 1

            # Generate network port number
            num = Label(master, background='white', text=i + 1, font=('Calibri', self.num_font_size), anchor='center')
            num.place(relwidth=1 / 14, relheight=1 / 10, relx=(x + 1) / 14, rely=(y + 2) / 10)

            # Generate network indicator label
            indicator = Label(master, background='black')
            indicator.place(relwidth=1 / 14, relheight=1 / 10, relx=(x + 1) / 14, rely=(y + 3) / 10)

            # Add indicator label objects to list
            self.widgets.append(indicator)

        # Example of adjusting one specific indicators colour by accessing the widget list
        self.widgets[3].config(bg='red')


if __name__ == "__main__":
    root = Tk()
    NetworkPort(root)
    root.mainloop()

Hopefully that helps, feel free to query anything you're curious about.

user_122820480
Related