Yash Makan

4 ways to create modern GUI in python in the easiest way possible

Yash Makan's photo
Yash Makan
·

4 min read

4 ways to create modern GUI in python in the easiest way possible

Introduction

Hi developers, I am Yash Makan and today we are going to discuss how can you make beautiful UI applications in python. I know that this sounds a little weird when I say "beautiful UI" together in context with python as I personally feel that the standard Tkinter library is not good enough to develop amazing UI. Today we will cover 4 different ways to make modern applications in python so without any further ado let's begin,

https://i.giphy.com/media/3BUYbmXltgQ4zu0Tv5/giphy.webp

Before

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj3guv1g8ku69j50la5v.png

After

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a5f3tplukh7tucr5blm.png

1. Using eel

The first method in our list is for developers who know HTML & CSS(if you don't then I highly recommend it too) with the basics of javascript.

How does it work?

Basically, you are going to develop the frontend using HTML and CSS and write your computation or backend part in python. nd eel act as a bridge between python and javascript and pass data.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2irr9ptvtvo4c1pslxv.png

Installation

pip install Eel

Directory Structure

└── Folder
    ├── templates
    |   ├── index.html
    |   ├── main.js
    |   └── style.css
    └── main.py

cat main.py

import eel

# name of folder where the html, css, js, image files are located
eel.init('templates')

@eel.expose
def demo(x):
    return x**2

# 1000 is width of window and 600 is the height
eel.start('index.html', size=(1000, 600))

cat main.js

function compute() {
    var data = document.getElementById("data").value
    eel.demo(data)(setValue) // call the demo function which we have created in the main.py file
}

function setValue(res) {
    document.getElementById("abc").src = res
}

cat index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sample</title>
        <link href="style.css" rel="stylesheet">
        <script type="text/javascript" src="/eel.js"></script
        <script type="text/javascript" src="main.js"></script>
</head>
<body>
<!--
have to call compute() from here for example when user clicks any button or something like that.
-->
</body>
</html>

Github Reference

<https://github.com/ChrisKnott/Eel>

2. Figma and Python

Alright, you must be thinking that what is the combination between Figma and python? and Figma is a UI development tool, not a library written in python... Yeah! I know you are right, but let's keep reading the post.

Installation

pip install tkdesigner

How it works

The only thing the user needs to do is design an interface with Figma, and then paste the Figma file URL and API token into Tkinter Designer. Tkinter Designer will automatically generate all the code and images required to create the GUI in Tkinter.

https://user-images.githubusercontent.com/42001064/119832620-fb88c980-bf1b-11eb-8e9b-4affe7b92ba2.jpg

For complete procedure do watch [this](https://www.youtube.com/watch?v=mFjE2-rbpm8&t=66s&ab_channel=Parthjadhav) video on youtube from Parth Jadhav

Github Reference

https://github.com/ParthJadhav/Tkinter-Designer

3. Pywebview

pywebview is a lightweight cross-platform wrapper around a webview component that allows displaying HTML content in its own native GUI window. pywebview is created by Roman Sirokov.

Installation

pip install pywebview

Sample code

import webview

if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', 'index.html')
    webview.start(window)

Github Reference

https://github.com/r0x0r/pywebview/

4. PyQT5

PyQt is a great library to develop modern flat GUI in python. You can create applications with coding in python which can be a little difficult and overwhelming but as we are covering the easiest way possible you can even make GUI with a drag-drop builder known as PyQt5Designer. It is a great way to build applications by generating a .ui file which is the drag-drop program and then later you can convert this .ui file to a .py file.

Installation

pip install PyQt5Designer

Steps

After installation designer will be installed in your system. Simply type designer in your command prompt and designer.exe will pop up. It will look something like this

PyQT5Designer

Now here you can drag-drop elements in the canvas. After designing your application simply export it as a .ui file. Later you can convert this .ui file in .py file using,

pyuic5 -x [NAME_OF_UI_FILE].ui [NAME_OF_PY_FILE].py

Conclusion

So you see, here are the 4 easy ways to make impressive-looking GUI in python. I hope you liked my blog and if this article adds any value then it would be great if you leave a like and make sure to bookmark it as well. Also, share the post with your friends so that they too can learn something new(don't be selfish...). Also, you can follow me on Twitter for more tech and python related content. Hope to be in your mind again, till then b-bye!

Bye Bye

Socials

DesignGUIPythonpython beginnerTutorial