 Hi and welcome to this presentation of the TouchTFX Designer 4.17. I have a new installation of the designer right here. So let me go ahead and open it up. The first thing you'll notice is that there is a welcome greeting message here. I'll say OK to that. Then you'll be prompted to choose your color theme, so the new designer will support both dark and light mode. So you can choose it here or you can choose it later. I'll just go with the light mode for now. Now we see the so-called lobby where we can create new applications or load old ones. So as this is a new installation, I do not have any recent projects. Here we see the kind of actions I can take. I can create one based on a TouchTFX board setup project, so I can select one of these boards if I have any evaluation kits from ST. I can also choose to create an example. Here I see the list of all the examples we have. I can select one of those and I can actually select a board setup for that as well. So if I just use it as it is here, I will have the example created for me using the simulator. If I want a specific ST board, I can click this select board setup and pick one there. I can also select demos and here I see a list of official demos. I can create it as is or I can select a specific board. So if I go and choose a specific board, I will see the demos that has the right resolution and thus are compatible with this selected board. I can also have a look at our board specific demos which are demos that utilizes part of a specific board, so that demo will only run on that particular board, of course. But let me create a new project based on the simulator and a blank UI. So here we see the canvas of my screen number one. As in all the other TouchDFX versions, I have my property list on the right and my screen tree view on the left. The widget menu is placed up here and is now a drop-down menu where you see the different categories of widgets in the designer. It has a search bar here as well, so you can do fuzzy search on widgets and easily add them. Okay, let me get rid of this one and we will insert a box instead. So the box is just a single color widget for you. We have the properties of the box over here. Now the properties will have a pop-up window, or a lot of them will, so that you have the exact setup or advanced setup of your widgets in here. I can select a color and when I'm done I'll press here and I have it selected here. Interactions are kind of the same, so if I add a button I can see all the screens interactions over here. It's empty of course, but I can add one. Again, it's a pop-up here for better overview. So I can add, just as in all the previous designers, add events here. When I'm done I have one single element here and I can add a new one and so on. So a better overview than in the old one where you expanded things, all the interactions here, which could be a bit confusing. Another thing to notice is that now elements in the tree view has some properties here. You can lock them, you can toggle visibility and actually you have a menu here to do various things. It has the same as a right-click menu. Same goes for the screen where you have several options. There's a new one here called edit source files, which if we had generated the code we would be able to open the source file in your associated editor for CPP and HPP files. For building your project from the designer you have the three well-known options here, so you can generate code, run your application in the simulator and if you have selected a board for your application you could run on target by pressing this one. Still have the log file here so you can see what goes on when you compile. It can be docked and undocked. For showing the image and text tab I want to have a more complex example to show you. So pressing the X up here will take me back to the lobby and let me create a demo. I'll select this demo 2 and create a new instance of that. So that will open a new window of the designer. So I'll have two designers opened as one, my old application and this new example. So it's here. This demo is a rather big application, so it has a lot of screens, a lot of images and quite a lot of texts as well. So if you go to the image tab you'll see a preview here. You can hide it if you want and extend it here. You have all the images here, you can have previews. If you click it you will open the associated program you have for editing PNGs. You can see the dimensions, you can set a lot of things here, so the image format. If you want you can change the dither algorithm and the rotation and so on. As a new feature you can do multiple select and update them all in one go. For the text view you have single use, you have resources, you have typography just as in the old version. You can do all the same things that you could before, but now the overview of it all should be a bit better. If you want to change color theme it's in the file menu. The dark theme is of course much darker and for some of our users much more pleasant to look at if you're using the designer for a long time. Configuration of your application is down here, it has all the usual tabs. If you want to open the file of the project in an explorer you can press the file button down here. Well that concludes my fast run through of the new designer 4.17. There's a lot of small changes here and there that we hope that you will enjoy. So thank you for listening in and hope that you will have fun using the new designer.