Eel: Most amazing hidden library

We almost use tkinter, pyQt, wxPython modules to build gui's in python which has boring widgets like windows xp versions softwares.

Instead we can use frameworks to build a great gui using electonJS, django,.... which will be quite tough..

So, Above both problems can be solved by eel

Eel

It is a python library for making a simple electron like GUIs using html/JS.
We can completely write our code(background process) in python.
We can also completely design frontend design using html/css.
Now JS will combine both the frontend and code.

How to install Eel

Before installing Eel, You need a Python 3.x.x and pip then you can install Eel.
Open Your command prompt and type
```
pip install eel
```
That's it, Now you can use eel by importing
```
import eel
```

In order to load web pages (html files)

eel.init('web')
eel.start('fileName.html')

But we need to create a web folder, and write all html files inside it.
In html file you need to link eel.js as shown
```
<script src="/eel.js"></script>
```
Now You can call function present in Python from JS.

Suppose we have a index.html file as shown below

<!DOCTYPE html>
<html>
    <head>
        <script src="/eel.js"></script>
        <!-- Script to call python function comes here -->
    </head>
    <body>
         <button onclick="callFun()">Click me</button>
         <div id="msg"></div>
    </body>
</html>

This html file contains a button click me, when it is get clicked we need to call some python function

python file main.py contains a function as shown
```
import eel

eel.init('web')

@eel.expose
def message():
    return 'Hello World'

eel.start('index.html')
```
@eel.expose makes function visible to JS file and it is mandatory.
In order to call python function, we need js so we just create main.js and implement in html file
```
<script src="main.js"></script>
```
Implement this in above html file below eel.js scipt tag.
main.js looks like this
```
var btn = document.getElementsByTagName('button');
var status = document.getElementById('msg');

async function callFun(){
    var content = await eel.message()();
    status.innerHTML = content;
}
```
This File calls a message() which is present in python file when the click me btn is clicked.The word async before a function means a function always returns a promise. Other values are wrapped in a resolved promise automatically.The keyword await makes JavaScript wait until that promise settles and returns its result.
If you run the python file using command
```
python main.py
```
then it will open a new window which is far better from tkinter, and so on...

Working

If you click the click me btn, it will be called callFun() which is present in JS then this function calls message() present in python and returns with message "Hello world" which stores in content variable in JS and set back to div means (Now div tag contains a message returned by python).

Try it.... Nothing will cost