Making modern GUIs with Python and ElectronJS
- March 22, 2024
- Posted by: MainInstructor
- Category: BASIC Go JavaScript Node Python Web Development
Video Title: Making modern GUIs with Python and ElectronJS
Many people who want to make a nice user interface for their Python apps find the standard GUI libraries like the kinder or PI QT are quite old and ancient looking so I’ll show you a better way of making geo eyes which look and feel more modern we will be using Python alongside
Electron J s to make cool-looking new eyes electron J s is a tool by github which lets users make cross-platform desktop apps by using HTML CSS and JavaScript so yes knowing these web dev languages is is a prerequisite for making these geo eyes personally I
Wasn’t a big fan of HTML and CSS but now I feel having a basic knowledge of these can suffice for our purpose of creating a GUI but the fun part is this that usually electron js apps have their back-end or logic part written in JavaScript but we will be using Python
Instead to explain how I will be making a GUI for a couple of Python programs that have already made before and this is the architecture of power electron plus Python output book electron is our front end and it makes and controls the UI windows which we need in our app to
Put content inside of these windows we will be using HTML CSS and JavaScript we will design our entire front end aesthetics using these languages Python is our back-end where we write the logic part of our app which could be anything from a machine learning application to a database management
System we will communicate between electron and Python over the standard input and output streams kind of like inter process communication so here are the things that you’ll need before getting started you’ll obviously need Python so make sure you have that you will also need nodejs if you don’t have that you can install
It from this website over here and after you’ve installed nodejs you can install Python shell using the node package manager or NPM for short we will be using this package to communicate between electron and Python so you can install that by using this command and make sure you have Python and node.js on
Your system path so after you have all the dependencies you’ll need to download the electron QuickStart library to do that type these commands in your terminal you might need to install git command line tools to do this but if you don’t have them you can head over to the website link here and
Download it manually after that’s done downloading I’m going to CD into that directory and install the dependencies which will download electron and start the app and after that is done this is what the QuickStart app should look like we will build a UI on top of this app so here
Are the Python programs that I want to make a GUI for the first one is a weather application which returns the weather information of a particular place using an online REST API the second one is a facial recognition app which can detect faces in a live video feed something like this
And the third one is a deep learning object detection app which detects the objects in an image which is specified so here I have an image of a talk and I’m going to pass this is input for my program and it correctly guesses it has a garbage truck or a trailer truck so
Let’s get started when we initially downloaded the electron fixed art library it made all of this it installed all the node modules and electron which is required it also had a index dot HTML file which is a face of the app and it had a main dot J’s and I’m gonna explain
Main dot J’s file right now so this javascript file it basically is responsible for making the window which we see when we execute the app and that is encompassed in the function called create window create window creates a browser window and everything in electron works in browser
Windows because the content inside of it is HTML CSS so we’re gonna make a browser window and are gonna point it to the index.html file which we want to load and then we create a certain set of event loops so what do we do when the
App is ready so when the app is ready we create the window the function you call the function create window and I’m going to get rid of that line here because I’ll do I don’t need it and when the app is in the state of window all closed I’m
Going to quit the app and so on so this is the main dot J’s file I’m gonna save that and now let’s have a look at the package.json file so this file is like a manifest to the entire app it houses various information as you can see over
Here it also has a pointer to the main file which is main our main degeus and it also has a start tag which points to electron dot so what that means is that when I do NPM start it it executes electron dot in the background so to
Make things less messy I will now make I’ll rename the project folder to something like GOI app or something and then inside I will make a folder called GUI and I will place all of the GUI elements in this folder and and also create a engine folder which will house
Our Python back-end so I’m going to take all of these gy files and I’m gonna place it inside or I accidentally place it inside the engine I actually I’m gonna place it inside the GUI folder so I place all of the electron files inside DUI and inside our engine we’ll have all
Our piping files and inside here in gy I’m gonna make a new folder called linkers and linkers will house all the JavaScript files which are responsible to connect our GOI that is electron to our Python back-end so let’s start designing our GOI so since we have three
Python programs I’m gonna make one main screen with three buttons each corresponding to the Python function behind it so I’ve already designed a such a DOI in HTML and I’m going to paste it right now it’s called GUI dot HTML let’s open that with Adam and here you can see it’s nothing fancy
It’s just plain old HTML file with three buttons and each button corresponds to one of the Python applications behind it so let’s see how this looks like so that’s how this web page looks like and each the three buttons and obviously you nothing happens when you click on them
Because we haven’t provided the functionality or we haven’t connected the back in yet and now we can delete the old index dot HTML file and inside of main dot J’s we can replace the index.html there with GOI dot HTM because that’s the main page for application and also inside our HTML
File here as you can see I have given some images which are supposed to be located inside a images folder and since you don’t have that let’s create a images folder and I’m gonna paste some of these images inside here and now let me open our up again we can see that
These images are loaded and also I know that I’m currently using a web browser to render these web pages but as we move on later we’ll use electron to render these web pages and then look more of like a desktop application I’m now going to design the web pages which are going to
Be loaded after each of these buttons are clicked so when in my weather application I would want a page to open up where I can type in the city name and then in confetti results and in my face recognition application I would again want a page where I can type the name of
The person whose face I want to add to the database and also a button to start the detection process so I’ve already designed these these web pages and I’m going to paste it in right now so I’ve made a weather dot HTML and I’ve also
Made a face dot HTML so let’s have a look at whether it has CML and so yeah so I have a place to enter the city name here and I can click on go to obtain the results but obviously nothing would happen right now because we haven’t gave
Them the functionality we also have a back button and even that’s non-functional right now and in my face application I have a button to start the detection process and I also have a input field where I can enter the name of the person whose face I want to add
To the database so let’s have a look at the code of face in weather dot HTML it’s a plain old has same a nothing new nothing fancy over here or this input field and a button however there’s also a back button and now we can point that
Back button to go to GUI dot HTML because that’s the page we want to go back to we have the button is clicked and the same we can do on the other face taught HTML as well or we can type GUI Ritesh tml there in the back buttons head stuff tag
And now we can go over to GUI dot HTML and remember those buttons we added in before so now we can point the weather button to weather at HTML and we can point the face button to face dot HTML so now all those buttons are linked up
And it would be one fluid or webpage so let’s test it out right now so when I click whether it goes to the weather page and the Go button still doesn’t work but the back button does and the face recognition it also moves on to the
Face app and even the back button works now that we have the front end sort of figured out I’m gonna go on to the engine folder and I’m going to paste these four files here these files are the ones which we saw earlier so face taught pi is the one which trance
Detection on faces add face dot pi is a script which adds new faces to the database and whether engine dot pi is the application which returns weather information for a pair for a particular city and object detection dot pi is the deep learning model which recognizes objects so now comes the tricky part
In order for this to work properly we have to slightly change the code such that we only take inputs from the standard input and we only output as well to the sound output so that our electron application our electron app can read them from there so I’m going to
Import this and I’m going to change the comma the argument city as a command-line argument and I’m going to remove the function as such I don’t need a function anymore and instead of returning weather information I will print it so that it goes to the standard output so when we print something our
Electron app can read the read this output and then act accordingly and we also have to do this system dot flush which is kind of essential because if you don’t do that the electron app will only take outputs in a block and it won’t be a real-time so this was
Weathered weather ends in dot pi I think that should work now and let’s also similarly modify faces or pie in face is thought by I think we need a face database which is inside a faces folder so we have to add that and apart from that I think there’s no user
Input as well so it’s fine this very little modification to be done here we can just call the script from electron and we should be fine and add face dot pie automatically it already takes takes in command-line arguments it takes in an image file and the name of the person in
The image and image file can be cam if you want to read from the app cam so since it already takes in command-line arguments we can call this dot pi this file from electron directly while supplying the command-line arguments so now that our back-end is ready we’re
Going to now connect our front end with the back end but before I do that I’m gonna make a new folder called faces because our Python application faces that I needed a face database and then I’m going to go into the linkers folder and inside the linkers folders I’m gonna
Create a few JavaScript files and these JavaScript files would be responsible for connecting the front end to the back end so I’m gonna make a new javascript file called whether or j/s inside this folder and I’m gonna make a new function called get weather and inside this
Function the first up I’m gonna import the Python shell library which we just installed using NPM and I’m also going to import the path library after that is done I’m going to get the value of the input tag from our HTML file and I’m going to store it in the variable
Settings if you can remember our weather at HTML file had a input tag for the city and we’re gonna and it had the ID city so I’m getting the value of that and after I get the value I’m setting the value in the HTML back to null and
Then I’m making a options object and then in that I am giving the scrub path and this part is the part where our script is located in this case weather engine dot pi so that is located inside once there back inside the engines folder and the arguments would be city which we just
Found so the command and argument would be city the city name and after that is done we can make a constructor we can call the Python shell like this and then I’m going to pass in the name of the script which is whether in single PI and
I’m also gonna pass in the options and then I’m gonna say if I get any response back to from my Python back-end I’m going to alert it so the SW al function is a fancy alerting system so this this function right now it reads the standard
Output stream and if there is any output it would actually alerted in the front end so now let’s make a similar function for our faces application I’m going to make a new file called face that J is inside the linkers folder and I’m going to make a function call detect faces
Inside this function if the first few lines the code would be exactly the same as the function get weather and then after that we’re gonna make a new constructor we’re gonna call the faces dot PI file and I’m going to pass in the same options but this time in the
Options we won’t have any arguments because of faces at PI file doesn’t take any arguments but instead I would be specifying a Python path because at least in my case I always around faces that PI using Python 3 so I’m going to specify the path to my Python 3
Explicitly inside the options folder I’m going to pass that in after that is done I’m going to add in some responsiveness features so once the bottom is clicked I’m going to make the text go to hang on and once the Python back-end has ended I’m going to set the text of the button
Back to redirect faces make another function called add faces remember our heads tml file for this app had two buttons one for detecting and one for adding a new face we already know the function for detection and now we’re going to write the function for adding the face so inside this function
The first few lines would be exactly the same as a previous function except that the arguments now would be a cam and the name of the person and the name of the person comes from the HTML files so we’re going to get that from the input
Tag with the ID name I’m going to pass that inside the arguments and we’re gonna make a new constructor same as before and then when the function when the Python back-end finishes execution we’re going to alert we’re gonna say that the face has been successfully added and we’re gonna set the text of
The button the button with the ID add to Adam your face again going back to the HTML file you can see that in the face app we have two buttons one with the ID add for adding a new face in the other button with the ID detect for detecting
Faces in life’s room so now we can actually connect the functions which we just wrote into our heads tml files so I’m gonna import weather dot J’s as a script tag inside weather at HTML and also in the button on when when the button is clicked on the event of the
Clicking of the button I’m gonna call the get weather function and similarly in face dot HTML I’m gonna import the faces or dais and I’m in the detect faces buttons on click I’m gonna call detect faces and in the add new face buttons on click I’m gonna call add says
So we can now finally do the outer application I’m going to CD into the GUI directory from the root directory and then I’m gonna call NPM start and yes the entire UI has popped up right now let’s open weather and lest let’s test out better by typing in London and let’s
See what the temperature in London is it should call the API right now and yes it is 52 degrees Fahrenheit there and the face recognition also works I guess let’s try adding my own face it should open up the webcam and yes I should be able to press a to capture my
Face and face has been successfully added let’s try to detecting the faces it should open on the webcam and yes it’s able to detect my face so that’s cool so both of these modules work but the only problem is that the object detection module we still haven’t given
Bindings for that now the reason for that is we could use the same strategy we use for the other two but the problem is that when we try to load a very heavy machine learning model it takes a lot of time right so every each and every time
We start the program just to start the program up it takes at least 30 seconds and that’s a lot of time so unlike the other two modules they were pretty much instantaneous from the time they were started to the time they gave the result but the object detection API takes a lot
Of time so I did think about it for a long time and I couldn’t find a way to store the loaded model in memory for long enough so the only solution that I could think of was to embed my entire deep learning program has a flask application so flask is really famous of
Web development toolkit for Python and I deployed my entire app my entire deep learning app onto a flask server so that way whenever I start the server the model always remains in memory as long as the server is running and so that way I can connect electron with a flask
Server so here is how I changed my existing object detection code I made it into a flask app and I made I defined an endpoint slash detect where I would be able to post images and then retrieve the results from that endpoint and all the logic happens in this class server
And flask servers by default they run on the five thousand port in localhost so and they also need they also need a templates folder where the HTML files are loaded so here is the object detection HTML file and the space for choosing a file and uploading it to
The server so now that I have that inside my gy dot HTML for the 3rd button for the object detection button instead of pointing into a static HTML file I would now actually point it to my local hosts IP address at the port 5000 slash to take the same endpoint which I
Defined in my flask server and now flask is already is now connected with my electronic so after that was done I also wrote this small shell script and this script boat starts the flask app as well as starts the electron up with the same one command so I did dot flash board order
Search and now with the entire server is running as well as the node app is started the electron up sorted so this is what the app looks like and it’s the same thing as before we can go together and it’ll work fine for any city so I’ll
Just type Delhi is to make sure it’s working and yes it is working so the new feature that we now added was object detection and I can choose knocking out is a file and I can just choose the same file as before I guess and by the way
All of this part is coming from the flask server so I’m going to choose this test or jpg file and I’m gonna upload it to the server and then I can see now that the objects detected in this was a moving van garbage van as well as a trailer truck
So yeah that was that and now we know that our deep learning app is working as well so that’s cool so that wraps it up for this video I hope you guys liked it and you learned something new and thanks for watching
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
how to export excutable file?
thank you for this. Great explanation of everything as well.
awesome video
Hello… the python script I integrated referring to your video is not working… I cant seem to understand whats wrong with it
Wow reaching this masterpiece after long time
Hi subscribed ! Respect
Thanks a lot.
Hi, Sourav Thanks for this video. R u interested to help us with a python desktop app that we are building with small functionality?
How can I compile it ??
Great Awesome! thanks
Terrible video. He was just regurgitating information he found on the web, LMAO.
Hi Sourav, not sure if you are keeping up with the comments on this video or not, but I believe this approach doesn't work anymore because electron by default disabled node integration except from the main processes. So, if I do the weather example, I get a reference error that "require()" is not defined because weather.js is not a main process.
Still figuring out a way around this change…
Pyqt is not old
He really doesnot know that electron js and python will more powerfull at 2021
If you still need to learn CSS then you should rather go with pyqt5. Then you don't need to learn HTML and JS. PYQT5 has a built-in functionality for styling everything just like you do with any website
if i create separate folders like you, i am getting error, please help!!
Are you crazy electron take 20% of cpu ram and python take 80% of cpu ram users pc will on 🔥🔥🔥
This tutorial is very amazing and helpful but how we will build these files to turn it to exe.
The Electron works as an alternative to Qt and GTK, right?
Excellent video bro. Please post more.
I was finding a video like this for last 6 months!!
Hey I need some guidance on my next project.
I am planning to make a desktop app using electron to manage finances, manage inventory & track orders so I need this desktop app to have a local database but I don't want other people to install any kind of external database software it should be like packaged within the app itself , and also this desktop app should be connected with some kind of online database (more on this later). And I also have made an android app to manage the end customer and provide them with regular updates and also collect data from them. Till now I have been using Google sheets and a web app to manage everything but this has recently become really problematic (many many issues) So I need to deploy my own database (local server or online server basically anywhere possible) and this has to be connected with my the electron app and the android app
.
.
So basically 3 things
=> a desktop app with a embedded database & also linked to a online database
=> A android app which is connected to the online database
=> and the database itself Which manages all the data from the android app user and the desktop app user
.
.
I have created the android app & also making the electron app seems doable BUT the embedded database & server database part seems really confusing and I have no clue what to do or where to start (the reason I picked electron for the desktop app is because I am really familiar with Javascript, HTML & CSS)
.
So I need some guidance (maybe alot) to make this happen
You shouldn't have put your RapidAPI key in the program itself(or in the video) 😅
how can we create a Python Electron Database (mysql) app
What ide or text editor is he using? Sublime?
I understood nothing, but i liked it…
Is it possible to bundle a flask application inside electron??
should python be installed on users system for this to work
Nice video Sourav!! .I would like to know what is the level of expertise I would need on NodeJs to do this.
Very helpful. Thank you
i dont understand , is he changing the image file to bytes can't we just pass in the image value …. someone please help
Such helpful video. Thank you!
I'm a blad guy
I am getting an error,
require is not defined (uncaught reference error)
bro how send multiple argument here:
var _option={
scriptPath:path.join(__dirname,""),
args:["1"]["2"]
}
and hwo to recieve multipla data :
import sys,json,numpy as np
temp1=sys.argv[1]
def myfun(num1,num2):
i=num1+" hello world !"+num2
return i
print(myfun(temp1))
sys.stdout.flush()
Thankyou so much : awesome information man
so great XD
Hi.
Thanks for the beautiful video on this one of a kind implementation. It would be helpful if you could show us on how to package the whole app and distribute it.
As we use electron for cross-platform development. Thanks in advance for the packaging tutorial.
Thank you..
Good video..
Please connect Vue Js at the frontend ..
Ehy man, which do u used to create the html structure with button exc…?