added auto resizing for CTkFrame, CTkLabel and CTkEntry, improved text alignment of CTkEntry

This commit is contained in:
Tom Schimansky 2022-01-17 23:23:47 +01:00
parent 6eb0d92ddd
commit c9b9f1a8c3
5 changed files with 103 additions and 26 deletions

View File

@ -1,6 +1,5 @@
import tkinter
import sys
from math import ceil, floor
from .customtkinter_tk import CTk
from .customtkinter_frame import CTkFrame
@ -58,29 +57,34 @@ class CTkButton(tkinter.Frame):
self.configure_basic_grid()
# color variables
self.bg_color = self.detect_color_of_master() if bg_color is None else bg_color
self.fg_color = CTkColorManager.MAIN if fg_color == "CTkColorManager" else fg_color
self.hover_color = CTkColorManager.MAIN_HOVER if hover_color == "CTkColorManager" else hover_color
self.border_color = border_color
# shape and size
self.width = width
self.height = height
self.configure(width=self.width, height=self.height)
self.corner_radius = self.calc_optimal_corner_radius(corner_radius) # optimise for less artifacts
self.border_width = round(border_width) # round border_width (inner parts not centered otherwise)
if self.corner_radius * 2 > self.height:
self.corner_radius = self.height / 2
elif self.corner_radius * 2 > self.width:
self.corner_radius = self.width / 2
self.border_width = round(border_width) # round border_width (inner parts not centered otherwise)
if self.corner_radius >= self.border_width:
self.inner_corner_radius = self.corner_radius - self.border_width
else:
self.inner_corner_radius = 0
# text and font and image
self.image = image
self.image_label = None
self.text = text
self.text_label = None
self.text_color = CTkColorManager.TEXT if text_color == "CTkColorManager" else text_color
if text_font is None:
if sys.platform == "darwin": # macOS
@ -92,14 +96,13 @@ class CTkButton(tkinter.Frame):
else:
self.text_font = text_font
# callback and hover functionality
self.function = command
self.textvariable = textvariable
self.state = state
self.hover = hover
self.image = image
self.compound = compound
self.configure(width=self.width, height=self.height)
self.click_animation_running = False
if sys.platform == "darwin" and self.function is not None:
self.configure(cursor="pointinghand") # other cursor when hovering over button with command
@ -110,6 +113,7 @@ class CTkButton(tkinter.Frame):
height=self.height)
self.canvas.grid(row=0, column=0, rowspan=2, columnspan=2)
# event bindings
if self.hover is True:
self.canvas.bind("<Enter>", self.on_enter)
self.canvas.bind("<Leave>", self.on_leave)
@ -117,12 +121,10 @@ class CTkButton(tkinter.Frame):
self.canvas.bind("<Button-1>", self.clicked)
self.canvas.bind("<Button-1>", self.clicked)
self.text_label = None
self.image_label = None
# Each time an item is resized due to pack position mode, the binding Configure is called on the widget
self.bind('<Configure>', self.update_dimensions)
self.draw()
self.draw() # initial draw
def destroy(self):
AppearanceModeTracker.remove(self.set_appearance_mode)
@ -136,13 +138,12 @@ class CTkButton(tkinter.Frame):
self.grid_columnconfigure(1, weight=1)
def update_dimensions(self, event):
# We update the dimensions of the internal elements of CTkButton Widget
self.canvas.config(width=event.width, height=event.height)
# only redraw if dimensions changed (for performance)
if self.width != event.width or self.height != event.height:
self.width = event.width
self.height = event.height
self.canvas.config(width=self.width, height=self.height)
self.draw(no_color_updates=True) # fast drawing without color changes
def detect_color_of_master(self):
@ -193,9 +194,9 @@ class CTkButton(tkinter.Frame):
else:
self.canvas.itemconfig("inner_parts",
outline=CTkColorManager.darken_hex_color(
CTkColorManager.single_color(self.fg_color, self.appearance_mode)),
CTkColorManager.single_color(self.fg_color, self.appearance_mode)),
fill=CTkColorManager.darken_hex_color(
CTkColorManager.single_color(self.fg_color, self.appearance_mode)))
CTkColorManager.single_color(self.fg_color, self.appearance_mode)))
else:
if self.fg_color is None:
@ -226,10 +227,10 @@ class CTkButton(tkinter.Frame):
if self.state == tkinter.DISABLED:
if self.fg_color is None:
self.text_label.configure(
bg=CTkColorManager.darken_hex_color(CTkColorManager.single_color(self.bg_color, self.appearance_mode)))
bg=CTkColorManager.darken_hex_color(CTkColorManager.single_color(self.bg_color, self.appearance_mode)))
else:
self.text_label.configure(
bg=CTkColorManager.darken_hex_color(CTkColorManager.single_color(self.fg_color, self.appearance_mode)))
bg=CTkColorManager.darken_hex_color(CTkColorManager.single_color(self.fg_color, self.appearance_mode)))
else:
if self.fg_color is None:
self.text_label.configure(bg=CTkColorManager.single_color(self.bg_color, self.appearance_mode))
@ -547,6 +548,8 @@ class CTkButton(tkinter.Frame):
self.image_label.configure(bg=CTkColorManager.single_color(inner_parts_color, self.appearance_mode))
def on_leave(self, event=0):
self.click_animation_running = False
if self.hover is True:
if self.fg_color is None:
inner_parts_color = self.bg_color
@ -566,10 +569,19 @@ class CTkButton(tkinter.Frame):
if self.image_label is not None:
self.image_label.configure(bg=CTkColorManager.single_color(inner_parts_color, self.appearance_mode))
def click_animation(self):
if self.click_animation_running:
self.on_enter()
def clicked(self, event=0):
if self.function is not None:
if self.state is not tkinter.DISABLED:
# click animation: change color with .on_leave() and back to normal after 100ms with click_animation()
self.on_leave()
self.click_animation_running = True
self.after(100, self.click_animation)
self.function()
def set_appearance_mode(self, mode_string):

