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
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.
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.
In the HTML page, we create 3 text-areas and a button.
In the python code, we initialize the application using the eel.init(“folder name”) command. The folder name in our case is “web”.
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:
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.