How to get a transparent label/text background when using a background image?

[chess-levin]

Hi folks,

trying to build a screensaver, that reads random images and shows them in fullscreen mode. I want to place some datetime information on top of the image. Below is some poc code. I don't get the text (time) or the label that holds the text transparent. Any ideas how this could work?

Another question is: My target app uses different frames to allowing switch between different contents. So the screensave should also work as its own "content frame", but I found no way to put an image in the background of a frame and still be able to put the (datetime) text on top.

Thanks for your ideas.

import customtkinter as ctki
from PIL import Image
import glob
import sys
import random

_win_width  = 1280
_win_height = 400


app = ctki.CTk()
app.title("my app")
app.geometry(f"{_win_width}x{_win_height}")

img = Image.open("galerie/philosophie-1280x400.jpg")

la_image = ctki.CTkLabel(master=app, image=ctki.CTkImage(img, size=(_win_width, _win_height)), text='')
la_image.grid(row=0, column=0)

fr_frame = ctki.CTkFrame(master=app, bg_color='transparent', fg_color='transparent')
fr_frame.grid(row=0, column=0, sticky="n")

la_datetime = ctki.CTkLabel(master=fr_frame, bg_color='transparent', fg_color='transparent', text='HH:MM:SS', 
                                         font=ctki.CTkFont(size=60, weight="normal"), text_color="white")
la_datetime.grid(row=0, column=0, sticky="n")

app.mainloop()

[Akascape]

@chess-levin Check this solution here: #2214

[Annajiraochalla]

Looks very cool. Thank you for sharing it.

[Annajiraochalla]

You can use canvas.create_text() to get transparent text.

import customtkinter as ctki
from PIL import Image
import tkinter as tk 
import glob
import sys
import random

_win_width  = 1280
_win_height = 400

app = ctki.CTk()
app.title("my app")
app.geometry(f"{_win_width}x{_win_height}")

#img = Image.open("galerie/philosophie-1280x400.jpg")
img = tk.PhotoImage(file = 'galerie/philosophie-1280x400.jpg') 

# la_image = ctki.CTkLabel(master=app, image=ctki.CTkImage(img, size=(_win_width, _win_height)), text='')
# la_image.grid(row=0, column=0)

# fr_frame = ctki.CTkFrame(master=app, bg_color='transparent', fg_color='transparent')
# fr_frame.grid(row=0, column=0, sticky="n")

# la_datetime = ctki.CTkLabel(master=fr_frame, bg_color='transparent', fg_color='transparent', text='HH:MM:SS', 
#                                          font=ctki.CTkFont(size=60, weight="normal"), text_color="white")
# la_datetime.grid(row=0, column=0, sticky="n")

canvas = tk.Canvas(master = app)

canvas.place(relx = 0, rely = 0, relwidth = 1, relheight = 1)
canvas.create_image(0, 0, anchor = 'nw', image = img)
canvas.create_text(400, 100, text = 'HH:MM:SS', fill = 'white', font = ('Arial', 60))

app.mainloop()

[chess-levin]

Thx for your feedback.

Got it running, but

• but anchor argument on label is not working, text is always centered, any ideas how to change the position of my text?
• background image is only working when setting label's master to ctki.CTk() , I can't make the background image working for a normal frame, @Annajiraochalla does your proposed canvas solution also only work for app?

import customtkinter as ctki
from PIL import Image
import glob
import sys
import random
import time

_win_width  = 1280
_win_height = 400

def return_func():
    print("return")

class FrameScreensaverPictureContent(ctki.CTkFrame):

    def __init__(self, parent, show_for_s, return_to_radio_func, show_randomly=False):
        print(type(parent))

        self.image_path_list = []
        self.scan_galery()

        img = Image.open(self.image_path_list[0])
        
        self.la_image = ctki.CTkLabel(master=parent, image=ctki.CTkImage(img, size=(_win_width, _win_height)), 
                                      fg_color='transparent', text=self.currentDatetime(), anchor="nw",
                                      font=ctki.CTkFont(size=60, weight="normal"), text_color="white")
        self.la_image.grid(row=0, column=0)
        self.la_image.bind(sequence="<Button-1>", command=self.stop, add='+')

        super().__init__(parent)

        self.parent = parent
        self.return_to_radio_func = return_to_radio_func
        self.show_for_s = show_for_s
        self.time = 0
        self.show_randomly = show_randomly
        self.activate()

    def currentDatetime(self):
        return time.strftime('%H:%M:%S')+time.strftime('\n %A, %B %d')

    def scan_galery(self):
        print("Scanning gallery folder")

        for filename in glob.glob("gallery/*.??g", recursive=False):
            try:
                print(f"found {filename}")
                Image.open(filename)
                self.image_path_list.append(filename)
            except OSError as e:
                print(f"Unable to open image {filename}. Check image format. Details : {e}", file=sys.stderr)

        print(f"Galerie contains {len(self.image_path_list)} pictures")

    def show_next_image(self, image_index):
        print("self.image_index=",image_index)
        next_image = ctki.CTkImage(Image.open(self.image_path_list[image_index]), size=(_win_width, _win_height))
        self.la_image.configure(image = next_image)
       

    def update_time(self):
        self.time += 1
        if (self.time > self.show_for_s):
            self.time = 0
            self.show_next_image(random.randint(0, len(self.image_path_list)-1))
        
        self.la_image.configure(text = self.currentDatetime())
        self.tid_update_time = self.after(1000, self.update_time)


    def stop(self, event):
        print("Stop Screensaver")
        self.after_cancel(self.tid_update_time)
        self.return_to_radio_func()

    def activate(self):
        #super().grid(row=0, column=0, padx=0, pady=0, sticky="news")
        self.time = 0
        self.update_time()


app = ctki.CTk()
app.title("Demo app")
app.geometry(f"{_win_width}x{_win_height}")

fr = FrameScreensaverPictureContent(app, 5, return_func)

app.mainloop()

[Annajiraochalla]

@chess-levin,

If I understand correctly, the anchor property inside CTkLabel has the default parameter "center". You can try other parameters such as "n", "e", "s", "w", but this property implies how the text is anchored inside the label, not outside.

I'm not completely sure about how to use grid(), but as far as I know, to change the position externally, try using other geometry managers such as pack() or place(). I personally prefer place() since it gives a high level of control over the location.

If you want your background image to be placed inside a CTkFrame, you can use CTkLabel (with CTkFrame as its master) and pywinstyles together, or you can still use tkinter.canvas (with CTkFrame as its master).

For more widgets to be placed inside your CTkFrame, make sure you set the width and height of CTkLabel or tkinter.canvas accordingly.

[chess-levin]

Hi @Annajiraochalla,

anchor argument is not working here. I already changed it to all of the values [n,e,s,w], but the label always appears centered. :-(

        self.la_image = ctki.CTkLabel(master=parent, image=ctki.CTkImage(img, size=(_win_width, _win_height)), 
                                      fg_color='transparent', text=self.currentDatetime(), anchor="s",
                                      font=ctki.CTkFont(size=60, weight="normal"), text_color="white")

As I told before, the screensaver is just one content frame in another app. The app switches between different content frames. As far as I understood, it is not possible to use pack and place when the parent frame is using grid. That's the reason why I'm looking for a way to get this screensaver running as another content frame in my app.