Drink Dispenser UI in QML Part 2: QML Development
HTML-код
- Опубликовано: 15 сен 2024
- In this video, I take the UI mockups created in the last video and implement it in QML from start to finish in less than 1 hour. If you didn't watch last video, this UI is for an imaginary drink dispenser possibly if Keurig combined their discontinued KeurigKold and regular coffee machine into one to have a machine that could serve either hot or cold beverages. The Qt project demonstrates the usage of QML, StackView, QuickControls 2 Material components, Integration with C++ backend, exposing enums with Q_ENUMS, Q_PROPERTY's, Q_INVOKABLE, and more! Link to the GitHub code in the video description as well as a link to a working web app demo compiled with Qt for WebAssembly
Source code on GitHub:
github.com/Mon...
Dandy video Hai...absolutely top-notch, as usual! I spent 5-6 hours working through both of the videos in this series today, and found that I could pretty much implement this project myself, after about 10 minutes or so, when I saw where you were going with it. I did watch all the way through though, and picked up a few great nuggets of knowledge.
One thing I did that you didn't do, is that (on your DrinkSizeSelection page, I created a boolean property and set it to true only when one of the sizes was selected. Then I set it to true in the onClicked handlers for each button--and then used that bool value to set the color of the "start dispensing" button. If the value was false, I just returned the color "transparent," while I did what you did if the value was true. It's just a way to not let the user see the "start" button until they've actually selected an actual drink size to dispense. Just for kicks...
Love your videos though--and it's obvious that I'm learning the workflow from them. I spent the last 3+ weeks working through all of Daniel's courses, so I was pretty good at the QML (not perfect, but pretty good), but the value in your videos is that we can see the workflow that you go through to build something like this. Brilliant--and thanks so much!
Awesome! While I was editing the video I saw the start button and thought I probably should have it disabled until a size was selected, but since it was already recorded I let it be, so I'm glad you noticed that and took the opportunity to implement it yourself. Means you definitely understand the QML and how to interact with the components! Thanks for watching and commenting as always!
@@MontyTheSoftwareEngineer Yeah, it's not really all that different from using the MS visual C++/C# to do UIs...or even the Qt Widgets. Sure the syntax is different, but the logic is mostly the same--and I've been doing that stuff now going on 15 years.
I would like to thank you for these wonderful videos ^ ^
This is my favorite new friend I love you channel 👏🏻 thank u for is video it’s helpful
Thank you for sharing such a great tutorial. The two videos in this series are certainly enough to keep an inexperienced programmer busy learning a myriad of skill sets for some time.
Now, let's say you have finished implementing this program, as you did, how would you deploy it, and what device would it get deployed to? I'm sure this would go onto some type of embedded machine/OS. What would that process look like? If we have already gone this far, my humble opinion is that we might as well take it all the way through from UI design to code implementation, selection of embedded device and to deployment. This way it would provide the complete end-to-end immersive experience of the SDLC using Qt/QML.
** Good idea for a part 3 video maybe?
** What do you guys think?
Love the idea, may end up doing something similar in a future series!
You are really good. It's so soothing to watch your videos. Would love to see you to recreate the Intan RHX software. It's been made with QT to record EEG. Very advanced stuf, it's my goal to build it once I learned enough programing 🤞
Thank you for the helpful tutorial!
Hey Monty, I have a more general question. Is there any specific reason of you for not using the Qt Design Studio. I can see that you don't necessary need it, because you are able to build your nice UI without it. But I was wondering if there are any advantages building the prototype in the Qt Design Studio.
I am still new in the whole Qt Quick/ QML Topic and I try to get an overview of the available Tools.
Thanks a lot for your Videos!
Hi Christopher,
When I create widget based applications, I will use the graphical designer, but that's how I learned Qt originally years ago so I became pretty comfortable with that workflow. When I started learning QML, the designer was still in a very early stage and did not work very well, especially when including custom components created from C++. Because of that, I did all my QML via the markup and became comfortable with that workflow. Since the design studio is now officially released, I have tried it briefly; however, due to being comfortable with QML and having a lot more flexibility when you drill down to the actual QML files, I've just stuck with it. Hope that answers your question, thanks!
Thank you for the quick and detailed reply. Yes I think I got a good idea from your answer :)
Can you run queries to filter data in firebase with QT?
thanks you so much ^^ i'm from Viet Nam
Hi, can you please do some tutorial on animation and database
I just finished recording a video earlier! It’s for using firebase database with Qt!