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 other two units and similar with Kelvinwhich returns other two units.

Video Series of the app:

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 an OptionMenu to select the unit of the entered value.  A `Button` when pressed, calls the function to calculate the other two units of temperature. Two Labels to show the result.Button, when pressed calls the function to calculate the other two units of temperature. Two Labels to show the result.

Temperature converter app in python GUI - programminginpython.com
Temperature converter app in python GUI – programminginpython.com

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 other two temperature formats based on the input temperature format whether it is Celsius, Fahrenheit or Kelvin unit and store it to 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 user inputs some value and selects the temperature from drop down, the next thing is to press a button which shows the desired results.

I will initialise 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 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 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 drop down 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 value is Celsius

I will use some calculation 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 other two required temperatures.

Program on Github

Finishing Touch 😀

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

  • Set size of the window
    • root.geometry('400x150+100+200')
  • Set title of the app
    • root.title('Temperature Converter')
  • Set background and foreground colours
    • 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 window to 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

Temperature converter app in python GUI - programminginpython.com
Temperature converter app in python GUI – programminginpython.com
Temperature converter app in python GUI - programminginpython.com
Temperature converter app in python GUI – programminginpython.com
Temperature converter app in python GUI - programminginpython.com
Temperature converter app in python GUI – programminginpython.com

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *