Today, we are going to create a BMI (Body Mass Index) calculator using the tkinter library because of its graphical user interface.
Let’s get started!
Table of Contents
- Necessary Libraries
- Imports
- Creating the Main Window
- BMI Calculation Function
- GUI Setup
- Variable Initialization
- Slider Changed Function
- Style Configuration For Sliders
- Height Slider Setup
- Weight Slider Setup
- Initializing Entry Widgets with Slider Values
- Button Setup
- Result Labels Setup
- Main Loop
- Example
- Full Code
Necessary Libraries
Make sure to install the tkinter library via the terminal or your command prompt for the code to function properly.
$ pip install tk
Imports
from tkinter import *
from tkinter import ttk
We start by importing tkinter
, which allows us to create the graphical user interface (GUI), and from tkinter
we import ttk
which allows access to themed widgets and enhances our GUI elements.
Creating the Main Window
root = Tk()
root.title("BMI Calculator - The Pycodes")
root.geometry("470x580")
root.resizable(False, False)
root.configure(bg="silver")
Next, we create the main window, name it and define its geometry then disable its resizing while giving it a background color.
BMI Calculation Function
def calculate_bmi():
height = float(height_var.get())
weight = float(weight_var.get())
# Calculate BMI
meters_height = height / 100
bmi = round(weight / (meters_height ** 2), 1)
bmi_label.config(text=f"BMI: {bmi}")
# Interpret BMI
if bmi < 18.5:
status_label.config(text="Underweight")
advice_label.config(text="You have lower weight than normal \n body.")
elif 18.5 <= bmi <= 25:
status_label.config(text="Normal")
advice_label.config(text="You are healthy.")
elif 25 < bmi <= 30:
status_label.config(text="Overweight")
advice_label.config(text="You are slightly obese.")
else:
status_label.config(text="Obese")
advice_label.config(text="Your health might be at risk if you \n don't lose weight.")
After that, we define a function that is triggered when the user clicks the ‘Calculate BMI‘ button. This function retrieves the ‘height’ and ‘weight’ values inputted by the user in the entry widgets, calculates the BMI using the equation provided in the code above, and then displays the result. Additionally, it provides remarks or advice based on the calculated BMI
GUI Setup
# GUI setup
Label(root, width=72, height=5, bg="white").pack(side=TOP)
Label(root, text="BMI Calculator", font="arial 20 bold", bg="white").place(x=130, y=20)
Label(root, width=72, height=18, bg="lightblue").pack(side=BOTTOM)
Label(root, text="Height(cm)", font="arial 14 bold", bg="silver").place(x=80, y=100)
Label(root, text="Weight(kg)", font="arial 14 bold", bg="silver").place(x=300, y=100)
height_var = StringVar()
weight_var = StringVar()
Entry(root, textvariable=height_var, width=5, font="arial 50", bg="grey", bd=0, justify=CENTER).place(x=35, y=160)
Entry(root, textvariable=weight_var, width=5, font="arial 50", bg="grey", bd=0, justify=CENTER).place(x=255, y=160)
Then we create labels and specify their placement on the screen. Following that, we create entry boxes for the user to put the ‘height‘ and the ‘weight‘ and associate them with their string variables using stringvar()
.
Variable Initialization
current_height_value = DoubleVar()
current_weight_value = DoubleVar()
Here, we created variables that are going to store the values of the height and weight Sliders.
Slider Changed Function
def slider_changed_height(event):
height_var.set('{:.2f}'.format(current_height_value.get()))
def slider_changed_weight(event):
weight_var.set('{:.2f}'.format(current_weight_value.get()))
The code above defines two functions for ‘height’ and ‘weight’ that are called when the user adjusts the corresponding sliders. This action updates the height_var
and weight_var
variables, which in turn update the associated entry widgets for height and weight, ensuring that the displayed values change in sync with the slider movements.
Style Configuration For Sliders
style = ttk.Style()
style.configure("TScale", background="silver")
Now we make the background color of the Sliders silver.
Height Slider Setup
slider_height = ttk.Scale(root, from_=0, to=220, orient=HORIZONTAL, style="TScale",
command=slider_changed_height, variable=current_height_value)
slider_height.place(x=80, y=250)
Following that, we create a horizontal slider for height which ranges from 0 to 220, and when this slider is moved it triggers the slider_changed_height
function.
Weight Slider Setup
slider_weight = ttk.Scale(root, from_=0, to=200, orient=HORIZONTAL, style="TScale",
command=slider_changed_weight, variable=current_weight_value)
slider_weight.place(x=300, y=250)
What we did here is similar to the setup for the height slider: we created a horizontal slider for weight that ranges from 0 to 200. Moving this slider triggers the slider_changed_weight
function.
Initializing Entry Widgets with Slider Values
height_var.set('{:.2f}'.format(current_height_value.get()))
weight_var.set('{:.2f}'.format(current_weight_value.get()))
This part ensures that the sliders and entry widgets for height and weight show the same value.
Button Setup
Button(root, text="Calculate BMI", width=15, height=2, font="arial 10 bold", bg="green", fg="white",
command=calculate_bmi).place(x=280, y=340)
The code above creates a button labeled “Calculate BMI“, assigns it specific height, width, and font properties, and configures it to call the calculate_bmi
function when the user clicks on it.
Result Labels Setup
bmi_label = Label(root, font="arial 50 bold", bg="lightblue", fg="black")
bmi_label.place(x=125, y=305)
status_label = Label(root, font="arial 20 bold", bg="lightblue", fg="black")
status_label.place(x=260, y=430)
advice_label = Label(root, font="arial 10 bold", bg="lightblue", fg="black")
advice_label.place(x=200, y=500)
For this step, we set up three labels. The first one shows your BMI once it’s calculated, the second gives you an idea of your health status based on that BMI, and the third offers some advice on what to do next.
Main Loop
root.mainloop()
Lastly, this part is the one that will keep the main window running and responsive to the user until he chooses to exit.
Example
Full Code
from tkinter import *
from tkinter import ttk
root = Tk()
root.title("BMI Calculator - The Pycodes")
root.geometry("470x580")
root.resizable(False, False)
root.configure(bg="silver")
def calculate_bmi():
height = float(height_var.get())
weight = float(weight_var.get())
# Calculate BMI
meters_height = height / 100
bmi = round(weight / (meters_height ** 2), 1)
bmi_label.config(text=f"BMI: {bmi}")
# Interpret BMI
if bmi < 18.5:
status_label.config(text="Underweight")
advice_label.config(text="You have lower weight than normal \n body.")
elif 18.5 <= bmi <= 25:
status_label.config(text="Normal")
advice_label.config(text="You are healthy.")
elif 25 < bmi <= 30:
status_label.config(text="Overweight")
advice_label.config(text="You are slightly obese.")
else:
status_label.config(text="Obese")
advice_label.config(text="Your health might be at risk if you \n don't lose weight.")
# GUI setup
Label(root, width=72, height=5, bg="white").pack(side=TOP)
Label(root, text="BMI Calculator", font="arial 20 bold", bg="white").place(x=130, y=20)
Label(root, width=72, height=18, bg="lightblue").pack(side=BOTTOM)
Label(root, text="Height(cm)", font="arial 14 bold", bg="silver").place(x=80, y=100)
Label(root, text="Weight(kg)", font="arial 14 bold", bg="silver").place(x=300, y=100)
height_var = StringVar()
weight_var = StringVar()
Entry(root, textvariable=height_var, width=5, font="arial 50", bg="grey", bd=0, justify=CENTER).place(x=35, y=160)
Entry(root, textvariable=weight_var, width=5, font="arial 50", bg="grey", bd=0, justify=CENTER).place(x=255, y=160)
current_height_value = DoubleVar()
current_weight_value = DoubleVar()
def slider_changed_height(event):
height_var.set('{:.2f}'.format(current_height_value.get()))
def slider_changed_weight(event):
weight_var.set('{:.2f}'.format(current_weight_value.get()))
style = ttk.Style()
style.configure("TScale", background="silver")
slider_height = ttk.Scale(root, from_=0, to=220, orient=HORIZONTAL, style="TScale",
command=slider_changed_height, variable=current_height_value)
slider_height.place(x=80, y=250)
slider_weight = ttk.Scale(root, from_=0, to=200, orient=HORIZONTAL, style="TScale",
command=slider_changed_weight, variable=current_weight_value)
slider_weight.place(x=300, y=250)
height_var.set('{:.2f}'.format(current_height_value.get()))
weight_var.set('{:.2f}'.format(current_weight_value.get()))
Button(root, text="Calculate BMI", width=15, height=2, font="arial 10 bold", bg="green", fg="white",
command=calculate_bmi).place(x=280, y=340)
bmi_label = Label(root, font="arial 50 bold", bg="lightblue", fg="black")
bmi_label.place(x=125, y=305)
status_label = Label(root, font="arial 20 bold", bg="lightblue", fg="black")
status_label.place(x=260, y=430)
advice_label = Label(root, font="arial 10 bold", bg="lightblue", fg="black")
advice_label.place(x=200, y=500)
root.mainloop()
Happy Coding!
Very helpful content, Thank you…
U’re welcome, Sir. We’re glad to hear that.