How to create a temperature converter app in python GUI using TKInter

Hello everyone! Welcome back to programminginpython.com. Here in this post, I will show you how to create a simple temperature converter app in Python GUI using TKInter. This app basically converts a Celcius unit to Fahrenheit and Kelvinunits and similarly Fahrenheit to the other two units and similar with Kelvinwhich returns the other two units.

Video Series of the app:

You can also watch the video on YouTube here.

TKInter GUI Design

Here I used some widgets like Label, Button, EntryField (Input field), and OptionsMenu(dropdown).

These widgets are used as follows.

• An EntryField where one can enter any value and
•   OptionMenu to select the unit of the entered value.
• A Button when pressed, calls the function to calculate the other two temperature units.
• Two Labels to show the result.

First I must import and initialize TKInter to use it.

import tkinter as tk 
root = tk.Tk()

Then I will initialize a Label and an `EntryField` and also set their position using grid layout options.

input_label = tk.Label(root, text="Enter temperature")
input_entry = tk.Entry(root, textvariable=numberInput)
input_label.grid(row=0)
input_entry.grid(row=0, column=1)

Here I need to set ‘numberInput’ to a string.

numberInput = tk.StringVar()

Next, I will use an OptionMenu (a drop-down menu) to display Celsius, Fahrenheit, and Kelvin temperatures and also set the dropdown default value to Celsius and set the position of the OptionMenu

dropDownList = ["Celsius", "Fahrenheit", "Kelvin"]
dropdown = tk.OptionMenu(root, var, *dropDownList, command=store_temp)
var.set(dropDownList[0])
dropdown.grid(row=0, column=3)

I also need to set var in the above snippet to a string.

var = tk.StringVar()

Program on Github

OptionMenu Selected Item

Here I need to convert the input temperature to two other temperature formats based on the input temperature format whether it is Celsius, Fahrenheit, or Kelvin unit, and store it somewhere so I can use it for conversion.

If you notice in the above snippet I used a command parameter for the OptionMenu, this command is nothing but it calls a function, here it calls store_temp when an OptionMenu(dropdown) value is changed.

def store_temp(sel_temp):
    global tempVal
    tempVal = sel_temp

So here I stored the value of the selected temperature in tempVal variable which is declared globally. For declaring a variable globally, I just use a variable with some value for it.

tempVal = "Celsius"

So now every time the drop-down is changed, its value is stored in tempVal and can be accessed anywhere in our app.

The temperature Converter

So when the user inputs some value and selects the temperature from the drop-down, the next thing is to press a button that shows the desired results.

I will initialize a button with a command to call the conversion function.

result_button = tk.Button(root, text="Convert", command=call_convert)
result_button.grid(row=0, columnspan=4)

I will pass 2 labels to show the result and the input value which is entered in the `Entry`. Here I use partial from functools to pass parameters to the function call_convert

So before I call call_convert I will place the following line.

call_convert = partial(call_convert, result_label1, result_label2, numberInput)

and of course, I need to import `partial`.

from functools import partial

So the logic resides in this call_convert method.

Program on GitHub

The Conversion

First I will get the entered value, then check the drop-down value and then perform the conversion and return the result to the labels.

def call_convert(rlabel1, rlabe12, inputn):

The 3 parameters in the above line are the 2 labels to set the result and a value entered in the Entry field.

So First I will get the input value.

tem = inputn.get()

Now I will check the dropdown value, as I previously store this value in a global variable tempVal So now will check whether it is Celsius, Fahrenheit, or Kelvin and perform the conversions based on this value.

#for Celsius
if tempVal == 'Celsius':
  ...
  ...
#for Fahrenheit
if tempVal == 'Fahrenheit':
  ...
  ...
#for Kelvin
if tempVal == 'Kelvin':
  ...
  ...

So if the value is Celsius

I will use some calculations to convert and set those results to the appropriate labels.

if tempVal == 'Celsius':
    f = float((float(tem) * 9/5) + 32)
    k = float((float(tem) + 273.15))
    rlabel1.config(text="%f Fahrenheit" % f)
    rlabe12.config(text="%f Kelvin" % k)

Here the variables fand k store the converted results based on some formulae to convert Celsius to Fahrenheit and Kelvin

Similarly for Fahrenheit and Kelvin,