View File

@ -85,13 +85,33 @@ class CTkColorManager:
def hex2rgb(hex_color: str) -> tuple:
return tuple(int(hex_color.strip("#")[i:i+2], 16) for i in (0, 2, 4))
@staticmethod
def darken_hex_color(hex_color: str) -> str:
@classmethod
def linear_blend(cls, color_1: str, color_2: str, blend_factor: float) -> str:
""" Blends two hex colors linear, where blend_factor of 0
results in color_1 and blend_factor of 1 results in color_2. """
if color_1 is None or color_2 is None:
return None
rgb_1 = cls.hex2rgb(color_1)
rgb_2 = cls.hex2rgb(color_2)
new_rgb = (rgb_1[0] + (rgb_2[0] - rgb_1[0]) * blend_factor,
rgb_1[1] + (rgb_2[1] - rgb_1[1]) * blend_factor,
rgb_1[2] + (rgb_2[2] - rgb_1[2]) * blend_factor)
return cls.rgb2hex(new_rgb)
@classmethod
def darken_hex_color(cls, hex_color: str, darken_factor: float = None) -> str:
if darken_factor is None:
darken_factor = cls.DARKEN_COLOR_FACTOR
try:
rgb_color = CTkColorManager.hex2rgb(hex_color)
dark_rgb_color = (rgb_color[0] * CTkColorManager.DARKEN_COLOR_FACTOR,
rgb_color[1] * CTkColorManager.DARKEN_COLOR_FACTOR,
rgb_color[2] * CTkColorManager.DARKEN_COLOR_FACTOR)
dark_rgb_color = (rgb_color[0] * darken_factor,
rgb_color[1] * darken_factor,
rgb_color[2] * darken_factor)
return CTkColorManager.rgb2hex(dark_rgb_color)
except Exception as err:
sys.stderr.write("ERROR (CTkColorManager): failed to darken the following color: " + str(hex_color) + " " + str(err))

