TUTORIAL - Electron JS - Custom Title Bar / Frameless Window - IPC Main/IPC Renderer - MODERN GUI
Ғылым және технология
Hi guys,
After many requests on how to create a custom title bar for Electron JS here on the channel I decided to record for you.
This video focused on the logical part, the HTML and CSS interface part will not be aborted, because have a large amount of content that exists on the internet on this subject. Another problem is that for CSS and HTML it is necessary to write a lot of code, which makes the tutuorial have more than an hour.
I am using FLEX CSS to align the interface.
SOURCE CODE:
The source code for this project is available to Patreon supporters:
🔗 Patreon: N/A
TOOLS:
Electron JS with Node JS
Visual Studio Code and Inkscape for drawing icons.
-----
//// DONATE ////
🔗 Donate (Gumroad): gum.co/mHsRC
//// PATREON ////
🔗 Patreon: / wandersonismyname
//// DISCORD ////
🔗 Discord: / discord
Subscribe to not miss any news from the channel.
See you in the next videos.
-----------------------------
Feather by Waywell / waywell
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/_feather
Music promoted by Audio Library • Feather - Waywell (No ...
-----------------------------
Пікірлер: 82
It's worth pointing out (so others don't struggle like me) that the region where "-webkit-app-region: drag;" is applied will have its mouse events disabled. So if you have CSS for some hover effect in that region - the hover effect won't trigger
@akbarmansurov1545
Ай бұрын
So minimize, maximize and close button (child elements) should get "-webkit-app-region: no-drag;"
Your tutorials help my life. Thank you so much!
Goood Thank you! I allready give up with IPC and do it on another way but know i need IPC again and i found your video and know it works.
Best teacher in this world 🔥🔥🔥
This is massive. Thanks. You are master of desktop development :)
Thank you very much for this, worked first time! Saved me a lot of hassle
great work! we need more electron js content
Please add more content of Electron JS. The best channel! thank you
Thank u for this great video. Lot of useful stuff really needed it
Powerful trick bro, awesome 👌😎👏🏿🙌💪
This is awesome!
you are the gui king
this is the best tutorial,, I have learned something
Is there a way I can make the app Electron JS examination App. That prevents users from opening any other window while the online examination process is going on.The user is allowed to access only the examination window?
so I'm getting this error: Uncaught error require is not defined so appearently you can't the browser can't require modules but node.js can do that which step did i miss?
Hi there. Any ideas on how to fix the window not resizing? Been bugging me for ages, and can't find a fix anywhere.
wow, sangat jelas. video yang ditampilkan. terimakasih banyak
este tutorial vale oro
so you editing code for electron by using vscode made by electron
@Roommate6
8 ай бұрын
who was first electron or vscode?
@ukyo.studio
5 ай бұрын
@@Roommate6 vscode was made in electron
thank you so much ❤️
Great content! Do you think you could make a video on how to do this with an already existing website? (Using LoadURL instead of loading files locally?)
thank you bro
Hey! Could you make a video explaining preload.js functionality? Tried to read the docs but it wasn't so clear for me. There's not enough info about it! Thanks for the content!
Thank's you so much!
I have a job interview coming up soon that needs me to create a mock-up, I'll let you know what happens!
Hi. Great video! One question: Why "-webkit-app-region: drag;" is not showing to me when I type?
Quando vi a notificação em portugues pensei: "Algo de errado não está certo" kkkkk
Please make a video about how you record this video. What tools, setup, apps, mic, recorders you use? Pls, include all of them.
Thank you for this wonderful video! Question though, how would I add content (i.e links) into the sidebar? (left menu one)
@richardprakash4630
2 жыл бұрын
I suppose it would be in the index.html file. It would be just like a regular web app (i,e using nav, ul and li elements). If you want to load different views on click of it. Consider adding routes just like a regular web application, as a end user it would not be visible but the web container keeps track of this and loads different views
Thank you very much! I have entered afternoon looking how can I do a customized window in electron!, Thank you very much again
Hi, great content, however is it possible to customize title bar with an existing webpage using LoadUrl
browser preview doesn't work for me just because i have so many extensions
Setting contextIsolation to false is a security risk. So is setting nodeIntegration to true. If you're only loading local content, it's no problem, but if you load any remote content, you're asking for trouble.
Works fine
@WandersonItsMe
2 жыл бұрын
Glad to hear this technique is still working in 2022
Thanks
Nice
já tentei procurar bastante até em cursos pagos e nao encontro como deixar a area clara (do lado da barra lateral) a ser a app principal, ou seja a app principal a rodar toda na area clara e mantendo a barra de titulo e barra lateral sem carregar novamente
@oni9619
7 ай бұрын
Estou me matando tentando encontrar uma forma de conseguir fazer isso haha. Já se passou 1 ano, vc desistiu ou conseguiu resolver? Como?
The issue with this is that context isolation set to false is not a recommended approach.
which do you think is better for desktop GUI, python + qt or electron.js?
@WandersonItsMe
3 жыл бұрын
Electron ++++, haha. Python is not very stable for Qt 😢, but with C++ is a good option. Electron have, Discord, VS Code, Skype, Atom and much more another moderns apps.
@asaadelaissami
3 жыл бұрын
@@WandersonItsMe ohh, What exactly do you mean, it's not very stable? don't you recommend python + qt (pyside + qwidgets or pyside + qml)?
Thank you so match my friend this help me a lot like and subscribe for you
@WandersonItsMe
3 жыл бұрын
Thank you very much 😀
Any video just to explain link between python and qt quick, pyside, to explain it more please because I couldn't go forward using python wit qt
@WandersonItsMe
3 жыл бұрын
See this videos(10, 11 and 12): kzread.info/dash/bejne/dIeBz5SYYqa1hJc.html kzread.info/dash/bejne/do2qtZamYpiTp7g.html
@mujtabaaltayib7417
3 жыл бұрын
@@WandersonItsMe I don't know how to thank you, your efforts are appreciated ❤️🌹🌹🌹
Nuce
So you explicitly go against the security recommendation of nodeIntegration: false and contextIsolation: true? God I wish there were something better....
tem versão em português?
Como se tornou fluente em se comunicar em inglês? foi devido a algum curso ou foi sozinho?
@WandersonItsMe
2 жыл бұрын
Fala Anderson, infelizmente eu não sou fluente ainda e preciso melhorar muito. Essa voz é de uma API da Microsoft do qual fiz um APP para traduzir os textos em voz. Meu inglês infeliz ainda precisa melhorar muito.
@mastertmplayer
2 жыл бұрын
@@WandersonItsMe que maneiro ficou isso, poderia fazer um conteúdo sobre isso, seria muito legal, possuo um canal que foco em gerar conteúdo também em inglês geralmente sobre HTML, CSS, JS, porém os vídeos tem apenas músicas de fundo pois não sei conversar em inglês ainda, isso me ajudaria bastante hahaha
Do you make the music by yourself? I all ways hear the tune. Good music tho
@WandersonItsMe
3 жыл бұрын
It wasn't me, it has the credits in the video description 😁
Any plans on a python with react app tutorial?
@WandersonItsMe
3 жыл бұрын
Not at the moment, I haven't studied React yet
PLEASE, make these kind of cool videos in Qt Designer, i really want them, there is no one that makes videos about PyQt5 like yours, so please, make some...
Still good in 2024
Npm extension didn't make a "npm scripts" tab :
@nobody008eermac949
3 жыл бұрын
you need to enable it by clicking on the three dots button next to explorer
great tutorial, but would be better without the music, i have my own playlist
@WandersonItsMe
2 жыл бұрын
Ok
Great, but if I already had configured my own menubar, then how do I maintain accessibility to it?? :-s No custom-titlebar tutorial explains this ;-(
like
9:17
Machine voice?
@WandersonItsMe
2 жыл бұрын
Microsoft Azure Text To Speech API
@jithind-feverx2818
2 жыл бұрын
@@WandersonItsMe👍
anyone else watch this and go F it, I'm shipping my product with the fugly default bar lol 😆
Thank you. But make it free (:
The audio is so incredibly tacky.
@WandersonItsMe
2 жыл бұрын
💩
Your music is very very annoying... its just not needed
@WandersonItsMe
3 жыл бұрын
Ok 😅🤣
@nicollasfelix26
2 жыл бұрын
@@WandersonItsMe I love the song, surely pump me up to keep going, nice tutorial please mooore!!! Thanks so much. By the way I could not manage to get the side menu to appear, for some reason the BG collor only pops up when I put some content on it. Looking around to see if I can figure it ou, so far code is the same as yours.
Nice