TUTORIAL - Electron JS - Custom Title Bar / Frameless Window - IPC Main/IPC Renderer - MODERN GUI
HTML-код
- Опубликовано: 19 мар 2021
- 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 ...
----------------------------- 
Наука
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
So minimize, maximize and close button (child elements) should get "-webkit-app-region: no-drag;"
Your tutorials help my life. Thank you so much!
This is massive. Thanks. You are master of desktop development :)
Best teacher in this world 🔥🔥🔥
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.
great work! we need more electron js content
Thank u for this great video. Lot of useful stuff really needed it
Thank you very much for this, worked first time! Saved me a lot of hassle
This is awesome!
Powerful trick bro, awesome 👌😎👏🏿🙌💪
this is the best tutorial,, I have learned something
Hi there. Any ideas on how to fix the window not resizing? Been bugging me for ages, and can't find a fix anywhere.
Please add more content of Electron JS. The best channel! thank you
you are the gui king
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?
thank you bro
thank you so much ❤️
este tutorial vale oro
wow, sangat jelas. video yang ditampilkan. terimakasih banyak
Hi. Great video! One question: Why "-webkit-app-region: drag;" is not showing to me when I type?
Thank's you so much!
so you editing code for electron by using vscode made by electron
who was first electron or vscode?
@@Roommate6 vscode was made in electron
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 for this wonderful video! Question though, how would I add content (i.e links) into the sidebar? (left menu one)
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
Quando vi a notificação em portugues pensei:
"Algo de errado não está certo" kkkkk
browser preview doesn't work for me just because i have so many extensions
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
Estou me matando tentando encontrar uma forma de conseguir fazer isso haha. Já se passou 1 ano, vc desistiu ou conseguiu resolver? Como?
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 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
Thank you so match my friend this help me a lot
like and subscribe for you
Thank you very much 😀
Works fine
Glad to hear this technique is still working in 2022
I have a job interview coming up soon that needs me to create a mock-up, I'll let you know what happens!
Thanks
Nice
which do you think is better for desktop GUI, python + qt or electron.js?
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.
@@WandersonItsMe ohh, What exactly do you mean, it's not very stable? don't you recommend python + qt (pyside + qwidgets or pyside + qml)?
tem versão em português?
Please make a video about how you record this video. What tools, setup, apps, mic, recorders you use? Pls, include all of them.
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.
Still good in 2024
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
See this videos(10, 11 and 12): ruclips.net/video/BSMm2_2COT4/видео.html
ruclips.net/video/DYvS4m25-wU/видео.html
@@WandersonItsMe I don't know how to thank you, your efforts are appreciated ❤️🌹🌹🌹
The issue with this is that context isolation set to false is not a recommended approach.
Como se tornou fluente em se comunicar em inglês? foi devido a algum curso ou foi sozinho?
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.
@@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
Nuce
Do you make the music by yourself? I all ways hear the tune. Good music tho
It wasn't me, it has the credits in the video description 😁
Any plans on a python with react app tutorial?
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...
So you explicitly go against the security recommendation of nodeIntegration: false and contextIsolation: true? God I wish there were something better....
like
great tutorial, but would be better without the music, i have my own playlist
Ok
9:17
Npm extension didn't make a "npm scripts" tab :
you need to enable it by clicking on the three dots button next to explorer
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 ;-(
anyone else watch this and go F it, I'm shipping my product with the fugly default bar lol 😆
Machine voice?
Microsoft Azure Text To Speech API
@@WandersonItsMe👍
Thank you. But make it free (:
The audio is so incredibly tacky.
💩
Your music is very very annoying... its just not needed
Ok 😅🤣
@@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