Eel for Python - Quick and Easy GUI!
HTML-код
- Опубликовано: 13 июл 2024
- GUI can be a tough subject, with tons of generated messy code to sit through. Luckily, web programming, with its intuitive syntax, is becoming more popular for GUI design! Today, we take advantage of this with our Python code by using a package called eel.
Eel github: github.com/samuelhwilliams/Eel
= CONTENTS =
0:00 Introduction
0:37 What is Eel?
1:56 Mechanics & Demo of Eel
2:27 Demo 1: Eel Setup & Folder Structure
3:20 Basics of JavaScript-Python Communication
3:42 Demo 2: JavaScript Triggers Python
5:27 Demo 3: Python Triggers JavaScript / Non-Blocking start()
8:28 Discussion on Return Values
9:06 Demo 4: Return Values (The Intuitive Way)
10:54 Demo 5: Return Values (The Official Way)
11:24 Return Values - Synchronous (Python)
12:25 Return Values - Asynchronous
13:51 Wrapup
14:43 Larger Demo: Mastermind Solver
18:25 End of Demo
= CODE DOWNLOAD =
To view and download the code written in this video, check out the following Bitbucket repository: bitbucket.org/nerdfirst/pytho...
To download, first click on "Downloads" in the left sidebar. Then, in the subsequent page, click "Download Repository".
= 0612 TV =
0612 TV, a sub-project of NERDfirst.net, is an educational RUclips channel. Started in 2008, we have now covered a wide range of topics, from areas such as Programming, Algorithms and Computing Theories, Computer Graphics, Photography, and Specialized Guides for using software such as FFMPEG, Deshaker, GIMP and more!
Enjoy your stay, and don't hesitate to drop me a comment or a personal message to my inbox =) If you like my work, don't forget to subscribe!
Like what you see? Buy me a coffee → www.nerdfirst.net/donate/
0612 TV Official Writeup: nerdfirst.net/0612tv
More about me: about.me/lcc0612
Official Twitter: / 0612tv
= NERDfirst =
NERDfirst is a project allowing me to go above and beyond RUclips videos into areas like app and game development. It will also contain the official 0612 TV blog and other resources.
Watch this space, and keep your eyes peeled on this channel for more updates! nerdfirst.net/
-----
Disclaimer: Please note that any information is provided on this channel in good faith, but I cannot guarantee 100% accuracy / correctness on all content. Contributors to this channel are not to be held responsible for any possible outcomes from your use of the information.
*On Debugging and Help*
Unfortunately due to high IRL workloads, I'm not able to look at your code and help diagnose problems. You may contact me at hello(at)nerdfirst(dot)net for paid consultation, if you really see the need.
You did an excellent job in explaining what's going on between JS and Python. I watched other videos about Eel before, no one could articulate as well as you did!
Hello and thank you very much for your comment! I'm glad you liked my work =)
@@NERDfirst I totally +1 to this. Thanks a lot for this video. Other videos never really showed the Js-Py work instead was focusing on the UI itself. That's just HTML+CSS though..
One of the best tutorials on youtube so far... great work mann, your voice is great.
Hello and thank you very much for your comment! Glad you like my work =)
Best tutorial so far! I understood everything perfectly! Thanks.
You're welcome! Very happy to be of help =)
I just found this channel and i don't know how it hasn't blown up yet. Keep up the good work!
Wondered the same for good while
Hello and thank you very much for your comment! I don't do any marketing, that's why =P This is just a fun passion project for me!
Hello and thank you for your comment! Glad y'all like my work, appreciate it =)
You are a really good explainer. So easy just to listen and follow your explanation.
Hello and thank you very much for your comment! Glad you liked the video =)
This video is the most explanatory one on youtube. Thanks a lot.
You're welcome! Very happy to be of help =)
Fantastic video, you really got the main point across and made it understandable to work with
Hello and thank you very much for your comment! Very happy to be of help =)
Awesome. Very neat. Waiting for much more videos from you
Hello and thank you very much for your comment! More videos will come, I've just been horribly busy lately, but I've got ideas!
One of the best tutorial as well as one of the oldest. Great!!!👍💐
Hello and thank you very much for your comment! Glad you like my work =)
Fantastic video, thanks team 🔥
You're welcome! Glad you liked the video =)
Your tutorial is really really well done, a lot of work down here
Hello and thank you very much for your comment! Glad you liked the video =)
Nice one!
You've just got a new sub!
Thanks for the great content.
You're welcome! Very happy to be of help :)
very clear video, thanks ;)
You're welcome! Glad to be of help =)
block=false , это то чего мне не хватало. Спасибо!
Hello from Russia!
Hello and thank you very much for your comment, very happy to be of help :)
Thanks for such a informative tutorial
You're welcome! Very happy to be of help =)
Helped a lot man Thanks
You're welcome! Glad to be of help =)
Thanks a lot it helps
You're welcome! Very happy to be of help =)
Awesome 👍
Hello and thank you very much for your comment! Glad you liked the video =)
Cool video - Eel reminds me a lot of Flask - heavily influence for sure.
Hello and thank you for your comment! I think the similarities are more because of typical web patterns! Otherwise eel and flask serve quite different purposes.
Thanks bro! You so cool!
You're welcome! Very happy to be of help =)
Great video man!, I want to focus on the UI of my aplications, would you recomend this GUI maker to make something complex as an inventory sistem or anything that you have to use python to write information and it gives back a result ?
Hello and thank you for your comment! If you were to focus solely on the UI aspect, Eel uses web technology which is mature and purpose built for making GUI. I think it provides the best balance of being powerful while at the same time easy to use.
Having said that, you can use web with or without Eel. Eel still has some unresolved bugs, and if there are security concerns you'll have to dig deeper to see if it really suits your needs. So there are always alternatives to consider.
I've stumbled across your channel when searching for information on serialization in Java, and now that I see your latest video has only 625 views and your channel only 39.6K subscribers, I'm disappointed. Your quality of work is really good, and I'm surprised your channel doesn't have much attention right now.
I think soon enough, if you keep up the consistently good quality content, you'll gain traction and grow your presence significantly, maybe with some help from the RUclips recommendation algorithm.
Hello and thank you very much for your comment!
Don't worry about the low numbers. This channel is, and will always be a passion project. I'm doing it for the sake of doing it, not for the numbers or the income. That's why you don't see me advertising, or doing all the things people do nowadays to appease the algorithm.
Though having said that, I'm not optimistic for a "soon enough" situation - This channel is 12 years old, any miracles would've happened by now =P But again, I'm doing this purely for fun so hey, I'm happy to continue doing the videos at my own pace out of interest, and I'm happy there are people like yourself who drop by and take the time to comment. I appreciate it.
Really good content. Keep it up.
One small query. Is it possible to make multi page gui using eel?
Hello and thank you very much for your comment! Glad you liked the video =)
You absolutely can create multi-page GUI using Eel! Just have multiple HTML files and either hyperlink between them, or use JavaScript to jump around between them. But do watch out for an Eel bug that can cause Eel to crash if you navigate between pages too quickly.
@@NERDfirst thank you for a quick response. Do try to do a sample multi page project for us viewers.
Is there a way to mitigate that bug.
Hello again! I don't believe I will be doing a video with multi-page interfaces as that's plain HTML. You can research on links in HTML pages to implement this.
I am not aware of any way to mitigate the bug.
Hey great video, is there any way to run on any browser other than chrome?
Hello and thank you for your comment! Yes, eel allows you to choose from one of several backends, assuming that it is installed. Refer to "mode", which is an optional parameter of eel.start: github.com/samuelhwilliams/Eel#app-options
thanks for the info, could you give some examples other than eel to build bigger more complex python projects that has a front end that uses html
You're welcome! I'm afraid I don't have much knowledge about this. I have use pywebview before, but that's more limited compared to the features available in Eel.
I need to look into this. Since it is web based can you view the page from another computer ?
Hello and thank you for your comment! While technically you can if you let eel run on 0.0.0.0, I don't think it'll work exactly as you expect since eel isn't designed to be a server. If you want to expose pages to be viewed on other devices you'd probably want to use something like Flask.
0612 TV w/ NERDfirst I will look into flask
pls help me :(
what should I do with this error?
I have the same code
Error: 404 Not Found
Sorry, the requested URL 'localhost:8000/index.html' caused an error:
File does not exist.
***I forgot to create the folder named www sorry :)
Is there any way we can host the app to a cloud server? I tried Pythonanywhere.com but it's not working there.
Hello and thank you for your comment! If you're specifically talking about using an eel application, then no, it's not designed to be deployed to cloud.
If you want a cloud application you could easily just write the whole thing as a web app!
please make more tutorials about python frameworks or modules!!
Hello and thank you for your comment! Any specific ones you have in mind? I'll be happy to look into those.
@@NERDfirst yes. I really have. that part with calling Javascript functions from python doesn't work on my machine (I followed every step). meaning that, the code compiles and when I call the function from python the returned result is None (asumming that the js func returns a string). ummm, make a repo on github with the code used by you in the video and let me make an issue thread.
I'm afraid we don't currently support the mode of communication you have suggested. Perhaps you can elaborate more on this comment. Alternatively, contact me over email at hello@nerdfirst.net
Hi, I install Ell successfully via pip and can import it into my project however when I run it, I get the error: "ModuleNotFoundError: No module named 'pyparsing'" Any ideas on why this is?
Hello and thank you for your comment! It sounds to me like Eel depends on a module called pyparsing which you do not have installed. Pip should have installed it for you, but perhaps that operation has failed for some reason.
Try running pip install pyparsing, and seeing what happens.
Sir, I want to ask something about installing eel using "pip install eel" through cmd. Why is it error? In this line, it is said "Installing build dependencies ... error", then all the red code goes in and eventually, eel failed to be installed. Does anyone also has the same problem? Or have solution for this problem? This line pops up too, "WARNING: You are using pip version 20.2.3; however, version 20.2.4 is available." Should I upgrade it?
Hello and thank you for your comment! Unfortunately this doesn't give me much useful information to solve the problem.
Upgrading pip is always good. But there's probably some other causes of error if pip is failing to install some other dependency. Look through the log carefully to see exactly which dependency is failing to install. Then search online to see if other people are having the same error, and how they've resolved it.
Is there a alternative for Py GUI which is more reliable with few heavy lifting?
Tkinter or PyQt doesnt seems to have the 'moder ui' looks.. is there any workaround for that please?
Hello and thank you for your comment! I'm afraid I don't have much experience with GUI in Python. Consider using eel, as web interfaces give you more ways to get a "modern" look.
@@NERDfirst Thanks for the response. But the app needs to be robust and multiple interactions parallelly. Since its eel is not meant for that I'm looking alternatives
Hello again! If you need parallel interactions, have you considered just building a standard web application with Python backend? Even if it's meant to be run on one system, you can always set up a local server.
Is it possible create an App with it and run in a computer that there’s no Python installed?
Hello and thank you for your comment! You may want to look into PyInstaller, which has official instructions for use on the Eel github repo: github.com/samuelhwilliams/Eel#building-distributable-binary-with-pyinstaller
Hi! do you know how to set main window size? Geometry and size params doesn't work. Also when I set block=False I get a connection refused by localhost error and the GUI doesn't show up. Thanks!
Hello and thank you for your comment! Assuming that you're doing it correctly, there may be some weirdness in how eel talks to the webview provider. Try switching to another webview provider. This issue on the eel github seems to imply that there may be other state that could affect this as well, so you may want to restart: github.com/ChrisKnott/Eel/issues/238
@@NERDfirst I found that issue on github a few days ago. Done that but doesn't work either. Thanks for replying!
Hi! great and super clear video, but i need some help, i copy te code exactly like yours, repect the folder structure, use the same names, all of that, but when i run the code, in the interface say Error: 404 Not Found
- Sorry, the requested URL 'localhost:8000/index.html' caused an error: File does not exist. and the console say "OSError [WinError 10048] Solo se permite un uso de cada dirección de socket (protocolo/dirección de red/puerto) ('localhost', 8000)" what can be the error?
PD: sorry for the awful english :| thanks a lot
Hello and thank you for your comment! The error message tells you all you need to know - The port is in use!
You probably have another instance of your program still running, or there's another program that's using port 8000. It appears you're forcing the port number to be 8000 - This is not the default behavior of eel. Either way, you'll probably want to start diagnosing the problem from here. More than one program is trying to use port 8000, you can't do that.
Do I need a webserver installed to use eel?
Hello and thank you for your comment! You don't need a webserver, eel comes with one!
i dont try yet, but people said that file produce by electron or its derivative will be BIG in size. Please confirm.
Hello and thank you for your comment! Luckily this technique does not use electron (that's possible, but optional). I have not yet tried this with PyInstaller to see the size of the executable, but from what I understand, Eel uses your system browser rather than packaging its own. That can help keep the filesize down.
@@NERDfirst - appreciate your response bro. Many thanks.
Hey umm what version of eel were you using in this video?
Hello and thank you for your comment! Oops I did not actually make a note so I can't say for sure.
If we go off the video upload date... I released this video on 2-Jul-2020, so it has to be earlier than that. So referring to their github repository... it's probably an early version of v0.13.x?
Ahhh I see
Actually the recent versions of eel seem to have a problem in which setting the block=False causes the app to stop working
and give a LocalHost not found error
Thanks for the reply btw :)
No problem! I was going to suggest posting an issue on their github page, but I see you've already done this. Hope it gets fixed soon!
is Eel stable to go with and build some python application instead of the ugly tkinter and pyqt ?
Hello and thank you for your comment! Depends on what your stability requirements are. As mentioned, there are some bugs that need to be worked around.
pls make more video of new things in Python
Hello and thank you for your comment! I'll see what I can do =)
Does it supports multipage app ?
Hello and thank you for your comment! Yes it does. You can create multiple HTML pages and navigate between them as per normal. Just ensure that each page includes the eel.js script.
There was a bug back then that may cause the backend to shut down if you navigate between pages too quickly, but in my recent use this didn't crop up anymore so I'm inclined to say it's probably been fixed.
text = eel.readTextBox()()
AttributeError: module 'eel' has no attribute 'readTextBox' , i got this error what could be wrong pls help
Hello and thank you for your comment! The function has probably not been exposed properly on the Javascript side.
@@NERDfirst thanks, i got it now, i start again to watch your video from the start and you are right its not properly exposed.wonderful video better alternative than websocket,its simple yet powerful perfect for rapid deployment
Nice. But this thing make python have too much option and make you confuse about choosing gui lib for your python app.
Surely good for single page app with hardware interface which you can't do easily with only javascript
Hello and thank you for your comment! More choices of tools isn't a bad thing. For beginners without specific needs, the advise is the same - Pick one and stick to it. There isn't a need to fuss over which tool is the absolute best.
When I run ur code in vscode it gives me error sorry the request url localhost:8000/index.html caused an error.. can u tell me why??
Hello and thank you for your comment! I'm going to need a lot more information than that to even begin to help you!
What code did you put in? Which line did the error occur on? What is the folder structure? Did you install eel correctly?
@@NERDfirst after Python main.py
I'm afraid you've not given me enough information to help you.
@@NERDfirst Solved it ..
Forgot the web folder...
BTW good explaination...
Hello again! Glad you managed to solve it =)
sir mine expose is showing attribute error plzz help
Hello and thank you for your comment! I'm afraid I don't have any information to work with here and so cannot further advise.
Suppose I want to send a pandas dataframe to JavaScript..please guide me..
Hello and thank you for your comment! I don't believe this is possible, as JavaScript won't be able to "unpack" the dataframe.
Instead, do all the processing you can in Python. Convert the dataframe to a list and send _that_ to JavaScript.
@@NERDfirst if the data frame has 10 lakh rows..Give me options..
Can you do a video on FastAPI
I'm afraid I'm not familiar with FastAPI.
Error: 404 Not Found
Sorry, the requested URL 'localhost:8000/index.html' caused an error:
File does not exist.
Everything is correct, the folder name, the file name and import eel corrrectly . no spelling errors. What to do, please reply otherwise F for my CS class!!!!
Hello and thank you for your comment! If everything is correct, as you say, then this error should not be happening.
Rewatch the video and ensure that you have really followed everything correctly. Ensure that you don't have multiple copies of your program running. Check that you are accessing not Eel via a web browser, and instead using the GUI that appears.
Hey man i need you help iam going to ask a weird question I download virtual dub of 64 bit i download virtual to remove subtitles for removing subtitle you need a Msc subtitle remover filter whenever I try to load the MSc subtitle remover filter it will show this error
Cannot load plugin module "C:\Program Files\VirtualDub\plugins\MSU Subtitle Remover.vdf: %1 is not a valid Win32 application.
Can you tell me how to fix this problem idownload the correct version of virtual dub
My pc specification
Windows 10 64 bit
4gb ram
Intel i 3 processor
Nvidia GT 710 graphic card please help me
Is there any special filter pack for 64 bit
Please help me bro !!
😥😥😢
Hello and thank you for your comment! You may want to download and install the 32-bit version of VirtualDub instead.
@@NERDfirst I also download the virtual dub of 32 bit it will working and it will load the msc subtitle remover filter but when I load the msc subtitle remover and then click on ok and the virtual dub is crash and same thing happen again and again you think its graphic card driver problem or what but was not able to use the virtual dub filter what can i do
Don't be surprised if these plugins don't work well or clash with something else in your install of vdub, or on your system. In my experience many of the plugins aren't exactly stable.
@@NERDfirst thx man for telling me that i watch you for a long time but can you do you know a why to remove subtitle from video i mean i know how to remove a subtitle file from a video i am asking to remove subtitle that are embedded in videos like in anime do you how to remove them i know that its a weird question
I'm afraid I don't have any experience with this!
I'm getting an error while I'm trying to run my code on Visual Studio Code. In IDLE (Python 3.8) everything runs well without any errors. But It's more convenient to use VS code. When I'm open inspect mode on chrome I'm getting this error: GET 127.0.0.1:8000/web/eel.js net::ERR_ABORTED 404 (Not Found) It seems like eel.js has not been created. I tried change the port from random to 8000. And config my kaspersky antivirus because I saw something related to it in Chrome Sources. It's so strange. Does anyone face with this issue?
Hello and thank you for your comment! Ensure that vscode is using the same installation of Python as IDLE is using. If they are different, you need to do pip install eel again for vscode's Python.
You should not be opening the HTML pages directly in chrome as eel.js is not an actual script file that exists.
@@NERDfirst Thanks for reply! I think you're right..I was actually ran the html directly by right click in index.html and "Open with Live Server". I must run the project from the Python file. But how I can work on the project dynamically (Live) html and the functionality of python without refreshing?
Another thing, when moving relatively quickly between pages in my app. The web page is just crash. I think more people face it but didn't find how to fix that...
You will not be able to work on the project dynamically as you would expect from editors that provide such functionality, as eel is needed to act as a "middleman". In such situations, I've had luck writing some javascript to make the page automatically refresh itself, but it's not ideal.
As for the crashing bug you mentioned, I have alluded to it in the video as well. Unfortunately, until the creator of eel fixes it, it's going to remain around. Luckily the project is quite active, so hopefully this problem gets resolved soon. In the meantime, you may want to reduce navigation in your project.
@@NERDfirst Got you. Thanks a lot for the info!
@@NERDfirst Do you have any idea how to take a complete project combined all: html, css, js, python and use it as a web application on the web ( not executable file )?
I mean when you run the main.py file, the html file will function with all the python functionality.. since it's complied in python environment. But if I will upload my files as a website... The python functionally will not work ... since the browser only "know" Javascript. Do you have any suggestions ? I hope you understand my mindset ....
the output is not getting it shows like 404 not found error
Hello and thank you for your comment! Check and ensure that you are using eel correctly and that there are no spelling errors anywhere.
@@NERDfirst thank you for your reply and it came
@@NERDfirst how can I embed my machine learning python code in eel???
I think you'll find that the majority of the code stays intact. Just add some functions so that the UI can trigger off your code.
You're a really good, fluent speaker, but you should really get a better microphone that matches the quality of the content!
Hello and thank you for your comment! I do actually have a high quality condenser mic. Unfortunately the environment's pretty poor and not at all conducive for recording. Oh well, hopefully things will be better when I move in a couple of years =)
Nah, it's because of the room fans, actually. Need cooling (nobody wants to watch me perspire under the bright lighting), but there's no AC available and it's not really in my ability to change that.
why do we need the javascript code? this doesn't make sense...
Hello and thank you for your comment! The JavaScript code is used to notify the Python code of actions and events that take place on the front-end (eg. Clicking a button, typing in a text box etc).
If your use case does not call for it, you may be able to get away with not writing any JavaScript code.
@@NERDfirst got it, thank you!
You're welcome! Glad to be of help =)
block=False is not working!
Please help me!
Hello and thank you for your comment! That's a small letter b in "block".
I hate to see ppl use light theme
Hello and thank you for your comment! Sorry about that! Dark themes in the day make me feel fatigued so I usually only switch them on at night.
I am having a lot of trouble with this "blocked = False" argument. It just makes the localhost connection to be refused! With blocked = True, it runs normally but I need the window to be unblocked. I tried to use "eel.sleep(1.0)" (or even longer time intervals) and now the HTML and CSS works fine, but JS won't load.
I am in a kind of a hurry to get this working. Can someone help me?
Hello and thank you for your comment! If you use blocked=False, you have to keep the program running somehow, so eel.sleep() in an infinite loop is the right way to go. If that doesn't work for whatever reason, you may have to fallback to using blocked=True, and running your main logic in a separate thread.
For connection refused errors, double check that you don't have another instance of your program running.
@@NERDfirst I actually found out that there was an error in my Javascript file that was causing this problem. After fixed, everything's working fine. Thank you for your reply.