Your Web News in One Place

Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 22, 2020 03:21 am GMT

Creating a modern GUI for your python application

In this post, we are going to use a library which will allow us to create outstanding graphical user interfaces (GUI's) for our day to day python scripts.

We have a bunch of options to create GUI's on python, tkinter, wxPython, PySimpleGui, among others. Tkinter is really robust and allow us to have cross-platform applications, however, Tkinter based GUI's aren't as beautiful as what we can typically find with web based applications, and other cool applications based on electron.

Eel is a library which allow us to take advantage of web technologies, such as HTML, CSS, JS and of course, all bunch of web frameworks out there, as bootstrap, jquery, cool plotting libraries as plotly, etc.

Eel

Eel library allow us to easily make use of HTML, CSS and JS for building our User Interface, without losing all our powerful Python capabilities. Eel relies on a bunch of python libraries, it simply creates a local webserver and opens a browser (chrome by default), the browser renders HTML, CSS and JS, while python controls most of the logic.

Cool thing with Eel, is that allow us to run python functions from javascript and viceversa, thus, we can exchange information and have the best of both worlds (python and JS).

Installing eel

In order to install eel library, you can do it from Pypi as:

pip install eel

Enter fullscreen mode Exit fullscreen mode

Highly recommended to create a virtual environment first.

How to use it?

We must create our folder structure first, our root folder will be "application". Inside, we will create our python script, which I decided to call app.py.

In order to better structure our code, we created a subfolder named "web", which contains index.html file, and two subfolders for our css and js files.

application   app.pyweb       index.html        css           main.css        js            main.js

Enter fullscreen mode Exit fullscreen mode

For this post, we will build a top menu resembling a file menu for desktop applications using pre-built code from W3schools. First, we must edit our html file:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Eel example</title>    <link rel="stylesheet" href="css/main.css">    <script type="text/javascript" src="/eel.js"></script> </head><body>    <div class="topnav">        <a class="active" id="button-name">Display name</a>        <a id="button-number">Display a random number</a>        <a id="button-date">Display time and date</a>        <a id="button-ip">Display my ip</a>      </div> </body><script src="js/main.js"></script></html>

Enter fullscreen mode Exit fullscreen mode

As you can see, you would be able to create your whole GUI using HTML, we just must add <script type="text/javascript" src="/eel.js"></script>, this script will allow us to call our exposed python functions.

For CSS file:

/* Add a black background color to the top navigation */.topnav {    background-color: #333;    overflow: hidden;  }  /* Style the links inside the navigation bar */  .topnav a {    float: left;    color: #f2f2f2;    text-align: center;    padding: 14px 16px;    text-decoration: none;    font-size: 17px;  }  /* Change the color of links on hover */  .topnav a:hover {    background-color: #ddd;    color: black;  }  /* Add a color to the active/current link */  /* .topnav a.active {    background-color: #4CAF50;    color: white;  } */

Enter fullscreen mode Exit fullscreen mode

And finally, for JS file, we're just adding event listeners to out four buttons in navbar. As you can see, all of them are calling some functions but started with eel, e.g. ell.get_random_name(), this is a python function, thus, when we click the button, it will call a python function. Also, we have a JS function called prompt_alerts and it has a decorator eel.expose, this allow us to run this JS function from python:

document.getElementById("button-name").addEventListener("click", ()=>{eel.get_random_name()}, false);document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);eel.expose(prompt_alerts);function prompt_alerts(description) {  alert(description);}

Enter fullscreen mode Exit fullscreen mode

We have completed our graphical user interface, now, we must create our python file. We must import eel library, and all other libraries you need for your project, in this case, random and datetime.

import eelimport randomfrom datetime import datetimeeel.init('web')@eel.exposedef get_random_name():    eel.prompt_alerts('Random name')@eel.exposedef get_random_number():    eel.prompt_alerts(random.randint(1, 100))@eel.exposedef get_date():    eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))@eel.exposedef get_ip():    eel.prompt_alerts('127.0.0.1')eel.start('index.html')

Enter fullscreen mode Exit fullscreen mode

Then, we must add our eel.init line, this initialize eel library, to an specific folder. Then, we create our four functions, which we want to call from JS, that's why we added decorator @eel.expose. As you can see, each one is calling our JS function prompt_alerts and passing a string argument.

eel.start will run the application, there are a lot of arguments that can be passed, in this example, we're using minimal arguments, we're just setting the html file to be rendered (relative to web folder).

Now that we have completed our code, we can start our application:

python app.py

A new window should appeared, as shown in next figure:

If you click on any of your four buttons, an alert should be shown, e.g.:

Now, you're able to create outstanding GUI's for you python applications, in our next series, we will create a complex example and explore other arguments that can be passed to eel.start.

Original Link: https://dev.to/kodark/creating-a-modern-gui-for-your-python-application-2mlp

Share this article:

Share on Facebook

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To