 So, while the talk is loading, I try to explain a bit more about the problem that I'm facing or I faced for a couple of years while developing QML applications in general, is that before Q5.11, there is a problem when if you want to check your QML code, you are only able to check at runtime if something is wrong or something is not, and a bunch of problems make it harder to develop and test a QML application to test your design if you need to compile your application every single time to do any kind of test. Sadly, the talk is taking longer to load, I don't know why exactly, but I can do the talk directly from my computer if this is necessary. Meanwhile, I faced this problem, I come up with a solution that is a really simple solution, but is to come up with a tool that is able to reload every single time that a file changes, if it's an image, if it's a translation unit, if it's something that can be tracked, okay, it's loaded. Every time that application is loaded, you need to check how to style the image, so you usually come up with this as a result if you don't have a real-time feedback of your application, you have the image, you have an SVG as an example, and if you don't do the proper configuration, you lose the correct feeling or the correct position of this element, so it takes iteration, and this iteration takes time, so if you need to compile your application, you run an application every single time to see if this works properly, if you break your workflow, and sometimes you make a paint to do this kind of development. So the initial plan was, as I said, to come up with something that could help me to create fast development with QML. At the time, I found a tool called WatchExec, it's made in Rusty, and with that, you can pass the files that you want to watch, or the extensions that you want to watch, and with that, I was only using QML with main QML and doing some tests and interactions with it. It works, it's like a cruise man alternative, but at least it does the job, and it's like you're compiling a C++ service code, you have a watch in the auto terminal, compiling the code every single time to see the assembly, something like that, but you figure out QZ interface. The problem with that is that every time that you change a file, the WatchExec queues the QML handler, and it starts the QML scene, and every single time the window is closed and opens, and if you move the window around, and you resize the window, the application will close, and it will start in the top left corner with the default size. And of course, this can be fixed with QML if you save this in settings, but this is not the case. The idea is to make it something that does not need any modification or service code that helps you to develop and test applications much faster. So with that, I come up with an idea to create a QHot. QHot is a really simple application. There is nothing really on it. It's just a simple QML service code. There is a base class that's used the URL interceptor and another class that has the file system watcher to see if the file is changed. And if that is the case, it reloads the application, it removes the cache of the App Engine and reloads this new file. So every time that you have an application, sorry, changing your file, QHot will restart the application itself with the window there. And if you just use the test manager, it puts above all the windows, you have these, like, always there. If you code, if you do any modification underneath, it will reload and it will make your development much, much faster. So I tried to do some hands-on later to explain how is the workflow and how interactive you can do your work. But QHot also allows arguments in runtime. You can pass, like, you can change the DPI, you can change the desktop if you want to use GLS, GL, software handling. You can import skewigami, you can use skewigami directly on it. If your plug-ins need to reload, it will reload your plug-in. So it tries to be as much helper as possible to do some KML code development as much interactive as it needs to be. Because since we are working with something that's a user interface, and usually you need to do some experiments, you need to put animation, you need to change the speed of the animation, you need to change the font size, if you need to compile your code, or if you need to do any kind of correction that breaks this workflow and this experimentation, it makes the development not harder, but not as cooler that it can be. You can create development in a way that is more interactive. So you can experiment of things, you can change colors, you can do a bunch of stuff that it really helps your development. So I'll try to do a small demo and see how it goes. So hopefully you are seeing Keyhot now. I just change it here to make everything as much as possible. If here I have Keyhot running in the top right corner, I have a term now running the output of Keyhot and here I have a simple blue rectangle. So if I want to create another rectangle, I can just create another rectangle and change the color to head. I did something wrong, I did it. I spelled the rectangle wrong. You have the blue, you have the rectangle, you have the other rectangle in head, but I forgot the size, so I need to put the size. If the parent.wediff divided by two, and I have the same thing to hide. So yes, of course, I have the second rectangle. Now I need to center in the parent. Okay, let's center in parent. Yes, that's what I want. Okay, now I have it. Let's put a text on it. Yes, of course, why not? Okay, text has a bunch of arguments. I just need a couple of these arguments. Text text here, academy. And of course, academy is like really small there in the corner. Let's change it to, I don't know, font dot pixel size. You know, 500. Okay, it's too big. Let's try 100. 200 is good. No, 100. So we can train the color to, I don't know, white. I did something wrong. Okay, that's the wrong property, color. Perfect. And of course, I also want to centralize it. Perfect. Now, if you want to create a second element to load your, to have nested elements, you can just create a new element. I have like a my icon there, single file here. I can create it here. I can save and I can put my icon here to load. What if it goes wrong? What do you miss it? Oh, rectangle is not a type. Oh, what did it wrong? I forgot the import statement. So I can put this import statement here. Of course, this is just a test, but it helps to see how interactive it is. You can just check the error message here. You can do a development. It makes it much, much faster. You can also start to do some crazy things. Like as a bunch of people know, rotation, it's something that I love because I love, I don't know why it's so funny. But if we just create the rotation here, again, just put to zero, 100, 160, sorry. I don't know what's wrong, of course. And I can put, I don't know, loops, animated, I mean, I made about animated.infinity. I think it's that. Yes. No, so I'll put a huge number here. I don't know. And we can also try the duration of it. Let's put like, no, no, it's too fast. One second. Okay. So as you can see, this is really effective. So you can try any kind of things and you're going to have your feedback at runtime. As you can see, I did a bunch of mistakes. It's really easy to see that I come up with a mistake because I can see that, okay, everything is missing. I have a message here here. Okay, that's what it is wrong. This makes the development time or the experimentation much faster because sometimes you don't need to create your entire KML code in your own application. You can come up with what you need in a small environment with a small KML that goes just to experimentation. But you can think that this is the end, right? But I have an application that does my job. It makes my development time much, much faster. But I thought that maybe I can do something better, much better. I can decrease the development time and besides that, I can decrease the gap of new developers to come with a KML development or how to make a KML development much friendly, much faster. And I felt the need of Qt running your machine. So this is the, this started with Compile Explorer because I'm a user of Compile Explorer to do a bunch of tasks and development and check what's being generated in my assembly or how to just test some new things with the new C++ concept and everything else. So Compile Explorer is really cool because you don't need to install the compiler. You can do everything in the web. It's really fast and accessible. And because of that, you can do a bunch of experimentation without worrying about two chains and a bunch of stuff. So it's much faster to do anything this helps the user to do tasks and helps the user to seek information and to learn. So it's much better for this interactive way and how easy it is to access. Because of that, I started because why can't we have these nice things with KML? What's the problem with it? So I come up with Qhot. I created a simple KML interface on it. And with that, I just created a simple text edit, put a bunch of code there, and created the same thing with Qhot. But if the browser, if they have a Q2EB assembly, the problem is that it's not as much friendly as it is, because QML is great in all, but for browsers, it's not perfect. You can see that the look and feel and the user interaction is not perfect. You can see that the look and feel and the user interaction is not totally accessible or okay. So with that, I moved away from the QML approach and started to learn HTML, CXX, and a bunch of web stuff. And for a simple developer, at least for me, that was like a better method of development with free marine stuff. And I started to learn a bunch of QML, CSS, etc. And if it's interesting, because if you google how to center, the first thing that appears is web stuff, because I don't know why it's so hard to centralize stuff with HTML, if KML is so easy. And so after a couple of months work on it, in a bunch of development, I come up with QML online. If you want to take a look, QML online is in QML online.kde.org. And with that, you can have access to the QML development directly, without worrying about two chains and everything else. You can go to the website, interact with the QML, check the examples, and do what's necessary, exactly like Compile Explorer. So the idea of the examples is to help newcomers just to come up and see what's going on. The idea of QML online is also to help any website or any blog to have QML code accessible in your own blog. So if you have a blog and if you want to put a QML code on it, you can just import the QML online component and use the QML online JavaScript library and pass the ID of the JavaScript script on your HTML. And you'll handle the web assembly, your QML code in your blog. The idea is also to put that in the documentation, like the Q2 documentation or Kirigami documentation, in a way that everybody can see the examples and run the examples directly on the website. And this makes everything much accessible and much easy to experiment and to test. And with that, it is not like a code example in a browser. You can just see the code example, you can edit it, and you can run directly in your browser. So if you want to experiment or do any kind of test with it, it's ready to go. You can do it. Of course, the idea is to create an interface that's totally friendly. So you have the terminal output. You can see there in red, you have the splitters. It can decrease the size of your canvas, increase the size of your canvas. It's the same thing for the terminal. It has autocomplete. You can share the code. You can share the code with tiny way hell. If you want, you can share the code with a permanent link. The entire code is like zipped with a string, and it should be a bit big. But at least you can share the examples to everybody. So you can come up with a QML example. You can share to your friend, oh, check it out. This is how you can do it. It's really simple. So it's accessible and it makes development and the learning process of QML in a way that is not hard at all. Everybody can test it in the browser right now if you want. So I'll show it really quick here. I'll share my screen again. Let me take it here. So right now you're probably watching QML online. It's going to decrease the size. As you can see, there is a wee example. Every time that you load or I load the application, you have a small conky. Every time that it loads, it takes a bit of time to load for the first time. But after it loads for the first time, it loads really fast in the second time or everybody else because of the cache. The idea is to make something that is really friendly and easy to access. So as you can see, I can change the test here. I can put your academy. I can change the speed to make it faster. I can put two cycles here. And I can change the color here to be green. And if you do something wrong, there is error message right here. I cannot assign to noisy property all of the colors. So it makes experimentation in a way that you can do in your house. If you want to check how to create a simple game, you can do it. If you want to debug test and do your own experiment with this example, you can do. If you want to check curriculum examples, you can also check curriculum examples here. You have to check example, push pop clear. You can just, I don't know, a bunch of push point appears that curriculum label is deprecated. And it also works as you can see as expected. You can go here, replace, clear. And as Kirigami tries to arrange with the window size, you can see that it also tries here. At some times, there is some problems with Kirigami still, but at least it's a state that's working and everybody can do some experiments with it. There is the icons and everything else. So as I said, it's really easy to do some kind of experimentation. It checks the curriculum examples, or any examples that you want with QML. And if you want to help QML line and to add more examples, it's really simple. It's just a matter of create your own .qml file, put in the repository, and add the number of files to a list. And that list will be loaded here. And after that, it's done. For example, it will be available. And as I said, everything is the way that it helps the development of the users to interact it in a way that's much faster. Like you can just try to on-trigger it here. You can see, okay, on-trigger it is not exist. Maybe on-click it. Yeah, that's maybe it. You can just print, click here, and you can just click here. It's really simple. So that's what I want to share. I know that it was more closer to a technical pitch. But the idea is to show how can QML improve development in a way that you could do it much faster with QHOT. And if you want to share your QML code with your friends and do some experimentation online, interact with your friends, you can just create your own QML line, share the file with someone, and anyone who has the browser has the link and can access the QML line and see your code that you share with them. And also, the way that it was developed by me, at least, is that it should be friendly. It should be at least a tool that makes you happy to use. Like every time that you reload, you'll see a different conky loading. Why of that? Because it's cool. It's funny. You will see a small conky. The conky is already making me happy about it. So why not? So the idea is to have anybody else that wants to experiment QML, task QML, to do it in a way that's easy, friendly, and accessible, and also improve development and prototype of QML codes in a much way faster with both QHOT or QML online. And I think that's it. There is also a QML loader from Tohini. And it's a really great tool that's embedded in your own application. And if you're not mistaken, you can also test it in remote devices, like you have a device that's running QT remotely. You can run your code here and the application reloads with these states is still at the same without changing the code that's running. Super exciting. Thank you, Patrick. Big applause, virtually. We do have five questions and about five minutes. So that's actually quite nicely fitting. I can maybe read the questions for you. Thank you again for your talk. Super exciting to see that. So the first question is, can it handle custom registered QML types, for example, typed properties somehow? Let me think a bit. With QHOT, it's totally possible because you can load things like any kind of load if you have a plugin ready. But can I also change QHOT? It's not hard. QHOT is really easy to do. But if you have any kind of plugins or any kind of, I can say that libraries that you want to import that you are in development, you can do it. There is no problem on it. Yeah, I think that was for QHOT, indeed. Cool. And then in KDE LAN, we often have QML front-ends that are backed by C++ data models. I often thought such a tool would have a pain where you could enter mock data for properties that are defined by C++. Whoa. So you can have ListView with delegates and so on. So yeah, mocking and supplying data. Do you have thoughts on that? Yes, that's also possible. The only problem is that it should be in a way that is accessible to QHOT. But if you want to do, if you're on application, if you're doing a development, I believe that Tuhini2, the QML Heloder, will help much more because it's embedded in your own application. It's not a second application. So if you use his tool, you'll be able to have your own states, have your own application, out to reloading. QHOT is like a helper for QML. If you have a code that invades C++, you can check his tool. I think it'll do the job for you. All right. Third question. Do all non-QML objects keep their state during reload? No, they don't keep. The application, it loads the front end, but since it's heavily based on in the loader instance of the QML code, the C++ states will change, of course. Sadly, this is an issue that I would try to fix in the near future. All right. Yes, a follow-up question suddenly appearing. Could you re-inject that? Yeah, in theory, yes. That's totally possible. But like, time is always a problem to me. Yes. All right. So, and we're also running out of time. Last two questions. Could it become a replacement for QML Web was trying to achieve as in using QML for front end web development? That must be about the online QML. Yeah. Yes. So, QML has a great future on the web. Right now, with the actual state, I did face some problems with it while development. But like, I was development in a pure yearly stage, doing a bunch of experimentation and checking some bags, did a bunch of tests with different QT versions, and a bunch of compiler versions as well. So, it's still in the early stage, but maybe in the future, we are going to have like, entire applications in QML and the browser and running your fault, having any like, user feeling difference. User feeling will be almost the same as the normal website. But like, if you have a QML application, like sometimes, I have cameras in my house, if I want to check the cameras in my house, it's better to have like, a video application in QML entering into our website that's taking hours figuring out how to do it, to share streamer and a bunch of other technologies. So, to me, QML is much faster to do anything like that. So, for a couple, for a speed of the volunteer, it's much easier. And I believe that QML has a completely future on the web. And right now, doing like, this kind of prototypes on QML and web, it's totally okay. You can do it. There is no problem on it. It's perfect. Very nice. Thank you. That's the last question. I'm not sure if I understand it correctly. The question is, how does it relate to the QML life stuff? Maybe you're more up to date there. QML life stuff. I'm not sure if I follow. But from what I can see, it's the application like QML line. I was developing it since September of last year, maybe September. I think so. If someone's checking if it's in the Qt had it, you can see my army of blogs and my development in the old interactions for the first entirely done QML prototype. So, I know there is one or two tools that come up of this year, but they are not so nice, I think, but I am developing off my own tool. So, that makes plans. The QML online is entirely open source. It's in the KDE organization. So, anyone can use, collaborate, help, put more examples. So, it's totally free. And I think that's a huge thing.