 Hello, welcome to Qt Design Studio, an introduction. So I'm Thomas Hartmann. I can briefly talk about myself. So I'm a senior R&D manager for the Qt company, and I lead the Berlin team that works on Qt Design Studio. I joined, actually, Trollcheck in 2006, worked on various topics. One of my first assignments was, and you see, worked with Qt Creator, did consultancy. But in the last years, I've mostly worked on what's Qt QuickDesigner and now Qt Design Studio. So, whoop, I skipped one slide, sorry. So first, I want to give you a brief overview. So I want to start with an introduction about Qt Design Studio. I want to explain a bit what Qt Design Studio is from a high level. And then I will give a demo and actually showing you how Qt Design Studio can be used in practice. And then, because that's, I think, really interesting for this audience, I also want to talk about what's behind the scenes of Qt Design Studio, especially how we use Qt, what is the source code, and so on and so on, and also what technologies we use. And in the end, there will be a bit of time for questions and answers. So, yes, what is Qt Design Studio? Yeah, it's Qt's dedicated design tool. And it can be used to create UIs that can also be used to define the UX, the behavior of these UIs. Yes, you can work with 2D and 3D, and you can use QML for that. So QML is the underlying technology. So Qt Design Studio always works on QML files, and QML is basically the representation for the UI. So there's no technology switch when you hand that over to an application developer, C++ developer. So everything is always QML based. A bit under the hood is Qt Design Studio is based on Qt Creator. It's an adjusted and optimized version just for QML editing and for Qt Quick development. So we turn off the C++ parts. Basically, we brand it a bit. I will talk about that later. And the last version we released is Qt Design Studio 2.1, and we release always the commercial license version and the free community version. I will briefly talk about the differences. Okay. So what can I actually do with Qt Design Studio? Yes, you can develop your eye design with a visibility editor. That is what I will mostly show in the demo, and that is what a lot of people will spend their time with. But you can also create animations based on the timeline. I will briefly show that also as part of the demo. You can define why logic with states and binding. I will also cover that. You can create your custom controls. I will create a simple button in the demo later. You can import designs and assets, and we'll cover that today. So for 2D, that's Photoshop, Sketch, and Figma. And that is basically the main feature that's just in the commercial version. And for 3D, you can also import Formaya, Blenders, and others for 3D assets. Yes. And with this, you basically can turn your designs into working QML. You can create prototypes and functional applications even. What you cannot do is basically the C++ parts. And finally, you can deploy and run in profile on target hardware. I will not cover that today. But with QtDesign, you can actually deploy to Linux hardware and even profile. Okay. The latest version is QtDesign 0.1. I already mentioned that. We have the bridges to import designs. Then we have the visual 2D editor. We also have an integrated text editor. I will show that. There's a visual 3D editor for QtQuick 3D. There's a flow editor. I will not cover that today. There's a state transition editor. I will briefly show that. Yeah, we support the QtQuick layouts. Also, we'll show that a bit in the demo. All the ready-made and reusable UI components you're used to from QtQuick come with QtDesign Studio and even a few more. There are timeline-based animations, a couple of customized, visible effects. There's also the live preview, which is also a very interesting feature I will briefly show. You can basically live update your application while working on it. Okay. Yes. The first release was actually QtDesign Studio 0.1 was in December 2018. Since then, we regularly released new versions. Figma support was one of the items we added in the last two releases. Lots of UX improvements improved the usability in general. For the upcoming release, we work on full Qt6 support and also, again, many improvements through the UX and especially the property editor. I will briefly talk about that later. Okay. With that, we come to the demo. I will now share my screen. What you can see here is QtDesign Studio. This is the welcome page. This was the first thing that you will see. On the welcome page, there are a few demos that come with QtDesign Studio. I will show a few of them later. But for now, let's start with a new project from scratch. I choose the resolution here. This is not too fancy. It's just a nice wizard that sets up a project for you. Then QtDesign Studio starts. It has created one screen for you with a text in the center. I delete that. We can delete that. There's lots of functionality you can do. For example, you can easily change the background color here. We have every design tool. We have a navigator. For now, we just have one single root element here. I briefly mentioned the text editor, but I will show that later. I just drag in a rectangle here, and then we can anchor it. It supports the anchors that you have in QtQuick. We can change the color. We can also change the radius. This is basically what we typically expect a technical artist or designer to do, to basically use the visual tool to create some visual design. It could be imported from Figma or Photoshop, but you can also create it from scratch. Even imported designs, of course, you can tweak here. Now I just continue dragging in a label. You see all the text properties here, and I change the color just upon size a bit. No surprises here. That's just how you use it. I will briefly talk about the property editor later, how we implemented that one that's implemented in QtQuick using QtQuick Controls 2 and our own custom style. I now created a layout around the two text items I created, and I just renamed them. This is basically typical day-to-day work, and the goal here is that I create a very simple UI to show a couple of features. The 90 percent, for example, I will skip that here. We're typically binding to something from the backend. Right now, we just keep it hard-coded. Yes. A lot of touching any QML code I can create this, and I use copy and paste in a few cases. Now I'm basically done with the basics here. I move that around a bit. You can see I have snapping here, so things snap to each other. There's also another nice feature. We have alignment features similar to what you see in Illustrator. I distributed them actually, but that's not exactly what I want because I want two columns. Let's use the distribution feature again here. I distribute them evenly, so I don't have to do that by hand or rely to just my eyes. I can also have alignment features. That's pretty much what you know from Illustrator. That's really nice if you want to do absolute designs. Of course, you have all the layouts and anchors, but sometimes maybe you just want to have one single resolution, and then absolute layouts are easier. I put everything into a group with a custom item that only comes with Qt Design Studio. It's basically just an item that automatically takes the size of its children, so nothing special here. I distribute here again, and I think now I would be done with this as a UI and anchor it a bit here by centering it. This was basically typical day-to-day work with what you do in Design Studio. But now I want to do something a tiny bit more fancy. I want to create a custom button. I create from the wizard a new component, and choose button, and by default it has two states for normal and down, and I can now edit them in the Visivic Editor in the Editor mode and adjust my button a bit. I select the background, give it some radius here, so it's now a bit round, and it's also a nice place to show the live preview. Now I run the live preview of that button, and that's basically an interactive preview of the button. It's basically like running the button, but there's a tiny difference. If I do now a change in the Editor in Design Studio, it's immediately propagated into the application. So you see that the running button basically is also updated. That's really nice in this case. So I now change also the label color, and I still have my working button, and I don't have to constantly restart. So if you have a component like the button or anything that's complicated, also if there are running animations, because you can see constantly running, basically the button adjusts its properties, so we can go back. First I want to show you transitions, actually. So this is a transition editor, and that adds automatically transitions to our states, and I can now change the duration a bit to make them more visible. And now instead of the button like it was before, it's animated. There's one trick, because there's no animation, I have to make the normal state, the default state, but now I see that there's an animation when I check the presser button, and it's a few clicks, as you can see, and you can easily tweak those, even using easing curves and so on. But now let's really go back to the form I created, and on top of this form, I will now want to use now my custom button and what's added to the item library, it even has a preview here, and I can drag it in, and I drag in two copies of my button, my custom button, give it name and position. And this is really powerful, you can create your custom components in Design Studio, nest them, actually now I lock the layer here, this is a feature I recently added, so I cannot accidentally now change the layer anymore, and then I use anchors to the margin to position my buttons, and now they have the same distance to each side, each side's 32 pixels in both cases. Yeah, locking is super useful, especially in this case, because I might otherwise accidentally move a label. And now I can show you the QML code, so this was the code that was generated, and yeah, you can, even if you use basically the mode, the text mode inside Design Studio, it's really hooked up with the property editor, so it can work in parallel, can do a change here. Now I broke it, there's a syntax error that basically will block the UI until I fix it again, but see, now it works again, and I can use the property editor in parallel, and I see the changes. And one thing is the dock widget framework, I will also talk a bit about that later, because it's a special dock widget framework, and it's very flexible, and you can also put it next to each other, and I will keep it like that for now. That's also very useful if you want to tweak the QML text a lot, if you want to do some optimizations, or maybe you are a developer and care about details, you can always see the text and the visual editor in parallel. Now I created two states, and give it a name, so also here, no surprises. Now I start to make the buttons checkable, and in one state I make my whole UI invisible, so we have the operate state and the maintain state, and the maintain state, the labels I added are invisible, this is checked here. Then there's also exclusive, which is super useful, because exclusive will basically automatically save that only one of these buttons can be checked at the time. Before I continue, I want to give the buttons proper names, because I want to refer to them and when conditions, and then it's important that I have a good name. Here I can now refer to the checkboxes to the checkable buttons, and I can basically define the when conditions of each state without having to write code just by using the combo boxes, which is very convenient for people that say not very professional developers who are not very used to writing code. Now I can also run the live preview again, and yes, you see that we have basically a very, very, very simple running application without writing any code, and of course you can continue like that. But I also want to show you a few more advanced features, and that's why, for example, we now open the eBike demo that comes with Gear Design Studio, and the eBike demo heavily uses the timeline, and I want to show how the timeline is used here. So we have many states in the eBike demo, and there are many transitions between those states, and we didn't use transitions because they don't always allow to fine-tune the animations very well. In this case, we used the timeline, and basically defined each transition is very explicit using keyframes, but that gives the designer a lot of control. The transitions don't have to be symmetric. You can add keyframes in the middle, and you can really make sure that the transition looks exactly like you want to at every pixel, basically at every point of the animation. And for the timeline, we also have a curve editor. It's a very powerful curve editor, and here you see that there are also easing curves between the keyframes. That's something that's more common in 3D tools, but that's a very powerful view on this. And to give you an idea, let's just run this. So, yes. So basically, when I interact here, I switch the states, and the timeline is then used to animate between those states. These are exactly the same animation that you saw when I dragged the timeline handle before. Okay, now I will show you the welcome page of Qt Design Studio. So, the welcome page of Qt Design Studio is also developed in Qt Design Studio. And that's a relatively interesting example because it has a C++ backend, and we mopped that up with QML. But first, I want to show this, is basically the screen of the welcome page, the recent projects, examples, and so on. And, yeah, it's done in Design Studio. Nothing too fancy here. And we could now adjust it, change it, whatever we want to do. And it actually was developed by our designer, and it's also maintained by our designer. You can also run it, and something shows up here in the recent projects because we have this mock backend. And that's a very powerful technique to basically mock up the C++ backend with simple QML that can be understood even from the designer, maybe even tweaked by the designer. In this case, it's very, very simple. You look at the text there, it's just a list model, basically. And there are a few more of these. But that's a very powerful technique because now we have a project that runs fully in Design Studio, really can be owned basically by the designer and can be just integrated. And here is the trick. We have a couple of import paths that add the mock data as QML plugins. And those mock plugins, of course, are not part of the C++ part. On the C++ site, it's just loaded by the Qt Creator plugin. It makes it possible to develop it in Design Studio in parallel to having it in the C++ application. Now I want to show you the digital cluster. That's a downloadable demo. I downloaded it before. Let's just open this. That's a demo that shows a lot of the 3D capabilities. So Qt Quick 3D. And I'll start with the main screen here. You can see it. So that's a cluster. And that uses quite a lot of Qt Quick 3D. So to give you an impression, I just run it. I had a light and dark theme. It was actually developed by a technical artist purely in Design Studio. It has no C++ backend. But you can do a lot of stuff just using QML. So you can turn on the lights, open the doors, rotate it. You can see that you can even have 3D and 2D. And then 2D and 3D again is interior view. It's a battery view with a nice animation. And there's the 8S view. And that was all developed in Qt Design Studio. And I want to show you a few of the files. So that's the 8S view. And the 8S view doesn't have a backend. And it's really just basically mocked. And the timeline was used for that. But that's actually powerful technique while you're in the prototype stage. Because you can always mock it. And you don't have to worry about implementation at this state. But you can already define how it will look. And now we have another screen that has different states. You saw on the UI. And those states were all defined by the technical artist. And yeah, that's a battery animation you saw earlier. You can create such a demo with either writing no code or just very limited amount of code yourself. I mean, of course, you can always go to the QML code. That's your choice, right? And yeah, for example, here's the component, right? One thing that makes QML so powerful is that you can have all these different reusable components. There's some structure that the technical artist was setting in place. And you can always look at the text editor. Yeah, with that, I want to stop with a demo and get back. So, okay. And now I want to talk a bit what's behind the scenes of Qt Design Studio. So hopefully you now have an impression of what it can do and what's it meant for. But I also want to give you an impression how we develop it, how we use Qt. Because we are basically, yeah, especially on the front-end side we use basically. We have a user of the Qt and Qt Quick technologies. So Qt Design Studio is a pretty typical Qt Quick and Qt cross-platform desktop application. So it's a pure desktop application. We are currently in the process of porting it to Qt. We have a working version and just ironing out the bugs. Qt Design Studio is, that's no surprise, available for Windows, Mac OS, and Linux. So, and I briefly want to talk about our main challenges in a sense when it comes to the Qt stack. And that's with graphics driver on Windows. We sometimes have problems with those because we use Qt Quick and even Qt Quick 3D and there can be issues because of graphics drivers and those can be quite nasty because it's not on our control and you might not even have a machine to reproduce those. Another thing that's a bit challenging is sometimes that Linux is a very heterogeneous environment. So that's why we officially only support Ubuntu 20.04, the latest LTS version. We test it on more Linux machines, but we don't commit to more installations. It's just, especially the different window managers are sometimes a challenge, but also the drivers and so on. But all in all, it works quite well on Linux and actually we have surprisingly many Linux users, even in a commercial environment, especially people who like to, or who develop in embedded Linux or for embedded Linux, they like to have all their tools on Linux and don't want to switch to Windows or MacOS just for Design Studio. Okay, so what is Qt Design Studio? Technically, it's a customized version of Qt Creator. It's no fork, so it's usually always based on the latest version of Qt Creator. That's how we always did it until now. We don't plan to change that. Yeah, we branded a bit, which means we renamed executable and exchanged the icons and so on, but that's basically a few switches under this system. It's also upstream. You can even see how we do that. So there's really no black magic on that. The packaging is done a bit different because, for example, we switch, we ship our own version. So that makes it a lot easier because we basically know that Qt Design Studio is always based on the same version of Qt, the one we ship it with. It's currently Qt 15.3 because that was one of the biggest problems with Qt is with the Qt Quick Design and Qt Creator that we don't know which exact Qt version it's used with and that creates a basically combinatorical explosion of potential issues and it's basically impossible for us to provide a constant quality. And this becomes a lot easier. In this case, we test our packages and if they work, they work and we can really provide a relatively high quality. Another thing that's special about Qt Design Studio is that it comes with a couple of custom components that come from a special repository. QML components, actually quite a lot of them by now for the Flow Editor and things like arcs that are based on the QML shapes and use specific things and quite a lot of components in the end that basically just ship with Qt Quick Designer. But those components, they are also open source and they are living in that repository and eventually we also make a plan to make them part of Qt once. But we don't want to make that too early because we don't want to commit basically to the final API and the final implementation too early. Some parts are closed source, so okay, that's a bit unfortunate, but that's how it is. Basically there's a plugin that we add to Qt Creator that contains the closed source parts. So that's just a plugin that's just part of QDS. It's called Qt Quick Designer and the biggest part of this the biggest closed source parts are the Qt Bridges in the importer. There are also a few other things but they are often just closed source because we didn't meet the teacher fees for Qt Creator for example and then we moved them over in the next release. This was the case for the timeline for example that we eventually moved over to Qt Creator and we just recently moved over the event place which is another feature I didn't show here that is basically part of Qt Designs too that was closed source that we then eventually moved over to Qt Creator. One thing that I really, really like is the Qt Advanced Stocking System. It's built in depth in the demo but it's not a normal Qt Stocking System but it's a different implementation, it's based on the Qt Stocking System but it adds a lot of features. It was contributed to Qt and Qt Creator by Uwe Kintler who's the original author it's licensed under LGPL v2 and you can get it from our marketplace and also from GitHub that's basically the original that's developed by Uwe Kintler we also maintain currently a fork that's part of Qt Creator and yes why do we use it? Because it has a couple of really, really nice advantages and features I think what was the most important feature was that it has no central widget so it's more flexible so it has no concept of a central widget and you already saw that when I split it the form editor and text editor view is a very nice and powerful features in the context of Qt Design Studio because it makes the workspace a lot more flexible another feature I really like is the clear visualization of the drop targets you can see that here in the screenshot it's very similar to what other tools like Visual Studio do people understand it is relatively intuitive there are more features especially when it comes to stacking and talking also comes with perspectives so you can switch layouts easily and so on perspectives can be built of course also on top of the Qt-based one but you get it basically for free and that's what we use in Qt Design Studio and I think it's really a great addition, a nice contribution and feel free to test it out if you need a powerful dot widget framework yes, so we also have a user of Qt Quick for desktop applications and that's why I also want to talk a bit about how we use Qt Quick what is our experience, what we like what we don't like and so on so in short we use it for the welcome screen and especially those are relatively simple parts the welcome screen already covered the implementation is kind of really simple I think it's a really nice and great test case and also use case for Qt Quick in general it's nothing complicated, you can really hand it over to technical artist or designer, he can basically own the whole welcome page with a little bit of help from a developer here and there and that's really nice workflow and they can build in the way they want it and we just integrate it into the C++ application the property editor is a bit more complicated I will talk about that in a few seconds and then we also have the item library which is also a bit more complicated so both of them are basically maintained by developers, not by designer anymore because they contain quite a lot of code and they are mostly fully dynamic and then there's also the states editor which is similar but even there the designer can help because we can give him stripped down projects that are pure QML, he can basically define the look, adjust it can also give access to him and he can tweak around with the designs directly and we did that actually so yeah, the welcome splash screen there's really nothing I didn't mention already kind of it's really pure QML, it has a very very simple C++ back and that's very easily mocked and basically works as a standalone application in Qt Design Studio and also test that test case for our workflow yes, the property editor is actually quite a beast so it's really complicated, the property editor uses customized Qt Quick Controls too and yeah, we are quite happy with the result so there are a couple of features that you don't have typically for example, you don't have with widgets and so on, so for example you can drag on the spin box this also we don't show most of the controls by default so most of the sub-controls you only get when you hover on the controls that reduces a lot of clutter and it's actually quite typical for modern applications and all of this would be possible but very hard to implement with widgets and we did that, we didn't we decided not to do this so we used Qt Quick Controls too and Qt Quick and we're really happy with the results another thing that's worth mentioning is that the studio controls are fully resizable so every number basically comes from a small theme and all the magic numbers are usually based on or use one scale factor and by tweaking that scale factor they are fully resizable we don't expose that to the end user at this point in time but it makes our life a lot easier because basically all the numbers all these magical numbers that can be controlled by the designer and therefore he can really own this we also hooked this up to the to the theming theme of Qt Creator the colors actually come from the theming theme of Qt Creator so that's why it works in all themes which is also nice and the studio controls are part of Qt Creator so they have a user license and you can look at them it might be really interesting if you build something similar to have a look at them and maybe even use them okay let's briefly talk about the advantages of using Qt Quick in the front end so it's really easy to customize the look and feel I think it's really a lot easier than doing that with widgets and also have some experience on that side and it's also a lot easier to implement modern and advanced UX you can use Qt Design Studio for the front end that's also of course nice especially from perspective the designer can take full responsibility of simpler parts like the welcome page or at least help out more complicated parts like the property editor there are always things that developer has to help out but you can always help with the layouts basically maintain the colors and magic numbers and so on one thing that really helps a lot is hot reloading so all our views support hot reloading so by pressing hot key it will reload the QML code and that allows very very fast feedback cycles and that's just great you get used to that very fast so we press one button and then you can test the different behavior or different size or one buck is simply fixed, normally compile nothing another very powerful feature is that the property editor for example can be extended with external QML files that come or are shipped with QML modules so it makes the property editor very extendable from the outside without having to write C++ plugins or anything like that you can just basically write a QML file that extends the property editor for a specific file that type okay what are the challenges the other bindings between C++ and QML they require a bit of overhead and boilerplate code I don't think that's a show stop or anything but it's a bit of extra work what is more serious is that the developers who do this work they have to be experienced in both C++ and Qt Quick this can be a bit of a bottleneck and in some cases Qt Quick is not as mature as Qwidgets for desktop development especially if you think of tree views that's still not the case we were really heavily working on that but there's still things you might have to work around or experiment a bit and yeah there's also the dependency on 3D acceleration which sometimes can be a problem because of drivers and generally because they're basically having two languages there can be high complexity and you have to be aware of that and be careful so basically all the logic we put purely in C++ so roughly our rule could be something like no loops in QML so if anything is slightly more complicated it becomes C++ and really just a simple part QML and JavaScript another thing we added is Google Crashpad that collects stack traces there's no technology it's part of Chromium but I think it's worth mentioning here it's opt-in because it can contain confidential data we use Sentry as a backend service and you can also look how it works in our source code and part of Qt Creator might be worth looking into it if you need it you want to collect crash pads, crash dumps on desktop platforms and another thing we added recently was telemetry that's based on user feedback and it's also opt-in of course and we collect lots of data usage behavior, usage pattern but we also added a dialogue that specifically asks users to rate features and so on that's pretty typical for modern applications and can user feedbacks make it really simple to implement there's already Qt Creator plugin that helps us with that and we just sit on top of this yeah Qt Online Studio, you have two options you can download it using the Qt online installer or you can always get the releases also from our download page so that's a standalone installer but the standalone model always only works for the free community version where if you have a license and you have a commercial license then you have to use the Qt online installer but yeah, please give it a chance try out with that I say thank you I hope you learned a bit and got an overview about what Qt Design Studio is what it can be used for and also like how we use Qt and maybe something that you can use for your own Qt application in the future thank you and have a nice evening thank you Thomas I don't see any question right now there is some feedback on the chat, there are people who are wondering how to find some customers who can pay them to use this tool so that's kind of probably I think I was trying with the free version so we don't need to the basic you only have to pay if you have one to use the purchase which are interesting but then again you already use the products anyway yeah but I guess they just want to be able to spend time there so being paid for that it's a good excuse even with regardless of the version used okay I still don't see any question so I guess we can go for again a virtual round of applause for Thomas thanks again you have all the contacts there so thank you