1. Inches to cm

../_images/tk_inches_to_cm_converter.png
This code converts inches to cm.
This code creates a simple GUI application using the Tkinter library.
It displays a window with Label, Entry, Text and Button widgets
Users can input inches, click the "Convert" button, and see the corresponding centimeters displayed.

1.1. Create the Main Window

First, import the tkinter module and create the main application window using tk.Tk(). Set the window title, size, and background color:

import tkinter as tk

# Create the main window
root = tk.Tk()
root.title("Inches to cm Converter")
root.geometry("550x300")
root.configure(bg="#ffffff")

root.mainloop()

1.2. Create Widgets

Now create the widgets (GUI elements) that will be displayed in the window:

# Create widgets
inches_label = tk.Label(root, text="inches")
inches_entry = tk.Entry(root, width=10)
cm_label = tk.Label(root, text="cm")
# height of 1 is one text row
cm_text = tk.Text(root, height=1, width=10)
convert_button = tk.Button(root, text="Convert", width=20)

1.3. Place Widgets in the Window

Design the grid positions:

../_images/inches_to_cm_grid.png

Position the widgets using the grid() method:

# Place widgets in the window
inches_label.grid(row=0, column=0, sticky="e", padx=10, pady=10)
inches_entry.grid(row=0, column=1, sticky="w", padx=10, pady=10)
cm_label.grid(row=2, column=0, sticky="e", padx=10, pady=10)
cm_text.grid(row=2, column=1, sticky="w", padx=10, pady=10)
convert_button.grid(row=1, column=0, columnspan=2, padx=10, pady=10)

1.4. Define Constants for formatting

Next, define some constants for colors and font settings.
You can customize these values as needed:
# Constants
WINDOW_BG_COLOR = "#ffffff"
INPUT_BG_COLOR = "#ffffff"
INPUT_FG_COLOR = "#0d6efd"
BUTTON_BG_COLOR = "#fd7e14"
BUTTON_FG_COLOR = "#ffffff"
OUTPUT_BG_COLOR = "#ffffff"
OUTPUT_FG_COLOR = "#dc3545"
FONT_STYLE = ("Arial", 32)

Update the window colour using the constant:

root.configure(bg=WINDOW_BG_COLOR)

1.5. Format Widgets

Now format the widgets (GUI elements) that will be displayed in the window:

# Create widgets
inches_label = tk.Label(root, text="inches", bg=INPUT_BG_COLOR, fg=INPUT_FG_COLOR, font=FONT_STYLE)
inches_entry = tk.Entry(root, width=10, bg=INPUT_BG_COLOR, fg=INPUT_FG_COLOR, font=FONT_STYLE)
cm_label = tk.Label(root, text="cm", bg=OUTPUT_BG_COLOR, fg=OUTPUT_FG_COLOR, font=FONT_STYLE)
# height of 1 is one text row
cm_text = tk.Text(root, height=1, width=10, bg=OUTPUT_BG_COLOR, fg=OUTPUT_FG_COLOR, font=FONT_STYLE)
convert_button = tk.Button(root, text="Convert", width=20, bg=BUTTON_BG_COLOR,
                            fg=BUTTON_FG_COLOR, font=FONT_STYLE)

1.6. Define the Conversion Function

Create a function called convert_inches_to_cm() that performs the conversion and updates the result in the cm_text widget.
convert_inches_to_cm() uses a try and except block to catch errors due to non numeric entries.
The delete method of a Text widget requires the line.column as the first argument. e.g. 1.0 is the line.column in c_text.delete(1.0, 'end')
tk.END or 'end' can be used as the second argument to cause the deletion to go to the end of the widget.
The insert method of a Text widget requires the line.column as the first argument. e.g. 1.0 is the line.column in cm_text.insert(1.0, f'{cm:.2f}')

cm_text.insert(1.0, f'{cm:.2f}') uses :.2f to format the celsius float to 2 decimal places.

def convert_inches_to_cm():
    try:
        inches = float(inches_entry.get())
        cm = inches * 2.54
        cm_text.delete(1.0, "end")  # Clear any previous result
        cm_text.insert(1.0, f"{cm:.2f}")
    except ValueError:
        cm_text.delete(1.0, "end")
        cm_text.insert(1.0, "Invalid input.")

1.7. Connect the Button to the Function

convert_button = tk.Button(root, text="Convert", width=20, bg=BUTTON_BG_COLOR,
                            fg=BUTTON_FG_COLOR, font=FONT_STYLE, command=convert_inches_to_cm)

1.8. Full code

import tkinter as tk

# Constants
WINDOW_BG_COLOR = "#ffffff"
INPUT_BG_COLOR = "#ffffff"
INPUT_FG_COLOR = "#0d6efd"
BUTTON_BG_COLOR = "#fd7e14"
BUTTON_FG_COLOR = "#ffffff"
OUTPUT_BG_COLOR = "#ffffff"
OUTPUT_FG_COLOR = "#dc3545"
FONT_STYLE = ("Arial", 32)


def convert_inches_to_cm():
    """
    Converts inches to cm and displays the result in the GUI.

    Reads the inches value from the input field, performs the conversion to cm,
    and updates the result in the output text widget.

    Raises:
        ValueError: If the input is not a valid float.
    """
    try:
        inches = float(inches_entry.get())
        cm = inches * 2.54
        cm_text.delete(1.0, "end")  # Clear any previous result
        cm_text.insert(1.0, f"{cm:.2f}")
    except ValueError:
        cm_text.delete(1.0, "end")
        cm_text.insert(1.0, "Invalid input.")


# Create the main window
root = tk.Tk()
root.title("Inches to cm Converter")
root.geometry("550x300")
root.configure(bg=WINDOW_BG_COLOR)

# Create widgets
inches_label = tk.Label(root, text="inches", bg=INPUT_BG_COLOR, fg=INPUT_FG_COLOR, font=FONT_STYLE)
inches_entry = tk.Entry(root, width=10, bg=INPUT_BG_COLOR, fg=INPUT_FG_COLOR, font=FONT_STYLE)
cm_label = tk.Label(root, text="cm", bg=OUTPUT_BG_COLOR, fg=OUTPUT_FG_COLOR, font=FONT_STYLE)
# height of 1 is one text row
cm_text = tk.Text(root, height=1, width=10, bg=OUTPUT_BG_COLOR, fg=OUTPUT_FG_COLOR, font=FONT_STYLE)
convert_button = tk.Button(root, text="Convert", width=20, bg=BUTTON_BG_COLOR,
                            fg=BUTTON_FG_COLOR, font=FONT_STYLE, command=convert_inches_to_cm)

# Place widgets in the window
inches_label.grid(row=0, column=0, sticky="e", padx=10, pady=10)
inches_entry.grid(row=0, column=1, sticky="w", padx=10, pady=10)
cm_label.grid(row=2, column=0, sticky="e", padx=10, pady=10)
cm_text.grid(row=2, column=1, sticky="w", padx=10, pady=10)
convert_button.grid(row=1, column=0, columnspan=2, padx=10, pady=10)

# Start the main event loop
root.mainloop()

1.9. Inches to Centimeters Test Table

Test Cases for Inch-to-Centimeter Converter

Inches

Expected Output (cm)

0

0

1

2.54

one

Invalid input

The code rounds to 2 decimal places so it doesn't handle numbers smaller than 0.01.
The text fields have limited width so can't handle numbers with more that 9 digits.