Python, PySide2 and Qt Designer - Toggle Menu / Burguer Menu Animated (Time-lapse Video)

//// DONATE ////
🔗 Donate (Gumroad): gum.co/mHsRC
DOWNLOAD PROJECT:
github.com/Wanderson-Magalhae...
A simple project showing how to make an animated menu using Python, Qt Designer and PySide2
Good studies for everyone!

[@franciscodemelo7]

A cada vídeo um novo aprendizado com seus vídeos, parabéns mano

[@marcjosephcole1208]

thanks for an awesome tutorial. I'm currently doing a school project right now and this video really helps me a lot. 😊

[@tesseract7777]

Thank you for sharing this!! This looks so much more fun than web design. :)

[@e.g.solutions8744]

Muito bom tutorial, tão intuitivo que não tive problemas em adaptá-lo ao QTCreator com C++. Parabéns pelo trabalho.

[@overkill4262]

Not even kidding like you make such good videos man you have some talent

[@TC-xi9vw]

great tutorial for beginner, thanks a lot

[@mdaasil2329]

Thanks very much bro. You are a life saver. This helped me way too much!

[@parsakarami7444]

At first I was like "What are these damn QFrames for he's adding hundreds of them", and in the result I found that all widgets which have great positions with suitable spaces are based on those QFrames in different layouts; You're a TRUE UI designer!

[@bacishogemerci2517]

Very interesting ! Thank you brother !

[@antonyalen2745]

Broooo!!!!! Your videos are fire!! You should consider creating a tutorial series for Qt Designer 100% subscribed

[@kamamedia3535]

thank you man, you are a blessing.

[@manjunathneelmath2104]

You are amazing and you have helped me so many times, Thank you so much.

[@juanmartinmestica899]

wooooww great tutorial, really appreciate this, thank u

[@emersonsilva6647]

Excelente Wanderson, parabéns

[@WandersonItsMe]

Vlw Emerson. Muito obrigado.

[@digitalmachine0101]

Good information

[@Christine-ne3dw]

Thanks for the vid

[@bengbeng2005]

EXCELLENT

[@isnardmachado3337]

Parabéns !! Assim fica fácil de fazer, agora é só corte e cola kkk

[@kilopo958]

Thanks thanks thanks ❤❤❤

[@galaxymariosuper]

one word: brilliant

[@WandersonItsMe]

Thanks man 😀

[@zakariae.eddatssi]

thanks a lot Bro

[@badereddinedif2824]

Thank's 😍😍

[@adityashrivastava1503]

very useful

[@linuxtubers7313]

You should start a tutorial series. It will ne very helpfull for us.

[@585ghz]

Nice Bro! (from Brazil)

[@WandersonItsMe]

Também sou brasileiro mano. Seja bem vindo! 😀

[@raven1439]

Can you tell me what needs to be modified to make the selected page highlighted, as it happens when you hover the mouse over it?

[@averaldo_]

Excelente Mano! Me ajudou bastante.. agora será que eu consigo fazer isso tudo num EXE só? usando pyinstaller ou py2exe algo do tipo? Ja usei o pyinstaller mas era 1 arquivo.py bem simples..

[@dennisasamoah2213]

great

[@facundoreyes]

Hi! Great video! I've been following some of your videos and they really helped me! For this particulary video, I did what you show, but my GUI is kind of minimalist (just like the one you make for the Custom Title Bar video), so I would like to know If there is a way to make the toggle menu fully hiden? I've tried changing my buttons setVisible property, but it makes the animation look weird. Thanks!

[@facundoreyes]

For anyone having this same issue, I solved it by breaking the frame_left_menu layout(I was using a vertical LayOut). You will need to set each button's position manually

[@scottfernando3647]

Quick question, why have you provided enabled as a parameter? (11:35). It must always be true each time the button is clicked right?

[@Nikbleat]

Благодарю!

[@SumanPokhrel0]

Pleasee create a tutorial series, its so good to see great UI like these done in python

[@WandersonItsMe]

Yes, I will create soon 😀❤

[@bobbythebuilding123]

I'm still new to programming in python and I must ask, how do you modify the content in page 1 etc. ?

