Coder Legion - Recent posts tagged gui

Kavro.Pro Stop writing your UI by hand.

Mon, 19 Oct 2026 21:28:35 +0000

Design Dear ImGui menus visually, then build a real .exe

Kavro is a drag-and-drop designer for Dear ImGui windows, tool menus and launchers. Stop nudging SetCursorPos values and recompiling: drop widgets on a canvas, style them, test the window, and export clean code in C++, C# or Rust.

What you can do

Drag & drop 23 widgets: text, buttons, checkboxes, switches, sliders,
dropdowns, color pickers, hotkeys, tabs, lists, progress bars,
spinners and more
Themes & styles: one-click presets (Kavro Dark,
Midnight Violet, Ocean, Sakura, Ember…) or per-widget colors, fonts
and rounding
13 animated backgrounds and 12 built-in actions (switch
pages, toasts, loading screens…)
Test mode (F6): use your window right inside the editor
Live code: your UI is plain kv::Button(...) /
kv::Slider(...) calls. Edit the code and the canvas updates, or the
other way round
Build & Run (F5): compiles a native Windows .exe in
seconds C++: Dear ImGui + DX11/Vulkan/DX9/DX12/OpenGL (MSVC) Rust: imgui-rs + glium
(Cargo) C#: ImGui.NET + Silk.NET (.NET 8)
Kavro AI tab: describe a
change and let the AI edit your menu

Free and Pro

Free: design and test everything.
Pro ($10/month or $108/year): Build & Run, source export, all languages, all templates and the AI tab.
Get Pro at https://kavro.pro

Requirements