View File

@ -46,6 +46,8 @@ class CTkEntry(tkinter.Frame):
AppearanceModeTracker.add(self.change_appearance_mode, self)
self.appearance_mode = AppearanceModeTracker.get_mode() # 0: "Light" 1: "Dark"
self.configure_basic_grid()
self.bg_color = self.detect_color_of_master() if bg_color is None else bg_color
self.fg_color = CTkColorManager.ENTRY if fg_color == "CTkColorManager" else fg_color
self.text_color = CTkColorManager.TEXT if text_color == "CTkColorManager" else text_color
@ -66,22 +68,28 @@ class CTkEntry(tkinter.Frame):
highlightthicknes=0,
width=self.width,
height=self.height)
self.canvas.place(x=0, y=0)
self.canvas.grid(column=0, row=0)
self.entry = tkinter.Entry(master=self,
bd=0,
width=1,
highlightthicknes=0,
**kwargs)
self.entry.place(relx=0.5, rely=0.5, relwidth=0.8, anchor=tkinter.CENTER)
self.entry.grid(column=0, row=0, sticky="we", padx=self.corner_radius if self.corner_radius >= 5 else 5)
self.fg_parts = []
self.bind('<Configure>', self.update_dimensions)
self.draw()
def destroy(self):
AppearanceModeTracker.remove(self.change_appearance_mode)
super().destroy()
def configure_basic_grid(self):
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(0, weight=1)
def detect_color_of_master(self):
if isinstance(self.master, CTkFrame):
return self.master.fg_color
@ -103,6 +111,15 @@ class CTkEntry(tkinter.Frame):
else:
return user_corner_radius
def update_dimensions(self, event):
# only redraw if dimensions changed (for performance)
if self.width != event.width or self.height != event.height:
self.width = event.width
self.height = event.height
self.canvas.config(width=self.width, height=self.height)
self.draw()
def draw(self):
self.canvas.delete("all")
self.fg_parts = []
@ -182,7 +199,14 @@ class CTkEntry(tkinter.Frame):
require_redraw = True
if "corner_radius" in kwargs:
self.corner_radius = kwargs["corner_radius"]
self.corner_radius = self.calc_optimal_corner_radius(kwargs["corner_radius"]) # optimise for less artifacts
if self.corner_radius * 2 > self.height:
self.corner_radius = self.height / 2
elif self.corner_radius * 2 > self.width:
self.corner_radius = self.width / 2
self.entry.grid(column=0, row=0, sticky="we", padx=self.corner_radius if self.corner_radius >= 5 else 5)
del kwargs["corner_radius"]
require_redraw = True

View File

@ -78,6 +78,8 @@ class CTkFrame(tkinter.Frame):
self.fg_parts = []
self.bind('<Configure>', self.update_dimensions)
self.draw()
def destroy(self):
@ -105,6 +107,15 @@ class CTkFrame(tkinter.Frame):
else:
return user_corner_radius
def update_dimensions(self, event):
# only redraw if dimensions changed (for performance)
if self.width != event.width or self.height != event.height:
self.width = event.width
self.height = event.height
self.canvas.config(width=self.width, height=self.height)
self.draw()
def draw(self):
for part in self.fg_parts:
self.canvas.delete(part)

View File

@ -92,6 +92,7 @@ class CTkLabel(tkinter.Frame):
super().configure(width=self.width, height=self.height)
self.bind('<Configure>', self.update_dimensions)
self.draw()
def destroy(self):
@ -119,6 +120,15 @@ class CTkLabel(tkinter.Frame):
else:
return user_corner_radius
def update_dimensions(self, event):
# only redraw if dimensions changed (for performance)
if self.width != event.width or self.height != event.height:
self.width = event.width
self.height = event.height
self.canvas.config(width=self.width, height=self.height)
self.draw()
def draw(self):
self.canvas.delete("all")
self.fg_parts = []