DEV Community

Cover image for 4 ways to create modern GUI in python in the easiest way possible
Yash Makan
Yash Makan

Posted on

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

#python #design #beginners #figma

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
Enter fullscreen mode Exit fullscreen mode




Directory Structure





└── Folder

    ├── templates

    |   ├── index.html

    |   ├── main.js

    |   └── style.css

    └── main.py
Enter fullscreen mode Exit fullscreen mode




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))
Enter fullscreen mode Exit fullscreen mode




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

}
Enter fullscreen mode Exit fullscreen mode




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>
Enter fullscreen mode Exit fullscreen mode




Github Reference





<https://github.com/ChrisKnott/Eel>
Enter fullscreen mode Exit fullscreen mode



  1. 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
Enter fullscreen mode Exit fullscreen mode




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 video on youtube from Parth Jadhav

Github Reference 




https://github.com/ParthJadhav/Tkinter-Designer
Enter fullscreen mode Exit fullscreen mode



  1. 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
Enter fullscreen mode Exit fullscreen mode




Sample code





import webview



if name == 'main':

    window = webview.create_window('Load HTML Example', 'index.html')

    webview.start(window)
Enter fullscreen mode Exit fullscreen mode




Github Reference





https://github.com/r0x0r/pywebview/
Enter fullscreen mode Exit fullscreen mode



  1. 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
Enter fullscreen mode Exit fullscreen mode




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
Enter fullscreen mode Exit fullscreen mode




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

Other Articles

Socials

Top comments (8)

Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

This image is squashed.

Trying with width 300

With no width set, it looks much too small.

Collapse
 
yash_makan profile image
Yash Makan •

Thanks for these tips. 😊

Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

Can I suggest fixes?

GitHub links

Turn this code block

<https://github.com/ChrisKnott/Eel>
Enter fullscreen mode Exit fullscreen mode

Into just a link with no code block and no angle brackets

https://github.com/ChrisKnott/Eel
Enter fullscreen mode Exit fullscreen mode

github.com/ChrisKnott/Eel

Similarly, this will become clickable if you take it out a code block

https://github.com/ParthJadhav/Tkinter-Designer
Enter fullscreen mode Exit fullscreen mode

Or

[github.com/ParthJadhav/Tkinter-Designer](https://github.com/ParthJadhav/Tkinter-Designer)
Enter fullscreen mode Exit fullscreen mode

YouTube

And also this bit you have should not be in a code block

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
Enter fullscreen mode Exit fullscreen mode

It is not rendered as HTML

Can I suggest italics?

Code:

_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_
Enter fullscreen mode Exit fullscreen mode

Result:

For complete procedure do watch this video on youtube from Parth Jadhav

Or a quote block?

Code:

> 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.
Enter fullscreen mode Exit fullscreen mode

Result:

For complete procedure do watch this video on youtube from Parth Jadhav.

Collapse
 
michaelcurrin profile image
Michael Currin •

A call out to eel on PyPy, in addition to GH, as the package gets installed from here

pypi.org/project/Eel/

Collapse
 
turry profile image
Turry •

Amazing!!

Collapse
 
yash_makan profile image
Yash Makan •

Glad you liked the article! Thanks for reading though ☺️

Collapse
 
abhiramp_2005 profile image
Abhiram •

Thanks for the ideas

Collapse
 
cheaterdxd profile image
Cheaterdxd •

Compared to using C# to create a desktop application, which one is better? Is the 4 way here or is c# actually better?

Read next

takuuu profile image

Comparing Rust's and_then and map for Option Handling

Takuu Kaku -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -

the_rusty_dev profile image

Integrating Google Calendar API in Node.JS: A Guide to Event Creation and Meeting Scheduling

Gaurav D. Lohar -

martygo profile image

🛑 Stop Create Hooks in React 🪝🎣

Martins Gouveia -