How does anchor for CTKLabel work?

[chess-levin]

Hello guys,
I need some help. I've build a simple Frame that should work as a diashow-screensaver in a kiosk mode app. I'd like to show the current date time on top of the current image. I want to be able to change the position of the datetime output. Therefore I tried to use the anchor property of CTKLabel, but no matter which positional argument ('s', 'n', 'e', 'w') I'm trying the text is always centered (on v- and h-axis).

Do I understand the intention of anchor wrongly? Do I have to use another way to show the image in the background than using CTKLabel with an image?

Any idea how I could achieve my requirements?

import os

import customtkinter as ctk
from PIL import Image
from screeninfo import get_monitors
import platform
import sys
import time

_screen_size = (1280, 400)

_image_path = "gallery/private/"
_images = ["20220809_144810.jpg", "20230818_121739.jpg"]
_img_timeout_ms = 5000

class ImageFrame(ctk.CTkFrame):
    def __init__(self, master, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        self.img_no = 0
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)

        self.ctk_image = ctk.CTkImage(light_image=self.load_image(_images[self.img_no]), size=_screen_size)
        self.label = ctk.CTkLabel(self, image=self.ctk_image, text="HH:MM:SS",
                                  text_color= "lightgray",
                                  font=ctk.CTkFont(size=100, weight="normal"),
                                  anchor="sw")
        self.label.grid(row=0, column=0, sticky="news")

        self.next_tick()
        self.next_image()

    def load_image(self, image_name ):
        return Image.open(os.path.join(_image_path, image_name))

    def set_image(self, image_name):
        self.ctk_image = ctk.CTkImage(light_image=self.load_image(image_name), size=_screen_size)
        self.label.configure(image=self.ctk_image)

    def next_image(self):
        self.set_image(_images[self.img_no])

        self.img_no += 1
        if self.img_no >= len(_images):
            self.img_no = 0

        self.after(_img_timeout_ms, self.next_image)

    def next_tick(self):
        time_string = time.strftime('%H:%M:%S')
        self.label.configure(text=time_string)
        self.after(1000, self.next_tick)

[dipeshSam]

@chess-levin It is not supported with image. Use Canvas or CTkCanvas instead.

[chess-levin]

Ok. Thank yo @dipeshSam

Maybe it would be helpful for others to add this information to the doc page

I already thought about using Canvas class, but hoped that CTKLabel would be the easier solution.

I also found a workaround, but it still isn't perfect.

[chess-levin]

Found a workaround (see code below), but fg_color="transparent" seems not to work. The time is printed on a light gray background.

Is there a way to get the background of the time_label transparent?

class ImageFrame(ctk.CTkFrame):
    def __init__(self, master, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        self.img_no = 0

        self.ctk_image = ctk.CTkImage(light_image=self.load_image(_images[self.img_no]), size=_kiosk_screen_size)
        self.label = ctk.CTkLabel(self, image=self.ctk_image, text="",
                                  text_color= "lightgray",
                                  font=ctk.CTkFont(size=100, weight="normal"),
                                  anchor="sw")
        self.label.grid(row=0, column=0, sticky="news")

        self.time_label = ctk.CTkLabel(self, text="HH:MM:SS", fg_color="transparent", font=ctk.CTkFont(size=75, weight="normal"))
        self.time_label.place(relx=0.5, rely=1.0, anchor="s")  # Adjust relx and rely for positioning

        #self.text_label.place(relx=0.0, rely=0.0, anchor="nw") for top left.
        #self.text_label.place(relx=1.0, rely=0.0, anchor="ne") for top right.
        #self.text_label.place(relx=0.0, rely=1.0, anchor="sw") for bottom left.
        #self.text_label.place(relx=1.0, rely=1.0, anchor="se") for bottom right.

        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)

        self.next_tick()
        self.next_image()

    def load_image(self, image_name ):
        return Image.open(os.path.join(_image_path, image_name))

    def set_image(self, image_name):
        self.ctk_image = ctk.CTkImage(light_image=self.load_image(image_name), size=_kiosk_screen_size)
        self.label.configure(image=self.ctk_image)

    def next_image(self):
        self.set_image(_images[self.img_no])

        self.img_no += 1
        if self.img_no >= len(_images):
            self.img_no = 0

        self.after(_img_timeout_ms, self.next_image)

    def next_tick(self):
        time_string = time.strftime('%H:%M:%S')
        #self.label.configure(anchor="ne")
        self.time_label.configure(text=time_string)
        self.after(1000, self.next_tick)

[dipeshSam]

@chess-levin If you want anchored text on an image, the only solution we are left with is to use Canvas.

[chess-levin]

@dipeshSam Thanks again. I'll give it a try. I also see that using a canvas is much more versatile; e.g. In future version I could implement "animated" transitions when changing images.