Windows 10 or 11 (64-bit)
A free kavro.pro account (you sign in when Kavro starts)
To build: Visual Studio with the C++ workload (C++), Rust/Cargo (Rust) or the .NET 8 SDK (C#)

I built a desktop client for DeepSeek's coding agent

Wed, 09 Sep 2026 11:33:11 +0000

Built a Windows desktop client for DeepSeek Harness.

V1 packages the official Web UI into a native app with:

One-click installer (bundles its own runtime)
Built-in browser — watch the agent browse in real Edge
Built-in terminal for CLI commands
Sandbox by default — every action needs approval
Bilingual (Chinese + English)

V2 with a fully custom workbench is in active development.

GitHub: https://github.com/See-Sol-Lab/DeepSeekGUI

Feedback welcome!

Your Database GUI Shouldn't Need an Account

Wed, 10 Jun 2026 13:52:44 +0000

A critique of the trend toward account-required database GUI clients, arguing that tools holding production credentials should never route data through vendor backends. The post makes the case for local-first design using Tabularis as a concrete example: no signup, secrets stored in the OS keychain, all config as plain files on disk, bring-your-own-key AI, and only one network call (a GitHub version check). The tradeoffs — no sync, no team workspaces, no telemetry — are acknowledged openly. The core argument is that database clients are plumbing and should be durable and vendor-independent, not coupled to a company's runway.

DevLog 20250507 Bringing Smart Suggestions and Smarter Search to Divooka’s Visual Coding

Sun, 07 Sep 2025 23:39:02 +0000

Learning from Unreal Engine Blueprints

I’ve always admired Unreal Engine’s Blueprints - particularly its subtle yet powerful connection suggestion feature. When you drag a wire out from a pin, the system intuitively suggests compatible nodes based on the pin’s data type.

This kind of context-awareness accelerates creation and keeps workflow fluid by making things just work - no guesswork needed.

The Challenge: Missing Type Labels in C# Instance Methods

Divooka, built atop C#, posed a snag: instance methods don’t include the object’s type in their signature. So if a method like Rotate() belongs to a Transform object, the type isn’t explicitly declared in the method signature - making automatic suggestion tricky.

To match Unreal’s intuitiveness, I needed a way to tell Divooka - not just "Rotate()", but Rotate() on Transform.

Explicit Type Filter in Search Syntax

The first step is to allow users to filter the toolbox explicitly in their search query.

For example: [Pixel Image] Save would filter for methods in the Pixel Image toolbox (category). The symmetry of this syntax remains intuitive even in localized languages like Chinese - because only the type would be translated, not the syntax design itself.

Building the Pipeline: Filtering and Highlighting

Next, I leveled up the search experience by crafting a multi-stage pipeline:

Category names (like [AI Service], [Pixel Image]) now at the front, so users can scope their search by purpose.
Then we optionally parse <TypeName> syntax, which is used to filter input parameters.
Finally, full-text search for other keywords.

So a query might look like:

[Pixel Image] <String> Save

In which case we will search only for functions containing the word "Save" and expects a String parameter. Visually, I emphasized that first category tag with syntax highlighting to help the eye quickly scan.

The Result: It Just Works (Mostly)

Here’s how it currently looks:

Type [Pixel Image] Save.
The search autocomplete suggests all instance methods named Save...() defined in Pixel Image toolbox (mostly operating on the PixelImage object type) (e.g., PixelImage.Save, PixelImage.Load, etc.).
Everything lights up in palette instantly - users can find what they need fast.

What’s Missing: Auto-Connecting Suggestions

This solves the searching half of the problem beautifully - but it doesn’t yet auto-connect. In Unreal, dragging from a Vector pin might instantly suggest Normalize() - and connect it for you if you click that suggestion.

Right now, Divooka still requires a manual drag-and-click - our intention was only searching and filtering, not full drag-and-drop automation.

Next Steps: Toward Full Contextual Suggestions

I’m plotting the future:

Pin-aware suggestion: When dragging a wire from a pin, immediately filter down to matching methods—and optionally even pre-wire the node when hitting “Enter” or double-clicking.
Type inference: Avoid requiring <Type> if the context is obvious - since the system already knows the pin’s type.
Better localization: Make sure category tags and type filters localize cleanly, without mangling grammar in languages like Chinese, Japanese, etc.
Enhanced UX hints: Perhaps grey-out non-matching nodes live, or provide quick tooltips (e.g. “only shows methods on Transform”, like Unreal Blueprint's node search interface).

Summary

Previously, instance-based methods don’t expose their object type; this hampers auto-suggestion. We solved this by introducing explicit <Type> filters and category tags in our search syntax. The result is now the users can quickly locate relevant methods with filtered search - instant clarity. Up next, we want to add full context-aware, auto-connecting suggestion - move from “search” to “smart connection.”

Conclusion

Unreal Blueprints’ delightful node suggestions inspired us to refine Divooka’s search. By introducing syntax like [Category] <Type> Keywords..., Divooka now lets you filter instance-based methods explicitly - greatly improving discoverability. Coming up: auto-connection and smarter, context-aware wiring.

Let me know if you are interesting in learning more specific implementation details - like the regex matching, indexing logic, or localization strategy!

Happy visual coding!

Some Ranting on Dev.to and Opinion on UI Design

Mon, 04 Aug 2025 19:43:11 +0000

Overview

Each platform strives to provide its best and each has its pros and cons. Some are simple technical issues - like the Markdown editor of CoderLegion, some are serious design flaws (like there is no way to manage brushes in Affinity Photo).

Today I was going to comb my thoughts and write something on Dev.to and was shocked so see this.

This ugly new feature is driving me mad.

It's one of the things I don't like about Discord/Slack. The interface is so clustered with irrelevant things or buttons that I rarely click on or need. And there are too many colors.

Now Dev.to is completely ruining the used-to-be quiet and focused writing experience. Just look at the screenshot below:

It's honestly so annoying I can't bear staying on this site any second longer. What's worse, because of this total distraction, I almost forgot what I was about to write.

Alternatives

I would love to officially moving to CoderLegion for canonical Dev Logs, but the image uploading experience is also not smooth. So that's a dilemma.

We have the official Methodox Blog on WordPress. For those who aren't familiar with its content management system - it requires uploading images to the blog server for every single thing you display (or else use plugins) and is really inconvenient if one just want to share quick screenshots.

Medium is actually great writing experience, but its design feels more suited for literature work than for tech.

Ideal Scenario

Here I propose a concept "QuietSpace" for distraction-free blogging.

Key ideas:

Medium style editing interface
Dev.to style Markdown and easy image uploading through dropping and pasting, single button Preview
CDN for blog contents
GitHub style support for video and YouTube embedding.

Key formatting elements:

Fully support tables (a issue in both CoderLegion and Medium)
Fully support images gifs and videos (through CDN link) (an issue in Dev.to)

Web editor, optional desktop editor. No dedicated subdomain: url path for user. No ads, central explore and save articles. May even be paid writing experience at $5 per month. Easy sharing, simple commenting.

Used for: DevLog.

Derivation: dedicated blog-style web hosting, like the simplest form of Word Press.

Summary

There are many blogging and posting platforms and each has distinct features. As a developer we seek a balance between publicity, platform friendliness and technical satisfaction. I think the best platform has to be customized for custom needs. While generic customizable frameworks exist, the customization process right now still take too much tweaking. Will AI solve this problem? I doubt it, as I see missing pieces in basic infrastructure that's not easily addressed with smart agents.

Follow Up

I was writing this post bearing in mind I have to suffer the new UI update of Dev.to - life felt truly like a compromise.

However, the dev team addressed the issue within an hour! I didn't even expect them to notice my post. Salute To Dev.To Dev Team! See discussion on the post on Dev.to.

Exploring More in Tkinter

Tue, 23 Apr 2024 21:35:28 +0000

In this article, we'll delve into some of the more intricate aspects of Tkinter, exploring advanced techniques that will empower you to create even more powerful and polished GUI applications. Throughout our exploration, we'll uncover invaluable tools such as the ttk module for enhanced widget styling, the Canvas widget for versatile graphics rendering, and the Grid geometry manager for precise layout control. From custom themes to file handling strategies, gear up to elevate your Tkinter expertise to the next level.

If you are new to Tkinter, I highly recommend you to thoroughly review this article or the official documentation. Familiarizing yourself with its contents will provide a solid foundation for understanding and effectively utilizing Tkinter.

In the code snippets provided, add these lines in the beginning:

import tkinter as tk
from tkinter import ttk
window = tk.Tk()
window.geometry("457x335")

and this line at the end:

window.mainloop()

Custom Styles and Themes

Tkinter enables customized visual presentation through custom styles and themes, using the ttk module for personalized widget designs, ensuring consistency across platforms.

To deepen our understanding, let's personalize our textbox, button, and label by customizing their appearance:

import tkinter as tk
from tkinter import ttk

def submit_text():
    text = text_entry.get()
    text_label.config(text=text, font=("Times New Roman", 12, "bold"), foreground="green")     #customize label

window = tk.Tk()
window.geometry("457x335")
window.title("Custom Styles")

style = ttk.Style()     #to define custom styles
style.configure("Custom.TEntry", foreground="blue", fieldbackground="lightblue")     #customize textbox
style.configure("Custom.TButton", foreground="red", background="red")     #customize button

text_entry = ttk.Entry(window, width=30, style="Custom.TEntry")
text_entry.pack(padx=10, pady=10)
submit_button = ttk.Button(window, text="Submit", command=submit_text, style="Custom.TButton")     #sends entered text to the submit_text() function
submit_button.pack(padx=10, pady=5)
text_label = ttk.Label(window)
text_label.pack(padx=10, pady=10)
window.mainloop()

The submit_text function retrieves your text from the text_entry textbox and updates the text_label with it. The label's appearance is customized using Times New Roman font, size 12, bold, and green color. Custom styles (Custom.TEntry for the textbox and Custom.TButton for the button) are defined and configured using the ttk.Style() method to set properties like foreground and background colors.

Integration with Python Libraries

Tkinter can be integrated with other Python libraries and tools to enhance its functionality:

Integration with Matplotlib: You can make your Tkinter app more informative by adding interactive charts to display data trends or visualizations. By integrating Matplotlib, a popular Python library for creating charts and graphs, you can easily embed dynamic plots directly into your Tkinter windows.
Integration with Scikit-learn: You can combine Tkinter with Scikit-learn to develop GUI applications for machine learning tasks such as classification, regression, and clustering. This integration enables us to build interactive interfaces for training models, evaluating performance, and making predictions.

Note: In order to install sklearn library locally, run the command: `pip install scikit-learn`

Caution: Ensure local compatibility by installing `matplotlib` and `matplotlib.backends.backend_tkagg` before running this code.

Let's delve into the concept using an example of Linear Regression applied to predict outcomes for the Diabetes dataset:

import tkinter as tk
from tkinter import ttk     #for themed widgets
import matplotlib.pyplot as plt
from sklearn.datasets import load_diabetes
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LinearRegression
from sklearn.metrics import mean_squared_error

diabetes = load_diabetes()     #Load the dataset
X_train, X_test, y_train, y_test = train_test_split(diabetes.data, diabetes.target, test_size=0.2, random_state=42)

window = tk.Tk()
window.geometry("650x500")
window.title("Diabetes Linear Regression")

def train_and_plot():
    model = LinearRegression()
    model.fit(X_train, y_train)     #train
    y_pred_train = model.predict(X_train)     #predict
    y_pred_test = model.predict(X_test)
    mse_train = mean_squared_error(y_train, y_pred_train)     #calculate mean squared error
    mse_test = mean_squared_error(y_test, y_pred_test)
    
    plt.figure(figsize=(8, 6))     #create the plot
    plt.scatter(y_test, y_pred_test, color='blue')
    plt.plot([min(y_test), max(y_test)], [min(y_test), max(y_test)], color='red', linestyle='--')
    plt.xlabel("Actual")
    plt.ylabel("Predicted")
    plt.title("Linear Regression Graph")
    plt.grid(True)
    plt.tight_layout()     #ensures the plot fits within the Tkinter window
    result_label.config(text=f"Train MSE: {mse_train:.2f}\tTest MSE: {mse_test:.2f}")
    canvas = FigureCanvasTkAgg(plt.gcf(), master=window)     #converts the plot into a format that can be displayed in the Tkinter window
    canvas.draw()
    canvas.get_tk_widget().pack(side=tk.TOP, fill=tk.BOTH, expand=1)     #adds the canvas widget to the Tkinter window.

train_button = ttk.Button(window, text="Train and Plot", command=train_and_plot)
train_button.pack(pady=10)
result_label = ttk.Label(window, text="")
result_label.pack()
window.mainloop()

The train_and_plot function trains a linear regression model on the dataset, predicts the target values, calculates the mean squared error for both training and testing sets, and then plots the predicted values against the actual values using matplotlib. It also displays the calculated mean squared errors on your GUI window.

Advanced Widgets

Tkinter provides a wide range of widgets beyond the basic ones like labels and buttons. You can explore and utilize widgets like treeview, notebook, progressbar, etc. to create sophisticated user interfaces.

A treeview to display hierarchical data, like a file explorer.

 import tkinter as tk
 from tkinter import ttk     #for themed widgets
 window = tk.Tk()
 window.geometry("640x300")
 tree = ttk.Treeview(window)
 tree["columns"] = ("Fruits", "Quantity")
 tree.heading("#0", text="Sr. No.")     #First column (index=0) will be Sr. No.
 tree.heading("Fruits", text="Fruits")
 tree.heading("Quantity", text="Quantity (kg)")
 tree.insert("", tk.END, text="1", values=("Apple", 30))
 tree.insert("", tk.END, text="2", values=("Orange", 25))
 tree.insert("", tk.END, text="3", values=("Mango", 29))
 tree.pack()
 window.mainloop()

The Treeview widget tree consists of two columns: "Fruits" and "Quantity (kg)". The heading method sets headings for each column, and the insert method adds items to the Treeview. Each item is inserted with a unique identifier "Sr. No." and its corresponding values for "Fruits" and "Quantity" are entered.

A notebook to organize your app into different tabs, like in a web browser.

 import tkinter as tk
 from tkinter import ttk     #for themed widgets
 window = tk.Tk()
 window.geometry("457x335")
 notebook = ttk.Notebook(window)
 tab1 = ttk.Frame(notebook)
 tab2 = ttk.Frame(notebook)
 tab3 = ttk.Frame(notebook)
 label1 = tk.Label(tab1, text="This is Tab 1")     #for tab 1
 label1.pack()
 entry2 = tk.Entry(tab2)     #for tab 2
 entry2.pack()
 check_var = tk.BooleanVar()
 check_button3 = tk.Checkbutton(tab3, text="This is Tab 3", variable=check_var)     #for tab 3
 check_button3.pack()
 notebook.add(tab1, text="Tab 1")
 notebook.add(tab2, text="Tab 2")
 notebook.add(tab3, text="Tab 3")
 notebook.pack()
 window.mainloop()

It creates a Notebook widget notebook, which allows 3 tabs to be displayed, namely Tab 1, Tab 2, and Tab 3, ceated using ttk.Frame. Tab 1 contains a Label widget with the text "This is Tab 1". Tab 2 contains an Entry widget for user input. Tab 3 contains a Checkbutton widget with the text "This is Tab 3".

A progressbar to show how far along a task is, like when you're downloading a file.

 import tkinter as tk
 from tkinter import ttk
 import time
    
 def start_task():
     progress_bar.start(10)     #start the progressbar (animation is updated every 10 milliseconds)
     window.after(3000, stop_task)     #simulate task completion after 3 seconds
    
 def stop_task():
     progress_bar.stop()      #stop the progressbar
    
 window = tk.Tk()
 window.geometry("457x335")
 progress_bar = ttk.Progressbar(window, orient="horizontal", length=200, mode="indeterminate")
 progress_bar.pack()
 start_button = tk.Button(window, text="Start Task", command=start_task)
 start_button.pack(pady=20)
 window.mainloop()

When the "Start Task" button is clicked, it triggers the start_task function, which starts the progress bar animation using the start method. The after method is used to schedule the stop_task function to run after 3 seconds. The stop_task function stops the progress bar animation using the stop method.

Advanced Layout Management

Advanced Layout Management can be used to make your Tkinter app look polished. Layout management helps you move widgets around and make your app look just the way you want using grid, place, and pack managers.

Grid
You can place widgets in rows and columns, and they will organize neatly into place.

  import tkinter as tk
  window = tk.Tk()
  window.geometry("457x335")
  label1 = tk.Label(window, text="Subject")
  label2 = tk.Label(window, text="Marks")
  entry1 = tk.Entry(window)     #Widgets
  entry2 = tk.Entry(window)
  entry3 = tk.Entry(window)
  entry4 = tk.Entry(window)
  label1.grid(row=0, column=0)     #Layout
  label2.grid(row=0, column=1)
  entry1.grid(row=1, column=0)
  entry2.grid(row=1, column=1)
  entry3.grid(row=2, column=0)
  entry4.grid(row=2, column=1)
  window.mainloop()

This code sets up 2 labels Subject and Marks and 4 entry widgets for data input. The layout is organized with Subject in row 0, column 0, Marks in row 0, column 1. Entry widgets entry1 and entry2 occupy row 1, columns 0 and 1 respectively, while entry3 and entry4 are in row 2, columns 0 and 1.

Pack
You can stack widgets on top of each other or arrange them side by side, and Tkinter will figure out how to fit them all in.

  import tkinter as tk
  window = tk.Tk()
  window.geometry("457x335")
  button1 = tk.Button(window, text="Left")     #Widgets
  button2 = tk.Button(window, text="Top")
  button3 = tk.Button(window, text="Right")
  button4 = tk.Button(window, text="Bottom")
  button1.pack(side=tk.LEFT)     #Layout
  button2.pack(side=tk.TOP)
  button3.pack(side=tk.RIGHT)
  button4.pack(side=tk.BOTTOM)
  window.mainloop()

The buttons button1, button2, button3 and button4 are positioned by providing the side parameter with values tk.LEFT, tk.TOP, tk.RIGHT, or tk.BOTTOM respectively.

Place
You can specify exactly where you want each widget to go by giving it coordinates, like x and y coordinates on a graph.

  import tkinter as tk
  window = tk.Tk()
  window.geometry("457x335")
  label1 = tk.Label(window, text="x_50_y_50")     #Widgets
  label2 = tk.Label(window, text="x_200_y_200")
  label1.place(x=50, y=50)     #Layout
  label2.place(x=200, y=200)
  window.mainloop()

The place method is used to position label widgets. label1 is placed at coordinates (50, 50), and label2 is placed at coordinates (200, 200).

File Handling

Tkinter facilitates file handling through the filedialog tool, enabling users to interactively select files on their computer. With this feature, your application can support tasks like creating, opening, saving, and editing various file types such as documents, images, or spreadsheets.

Let's understand this using an example:

import tkinter as tk
from tkinter import filedialog

def open_file():
    file_path = filedialog.askopenfilename()     #opens a dialog window to select an existing file or create a new one
    if not file_path:
        return
    with open(file_path, 'a+') as file:     #'a+' to append the text to the file
        file.write("January\n")
        file.write("February\n")
        file.write("March\n")
        file.write("April\n")
        file.write("May\n")
    status_label.config(text=f"File '{file_path}' has been written and closed.")

window = tk.Tk()
window.geometry("457x335")
window.title("File Writer")
open_button = tk.Button(window, text="Open a File", command=open_file)
open_button.pack(pady=20)
status_label = tk.Label(window, text="")
status_label.pack()
root.mainloop()

When clicked, the button "Open a File" triggers the open_file function, which opens a dialog window allowing you to select an existing file or create a new one. If a file is selected, the code appends the strings "January", "February"..."May" to the file and the file is closed. The status_label is then updated to display a message confirming the file write operation.

Note: The file will automatically be closed when the `with` block is exited. However, you may explicitly close the file by calling `file.close()`.

Tkinter offers both modal and modeless dialogs, ideal for user input, confirmation messages, or notifications. The tkinter.messagebox module provides standard message boxes, while custom dialog windows can be created using Toplevel widgets.

Modal dialogs are windows that require the user to interact with them before returning to the main application window. They typically block interaction with other windows in the application until they are closed.

  import tkinter as tk
  from tkinter import messagebox

  def show_modal_dialog():
      messagebox.showinfo("Modal Dialog", "Pay attention to this dialog box!")     #does not let you proceed until you click the "OK" button

  window = tk.Tk()
  window.geometry("457x335")
  window.title("Modal Dialog Example")
  modal_button = tk.Button(window, text="Click me", command=show_modal_dialog)
  modal_button.pack(padx=20, pady=10)
  window.mainloop()

Modeless dialogs are windows that allow the user to interact with both the dialog and the main application window simultaneously. They do not block interaction with other windows in the application, allowing the user to switch between them freely.

  import tkinter as tk

  def show_modeless_dialog():
      modeless_dialog = tk.Toplevel(window)     #allows you to interact with other open windows
      modeless_dialog.title("Modeless Dialog")
      modeless_dialog.geometry("250x100")
      label = tk.Label(modeless_dialog, text="Have a nice day!")
      label.pack(padx=20, pady=10)

  window = tk.Tk()
  window.geometry("457x335")
  window.title("Modeless Dialog Example")
  modeless_button = tk.Button(window, text="Click me", command=show_modeless_dialog)
  modeless_button.pack(padx=20, pady=10)
  window.mainloop()

When clicked, the button "Click me" triggers the show_modeless_dialog function, which creates a modeless dialog box using the Toplevel widget. It will not hinder your interaction with the other windows.

Tip: Using a class for modeless dialogs can organize and encapsulate dialog functionality, particularly for more intricate dialogs with multiple components and interactions.

Conclusion

Tkinter is a versatile Python GUI framework that enhances user interaction and functionality. With features like custom themes, threading, file handling, dialogs, layout management, advanced widgets, and integration with libraries like Matplotlib and scikit-learn, Tkinter empowers developers to create dynamic desktop applications. By leveraging these capabilities, developers can craft unique GUIs that elevate user experience, making Tkinter a top choice for Python GUI projects.

Building a Calculator using tkinter

Tue, 02 Apr 2024 20:46:16 +0000

When working on a basic calculator with Tkinter, a widely-used GUI toolkit for Python, Tkinter streamlines the incorporation of user-friendly elements such as buttons, entries, grids, and custom styles that are necessary for crafting graphical user interfaces, making it particularly well-suited for applications. Its simplicity and efficiency in managing user interactions make it an ideal choice for projects of this nature.

Creating the Calculator

Now let us actually dive into the process of building the calculator, one step at a time. All the required steps are given below; follow them one by one, and you will be able to develop an efficient and interactive calculator.

Step 1: Setting Up Environment

Before we start building our calculator, ensure that you have Python installed on your system. To do so, the following section gives a short guide on the steps to be followed for different platforms.

For Windows:

Download and install Python from the official website
Verify by running the following command:
```
 python --version
```

For Linux:

Open terminal and copy and paste the code

 sudo apt-get update
 sudo apt-get install python3

Once installed verify by running the following command
```
 python --version
```

For MacOs:

Download and install Python from the official website
For reference Steps to install python on MacOs

Next, we need to install Tkinter, which is included with Python by default. So, there's no need to install it separately

Step 2: Importing Libraries

In Python, the tkinter module is used for creating GUI applications.
Now let's import these required libraries along with other required modules:

import tkinter as tk
from tkinter import messagebox

Explanation

tkinter: This module provides classes and functions for creating GUI applications.

messagebox: This submodule allows us to display message boxes for showing information or prompting the user for confirmation.

Step 3: Creating the Calculator Class

Create a class called class Calculator that will represent our calculator application:

class Calculator:
    def __init__(self, master):
        self.master = master
        self.master.title("Simple Calculator")
        self.master.geometry("300x400")
        self.master.resizable(False, False)
        self.create_widgets()

    def create_widgets(self):
        # Create entry widget for displaying input and results
        self.entry = tk.Entry(self.master, width=20, font=('Arial', 14), bd=5, justify="right")
        self.entry.grid(row=0, column=0, columnspan=4, padx=10, pady=10)

        # Define buttons
        buttons = [
            ('7', 1, 0), ('8', 1, 1), ('9', 1, 2), ('/', 1, 3),
            ('4', 2, 0), ('5', 2, 1), ('6', 2, 2), ('*', 2, 3),
            ('1', 3, 0), ('2', 3, 1), ('3', 3, 2), ('-', 3, 3),
            ('0', 4, 0), ('.', 4, 1), ('=', 4, 2), ('+', 4, 3)
        ]

        # Create buttons using a loop
        for (text, row, col) in buttons:
            button = tk.Button(self.master, text=text, width=5, height=2, 
            font=('Arial', 14), command=lambda t=text: self.on_button_click(t))
            button.grid(row=row, column=col, padx=5, pady=5)

Initialization

The init method in the Calculator class sets up the basic features of the calculator when it's first created. It's like laying out the blueprint for how the calculator will look and work. The master part helps position the calculator in the right place on the screen. self.master.title("Simple Calculator") gives the calculator window a name, like "Simple Calculator". The self.master.geometry("300x400") part determines how big the calculator window will be, making sure it's neither too small nor too big. The lineself.master.resizable(False, False) prevents users from changing the size of the calculator window, keeping it neat and tidy. Finally, self.create_widgets() starts the process of actually creating all the buttons and numbers you see on the calculator screen. It's like setting up the stage before the show begins. So, with all these steps, the calculator is ready to go when you open it up!

Widget Creation

The create_widgets method orchestrates the construction of the calculator's user interface, beginning with the establishment of an entry widget named self.entry for displaying input and results, meticulously configured with specific attributes such as width, font size, border width, and text alignment. Positioned within the window using the grid method, this entry widget ensures clarity and organization of numerical data. Subsequently, utilizing a list named buttons containing tuples of button details, the method dynamically generates button widgets for each entry within the list. These buttons, equipped with attributes such as text labels and dimensions, are seamlessly integrated into the window using the grid method, with each button assigned a command to execute the on_button_click method upon interaction, passing the corresponding button text as an argument. Through meticulous placement and configuration, the create_widgets method establishes a coherent and functional user interface, essential for intuitive interaction and efficient calculation.

Step 4: Implementing Button Click Functionality

Next, we define the on_button_click() method to handle button clicks:

def on_button_click(self, text):
     if text == '=':
          try:
              result = eval(self.entry.get())
              self.entry.delete(0, tk.END)
              self.entry.insert(tk.END, str(result))
          except Exception as e:
              messagebox.showerror("Error", "Invalid Input")

          elif text == 'C':
              self.entry.delete(0, tk.END)

          else:
              self.entry.insert(tk.END, text)

Explanation:

In this block of code, several conditional statements and actions are executed based on the text of the clicked button within the calculator interface. First, there's a check to see if the button text is equal to '=' (the equal sign). If so, the mathematical expression entered in the entry widget (self.entry) is evaluated using the eval() function, and the result is stored in the result variable. The contents of the entry widget are then cleared using self.entry.delete(0, tk.END), and the calculated result is inserted into the entry widget using self.entry.insert(tk.END, str(result)). In case an exception occurs during evaluation, it's caught using a try-except block, and an error message box is displayed using messagebox.showerror("Error", "Invalid Input"). Lastly, the text of the clicked button is inserted into the entry widget at the end (tk.END) using self.entry.insert(tk.END, text), allowing users to append their input string. These actions ensure proper functionality and user feedback within the calculator interface, facilitating smooth interaction and accurate computation.

Step 5: Driver Function

Lastly, we need to create an instance of the Calculator class and run the main event loop:

 if __name__ == "__main__":
     root = tk.Tk()
     app = Calculator(root)
     root.mainloop()

Explanation:

The line if __name__ == "__main__" serves as a conditional statement that ensures that the subsequent code block is executed only if the Python script is directly run by the interpreter, rather than being imported as a module into another script. Following this condition, root = tk.Tk() initializes a new instance of the Tkinter Tk class, establishing the main window or root window for the graphical user interface (GUI) application. This window acts as a container for all other GUI elements to be displayed. Subsequently, app = Calculator(root) creates an instance of the Calculator class, utilizing the root window as an argument, thereby initializing the calculator application within this main window. Lastly, root.mainloop() initiates the Tkinter event loop, a critical component that continuously listens for user interactions, such as button clicks and window resizing, effectively maintaining the responsiveness of the GUI. This function call essentially blocks further script execution until the main window is closed by the user, ensuring the seamless functioning of the GUI application.

Step 6: Outcome of Implementation

Code snippet

import tkinter as tk
from tkinter import messagebox

class Calculator:
    def __init__(self, master):
        self.master = master
        self.master.title("Simple Calculator")
        self.master.geometry("300x400")
        self.master.resizable(False, False)
        self.create_widgets()

    # creating the widgets
    
    def create_widgets(self):
        # Create entry widget for displaying input and results
        self.entry = tk.Entry(
            self.master, width=20, font=("Arial", 14), bd=5, justify="right"
        )
        self.entry.grid(row=0, column=0, columnspan=4, padx=10, pady=10)

        # Define buttons
        buttons = [
            ("7", 1, 0),
            ("8", 1, 1),
            ("9", 1, 2),
            ("/", 1, 3),
            ("4", 2, 0),
            ("5", 2, 1),
            ("6", 2, 2),
            ("*", 2, 3),
            ("1", 3, 0),
            ("2", 3, 1),
            ("3", 3, 2),
            ("-", 3, 3),
            ("0", 4, 0),
            (".", 4, 1),
            ("=", 4, 2),
            ("+", 4, 3),
        ]

        # Create buttons using a loop
        for text, row, col in buttons:
            button = tk.Button(
                self.master,
                text=text,
                width=5,
                height=2,
                font=("Arial", 14),
                command=lambda t=text: self.on_button_click(t),
            )
            button.grid(row=row, column=col, padx=5, pady=5)

    # funtion creation for on click feature
    def on_button_click(self, text):
        if text == "=":
            try:
                result = eval(self.entry.get())
                self.entry.delete(0, tk.END)
                self.entry.insert(tk.END, str(result))
            except Exception as e:
                messagebox.showerror("Error", "Invalid Input")

        elif text == "C":
            self.entry.delete(0, tk.END)

        else:
            self.entry.insert(tk.END, text)

    # main funtion is defined                
    if __name__ == "__main__":
        root = tk.Tk()
        app = Calculator(root)
        root.mainloop()

Understanding Code Functionality

When the calculator starts, it creates a window with an entry widget. This widget is where you can input numbers and view the results.
The calculator has buttons for digits from 0 to 9, the decimal point '.', and arithmetic operations like addition '+', subtraction '-', multiplication '*', and division '/'. These buttons are arranged in a grid layout.

Tip: Implement input validation to avoid potential security vulnerabilities or crashes.

When a button is clicked, it triggers the on_button_click function. If the button is an arithmetic operation or a digit, it adds that value to the entry widget. If the button is '=' (equal sign), it evaluates the expression in the entry widget and displays the result. If it's 'C' (clear), it clears the entry widget.
When '=' is pressed, it tries to evaluate the expression entered in the entry widget using Python's eval() function. If the expression is valid, it computes the result and displays it in the entry widget. If there's an error, such as invalid input or division by zero, it shows an error message.

Warning: Avoid using the eval() function with untrusted input to prevent code injection vulnerabilities.

The program keeps running in a loop, waiting for user interactions, until the window is closed.
Users can input numbers and perform arithmetic operations by clicking the respective buttons. They can clear the input by clicking 'C' and get the result by clicking '='.

Calculator Functionality Flowchart

Following is an illustration of the functionality of a simple calculator program through a clear and logical flowchart.

Testing Result

Possible Errors that might occur

In building a calculator using Tkinter, potential errors include syntax mistakes, input validation issues, and challenges with complex operations. Effective debugging is crucial for ensuring the calculator functions reliably. Have a look at some of the problems along with their solutions that are listed below.

Division by zero error:

Problem: If the user divides by zero, Python will raise a ZeroDivisionError.

Solution: Handle division by zero within the try-except block.

try:
    result = eval(self.entry.get())
    if result == float('inf'):
         messagebox.showerror("Error", "Division by zero")
    else:
        self.entry.delete(0, tk.END)
        self.entry.insert(tk.END, str(result))

Syntax error in evaluation:

Problem: If the user enters an invalid expression that can't be evaluated, it will raise a SyntaxError.

Solution: Catch SyntaxError and display an appropriate error message.

except SyntaxError:
messagebox.showerror("Error", "Invalid Expression")

NameError due to undefined variable:

Problem: The code checks for the '=' and 'C' buttons, but they're not defined in the button list.

Solution: Add the '=' and 'C' buttons to the list with their respective positions.

buttons = [
   ...
   ('=', 4, 2), ('C', 4, 0)
]

Missing import statement:

Problem: The code uses messagebox without importing it.

Solution: Import messagebox from tkinter.

from tkinter import messagebox

Unsupported operations:

Problem: The calculator allows arbitrary evaluation of expressions using eval(), which can lead to unintended consequences.

Solution: Restrict the input to a certain format or implement a safer method for evaluation, such as parsing the expression manually.
Here's a safer approach to evaluate expressions using ast.literal_eval():

import ast
def evaluate_expression(self, expression):
    try:
        return ast.literal_eval(expression)
    except (SyntaxError, ValueError):
        raise ValueError("Invalid expression")
  
def on_button_click(self, text):
    if text == '=':
        try:
            result = self.evaluate_expression(self.entry.get())
            self.entry.delete(0, tk.END)
            self.entry.insert(tk.END, str(result))
        except ValueError as e:
            messagebox.showerror("Error", str(e))

Conclusion:

In conclusion, developing a simple calculator using Tkinter in Python, offers a practical introduction to GUI application development. Tkinter's intuitive design, coupled with its cross-platform compatibility, empowers developers to create interactive interfaces effortlessly. By leveraging Tkinter's event-driven model, we constructed a calculator with basic arithmetic operations, error handling, and clear functionality. Utilizing widgets like Entry and Button, we orchestrated a user-friendly interface, enhancing accessibility and the user experience.

Throughout the process, we capitalized on object-oriented programming principles, encapsulating functionality within the Calculator class. This modular approach facilitates code organization and maintenance, promoting scalability and extensibility. Moreover, the integration of error handling mechanisms, such as try-except blocks and message boxes, underscores the importance of robustness in software design. These measures ensure graceful handling of unexpected inputs, enhancing the calculator's reliability and user confidence.

By adhering to best practices and leveraging Tkinter's capabilities, we've crafted a functional calculator application that demonstrates the synergy between Python's versatility and Tkinter's simplicity. This endeavor serves as a springboard for aspiring developers to delve deeper into GUI programming and explore the myriad possibilities of Python's ecosystem.

Tkinter ToDo GUI Application (Step by Step Guide)

Wed, 27 Mar 2024 23:10:38 +0000

In this article, we'll dive into the world of Tkinter, a popular GUI (Graphical User Interface) toolkit for Python, and harness its capabilities to build a robust to-do list application from scratch. I'll walk you through each step, from designing a user-friendly interface to adding crucial functions like task creation, deletion and prioritization.

Project Prerequisites

Before starting to build a to-do list app with Tkinter, make sure you have the following:

Python Installed: Have Python installed on your computer. Tkinter comes included with Python, so no separate installation is needed.
For Windows: Download and install Python from the official website.

For Ubuntu: You can download Python using the terminal:

     sudo apt update
     sudo apt install python3

For MacOS: You can download Python using Homebrew:
```
     brew install python3
```

Note: To confirm the installation, enter `python3 --version` in the terminal.

Text Editor or IDE: Select a preferred text editor or IDE, such as Visual Studio Code or PyCharm, to write and execute Python code.
Basic Python Skills: Learn core Python concepts: variables, data types, functions, and control flow.
Tkinter Basics: Basic familiarity with Tkinter, including widgets and event handling, can be useful. You can learn through Tkinter documentation or this article.

Designing the User Interface

Importing necessary Libraries
Tkinter (tk) is the go-to module for GUI applications, complemented by ttk for themed widgets, offering a modern appearance. Utilizing the messagebox module enables the display of user interaction messages. Additionally, SQLite3, a lightweight database engine, handles local data storage and management for our tasks.

import tkinter as tk
from tkinter import ttk, messagebox
import sqlite3

Creating the Main Window
We create the main window using Tkinter, set its size, and instantiate the TodoListApp class (discussed later) to integrate its functionalities. Finally, we start the event loop for user interaction.

window = tk.Tk()
window.geometry("457x335")
app = TodoListApp(window)
window.mainloop()

Adding a Title and necessary Frames and Labels
You can add a catchy title to your To-Do app. I have named it "Todo List App". The app features two frames: one for entering new tasks and another for displaying existing ones. The new task frame includes labels for "Task Name," "Priority," and "Deadline."

self.window = window
window.title("Todo List App")
entry_frame = ttk.Frame(self.window)
entry_frame.pack(padx=10, pady=10, fill=tk.X)
ttk.Label(entry_frame, text="Task name:").grid(row=0, column=0, padx=5, pady=5)
ttk.Label(entry_frame, text="Priority:").grid(row=1, column=0, padx=5, pady=5)
ttk.Label(entry_frame, text="Deadline:").grid(row=2, column=0, padx=5, pady=5)
self.task_list_frame = ttk.Frame(self.window)
self.task_list_frame.pack(padx=10, pady=5, fill=tk.BOTH, expand=True)

Adding Widgets for Task Entry
To add a new task, provide the task name, priority, and deadline. All tasks require a name and set priority. For urgent tasks, a deadline is mandatory.

self.task_text = tk.StringVar()
self.task_entry = ttk.Entry(entry_frame, textvariable=self.task_text)
self.task_entry.grid(row=0, column=1, padx=5, pady=5)
ttk.Radiobutton(entry_frame, text="Urgent", variable=self.priority_selection, value="Urgent").grid(row=1, column=1, padx=5, pady=5)
ttk.Radiobutton(entry_frame, text="General", variable=self.priority_selection, value="General").grid(row=1, column=2, padx=5, pady=5)
self.task_deadline = tk.StringVar()
self.deadline_entry = ttk.Entry(entry_frame, textvariable=self.task_deadline)
self.deadline_entry.grid(row=2, column=1, padx=5, pady=5)

This code snippet sets up the entry interface for users to input task details. It includes entry fields for users to specify the task name, radio buttons to specify the priority level (either "Urgent" or "General"), and another entry field for the deadline.

Adding Buttons
You will need 2 buttons to be included: one for adding a new task and another for deleting an existing task.

add_button = ttk.Button(entry_frame, text="Add Task", command=self.add_task)
add_button.grid(row=3, column=0, columnspan=3, padx=5, pady=5)
delete_button = ttk.Button(self.window, text="Delete Tasks", command=self.delete_tasks)
delete_button.pack(pady=5)

Here, the first button, "Add Task," triggers the add_task method when clicked. The second button, "Delete Tasks," triggers the delete_tasks method upon activation.

Displaying the List of Entered Tasks
Every task entered into the database table is retrieved and processed. A separate frame is generated for each task, within which labels are utilized to showcase the task details. Furthermore, a checkbutton is included for every task, enabling users to mark tasks as complete once they are fulfilled.

for task in tasks:
        task_id = task[0]
        task_text = task[1]
        task_priority = task[2]
        task_deadline = task[4]
        task_frame = ttk.Frame(self.task_list_frame)
        task_frame.pack(fill=tk.X, padx=5, pady=2)
        task_checkbutton = ttk.Checkbutton(task_frame, command=lambda id=task_id: self.select_task(id))
        task_checkbutton.grid(row=0, column=0)
        if task_priority == "Urgent" or (task_priority == "General" and task_deadline):
            task_label = ttk.Label(task_frame, text=(task_text+"    ("+task_deadline+")"))
        else:
            task_label = ttk.Label(task_frame, text=task_text)
        task_label.grid(row=0, column=1, padx=5)

For each task, relevant details like ID, task, priority, and deadline are extracted. Frames are created to organize task information neatly. task_checkbutton enable task completion marking, while task names are displayed as Labels. If urgent or with a deadline, task names include this information.

This represents the expected appearance of the GUI:

Tip: Customize labels with different colors based on task priorities. See code at the end.

Implementing Functionality

The following functions are defined in the TodoListApp class.

Tip: It is best to encapsulate multiple functions in a class.

Create a Table in the SQLite Database
To store your tasks effectively, a database is necessary. We will proceed by creating a table within an SQLite database for this purpose.

self.c.execute('''CREATE TABLE IF NOT EXISTS tasks (
                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                    task TEXT NOT NULL,
                    priority TEXT,
                    initial_priority TEXT,
                    deadline TEXT
                )''')

self.conn.commit()
The create_table function sets up a table named tasks in the SQLite database. It includes columns for task details such as ID, task (name), priority, initial priority, and deadline. This function ensures that the necessary table structure exists for storing task information and commits the changes to the database.

Caution: Ensure that there is no existing table named `tasks` in the database as it may lead to data loss or corruption if the existing table structure is overwritten or altered unintentionally.

Function to Add Tasks

To add a new task, provide the task name, priority, and deadline. All tasks require a name and set priority. For urgent tasks, a deadline is mandatory.

task_text = self.task_text.get().strip()
task_priority = self.priority_selection.get()
task_deadline = self.task_deadline.get().strip()
if task_text and (task_priority == "General" or (task_priority == "Urgent" and task_deadline)):
    self.c.execute("INSERT INTO tasks (task, priority, initial_priority, deadline) VALUES (?, ?, ?, ?)", (task_text, task_priority, task_priority, task_deadline))
    self.conn.commit()
    self.load_tasks()
    self.task_text.set("")
    self.priority_selection.set("")
    self.task_deadline.set("")
else:
    messagebox.showwarning("Warning", "Task or Priority cannot be empty, and Urgent task must have a deadline.")

It collects task details from input fields. If the name isn't empty and the priority is valid, the task is added to the database. After insertion, the task list refreshes, and input fields reset. If inputs are invalid, a warning message appears.

If task name or priority or deadline for an urgent task is not entered:

After successfully entering a task:

Function to Delete Tasks
To delete tasks, you click the "Delete Tasks" button, opening a window where you select tasks for removal. At least one task must be chosen before clicking "Delete." After confirmation, the selected tasks are deleted from the SQLite table.

This opens a Toplevel window:

delete_window = tk.Toplevel(self.window)
delete_window.geometry("457x335")
delete_window.title("Delete Tasks")
task_list_frame = ttk.Frame(delete_window)     #to contain the list of tasks
task_list_frame.pack(padx=10, pady=10)
self.c.execute("SELECT id, task FROM tasks")      #retrieve tasks from database
tasks = self.c.fetchall()

This displays the retrieved tasks with checkboxes:

for task_id, task_text in tasks:
    task_checkbutton = ttk.Checkbutton(task_list_frame, text=task_text, command=lambda id=task_id: update_selected_tasks(id))
    task_checkbutton.pack(anchor="w", padx=5, pady=2)

This function removes the selected tasks from the table after verifying that at least one task has been chosen:

if not selected_task_ids:
     messagebox.showwarning("Warning", "No tasks selected for deletion.")
     return
for task_id in selected_task_ids:
     self.c.execute("DELETE FROM tasks WHERE id=?", (task_id,))
     self.conn.commit()
     self.load_tasks()

If no task is selected:

Marking tasks 1 and 3 for deletion:

After successful deletion:

Function to Mark Tasks as Complete
When a task is marked as complete, it needs to be updated in the table as well.

self.c.execute("SELECT priority, initial_priority FROM tasks WHERE id=?", (task_id,))
row = self.c.fetchone()
if row:
    current_priority, initial_priority = row
    if current_priority == 'Completed':
        new_priority = initial_priority
    else:
        new_priority = 'Completed'
    self.c.execute("UPDATE tasks SET priority=? WHERE id=?", (new_priority, task_id))
        self.conn.commit()

It fetches the task's priority and initial_priority from the database. If the task is marked as completed, it resets the priority to its initial state; otherwise, it marks the task as completed and updates its priority in the database.

Code Sample

import tkinter as tk
from tkinter import ttk, messagebox
import sqlite3

class TodoListApp:
    def __init__(self, window):
        self.window = window
        self.window.title("Todo List App")
        self.conn = sqlite3.connect("todo.db")
        self.c = self.conn.cursor()
        self.create_table()
        self.selected_tasks = []
        self.priority_selection = tk.StringVar()
        self.create_widgets()
    
    def create_table(self):
        self.c.execute('''CREATE TABLE IF NOT EXISTS tasks (
                            id INTEGER PRIMARY KEY AUTOINCREMENT,
                            task TEXT NOT NULL,
                            priority TEXT,
                            initial_priority TEXT,
                            deadline TEXT
                        )''')
        self.conn.commit()
    
    def create_widgets(self):
        entry_frame = ttk.Frame(self.window)
        entry_frame.pack(padx=10, pady=10, fill=tk.X)
        ttk.Label(entry_frame, text="Task name:").grid(row=0, column=0, padx=5, pady=5)
        self.task_text = tk.StringVar()
        self.task_entry = ttk.Entry(entry_frame, textvariable=self.task_text)
        self.task_entry.grid(row=0, column=1, padx=5, pady=5)
        ttk.Label(entry_frame, text="Priority:").grid(row=1, column=0, padx=5, pady=5)
        ttk.Radiobutton(entry_frame, text="Urgent", variable=self.priority_selection, value="Urgent").grid(row=1, column=1, padx=5, pady=5)
        ttk.Radiobutton(entry_frame, text="General", variable=self.priority_selection, value="General").grid(row=1, column=2, padx=5, pady=5)
        ttk.Label(entry_frame, text="Deadline:").grid(row=2, column=0, padx=5, pady=5)
        self.task_deadline = tk.StringVar()
        self.deadline_entry = ttk.Entry(entry_frame, textvariable=self.task_deadline)
        self.deadline_entry.grid(row=2, column=1, padx=5, pady=5)
        add_button = ttk.Button(entry_frame, text="Add Task", command=self.add_task)
        add_button.grid(row=3, column=0, columnspan=3, padx=5, pady=5)
        self.task_list_frame = ttk.Frame(self.window)
        self.task_list_frame.pack(padx=10, pady=5, fill=tk.BOTH, expand=True)
        self.load_tasks()
        delete_button = ttk.Button(self.window, text="Delete Tasks", command=self.delete_tasks)
        delete_button.pack(pady=5)
        
    def load_tasks(self):
        for widget in self.task_list_frame.winfo_children():
            widget.destroy()
        self.c.execute("SELECT * FROM tasks")
        tasks = self.c.fetchall()
        for task in tasks:
            task_id = task[0]
            task_text = task[1]
            task_priority = task[2]
            task_deadline = task[4]
            task_frame = ttk.Frame(self.task_list_frame)
            task_frame.pack(fill=tk.X, padx=5, pady=2)
            task_checkbutton = ttk.Checkbutton(task_frame, command=lambda id=task_id: self.select_task(id))
            task_checkbutton.grid(row=0, column=0)
            if task_priority == "Urgent" or (task_priority == "General" and task_deadline):
                task_label = ttk.Label(task_frame, text=(task_text+"    ("+task_deadline+")"))
            else:
                task_label = ttk.Label(task_frame, text=task_text)
            task_label.grid(row=0, column=1, padx=5)
            
            if task_priority == "Urgent":
                task_label.config(foreground="red")
            else:
                task_label.config(foreground="blue")
            if task_priority == "Completed":
                task_label.config(foreground="green")
                task_checkbutton.state(['selected'])
    
    def add_task(self):
        task_text = self.task_text.get().strip()
        task_priority = self.priority_selection.get()
        task_deadline = self.task_deadline.get().strip()
        if task_text and (task_priority == "General" or (task_priority == "Urgent" and task_deadline)):
            self.c.execute("INSERT INTO tasks (task, priority, initial_priority, deadline) VALUES (?, ?, ?, ?)", (task_text, task_priority, task_priority, task_deadline))
            self.conn.commit()
            self.load_tasks()
            self.task_text.set("")
            self.priority_selection.set("")
            self.task_deadline.set("")
        else:
            messagebox.showwarning("Warning", "Task or Priority cannot be empty, and Urgent task must have a deadline.")
    
    def select_task(self, task_id):
        self.c.execute("SELECT priority, initial_priority FROM tasks WHERE id=?", (task_id,))
        row = self.c.fetchone()
        if row:
            current_priority, initial_priority = row
            if current_priority == 'Completed':
                new_priority = initial_priority
            else:
                new_priority = 'Completed'
            self.c.execute("UPDATE tasks SET priority=? WHERE id=?", (new_priority, task_id))
            self.conn.commit()
            self.load_tasks()

    def delete_tasks(self):
        delete_window = tk.Toplevel(self.window)
        delete_window.geometry("457x335")
        delete_window.title("Delete Tasks")
        task_list_frame = ttk.Frame(delete_window)
        task_list_frame.pack(padx=10, pady=10)
        self.c.execute("SELECT id, task FROM tasks")
        tasks = self.c.fetchall()
        selected_task_ids = []

        def update_selected_tasks(task_id):
            if task_id in selected_task_ids:
                selected_task_ids.remove(task_id)
            else:
                selected_task_ids.append(task_id)

        def delete_selected_tasks():
            if not selected_task_ids:
                messagebox.showwarning("Warning", "No tasks selected for deletion.")
                return
            for task_id in selected_task_ids:
                self.c.execute("DELETE FROM tasks WHERE id=?", (task_id,))
            self.conn.commit()
            self.load_tasks()
            delete_window.destroy()

        for task_id, task_text in tasks:
            task_checkbutton = ttk.Checkbutton(task_list_frame, text=task_text, command=lambda id=task_id: update_selected_tasks(id))
            task_checkbutton.pack(anchor="w", padx=5, pady=2)

        delete_button = ttk.Button(delete_window, text="Delete", command=delete_selected_tasks)
        delete_button.pack(side="left", padx=5, pady=5)
        cancel_button = ttk.Button(delete_window, text="Cancel", command=delete_window.destroy)
        cancel_button.pack(side="right", padx=5, pady=5)

window = tk.Tk()
window.geometry("457x335")
app = TodoListApp(window)
window.mainloop()

Conclusion

In summary, crafting a Todo List App with Tkinter provides a practical introduction to Python GUI development. You've built an intuitive interface for a To-Do list app with addition, deletion, and task completion features. Using SQLite for data storage, you've showcased Python's versatility. This project offers insights into user experience design, beneficial for aspiring developers.

Tkinter library in Python

Tue, 12 Mar 2024 14:34:38 +0000

In this article, we'll dive into the world of Graphical User Interface (GUI) development using Python's Tkinter library. Tkinter stands as a versatile and user-friendly tool for beginners and advanced programmers alike, simplifying the creation of GUI applications. We aim to demystify the process of working with Tkinter, from understanding its core widgets to leveraging its strengths and navigating its limitations. By the end, you'll be equipped with the essentials of Tkinter to enhance your Python GUI development projects.

Understanding Tkinter

Tkinter, short for Tk interface, is a built-in Python library designed for creating interactive GUI applications. Tkinter, built on the Tk GUI toolkit, streamlines the creation of windows, buttons, menus, and other graphical elements. As an integral part of the Python standard library, Tkinter smoothly integrates with Python projects, requiring no extra installations, for a seamless GUI development experience. The official python tkinter documentation offers in-depth explanations of Tkinter modules, classes, and methods. Visit Documentation

Tip: As you embark on your GUI development journey, start by sketching out the design and functionality of your application before jumping into the code. This can save time and streamline your development process.

Exploring Basic Widgets

We'll begin by exploring some fundamental components you can construct using Tkinter. The following snippets must be preceeded by:

import tkinter as tk
window = tk.Tk()
window.geometry("457x335")

and followed by:

window.mainloop()

Caution: When working with widgets, remember to assign a unique name to each widget variable to avoid confusion, especially when your application starts to grow.

Label

Presents either text or an image, lacking interactive features for users. For more information on label refer official documentation of python.

label = tk.Label(window, text="This is a Label")
label.pack()

Button

An interactive component that executes a specific operation upon being clicked, like dispatching form data or activating a particular function.

def button_click():
    print("Button clicked")

button = tk.Button(window, text="Click here!", command=button_click)
button.pack()

After clicking the button:

Entry

A text field where users can input text or numbers. This component is frequently utilized for entering information or executing search operations.

entry = tk.Entry(window)
entry.pack()

Text

A text field that provides a multi-line text editing area for users to input or display text.

text = tk.Text(window, height=5, width=30)
text.pack()

Scale

Enables users to choose a value from a spectrum by moving a slider control. It is useful for selecting values like volume, brightness, etc.

def update_value(value):
    label.config(text=f"Volume Level: {value}")

scale = tk.Scale(window, from_=0, to=100, orient=tk.HORIZONTAL, command=update_value) #create a scale to select values from 0 to 100

scale.pack()
label = tk.Label(window, text="Volume Level: ")
label.pack()

Spinbox

A numerical input field with up and down arrow buttons for incrementing or decrementing the value.

spinbox = tk.Spinbox(window, from_=0, to=10)
spinbox.pack()

Separator

A horizontal or vertical line to visually separate sections or groups of widgets.

from tkinter import ttk #for themed widgets

label_1 = tk.Label(window, text="This is above the separator.")
label_1.pack()

separator = ttk.Separator(window, orient=tk.HORIZONTAL)
separator.pack(fill=tk.X)

label_2 = tk.Label(window, text="This is below the separator.")
label_2.pack()

Checkbutton

A checkbox enabling users to toggle between selecting and deselecting an option.

check_var = tk.BooleanVar() #To keep track of the checkbox's state (checked or unchecked)
check_button = tk.Checkbutton(window, text="Checkbox", variable=check_var)
check_button.pack()

Radiobutton

A group of radio buttons, ensuring that users can select only one option from a list of choices.

radio_var = tk.StringVar() #To track which radio button is selected
radio_1 = tk.Radiobutton(window, text="Option 1", variable=radio_var, value="Option 1")
radio_2 = tk.Radiobutton(window, text="Option 2", variable=radio_var, value="Option 2")
radio_1.pack()
radio_2.pack()

Listbox

A widget presenting a list of items, allowing users to select one or more options from the list.

Scrollbar

Permits users to navigate through content surpassing the widget's visible boundaries, like in a text field or list.

listbox = tk.Listbox(window)
scrollbar = tk.Scrollbar(window)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y) #scrollbar will be at the right side of the window and expands vertically
listbox.pack(side=tk.LEFT, fill=tk.BOTH) #listbox will be at the left side of the window and expands horizontally and vertically
listbox.config(yscrollcommand=scrollbar.set) #Attach scrollbar to listbox
scrollbar.config(command=listbox.yview)

for i in range(30):
    listbox.insert(tk.END, f"Item {i+1}")

ColorChooser

A dialog for users to select a color. It provides a graphical interface for choosing colors using a palette or entering RGB values.

from tkinter import colorchooser

def choose_color():
    color = colorchooser.askcolor()
    print("Selected color:", color)

button = tk.Button(window, text="Choose Color", command=choose_color)
button.pack()

Frame

A container used to group and organize other widgets. It is frequently used for layout purposes, creating sections or divisions within a window.

frame = tk.Frame(window, bg="lightblue", bd=5)
frame.pack()

label = tk.Label(frame, text="Inside the Frame", bg="lightblue")
label.pack()

Canvas

Provides a drawing area for creating graphics, shapes, and custom elements. It is used for creating diagrams, charts, and interactive visualizations.

canvas = tk.Canvas(window, width=200, height=100, bg="white")
canvas.pack()
canvas.create_rectangle(50, 25, 150, 75, fill="red") #draw a red-coloured rectangle

PanedWindow

A container for arranging multiple panes or frames with adjustable sizes. It allows users to resize panes by dragging the divider between them.

paned_window = tk.PanedWindow(window, orient=tk.HORIZONTAL)
paned_window.pack(fill=tk.BOTH, expand=True) #will expand both horizontally and vertically
frame1 = tk.Frame(paned_window, width=228, height=200, background="red")
frame2 = tk.Frame(paned_window, width=228, height=200, background="blue")
paned_window.add(frame1)
paned_window.add(frame2)

After dragging the divider to the left:

Creates a menu bar or dropdown menu with options and commands. It is commonly used to include navigation, settings and additional functionalities into the application's interface.

def print_something():
    print("You chose the first option")

menu_bar = tk.Menu(window)

file_menu = tk.Menu(menu_bar, tearoff=0)
file_menu.add_command(label="Print Something", command=print_something)
file_menu.add_separator()
file_menu.add_command(label="Exit", command=window.quit)
menu_bar.add_cascade(label="Click to see options", menu=file_menu)
window.config(menu=menu_bar)

After selecting "Print Something":

These elements serve as fundamental components for Tkinter GUI applications, frequently employed across diverse projects to develop intuitive interfaces.

To delve deeper into Tkinter and explore its capabilities, you can start with the following sections of the Python documentation:

Tkinter — Python interface to Tcl/Tk: This section provides the foundational knowledge required to create GUI applications with Tkinter, including widget classes, event handling, and more Python Tkinter Documentation.

Graphical User Interfaces with Tk: This part of the documentation discusses the integration of Tk/Tcl with Python, offering insights into the architecture of Tkinter applications, the Tkinter module, and thematic widget extensions Python GUI with Tk.

Tkinter.ttk — Tk themed widgets: For those interested in using themed widgets for a more modern GUI look, this section details the thematic widget set provided by Tk 8.5 and integrated into Tkinter Themed Widgets.

Conclusion

Tkinter is a versatile and user-friendly toolkit for Python GUI development, offering a rich set of widgets, cross-platform compatibility, and seamless integration with Python code. Despite its limitations, Tkinter remains a popular choice for developers looking for efficient creation of simple to moderately complex GUI applications.

Coder Legion - Recent posts tagged gui

Kavro.Pro Stop writing your UI by hand.

Design Dear ImGui menus visually, then build a real .exe

What you can do

Free and Pro

Requirements

Links

I built a desktop client for DeepSeek's coding agent

Your Database GUI Shouldn't Need an Account

DevLog 20250507 Bringing Smart Suggestions and Smarter Search to Divooka’s Visual Coding

Learning from Unreal Engine Blueprints

The Challenge: Missing Type Labels in C# Instance Methods

Explicit Type Filter in Search Syntax

Building the Pipeline: Filtering and Highlighting

The Result: It Just Works (Mostly)

What’s Missing: Auto-Connecting Suggestions

Next Steps: Toward Full Contextual Suggestions

Summary

Conclusion

Some Ranting on Dev.to and Opinion on UI Design

Overview

Distracting Side Bar

Alternatives

Ideal Scenario

Summary

Follow Up

Exploring More in Tkinter

Custom Styles and Themes

Integration with Python Libraries

Advanced Widgets

Advanced Layout Management

File Handling

Modal and Modeless Dialogs

Conclusion

Building a Calculator using tkinter

Creating the Calculator

Step 1: Setting Up Environment

Step 2: Importing Libraries

Step 3: Creating the Calculator Class

Step 4: Implementing Button Click Functionality

Step 5: Driver Function

Step 6: Outcome of Implementation

Code snippet

Understanding Code Functionality

Calculator Functionality Flowchart

Testing Result

Possible Errors that might occur

Division by zero error:

Syntax error in evaluation:

NameError due to undefined variable:

Missing import statement:

Unsupported operations:

Conclusion:

Tkinter ToDo GUI Application (Step by Step Guide)

Project Prerequisites

Designing the User Interface

Implementing Functionality

Code Sample

Conclusion

Tkinter library in Python

Understanding Tkinter

Exploring Basic Widgets

Label

Button

Entry

Text

Scale

Spinbox

Separator

Checkbutton

Radiobutton

Listbox

Scrollbar

ColorChooser

Frame

Canvas

PanedWindow

Menu

Conclusion