[@muhammadsaadurrehman1498]

i am unable to use vertical layout option in PyQt5... What to do?

[@MarcusVinicius-ek5oq]

Eu adorei o tutorial, só tive um problema, em que os botões não expandem junto da janela

[@5chr4mm]

Parabéns pelo trabalho, ficou muito legal esse projeto. É possível inserir ícones ao invés de texto nos menus? Pra colocar o icone do Burguer ao invés da palavra TOGGLE. E também seria possível colocar apenas um ícone quando o menu estiver retraído e mostrar o texto quando expandir?

[@WandersonItsMe]

Fala mano, vlw mesmo 😄. E sim, é possível. Fiz um vídeo mostrando inserir imagens e converter e resource. Fiz com imagens nesse projeto, se quiser baixar para estudar como tudo funciona: kzbin.info/www/bejne/n5KsoKKDbqufiKs Nesse vídeo mostro como inserir images: kzbin.info/www/bejne/boeTnWB6qJyJjrs

[@dergenius8534]

Thank you. I downloaded the code but how can I change the Menu/Page Names? I have main.py, ui_functions.py, ui_main.py, ui.main.ui. Where do I find it?

[@juliangrieco]

Can anyone explain why we need to add "lambda:" when we connect the button to the toggleMenu function?

[@soulaimanacrespo9475]

C'est bien fait et expliqué, je ne pensais pas que c'était possible. Merci pour la vidéo. Do you know how to make circular progress bar with pyqt5 ? A lot of thanks. Merci

[@WandersonItsMe]

I think that only using canvas, I don't know if this feature exists natively and I don't know about it 😕. I did a circular progress bar recently, but in WPF.

[@cristhianelvisvelasquezven3726]

Now that your project is done, is there a way I can add another frame to the central widget? I tried to do it in my project but I can't and don't want to redesign another gui by adding one more qframe. I have been able to add other elements within qframes but not within the central widget.

[@cristhianelvisvelasquezven3726]

By the way, I really like your projects, I learned interesting things

[@WandersonItsMe]

The best way would be to create a project from scratch. Adding this function now may break your entire interface.

[@cristhianelvisvelasquezven3726]

Maybe you can make an example where the * MainWindows * has a slightly transparent background. For example if I am seeing a blue image and I open the software window it should have a slightly blue background, if the image is green the software should show that green color a bit. I hope you let me understand. That way the groove music windows 10 options bar works.

[@WandersonItsMe]

Hi, unfortunately like Groove is not possible, this effect is called "acrylic brush" and is available in the C# UWP tools, it is also possible with WPF making some adjustments. Qt Unfortunately, I don't think you have that possibility, just with transparency, which is not so cool.

[@kritikbangera]

Nice video..! I need help in changing pages through toggle menu can you make a video or give me a hint or something I am really struggling with it..thanks in advance😃

[@WandersonItsMe]

Hi man 😃. Done! kzbin.info/www/bejne/iIrHcplog61jirs

[@thelostman5625]

*How do I convert my PySide or PyQt programs into Android Applications?*

[@GoodBoyDanny]

MORE MORE MOREMORE PLEASE

[@GoodBoyDanny]

Actually thank you, 24 hours later I've made it look SO good. You are the only person on the internet who was actually able to help me.

[@DiamondDemon09]

Hi. Im new to qt and just started working on a project. I have menu bar with buttons, but have yet to figure out how to change content in body. I have previously worked with vue where this was done with routers, but dont know where to start in qt. Im using c++, not python

[@WandersonItsMe]

Hi, I unfortunately don't know anything about C ++, everything I learned about Qt for Python was studying alone and reading the official documentation, maybe it will help you: doc.qt.io/archives/qt-4.8/stylesheet-reference.html

[@DiamondDemon09]

@@WandersonItsMe I will do my best, thank you

[@ayushgoel26]

Hi wanderson. I am learning lot from your tutorials. I have a query regarding Loading a UI in python. Whats the difference between loading a ui via QUiLoader.load() and via compiling UI file into py and than loading it (In the way you do it in your videos) ? Thanks in advance.

[@WandersonItsMe]

I don't like to use UI files without convert to Python, I have a lot of problems to try execute runtime events using UI

