[Python] How to create a small image display in the corner while the original image stays...

Thanks for taking your time to listen to my problem! So, I am working on a project where I am trying to make an image editing program. So far I have followed a great guide by Clear Code. However, he doesn't go over more certain elements, like having a smaller display up in the corner displaying the original image.

I have tried doing this by implementing a new class SmallImage and function small_image which are basically cheap replicas of his, which is also incorporated in the program. However, they don't seem to work as intended. I do see that a frame gets placed from the start since an outline of black appears.

Basically what I am trying to achieve is having a smaller version of the original image in the frames [5, 1] [5, 2][6, 1] [6, 2], so it covers a 2x2 area on the left side of the screen.

Another problem I encountered is when I open an image the frames its occupying changes size and it becomes smaller, since they want to resize with the image, even though I want the image to scale to the frames size.

I am not very good at coding, so I hope someone can help

import customtkinter as ctk
from tkinter import filedialog, Canvas
from PIL import Image, ImageTk, ImageOps


# COLORS

BACKGROUND = '#282828'
STROKE = '#312E2E'
PANEL_BG = '#535353'
PANELS = '#353535'

class App(ctk.CTk):
def __init__(self):

# Setup
super().__init__()
ctk.set_appearance_mode('dark')
self.geometry('1000x600')
self.title('Fuck yeah')
self.minsize(800,500)

# canvas data
self.image_width = 0
self.image_height = 0
self.canvas_width = 0
self.canvas_height = 0

# layout
self.rowconfigure(0, weight = 1, uniform = 'a')
self.rowconfigure(1, weight=1, uniform='a')
self.rowconfigure(2, weight=1, uniform='a')
self.rowconfigure(3, weight=1, uniform='a')
self.rowconfigure(4, weight=1, uniform='a')
self.columnconfigure(0, weight=1, uniform = 'a')
self.columnconfigure(1, weight=1, uniform = 'a')
self.columnconfigure(2, weight=1, uniform='a')
self.columnconfigure(3, weight=1, uniform='a')
self.columnconfigure(4, weight=1, uniform='a')
self.columnconfigure(5, weight=1, uniform='a')
self.columnconfigure(6, weight=1, uniform='a')
FrameColor(self, color=PANEL_BG, x=0, y=0, strY=5, strX=7)
self.image_import = ImageImport(self, self.import_image, color=BACKGROUND, x=1,y=1,strY=3,strX=4, paddingX= 10, paddingY=10)
FrameColor(self, color=PANELS, x=0, y=0,strY=1,strX=1)
FrameColor(self, color=PANELS, x=0, y=4, strY=1, strX=1)
FrameColor(self, color=PANELS, x=6, y=0, strY=1, strX=1)
FrameColor(self, color=PANELS, x=6, y=4, strY=1, strX=1)
#self.image_import = ImageImport(self, self.import_image, color=BACKGROUND, x=5, y=1, strY=2, strX=2, paddingY=0, paddingX=0)

self.small_image_frame = SmallImage(self, self.small_image, x=5, y=1, strX=2, strY=2)


self.mainloop()

def import_image(self, path):
self.original = Image.open(path)
self.image = self.original
self.image_ratio = self.image.size[0] / self.image.size[1]
self.image_tk = ImageTk.PhotoImage(self.image)

self.image_import.grid_forget()
self.image_output = ImageOutput(self, self.resize_image)
self.close_button = CloseOutput(self, self.Close_edit)
#self.menu = Menu(self, self.rotate_float, self.zoom_float)

def small_image(self, path):
self.original = Image.open(path)
self.image = self.original
self.image_ratio = self.image.size[0] / self.image.size[1]
self.image_tk = ImageTk.PhotoImage(self.image)

self.small_image_frame.grid_forget()
self.image_output = SmallImage(self, self.resize_image,x=5,y=1,strX=2,strY=2)

def Close_edit(self):
# hide image and close button
self.image_output.grid_forget()
self.close_button.place_forget()
#self.menu.grid_forget()
self.image_import = ImageImport(self, self.import_image, color=BACKGROUND, x=1,y=1,strY=3,strX=4,paddingX=10,paddingY=10)

def resize_image(self, event):
# current canvas ratio
canvas_ratio = event.width / event.height

# update canvas attribute
self.canvas_width = event.width
self.canvas_height = event.height

# resize
if canvas_ratio > self.image_ratio: # if canvas is wider than the image
self.image_height = int(event.height)
self.image_width = int(self.image_height * self.image_ratio)
else: # if canvas is taller than the image
self.image_width = int(event.width)
self.image_height = int(self.image_width / self.image_ratio)

self.place_image()

def place_image(self):
self.image_output.delete('all')
resized_image = self.image.resize((self.image_width, self.image_height))
self.image_tk = ImageTk.PhotoImage(resized_image)
self.image_output.create_image(self.canvas_width / 2, self.canvas_height / 2, image = self.image_tk)

class FrameColor(ctk.CTkFrame):
def __init__(self, parent,color, x, y, strX, strY):
super().__init__(master=parent,fg_color=color)
self.grid(column=x, columnspan=strX, row=y, rowspan=strY, sticky='nsew')
class ImageImport(ctk.CTkFrame):
def __init__(self, parent, import_func, color, x, y, strX, strY, paddingX, paddingY):
super().__init__(master=parent, fg_color= color)
self.grid(column = x, columnspan = strX, row = y, rowspan=strY, padx = paddingX, pady = paddingY, sticky = 'nsew')
self.import_func = import_func

ctk.CTkButton(self, text='Open image', command=self.open_dialog).pack(expand=True)

def open_dialog(self):
path = filedialog.askopenfile().name
self.import_func(path)

class SmallImage(ctk.CTkFrame):
def __init__(self, parent, update_func, x, y, strX, strY):
super().__init__(master=parent, fg_color=PANEL_BG)
self.grid(column=x, columnspan=strX, row=y, rowspan=strY, sticky='nsew')
self.update_func = update_func
#self.label = ctk.CTkLabel(self)
#self.label.pack(expand=True)


class ImageOutput(Canvas):
def __init__(self, parent, resize_image):
super().__init__(master = parent, background= BACKGROUND, bd=0, highlightthickness=0, relief='ridge')
self.grid(row = 1, column = 1,columnspan=3,rowspan=3, sticky = 'nsew')
self.bind('<Configure>', resize_image)

class CloseOutput(ctk.CTkButton):
def __init__(self, parent, close_func):
super().__init__(master=parent, command=close_func, text='x', text_color= 'white', fg_color='transparent',
width=40, height=40,
corner_radius = 0,
hover_color = 'red'
)
self.place(relx=0.99, rely=0.01,anchor='ne')
App()

Continue reading...