diff --git a/Readme.md b/Readme.md index ba49277..8a14d58 100644 --- a/Readme.md +++ b/Readme.md @@ -70,7 +70,23 @@ which gives the following with the above simple button program: ![](documentation_images/simple_macOS_darkmode_test.png) -## Ui-Elements +### Advanced example with multiple CTkFrames + +Here I used the ``customtkinter.enable_macos_darkmode()`` command to +enable the macOS darkmode, and used multpiple CTkFrames. It has some +kind of a menu on the left side, and I used all CustomTkinter elements +there are at the moment.Maybe this is a good reference if you want to +create your own application with this library. + +With macOS darkmode turned on, it looks like this: + +![](documentation_images/complex_example_dark.png) + +Otherwise it looks like this: + +![](documentation_images/complex_example_light.png) + +## Documentation - CustomTkinter Elements ### CTkButton Examle Code: @@ -111,11 +127,11 @@ hover | enable/disable hover effect: True, False ### CTkLabel Example Code: ```python -label = customtkinter.CTkButton(master=root_tk, - text="CTkLabel", - width=120, - height=25, - corner_radius=8) +label = customtkinter.CTkLabel(master=root_tk, + text="CTkLabel", + width=120, + height=25, + corner_radius=8) label.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER) ```
@@ -193,10 +209,10 @@ button_hover_color | hover color, tuple: (light_color, dark_color) or single col ### CTkProgressBar Example Code: ```python -progressbar = customtkinter.CTkSlider(master=root_tk, - width=160, - height=20, - border_width=5) +progressbar = customtkinter.CTkProgressBar(master=root_tk, + width=160, + height=20, + border_width=5) progressbar.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER) progressbar.set(value) @@ -219,10 +235,10 @@ progress_color | progress color, tuple: (light_color, dark_color) or single colo ### CTkFrame Example Code: ```python -frame = customtkinter.CTkSlider(master=root_tk, - width=200, - height=200, - corner_radius=10) +frame = customtkinter.CTkFrame(master=root_tk, + width=200, + height=200, + corner_radius=10) frame.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER) ```
diff --git a/complex_example.py b/complex_example.py new file mode 100644 index 0000000..178bbfc --- /dev/null +++ b/complex_example.py @@ -0,0 +1,156 @@ +import tkinter +import tkinter.messagebox +import customtkinter + + +class App(tkinter.Tk): + + APP_NAME = "CustomTkinter complex example" + WIDTH = 700 + HEIGHT = 500 + + def __init__(self, *args, **kwargs): + customtkinter.enable_macos_darkmode() + + tkinter.Tk.__init__(self, *args, **kwargs) + + self.title(App.APP_NAME) + self.geometry(str(App.WIDTH) + "x" + str(App.HEIGHT)) + self.minsize(App.WIDTH, App.HEIGHT) + + self.protocol("WM_DELETE_WINDOW", self.on_closing) + self.bind("", self.on_closing) + self.bind("", self.on_closing) + self.createcommand('tk::mac::Quit', self.on_closing) + + # ============ create two CTkFrames ============ + + self.frame_left = customtkinter.CTkFrame(master=self, + width=200, + height=App.HEIGHT-40, + corner_radius=10) + self.frame_left.place(relx=0.32, rely=0.5, anchor=tkinter.E) + + self.frame_right = customtkinter.CTkFrame(master=self, + width=420, + height=App.HEIGHT-40, + corner_radius=10) + self.frame_right.place(relx=0.365, rely=0.5, anchor=tkinter.W) + + # ============ frame_left ============ + + self.button_1 = customtkinter.CTkButton(master=self.frame_left, + text="CTkButton", + command=self.button_event, + border_width=0, + corner_radius=8) + self.button_1.place(relx=0.5, y=50, anchor=tkinter.CENTER) + + self.button_2 = customtkinter.CTkButton(master=self.frame_left, + text="CTkButton", + command=self.button_event, + border_width=0, + corner_radius=8) + self.button_2.place(relx=0.5, y=100, anchor=tkinter.CENTER) + + self.button_3 = customtkinter.CTkButton(master=self.frame_left, + text="CTkButton", + command=self.button_event, + border_width=0, + corner_radius=8) + self.button_3.place(relx=0.5, y=150, anchor=tkinter.CENTER) + + # ============ frame_right ============ + + self.frame_info = customtkinter.CTkFrame(master=self.frame_right, + width=380, + height=200, + corner_radius=10) + self.frame_info.place(relx=0.5, y=20, anchor=tkinter.N) + + # ============ frame_right -> frame_info ============ + + self.label_info_1 = customtkinter.CTkLabel(master=self.frame_info, + text="CTkLabel: Lorem ipsum dolor sit,\n" + + "amet consetetur sadipscing elitr,\n" + + "sed diam nonumy eirmod tempor\n" + + "invidunt ut labore", + width=250, + height=100, + corner_radius=8, + fg_color=("white", "gray38"), # <- custom tuple-color + justify=tkinter.LEFT) + self.label_info_1.place(relx=0.5, rely=0.15, anchor=tkinter.N) + + self.progressbar = customtkinter.CTkProgressBar(master=self.frame_info, + width=250, + height=15, + border_width=0) + self.progressbar.place(relx=0.5, rely=0.85, anchor=tkinter.S) + + # ============ frame_right <- ============ + + self.slider_1 = customtkinter.CTkSlider(master=self.frame_right, + width=160, + height=16, + border_width=5.5, + command=self.progressbar.set) + self.slider_1.place(x=20, rely=0.6, anchor=tkinter.W) + self.slider_1.set(0.3) + + self.slider_2 = customtkinter.CTkSlider(master=self.frame_right, + width=160, + height=16, + border_width=5.5, + command=self.progressbar.set) + self.slider_2.place(x=20, rely=0.7, anchor=tkinter.W) + self.slider_2.set(0.7) + + self.label_info_1 = customtkinter.CTkLabel(master=self.frame_right, + text="CTkLabel: Lorem ipsum", + width=150, + height=20, + justify=tkinter.CENTER) + self.label_info_1.place(x=310, rely=0.6, anchor=tkinter.CENTER) + + self.button_4 = customtkinter.CTkButton(master=self.frame_right, + height=25, + text="CTkButton", + command=self.button_event, + border_width=0, + corner_radius=8) + self.button_4.place(x=310, rely=0.7, anchor=tkinter.CENTER) + + self.entry = customtkinter.CTkEntry(master=self.frame_right, + width=120, + height=25, + corner_radius=10) + self.entry.place(relx=0.33, rely=0.92, anchor=tkinter.CENTER) + self.entry.insert(0, "CTkEntry") + + self.button_5 = customtkinter.CTkButton(master=self.frame_right, + height=25, + text="CTkButton", + command=self.button_event, + border_width=0, + corner_radius=8) + self.button_5.place(relx=0.66, rely=0.92, anchor=tkinter.CENTER) + + + + self.progressbar.set(0.65) + + def button_event(self): + print("Button pressed") + + def on_closing(self, event=0): + customtkinter.disable_macos_darkmode() + self.destroy() + + def start(self): + self.mainloop() + + +if __name__ == "__main__": + app = App() + app.start() diff --git a/customtkinter/customtkinter_color_manager.py b/customtkinter/customtkinter_color_manager.py index fe11d2b..05518d9 100644 --- a/customtkinter/customtkinter_color_manager.py +++ b/customtkinter/customtkinter_color_manager.py @@ -9,7 +9,7 @@ class CTkColorManager: SLIDER_BG = ("#6B6B6B", "#222222") PROGRESS_BG = ("#6B6B6B", "#222222") FRAME = ("#D4D5D6", "#3F3F3F") - FRAME_2 = ("#505050", "#505050") + FRAME_2 = ("#BFBEC1", "#505050") @classmethod def set_theme_color(cls, hex_color, hex_color_hover): diff --git a/customtkinter/customtkinter_entry.py b/customtkinter/customtkinter_entry.py index b11aed1..ced07e8 100644 --- a/customtkinter/customtkinter_entry.py +++ b/customtkinter/customtkinter_entry.py @@ -111,3 +111,12 @@ class CTkEntry(tkinter.Frame): self.draw() + def delete(self, *args, **kwargs): + return self.entry.delete(*args, **kwargs) + + def insert(self, *args, **kwargs): + return self.entry.insert(*args, **kwargs) + + def get(self): + return self.entry.get() + diff --git a/customtkinter/customtkinter_progressbar.py b/customtkinter/customtkinter_progressbar.py index 9b66c38..63102d2 100644 --- a/customtkinter/customtkinter_progressbar.py +++ b/customtkinter/customtkinter_progressbar.py @@ -8,12 +8,12 @@ from .customtkinter_color_manager import CTkColorManager class CTkProgressBar(tkinter.Frame): def __init__(self, bg_color=None, - border_color=None, + border_color=CTkColorManager.PROGRESS_BG, fg_color=CTkColorManager.PROGRESS_BG, progress_color=CTkColorManager.MAIN, width=160, - height=20, - border_width=5, + height=10, + border_width=0, *args, **kwargs): super().__init__(*args, **kwargs) diff --git a/documentation_images/complex_example_dark.png b/documentation_images/complex_example_dark.png new file mode 100644 index 0000000..b33bf8f Binary files /dev/null and b/documentation_images/complex_example_dark.png differ diff --git a/documentation_images/complex_example_light.png b/documentation_images/complex_example_light.png new file mode 100644 index 0000000..3d40feb Binary files /dev/null and b/documentation_images/complex_example_light.png differ