まくまく
CustomTkinter で作成したGUIアプリに画像を表示させる方法です。公式のサンプルをもっとシンプルにして分かりやすくしてみました。
公式サンプルプログラム
公式サイトに記載されている画像表示のサンプルはこちらです。クラスを使用して、さらに複数のフレームや画像が配置されています。
import customtkinter
import os
from PIL import Image
class App(customtkinter.CTk):
def __init__(self):
super().__init__()
self.title("image_example.py")
self.geometry("700x450")
# set grid layout 1x2
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(1, weight=1)
# load images with light and dark mode image
image_path = os.path.join(os.path.dirname(os.path.realpath(__file__)), "test_images")
self.logo_image = customtkinter.CTkImage(Image.open(os.path.join(image_path, "CustomTkinter_logo_single.png")), size=(26, 26))
self.large_test_image = customtkinter.CTkImage(Image.open(os.path.join(image_path, "large_test_image.png")), size=(500, 150))
self.image_icon_image = customtkinter.CTkImage(Image.open(os.path.join(image_path, "image_icon_light.png")), size=(20, 20))
self.home_image = customtkinter.CTkImage(light_image=Image.open(os.path.join(image_path, "home_dark.png")),
dark_image=Image.open(os.path.join(image_path, "home_light.png")), size=(20, 20))
self.chat_image = customtkinter.CTkImage(light_image=Image.open(os.path.join(image_path, "chat_dark.png")),
dark_image=Image.open(os.path.join(image_path, "chat_light.png")), size=(20, 20))
self.add_user_image = customtkinter.CTkImage(light_image=Image.open(os.path.join(image_path, "add_user_dark.png")),
dark_image=Image.open(os.path.join(image_path, "add_user_light.png")), size=(20, 20))
# create navigation frame
self.navigation_frame = customtkinter.CTkFrame(self, corner_radius=0)
self.navigation_frame.grid(row=0, column=0, sticky="nsew")
self.navigation_frame.grid_rowconfigure(4, weight=1)
self.navigation_frame_label = customtkinter.CTkLabel(self.navigation_frame, text=" Image Example", image=self.logo_image,
compound="left", font=customtkinter.CTkFont(size=15, weight="bold"))
self.navigation_frame_label.grid(row=0, column=0, padx=20, pady=20)
self.home_button = customtkinter.CTkButton(self.navigation_frame, corner_radius=0, height=40, border_spacing=10, text="Home",
fg_color="transparent", text_color=("gray10", "gray90"), hover_color=("gray70", "gray30"),
image=self.home_image, anchor="w", command=self.home_button_event)
self.home_button.grid(row=1, column=0, sticky="ew")
self.frame_2_button = customtkinter.CTkButton(self.navigation_frame, corner_radius=0, height=40, border_spacing=10, text="Frame 2",
fg_color="transparent", text_color=("gray10", "gray90"), hover_color=("gray70", "gray30"),
image=self.chat_image, anchor="w", command=self.frame_2_button_event)
self.frame_2_button.grid(row=2, column=0, sticky="ew")
self.frame_3_button = customtkinter.CTkButton(self.navigation_frame, corner_radius=0, height=40, border_spacing=10, text="Frame 3",
fg_color="transparent", text_color=("gray10", "gray90"), hover_color=("gray70", "gray30"),
image=self.add_user_image, anchor="w", command=self.frame_3_button_event)
self.frame_3_button.grid(row=3, column=0, sticky="ew")
self.appearance_mode_menu = customtkinter.CTkOptionMenu(self.navigation_frame, values=["Light", "Dark", "System"],
command=self.change_appearance_mode_event)
self.appearance_mode_menu.grid(row=6, column=0, padx=20, pady=20, sticky="s")
# create home frame
self.home_frame = customtkinter.CTkFrame(self, corner_radius=0, fg_color="transparent")
self.home_frame.grid_columnconfigure(0, weight=1)
self.home_frame_large_image_label = customtkinter.CTkLabel(self.home_frame, text="", image=self.large_test_image)
self.home_frame_large_image_label.grid(row=0, column=0, padx=20, pady=10)
self.home_frame_button_1 = customtkinter.CTkButton(self.home_frame, text="", image=self.image_icon_image)
self.home_frame_button_1.grid(row=1, column=0, padx=20, pady=10)
self.home_frame_button_2 = customtkinter.CTkButton(self.home_frame, text="CTkButton", image=self.image_icon_image, compound="right")
self.home_frame_button_2.grid(row=2, column=0, padx=20, pady=10)
self.home_frame_button_3 = customtkinter.CTkButton(self.home_frame, text="CTkButton", image=self.image_icon_image, compound="top")
self.home_frame_button_3.grid(row=3, column=0, padx=20, pady=10)
self.home_frame_button_4 = customtkinter.CTkButton(self.home_frame, text="CTkButton", image=self.image_icon_image, compound="bottom", anchor="w")
self.home_frame_button_4.grid(row=4, column=0, padx=20, pady=10)
# create second frame
self.second_frame = customtkinter.CTkFrame(self, corner_radius=0, fg_color="transparent")
self.home_frame_button_1 = customtkinter.CTkButton(self.second_frame, text="", image=self.image_icon_image)
self.home_frame_button_1.grid(row=1, column=0, padx=20, pady=10)
# create third frame
self.third_frame = customtkinter.CTkFrame(self, corner_radius=0, fg_color="transparent")
# select default frame
self.select_frame_by_name("home")
def select_frame_by_name(self, name):
# set button color for selected button
self.home_button.configure(fg_color=("gray75", "gray25") if name == "home" else "transparent")
self.frame_2_button.configure(fg_color=("gray75", "gray25") if name == "frame_2" else "transparent")
self.frame_3_button.configure(fg_color=("gray75", "gray25") if name == "frame_3" else "transparent")
# show selected frame
if name == "home":
self.home_frame.grid(row=0, column=1, sticky="nsew")
else:
self.home_frame.grid_forget()
if name == "frame_2":
self.second_frame.grid(row=0, column=1, sticky="nsew")
else:
self.second_frame.grid_forget()
if name == "frame_3":
self.third_frame.grid(row=0, column=1, sticky="nsew")
else:
self.third_frame.grid_forget()
def home_button_event(self):
self.select_frame_by_name("home")
def frame_2_button_event(self):
self.select_frame_by_name("frame_2")
def frame_3_button_event(self):
self.select_frame_by_name("frame_3")
def change_appearance_mode_event(self, new_appearance_mode):
customtkinter.set_appearance_mode(new_appearance_mode)
if __name__ == "__main__":
app = App()
app.mainloop()
画像表示コードを簡潔にしてみた
シンプルに書き直してみました。使用しているライブラリ等は、CustomTkinterとosとPILのみです。一部パスの指定方法などは自分なりに理解できるように変えていますが、やっていることは基本同じです。ウインドウを作成して、画像を読み込んでラベルとして表示しています。画像ファイルは、pyファイルと同じ階層にimagesフォルダを作り、その中に入れています。
import customtkinter
import os
from PIL import Image
app = customtkinter.CTk()
app.geometry("400x200+50+50")
app.title("Image")
dir_path = os.path.join(os.path.dirname(os.path.abspath(__file__)))
logo_image = customtkinter.CTkImage(Image.open(os.path.join(dir_path, "images","logo.png")),size=(64, 64))
label = customtkinter.CTkLabel(app, text=" Custom Tkinter",image=logo_image, compound="left", font=customtkinter.CTkFont(size=20, weight="bold"))
label.pack()
app.mainloop()
うまく画像を表示することができました。
OpenCVで読み込んだ画像を表示
以前Tkinterで作成したGUIにOpenCVで読み込んだ画像を表示する方法というものをアップしました。今回のCustomTkinterでも同様に表示できるのか試してみました。
Python tkinter / OpenCVで読み込んだ画像を表示する方法
上のページのコードをほぼそのまま記載したのが以下となります。PILやPhotoimageなどへの変換をして画面に表示する流れです。
import customtkinter
import tkinter as tk
import os
from PIL import Image, ImageTk
import cv2
app = customtkinter.CTk()
app.geometry("400x200+50+50")
app.title("Image")
dir_path = os.path.join(os.path.dirname(os.path.abspath(__file__)))
#画像読み込み
image = cv2.imread(os.path.join(dir_path, "images","logo.png"))
#画像をリサイズ
h, w = image.shape[:2]
cvh = 200*h/w
image_bgr = cv2.resize(image, (200,int(cvh)))
#画像をBGR→RGB→PIL→ImageTkフォーマットへ変換
image_rgb = cv2.cvtColor(image_bgr, cv2.COLOR_BGR2RGB)
image_pil = Image.fromarray(image_rgb)
image_tk = ImageTk.PhotoImage(image_pil)
### キャンバス作成・配置
canvas = tk.Canvas(app, width=200, height=200)
canvas.place(x=10, y=10)
canvas.create_image(0, 0, image=image_tk, anchor=tk.NW)
app.mainloop()
こちらもうまく表示できましたね。
