Create HTML User Interface for Python using Eel Library

In this little article, we are going to discuss the use of python Eel library to create User Interface for python programs using HTML and CSS.

The article is divided into two parts. In the first part, we discuss the basic theory of the Eel library and in the second part, we show the implementation of the library by creating a simple application which takes 2 numbers as input from the user and returns their sum.

PYTHON Eel LIBRARY

To put it simply, the eel library is used to create HTML User Interfaces for offline python applications. While there are tools such as Tkinter, where the GUI can be coded in python itself, but the limitations are quite high and it doesn’t give as much freedom as we get from using HTML and JavaScript.

This is where Eel comes in. It allows us to create offline applications, where the front end is coded in HTML and CSS while the actual program logic runs behind in python. This can be visualized by the following figure.

Figure 1

The HTML, CSS and JavaScript files are kept in the same directory and is initialized using the python program. The JavaScript file basically helps in connecting the HTML page to Python by using functions which are triggered by onclick events from the HTML page.

IMPLEMENTING THE LIBRARY

In this section, we are going to make a simple application using eel for illustrative purpose. In this application, we are going to take 2 numbers from the HTML page, add them in python and display the result to the user.

The First step is to install the Eel library which can be done through pip.

pip install eel

We are using Visual Studio Code for creating the project. We open a new folder named “testweb” and create another folder named “web” under it. This “web” folder contains the following files.

• home.html
• main.js
• add.py

In the HTML page, we create 3 text-areas and a button.

HTML Code

The ‘num1’ and ‘num2’ are for getting the input from the user and ‘ans’ text-area is for displaying the result. The button with the id = ‘add’ has an onclick function attached to it which is defined in the JavaScript file.

JavaScript Code

In the JavaScript file, we create the function that is triggered using the onclick event. In the function we fetch the value of ‘num1’ and ‘num2’ and pass it to the “add” function, which is defined in the python file. The “callBack” function takes ‘result’ as the argument which is returned by the python function “add”. This ‘result’ is put in the text-area whose id is ‘ans’.

Python Code

In the python code, we initialize the application using the eel.init(“folder name”) command. The folder name in our case is “web”.

Under the eel.expose command, we define the “add” function which adds ‘data1’ and ‘data2’ and returns the ‘result’. This ‘result’ is fetched by the “callBack” function in the JavaScript file and is placed in the HTML page.

We start the application using the eel.start(“html file”) command. In our case which is “home.html”.

The following figure shows the created User Interface:

User Interface

By default, the Eel library uses chrome to run the application but we can also specify the browser by using the ‘mode’ option. Along with ‘mode’ there are several other app options available such as ‘size’, ‘position’, ‘geometry’ etc. which are passed in the eel.start() command.

FINAL THOUGHTS

In this brief article, we discussed about the python Eel library, which allows us to create offline HTML/JavaScript applications. By using this library, we get the capabilities of python, along with the freedom of designing User Interface with HTML and CSS. Although popularity wise, eel is below its main competitor, Electron, but for creating simple GUI applications, many choose eel as their first choice.

In a follow up article, we are going to implement the Eel library to create a text translating application using HTML, CSS, JavaScript and Python.