[@clebsonsantiago]

Wanderson, Você ja tentou fazer um menu estilo Ribbon com esse visual moderno?

[@WandersonItsMe]

Ainda não, porém acho que em breve terei que criar algo nessa linha.

[@mun97696]

06:51 I can't view python code in pt designer. My version of designer is 5.9.7.. How can I make ui_main.py?

[@WandersonItsMe]

This a function of Qt Designer PySide2 version: pypi.org/project/PySide2/

[@mun97696]

@@WandersonItsMe Thanks! I solved it!!

[@caca684]

Hi, Is there anyway to get in contact with you? I found one of your repo on GitHub and would love to ask you a few questions!

[@WandersonItsMe]

Hi man, post your questions here, maybe help others 😃. I don't work with programming

[@alexpimentelminga6551]

I have this problem. ImportError: DLL load failed while importing QtCore: The specified module could not be found.

[@kkebongtv3508]

I had the same problem. Many methods in the StackFlow were attempted, but the import error could not be resolved. Anaconda reinstallation and all libraries have been successfully reinstalled. It was settled after that. I don't think it's just a path problem.

[@thisisarpankumar]

Can you show us how to do this using C++? or can you give some tip how to do this in qt5 c++

[@augustoruviaro7345]

Eae, por algum motivo meu programa sempre inicia na página 3, sabe o que poder ser ? Se possível, pode fazer um vídeo mostrando como troca de tela ? Tipo, tem aquele vídeo seu que você cria uma tela de login, daí você podia aproveitar ele e mostrar como passar daquela tela, pra essa por exemplo ao colocar login e senha. Parabéns pelos vídeos, são muito bons e obrigado por disponibilizar os códigos, estão me ajudando muito mesmo.

[@WandersonItsMe]

Vlw mano, e que bom que tenha ajudado. Basta salvar no Qt Designer em formato .py deixando a primeira página em destaque, fiz um vídeo esse sabado mostrando isso até. Caso ai não sirva basta setar sua página inicial que desejar antes da interface iniciar como mostro no vídeo. Ai em vez de usar a função no botão, use ela fora do escopo dela para chamar a página que quiser: kzbin.info/www/bejne/iIrHcplog61jirs

[@augustoruviaro7345]

@@WandersonItsMe Eu vi esse vídeo, mas o meu Qt design não tem essa opção, eu tenho que converter o arquivo na mão pra python e depois converter pra pyqt5 trocando os imports. Pode explicar como faço pra surgir essa opção de converter pra python direto do qt design ?

[@WandersonItsMe]

@@augustoruviaro7345 sim mano, quando vc instala o PySide2 ele instala junto o Qt Designer, essa versão dele é a oficial para o Python, então para facilitar eles fizeram essa opção que já gera o código convertido.

[@seungminshin7652]

Thank you for this video and source code! I'm studying PySide2 and wonder why doesn't circular import error ouccur even though main.py import ui_functions.py and ui_functions.py import main.py.

[@WandersonItsMe]

In Python this is common at the beginning and a bit confusing too, read on: stackoverflow.com/questions/744373/circular-or-cyclic-imports-in-python At Stackoverflow there are several speeches on this subject.

[@jfuentes9743]

@@WandersonItsMeYes, I encountered this issue.. builtins.ImportError: cannot import name 'UIFunctions' from partially initialized module 'ui_functions' (most likely due to a circular import)

[@SergioDev2024]

Parabens pelo conteudo para desenvolvimento de sistemas com pyside preciso pagar a licença

[@ronaldodantas5185]

Cara muito bommmm eu queria dar 1000 likesss se pudessee

[@WandersonItsMe]

Vlw mano 😃. Que bom que o vídeo tem ajudado.

[@eliaspbareia]

wanderson como configuro para visualizar o código python do mainwindow?

[@WandersonItsMe]

Não entendi bem mano, quando diz configurar seria qual código no caso?

[@eliaspbareia]

@@WandersonItsMe vi que vc gera o código python do janela automaticamente

[@joschuaalexanderthies4587]

How can I change the content viewed on each page ?

[@WandersonItsMe]

