Python Forum

Full Version: adapt management grid mode to management pack mode
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi;I have already asked the question in another forum, but I still have no answer so far. I hope that I have an answer that will help me to complete part of my project.
I would like to integrate a code using management grid, which has the effect of enlarging the small dimension images into large images.
here is the content of the code:


import tkinter as tk
    
nb_rows = 10
images = (
    ("images/small_images/small_image1.png", "images/big_images/big_image1.png"),
    ("images/small_images/small_image2.png", "images/big_images/big_image2.png"),
    ("images/small_images/small_image3.png", "images/big_images/big_image3.png"),
    ("images/small_images/small_image4.png", "images/big_images/big_image4.png"),
    # ...
)
    
def visualize(event):
    event.widget.unbind("<Button-1>")
    window = tk.Toplevel(event.widget)
    window._image = tk.PhotoImage(file=event.widget._filenames[1])
    tk.Label(window, image=window._image).pack()
    window.protocol("WM_DELETE_WINDOW", lambda: on_close(window))
 
def on_close(window):
    window.master.bind("<Button-1>", visualize)
    window.destroy()
  
root = tk.Tk()
 
labels, row, column = [], 0, -1
for index, filenames in enumerate(images):
    label = tk.Label(root)
    label["image"] = label._image = tk.PhotoImage(file=filenames[0])
    label._filenames = filenames
    label.bind("<Button-1>", visualize)
    if not index % nb_rows:
        column, row = 0, row + 1
    label.grid(column=column, row=row)
    row += 1
    labels.append(label)
  
root.mainloop()

here is my personal code that can display text in the right part, and an image column in the left part :


#!/usr/bin/python3
# -*- coding: utf-8 -*-

from tkinter import *

root=Tk()
root.iconbitmap(r'images/cev.ico')
text_part1_loc35R="\n===============================\n"
text_part2_loc35R="Emetteur Directif 1 :\n"
text_part3_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 4.47 w\n"+\
"Puissance reflechie (P+BL) : 0.13  w\n"+\
"Puissance directe (BLS)    : 0.09  w\n"+\
"Puissance reflechie (BLS)  : 0.00  w\n"+\
"===============================\n"

text_part4_loc35R="Emetteur Clearance 1 :\n"
text_part5_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 0.55 w\n"+\
"Puissance reflechie (P+BL) : 0.09  w\n"+\
"Puissance directe (BLS)    : N/A w\n"+\
"Puissance reflechie (BLS)  : N/A w\n"+\
"###############################\n\n"


generalites = Frame(root,bg="powder blue",width=750,height=250)
generalites.pack()
##########################################
#les sous frames de generalites(top,bottom):
generalites_top=Frame(generalites,relief=RIDGE,bd=18,bg='cadet blue')
generalites_top.pack(side=TOP,fill=X)

titre_generalites_top=Label(generalites_top,text='Generalites Techniques LOC 35R',font=('arial',22,'bold'),bg='cadet blue',padx=120)
titre_generalites_top.pack()

###############################################
generalites_bottom=Frame(generalites,bg='powder blue',width=750,height=260)
generalites_bottom.pack(side=BOTTOM)

#################################################
generalites_bottom_left=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_left.pack(side=LEFT)

generalites_bottom_right=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_right.pack(side=LEFT)

##################################################

T_generalites_left = Text(generalites_bottom_left,padx=20, height=26, width=30)
s_generalites_left = Scrollbar(generalites_bottom_left, command=T_generalites_left.yview)
T_generalites_left.configure(yscrollcommand=s_generalites_left.set)

T_generalites_left.tag_configure('style_loc35R',font=('arial',12,'bold'),foreground='blue',justify='center') 

photo1=PhotoImage(file='images/test/image1.png')
photo2=PhotoImage(file='images/test/image2.png')
photo3=PhotoImage(file='images/test/image3.png')
photo4=PhotoImage(file='images/test/image4.png')


for (j,k) in [('\nphoto 1\n',photo1),('\n\nphoto 2\n',photo2),('\n\nphoto 3\n',photo3),('\n\nphoto 4\n',photo4)]:
	T_generalites_left.insert(END,j,'style_loc35R')
	T_generalites_left.image_create(END, image=k)

T_generalites_left.insert(END,'\n\n')
T_generalites_left.pack(side=LEFT,anchor=NW)
s_generalites_left.pack(side=LEFT, fill=Y)

T_generalites_right = Text(generalites_bottom_right, bg='powder blue',font=('arial',14,'bold'),padx=15, height=19, width=52)
s_generalites_right = Scrollbar(generalites_bottom_right, command=T_generalites_right.yview)
T_generalites_right.configure(yscrollcommand=s_generalites_right.set)

T_generalites_right.tag_configure('style_loc35R', foreground='blue',justify='center',font=('arial', 12, 'bold'))

T_generalites_right.insert(END,text_part1_loc35R)
T_generalites_right.insert(END,text_part2_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part3_loc35R)
T_generalites_right.insert(END,text_part4_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part5_loc35R)
T_generalites_right.insert(END,"\n===============================\n")

T_generalites_right.pack(side=LEFT)
s_generalites_right.pack(side=RIGHT, fill=Y)

root.mainloop()

my wish is to make the images of the left part clickable like in the first code with the effect of enlargement

thanks for helps
Hi atlass218

Here something to play with. To enlarge images you need the PIL-Module:
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import os
from functools import partial 
from tkinter import *
from PIL import Image, ImageTk

def label_callback(label, pil_images, tk_mages, index, event):
    zoom_fac = 6
    pil_small_image = pil_images[index]
    image_size = pil_small_image.size
    zoomed_size = [int(side_width*zoom_fac) for side_width in image_size]
    pil_enlarged_image = pil_small_image.resize(zoomed_size)
    tk_enlarged_image = ImageTk.PhotoImage(pil_enlarged_image)
    tk_images[index] = tk_enlarged_image
    label.configure(image=tk_enlarged_image)
    
root=Tk()
#root.iconbitmap(r'images/cev.ico')
text_part1_loc35R="\n===============================\n"
text_part2_loc35R="Emetteur Directif 1 :\n"
text_part3_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 4.47 w\n"+\
"Puissance reflechie (P+BL) : 0.13  w\n"+\
"Puissance directe (BLS)    : 0.09  w\n"+\
"Puissance reflechie (BLS)  : 0.00  w\n"+\
"===============================\n"
 
text_part4_loc35R="Emetteur Clearance 1 :\n"
text_part5_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 0.55 w\n"+\
"Puissance reflechie (P+BL) : 0.09  w\n"+\
"Puissance directe (BLS)    : N/A w\n"+\
"Puissance reflechie (BLS)  : N/A w\n"+\
"###############################\n\n"
 
 
generalites = Frame(root,bg="powder blue",width=750,height=250)
generalites.pack()
##########################################
#les sous frames de generalites(top,bottom):
generalites_top=Frame(generalites,relief=RIDGE,bd=18,bg='cadet blue')
generalites_top.pack(side=TOP,fill=X)
 
titre_generalites_top=Label(generalites_top,text='Generalites Techniques LOC 35R',font=('arial',22,'bold'),bg='cadet blue',padx=120)
titre_generalites_top.pack()
 
###############################################
generalites_bottom=Frame(generalites,bg='powder blue',width=750,height=260)
generalites_bottom.pack(side=BOTTOM)
 
#################################################
generalites_bottom_left=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_left.pack(side=LEFT)
 
generalites_bottom_right=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_right.pack(side=LEFT)
 
##################################################
 
T_generalites_left = Text(generalites_bottom_left,padx=20, height=26, width=30)
s_generalites_left = Scrollbar(generalites_bottom_left, command=T_generalites_left.yview)
T_generalites_left.configure(yscrollcommand=s_generalites_left.set)
 
T_generalites_left.tag_configure('style_loc35R',font=('arial',12,'bold'),foreground='blue',justify='center') 
 
image_path = "images/test"
image_filenames = ("image1.png", "image2.png", "image3.png", "image4.png")
pil_images = list()
tk_images = list()
labels = list() 
 
for index, photo in enumerate(image_filenames):
    photo_name = "\nphoto {}\n".format(index)
    T_generalites_left.insert(END, photo_name,'style_loc35R')

    pil_image = Image.open(os.path.join(image_path, image_filenames[index])) 
    pil_images.append(pil_image)
    tk_image = ImageTk.PhotoImage(pil_image)
    tk_images.append(tk_image)
    
    label = Label(T_generalites_left, image=tk_image, cursor='hand1')
    label.bind('<Button-1>', partial(label_callback, label, pil_images,
        tk_images, index))
    T_generalites_left.window_create(END, window=label)
    
T_generalites_left.insert(END,'\n\n')
T_generalites_left.pack(side=LEFT,anchor=NW)
s_generalites_left.pack(side=LEFT, fill=Y)
 
T_generalites_right = Text(generalites_bottom_right, bg='powder blue',font=('arial',14,'bold'),padx=15, height=19, width=52)
s_generalites_right = Scrollbar(generalites_bottom_right, command=T_generalites_right.yview)
T_generalites_right.configure(yscrollcommand=s_generalites_right.set)
 
T_generalites_right.tag_configure('style_loc35R', foreground='blue',justify='center',font=('arial', 12, 'bold'))
 
T_generalites_right.insert(END,text_part1_loc35R)
T_generalites_right.insert(END,text_part2_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part3_loc35R)
T_generalites_right.insert(END,text_part4_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part5_loc35R)
T_generalites_right.insert(END,"\n===============================\n")
 
T_generalites_right.pack(side=LEFT)
s_generalites_right.pack(side=RIGHT, fill=Y)
 
root.mainloop()
wuf :-)
hi; and thanks for the code but I want that :
*the enlargement of the image to be done in a Toplevel like the first code
*the enlargement of the image to be done by dispaly the big image not by zoom effect, as was determined above
Hi atlass218

Now the enlarged image will be displayed in a Toplevel window, by clicking on your small image in the textbox.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import os
from functools import partial 
from tkinter import *
from PIL import Image, ImageTk


def visualize(pil_images, index, event):
    zoom_fac = 6
    pil_small_image = pil_images[index]
    image_size = pil_small_image.size
    zoomed_size = [int(side_width*zoom_fac) for side_width in image_size]
    pil_enlarged_image = pil_small_image.resize(zoomed_size)
    
    toplevel = Toplevel() #event.widget)
    toplevel.tk_enlarged_image = ImageTk.PhotoImage(pil_enlarged_image)
    
    Label(toplevel, image=toplevel.tk_enlarged_image).pack()
        
root=Tk()
#root.iconbitmap(r'images/cev.ico')
text_part1_loc35R="\n===============================\n"
text_part2_loc35R="Emetteur Directif 1 :\n"
text_part3_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 4.47 w\n"+\
"Puissance reflechie (P+BL) : 0.13  w\n"+\
"Puissance directe (BLS)    : 0.09  w\n"+\
"Puissance reflechie (BLS)  : 0.00  w\n"+\
"===============================\n"
 
text_part4_loc35R="Emetteur Clearance 1 :\n"
text_part5_loc35R="===============================\n"+\
"Puissance directe (P+BL)   : 0.55 w\n"+\
"Puissance reflechie (P+BL) : 0.09  w\n"+\
"Puissance directe (BLS)    : N/A w\n"+\
"Puissance reflechie (BLS)  : N/A w\n"+\
"###############################\n\n"
 
 
generalites = Frame(root,bg="powder blue",width=750,height=250)
generalites.pack()
##########################################
#les sous frames de generalites(top,bottom):
generalites_top=Frame(generalites,relief=RIDGE,bd=18,bg='cadet blue')
generalites_top.pack(side=TOP,fill=X)
 
titre_generalites_top=Label(generalites_top,text='Generalites Techniques LOC 35R',font=('arial',22,'bold'),bg='cadet blue',padx=120)
titre_generalites_top.pack()
 
###############################################
generalites_bottom=Frame(generalites,bg='powder blue',width=750,height=260)
generalites_bottom.pack(side=BOTTOM)
 
#################################################
generalites_bottom_left=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_left.pack(side=LEFT)
 
generalites_bottom_right=Frame(generalites_bottom,bg='powder blue',width=375)
generalites_bottom_right.pack(side=LEFT)
 
##################################################
 
T_generalites_left = Text(generalites_bottom_left,padx=20, height=26, width=30)
s_generalites_left = Scrollbar(generalites_bottom_left, command=T_generalites_left.yview)
T_generalites_left.configure(yscrollcommand=s_generalites_left.set)
 
T_generalites_left.tag_configure('style_loc35R',font=('arial',12,'bold'),foreground='blue',justify='center') 
 
image_path = "images/test"
image_filenames = ("image1.png", "image2.png", "image3.png", "image4.png")
pil_images = list()
tk_images = list()
labels = list() 
 
for index, photo in enumerate(image_filenames):
    photo_name = "\nphoto {}\n".format(index)
    T_generalites_left.insert(END, photo_name,'style_loc35R')

    pil_image = Image.open(os.path.join(image_path, image_filenames[index])) 
    pil_images.append(pil_image)
    tk_image = ImageTk.PhotoImage(pil_image)
    tk_images.append(tk_image)
    
    label = Label(T_generalites_left, image=tk_image, cursor='hand1')
    label.bind('<Button-1>', partial(visualize, pil_images, index))
    T_generalites_left.window_create(END, window=label)
    
T_generalites_left.insert(END,'\n\n')
T_generalites_left.pack(side=LEFT,anchor=NW)
s_generalites_left.pack(side=LEFT, fill=Y)
 
T_generalites_right = Text(generalites_bottom_right, bg='powder blue',font=('arial',14,'bold'),padx=15, height=19, width=52)
s_generalites_right = Scrollbar(generalites_bottom_right, command=T_generalites_right.yview)
T_generalites_right.configure(yscrollcommand=s_generalites_right.set)
 
T_generalites_right.tag_configure('style_loc35R', foreground='blue',justify='center',font=('arial', 12, 'bold'))
 
T_generalites_right.insert(END,text_part1_loc35R)
T_generalites_right.insert(END,text_part2_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part3_loc35R)
T_generalites_right.insert(END,text_part4_loc35R,'style_loc35R')
T_generalites_right.insert(END,text_part5_loc35R)
T_generalites_right.insert(END,"\n===============================\n")
 
T_generalites_right.pack(side=LEFT)
s_generalites_right.pack(side=RIGHT, fill=Y)
 
root.mainloop()
wuf :-)
hi: wuf
I tested the code, and it's worked with success.
could I ask you if it is possible to give a title (according to the name of the image) to the toplevel for each image that corresponds to it

I tried to give a title to the toplevel by modifying the function [def visualize(pil_images, index, event) ]like this:

def visualize(pil_images, index, event):

    zoom_fac = 4
    pil_small_image = pil_images[index]
    image_size = pil_small_image.size
    zoomed_size = [int(side_width*zoom_fac) for side_width in image_size]
    pil_enlarged_image = pil_small_image.resize(zoomed_size)
     
    toplevel = Toplevel() #event.widget)
    toplevel.title("image " + str(index)) # title for toplevel
    toplevel.tk_enlarged_image = ImageTk.PhotoImage(pil_enlarged_image)
     
    Label(toplevel, image=toplevel.tk_enlarged_image).pack()
and I modify the name of the pictures at the code like that :

image_path = "images/test"
image_filenames = ("antennes.png", "far field.png", "unite de distribution.png", "unite de recombinaison.png")
pil_images = list()
tk_images = list()
labels = list() 
  
for index, photo in enumerate(image_filenames):
    photo_name = "\n\n"+ str(image_filenames[index])
    T_generalites_left.insert(END, photo_name,'style_loc35R')
 
    pil_image = Image.open(os.path.join(image_path, image_filenames[index])) 
    pil_images.append(pil_image)
    tk_image = ImageTk.PhotoImage(pil_image)
    tk_images.append(tk_image)
     
    label = Label(T_generalites_left, image=tk_image, cursor='hand1')
    label.bind('<Button-1>', partial(visualize, pil_images, index))
    T_generalites_left.window_create(END, window=label)
I do not know if there is a better idea

thanks for your support