As soon as I finished styling the webpage I came across a helpful Python module named Eel. Eel enables you to create your GUI as a webpage and write Python code as a back-end to a web application, similar to Electron.js with Node.js, And execute the Python script as a desktop application. Now, this approach is not suitable for high level GUI applications with so much back-end code, but for stupid purposes like mine, it is the ideal.
So I imported the Eel module using pip, So I can design the appearance of my GUI app using HTML and CSS at ease.
pip install eel
pip install pygame
And I already had the index.html page and style.css files configured according to my preference. It is a good measure to make your web elements responsive so you will be able to adjust the window size from the Python script.
Next I created a separate folder named “web” to include my front-end and a python script with a preferred name.
I call my project Rizumu, which translates to “ Rhythm” in Japanese
The way Eel works is that it treats your app like a web application, similar to Flask or Django, and hosts it locally when you execute the Python script. So as the foundation you must contain the following lines of code in your script for Eel to host your app locally and render the application in a Chrome window.
And also you must include the following line in your HTML head.
After doing this and running the script, Eel will automatically find the index.html file in the web folder and host it on port 8000 by default.
I added a function to initialize the Pygame mixer and load the mp3 file names to a Python list. I also introduced a global integer i to keep track of the song currently playing.
And that’s it! You can set-up the dimensions of your window by passing it in as arguments to the eel.start() function or by simple resizing it with your cursor after the web page renders (Eel will keep this in memory). One more thing, you can turn your project into a executable binary file using PyInstaller module and running the following command.
python -m eel [main_script_file] [static_web_folder]
This is just a fun project I was working on because I was bored at the moment but Eel helped me to simply use my web page development skills to create appealing GUI instead of taking lengthy OOP approaches.
The full introduction and walkthrough for Eel module can be found in this Github repository, make sure you head there, read it and contribute. And thanks for reading!