[chess-levin]

Hello @dipeshSam

Here is my try on a canvas solution, but now the scaling of the background image is a problem (s. screenshot). The image (all my images have the required aspect ratio of 1280:400) is not scaled correctly to fill canvas/window completely as it worked automatically in my CTKLabel solution. Even worse, the visible image section is changing when I move the window between monitors with different resolutions.

I've no idea how to fix this scaling problem. Any hint on this?

import os

import customtkinter as ctk
from PIL import Image, ImageTk
from screeninfo import get_monitors
import platform
import sys
import time

_kiosk_screen_size = (1280, 400)

_image_path = "gallery/private/"
_images = ["20220809_144810.jpg", "20230818_121739.jpg", "20230910_165329-01.jpg"]
_img_timeout_ms = 5000


class ImageCanvasFrame(ctk.CTkCanvas):
    def __init__(self, master, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        self.img_no = 0
        self.bg_image = None
        self.datetime_text = None

        self.next_image()
        self.next_tick()

    def load_image(self, image_name ):
        return Image.open(os.path.join(_image_path, image_name))

    def set_image(self, image_name):
        self.bg_image = ImageTk.PhotoImage(self.load_image(_images[self.img_no]), size=_kiosk_screen_size)
        self.create_image(0, 0, anchor="nw", image=self.bg_image)

    def next_image(self):
        self.set_image(_images[self.img_no])
        self.datetime_text = None

        self.img_no += 1
        if self.img_no >= len(_images):
            self.img_no = 0

        self.after(_img_timeout_ms, self.next_image)

    def next_tick(self):
        time_string = time.strftime('%H:%M:%S')

        if self.datetime_text:
            self.itemconfig(self.datetime_text, text=time_string)
        else:
            self.datetime_text = self.create_text(300, 300, text=time_string, font=ctk.CTkFont(size=65, weight="bold"),  fill="white", anchor="s")

        self.after(1000, self.next_tick)

[dipeshSam]

Could you please demonstrate what visible portion is changing? Any video document may be helpful.

[chess-levin]

All screenshots I posted above are the same image. The first two screenshots are showing the complete picture.

If you compare the last to screenshots you'll see the last one is an enlargement of the upper left corner you could find in the second last screenshot.

So I think I have to find a way to get the actual canvas size. Then resizing the image to this dimensions before calling self.create_image()

[chess-levin]

Finally, I found a way.

I have to manually call resize_image() every time I load a new image, because the image not automatically resized when create_image() is called.

Also ImageTk.PhotoImage(self.load_image(_images[self.img_no]), size=_kiosk_screen_size) from my previous try was not working as expected.

class ImageCanvasFrame(ctk.CTkCanvas):
    def __init__(self, master, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        self.original_image = None
        self.img_no = 0
        self.photo_image = None
        self.datetime_text = None
        self.dia_image = None
        self.bind("<Configure>", self.resize_image)
        self.next_image()
        self.next_tick()

    def resize_image(self, event=None):
        wininfo_width = self.winfo_width()
        wininfo_height = self.winfo_height()
        print(f"wininfo_width x wininfo_height {wininfo_width}x{wininfo_height}")
        resized_image = self.original_image.resize((wininfo_width, wininfo_height), Image.Resampling.LANCZOS)
        self.photo_image = ImageTk.PhotoImage(resized_image)
        self.dia_image = self.create_image(0, 0, anchor="nw", image=self.photo_image)

    def load_image(self, image_name):
        self.original_image = Image.open(os.path.join(_image_path, _images[self.img_no]))
        self.resize_image()

    def next_image(self):
        self.load_image(_images[self.img_no])
        self.datetime_text = None

        self.img_no += 1
        if self.img_no >= len(_images):
            self.img_no = 0

        self.after(_img_timeout_ms, self.next_image)

    def next_tick(self):
        time_string = time.strftime('%H:%M:%S')

        if self.datetime_text:
            self.itemconfig(self.datetime_text, text=time_string)
        else:
            self.datetime_text = self.create_text(300, 300, text=time_string, font=ctk.CTkFont(size=65, weight="bold"),  fill="white", anchor="s")

        self.after(1000, self.next_tick)

[chess-levin]

Hi @dipeshSam or anyone else who could help answer a python tkinter memory management question.

Does it make sense to delete or destroy all the image object I've created on the way? As the screensaver is running 95% of a day, I want to make sure I get no memory overflow. And if so, what is the correct why of doing so?

[dipeshSam]

@chess-levin Python automatically deletes out scope objects, we do not need to worry about that. You can simply make an object None or delete it using del keyword if you are sure that it would not be used anymore.

obj = Image()
del obj