Maybe this video can help you: kzbin.info/www/bejne/iIrHcplog61jirs

[@joschuaalexanderthies4587]

@@WandersonItsMe this helped me thank you, keep up the great work, everything you create looks beautiful 👌

[@zaphkielbellofiore185]

não consigo usar esse layout alignment :v

[@ploppyploo]

hi bro, i have a problem with the animation part. im able to expand the frame but unable to reset it.i tried my own way didnt work.then i used your method still didnt work.would be happy to find a solution.

[@WandersonItsMe]

Hi, you checked your code with original? github.com/Wanderson-Magalhaes/Toggle_Burguer_Menu_Python_PySide2/blob/master/ui_functions.py Because have so many causes to this problem.

[@ploppyploo]

@@WandersonItsMe thank you so much for replying. My problem is a lot simpler,i made a mistake in layout while designing. So it couldnt revert back to size. Is it neccesary to place the stacked widget inside another frame? i cant align layout of stacked widget like you did Edit:nevermind i had serious problem with frames.i figured it out,thanks for the awesome Video

[@SanderBakkerMusic]

@@ploppyploo Hi, what did you do to fix the design? I am having the same issue right now but I'm not sure how to fix it

[@Cashalotenko]

What python version do you use here, bro?

[@WandersonItsMe]

I'm using the version 3.8.2

[@naziburrahman852]

We demand a full project tutorial.

[@WandersonItsMe]

I have 😀: kzbin.info/www/bejne/pnWThph6bLhlbdU

[@heroshe7786]

If you want to work with it try with 0.25×.

[@ssssikarwar]

Bro, who suggested you to keep this loud background music?

[@WandersonItsMe]

These are KZbin's non-copyrighted audios. Only for video not be without any sound.

[@pedromsl7842]

Muito legal! Queria conversar contigo sobre uma oportunidade de trabalho. Como consigo te contatar?

[@WandersonItsMe]

Fala Pedro, tudo bem? Infelizmente não trabalho com programação cara, é apenas hobby e para automatizar algumas ferramentas de trabalho.

[@user-wf4zp2hf5s]

hello I have a problem can you help me?

[@WandersonItsMe]

Hi, whats the problem? 😀

[@user-wf4zp2hf5s]

@@WandersonItsMe Hi , Thank you very much for answering. For the first time, a person with 1.5 million subscribers answered me, but I already found a problem

[@drip7547]

it didnt work because it couldnt view it as python code :(

[@WandersonItsMe]

I couldn't understand what your problem is, could you explain in more detail?

[@drip7547]

@@WandersonItsMe i accidently used the qt desinger from the pyqt5 not the pyside2 folder... The video was great tho(edit: my qt designer only outputs c++ code even if i select :" view as python code"(second edit lol: i fixed the problem by creating a new bin folder in the Pyside2 folder and just putting the content of the Pyside2 folder in the bin folder in the Pyside2. my pip installer really is broken lol)

[@WandersonItsMe]

@@drip7547 Haha. Glad you found the problem. Only the Qt Designer version of PySide2 has the option to export in Python

[@adrianiskra3521]

Looks cool, but there's no hamburger ;

[@WandersonItsMe]

Is a rectangular burguer hahaha

[@bprods]

Hello Wanderson, I tried out your example with the functions from your git but I get some weird error: "File "/Users/johanbjork/Documents/programmering/repos/test/ui_main.py", line 18, in setupUi MainWindow.setMinimumSize(QtCore.QSize(1000, 500)) TypeError: 'PySide2.QtWidgets.QWidget.setMinimumSize' called with wrong argument types: PySide2.QtWidgets.QWidget.setMinimumSize(QSize) Supported signatures: PySide2.QtWidgets.QWidget.setMinimumSize(PySide2.QtCore.QSize) PySide2.QtWidgets.QWidget.setMinimumSize(int, int)" Might it be due to a version of PyQt5? I'm new as PyQt and find the documentations to be quite hard to understand, so I thought watching your videos would be a good start to learn instead. Thank

[@VitorSilva-gi3lb]

O br vai la e poe o video em ingles pra dificultar pra mim 👌

[@WandersonItsMe]

Qual o problema?

[@husansharipov2484]

WTF