if tempVal == 'Fahrenheit':
    c = float((float(tem) - 32) * 5 / 9)
    k = c + 273
    rlabel1.config(text="%f Celsius" % c)
    rlabe12.config(text="%f Kelvin" % k)

if tempVal == 'Kelvin':
    c = float((float(tem) - 273.15))
    f = float((float(tem) - 273.15) * 1.8000 + 32.00)
    rlabel1.config(text="%f Celsius" % c)
    rlabe12.config(text="%f Fahrenheit" % f)

This converts the input temperature to the other two required temperatures.

Program on GitHub

Finishing Touch

Here I will show you How can we set the size of the window, set colors,  background, and foreground colors to widgets, and also to set the window to a fixed size and all.

• Set the size of the window
  • root.geometry('400x150+100+200')
• Set the title of the app
  • root.title('Temperature Converter')
• Set background and foreground colors
  • root.configure(background='#e35237')
  • input_label = tk.Label(root, text="Enter temperature", background='#e35237', foreground="#FFFFFF")
  • dropdown.config(background='#e35237', foreground="#FFFFFF")
  • dropdown["menu"].config(background='#e35237', foreground="#FFFFFF")
• Set the window to a fixed size
  • root.resizable(width=False, height=False)

Program

__author__ = 'Avinash'

import tkinter as tk
from functools import partial

# global variable
tempVal = "Celsius"


# getting drop down value
def store_temp(sel_temp):
    global tempVal
    tempVal = sel_temp


# the main conversion
def call_convert(rlabel1, rlabe12, inputn):
    tem = inputn.get()
    if tempVal == 'Celsius':
        f = float((float(tem) * 9 / 5) + 32)
        k = float((float(tem) + 273.15))
        rlabel1.config(text="%f Fahrenheit" % f)
        rlabe12.config(text="%f Kelvin" % k)
    if tempVal == 'Fahrenheit':
        c = float((float(tem) - 32) * 5 / 9)
        k = c + 273
        rlabel1.config(text="%f Celsius" % c)
        rlabe12.config(text="%f Kelvin" % k)
    if tempVal == 'Kelvin':
        c = float((float(tem) - 273.15))
        f = float((float(tem) - 273.15) * 1.8000 + 32.00)
        rlabel1.config(text="%f Celsius" % c)
        rlabe12.config(text="%f Fahrenheit" % f)
    return


# app window configuration and UI
root = tk.Tk()
root.geometry('400x150+100+200')
root.title('Temperature Converter')
root.configure(background='#09A3BA')
root.resizable(width=False, height=False)
root.grid_columnconfigure(1, weight=1)
root.grid_rowconfigure(0, weight=1)

numberInput = tk.StringVar()
var = tk.StringVar()

# label and entry field
input_label = tk.Label(root, text="Enter temperature", background='#09A3BA', foreground="#FFFFFF")
input_entry = tk.Entry(root, textvariable=numberInput)
input_label.grid(row=1)
input_entry.grid(row=1, column=1)

# result label's for showing the other two temperatures
result_label1 = tk.Label(root, background='#09A3BA', foreground="#FFFFFF")
result_label1.grid(row=3, columnspan=4)
result_label2 = tk.Label(root, background='#09A3BA', foreground="#FFFFFF")
result_label2.grid(row=4, columnspan=4)

# drop down initalization and setup
dropDownList = ["Celsius", "Fahrenheit", "Kelvin"]
dropdown = tk.OptionMenu(root, var, *dropDownList, command=store_temp)
var.set(dropDownList[0])
dropdown.grid(row=1, column=3)
dropdown.config(background='#09A3BA', foreground="#FFFFFF")
dropdown["menu"].config(background='#09A3BA', foreground="#FFFFFF")

# button click
call_convert = partial(call_convert, result_label1, result_label2, numberInput)
result_button = tk.Button(root, text="Convert", command=call_convert, background='#09A3BA', foreground="#FFFFFF")
result_button.grid(row=2, columnspan=4)

root.mainloop()

Program Screenshots

Program on GitHub

That is it for this post, also feel free to look at other GUI programs or look at all of the posts here. Stay tuned for my next post, until then keep coding

Video Series of the app:

https://www.youtube.com/embed?listType=playlist&list=PLrKr3rQwMgsheweyIykLLrMD7ttZTAyFS&layout=gallery”]