Insert Image in a Line of other Images, Tkinter

I have a certain number of elements which I have saved as photos. These elements, and therefore the photos, all have different lengths and I want to keep them that way. (See pictures below)

The elements are all lined up in a certain order.

I would now like to use a dropdown menu (or something similar) to select the element and a second dropdown menu to determine the position where the image should be inserted. But the order of the other elements should not be changed by this.

Structure

This is the code, that i have by now:

from tkinter import *
from tkinter import ttk
from tkinter import messagebox

tkFenster = Tk()
tkFenster.title('Test')
tkFenster.geometry('2700x1000')

frameElement = Frame(master=tkFenster, bg='#FBD975')
frameElement.place(x=5, y=340, width=2010, height=70)

imageElement1 = PhotoImage(file='E1.gif')
imageElement2 = PhotoImage(file='E2.gif')
imageElement3 = PhotoImage(file='E3.gif')
imageElement4 = PhotoImage(file='E4.gif')

labelElement = Label(master=frameElement, borderwidth=0, image=imageElement1)
labelElement.pack( side = LEFT)

labelElement2 = Label(master=frameElement, borderwidth=0, image=imageElement2)
labelElement2.pack( side = LEFT)

labelElement3 = Label(master=frameElement, borderwidth=0, image=imageElement4)
labelElement3.pack( side = LEFT)

labelElement4 = Label(master=frameElement, borderwidth=0, image=imageElement3)
labelElement4.pack( side = LEFT)

labelElement5 = Label(master=frameElement, borderwidth=0, image=imageElement4)
labelElement5.pack( side = LEFT)

labelElement6 = Label(master=frameElement, borderwidth=0, image=imageElement2)
labelElement6.pack( side = LEFT)

tkFenster.mainloop()

1 answer

  • answered 2022-01-28 04:25 Derek

    Repositioning labels in tkinter is relatively easy since most of the work is performed by tkinter.

    In order to control label positions it is better to use the grid manager.

    This method uses point and click as the easiest control.

    Step 1:

    Create a tk.Label and put an image into it:

    label = tk.Label(labelFrame, image = a,  anchor = tk.NW)
    label.grid(row = 0, column = c)
    

    Create a binding for each label:

    label.bind('<ButtonPress-1>', swapImage)
    

    Do this for all tk.Labels with images.

    Step 2:

    Images can now be selected via a single mouse click on label. Since you need two images to swap, 'swapImage' must accumulate both label references before any action can take place.

    Function swapImage must:

    1. Find the label reference via label = event.widget
    2. Store label reference in a list

    Once this has been done for BOTH labels, extract their grid data with '.grid_info()'. This will return a dictionary that contains all grid management data.

    Now with both label grids available simply swap them.

    Here is one example:

    def swapImage(event):
        labelB = event.widget
        if items:
            labelA = items[0]
            ag = labelA.grid_info()
            bg = labelB.grid_info()
            labelA.grid(**bg)
            labelB.grid(**ag)
            items.clear()
        else:
            items.append(labelB)
    

    NOTE: I've used a list called 'items' to accumulate user label selections.

    To add more label images just repeat Step 1.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum