[Tkinter] adapt management grid mode to management pack mode

[Tkinter] adapt management grid mode to management pack mode - Printable Version

+- Python Forum (https://python-forum.io)
+-- Forum: Python Coding (https://python-forum.io/forum-7.html)
+--- Forum: GUI (https://python-forum.io/forum-10.html)
+--- Thread: [Tkinter] adapt management grid mode to management pack mode (/thread-17766.html)

adapt management grid mode to management pack mode - atlass218 - Apr-23-2019

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

RE: adapt management grid mode to management pack mode - wuf - Apr-23-2019

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 :-)

RE: adapt management grid mode to management pack mode - atlass218 - Apr-23-2019

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

RE: adapt management grid mode to management pack mode - wuf - Apr-23-2019

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 :-)

RE: adapt management grid mode to management pack mode - atlass218 - Apr-24-2019

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