 Hi, everyone, and welcome to this presentation and hands-on session. My name is Jesper Hildegor. I'm part of the SDM32 graphics team responsible for TouchDFX. I will guide you through the presentation of today, which is on how to get started using TouchDFX. The agenda for today is a short introduction, a short talk on installation, then some hands-on exercises on getting started, and finally we will do some exercises on how to create your own UI application and eventually run it on a board of your own. The goal of this workshop is to get you up and running so that you afterwards can do some experiments on how you can use TouchDFX to do UI development on your own. When we're done, you'll have the tools installed. Hopefully, you will have that already for you who are participating in this webinar. For you who are following this through a video, you can of course pause this presentation and then install the required tools if you do not have them already. Then you'll be able to run an example using the simulator. You'll be able to flash your evaluation kit, a SDM32 evaluation kit if you've got such a one or else you can use the simulator for running new UI applications. And you will be able to create your own TouchDFX UI application and you will be able to experiment on this and go even further into all the nice details of TouchDFX. I would strongly suggest that you, after this presentation, go through our documentation website and read more about all the topics that we have there and familiarize yourself with our documentation website. Let me just show you that. We have it here, support.touchdfx.com. You'll find everything you need to know on TouchDFX. We have an introduction here with some installation guides and so on. I'll come back to that in a while. One detail here. Slides in this workshop will have some links to documentation pages to the relevant documentation pages for that particular slide. If you see a link in the lower right corner, you can follow that one and it will guide you through to our documentation site. Before continuing with the hands-on part of this presentation, let's have a short look on the main components of a TouchDFX project. These main components are the components that you need before you have a running TouchDFX application on your board. Of course you need a display board of some sort. You need some board initialization code which will make the board run. You need a TouchDFX abstraction layer that will combine the board code and the TouchDFX engine itself. The TouchDFX engine is the framework. On top of all of that, you need a UI application to run. For achieving this, we have four main activities paired with these up here. We have a hardware selection activity. We have a board bring-up activity where you write the initialization code. We have development of the TouchDFX abstraction layer and of course we have the UI development activity here which will give us the application. In a normal project, this is an iterative process so you will not go from left to right but you will start out having an idea, starting out from left and work your way to the right but you can go back and forth of course. In this workshop we will focus on the UI application development part here. For the other components and the other activities since we are using a premade display board from ST and not a custom board, we can rely on application templates in TouchDFX which will supply us the board initialization code and the abstraction layer. Of course the engine is something that we download and just have on our PC. We will have covered all these four just by using TouchDFX on the application template supplied there. Let's have a look at the installation. As said before in this workshop we will focus on UI development so we will need the following tools, the TouchDFX designer of course and then IDE for editing our user code, TouchDFX support, QBuyDE, Visual Studio, IAR, and Kyle. And we can also use text editors like Nopad++ or Emacs or whatever. I will be using Visual Studio by the way. STM32Q programmer for flashing our board so if you have a board you would like to flash, you need this. If you are just using the simulator don't mind this. We do not focus on the other main activities in TouchDFX as I presented so we will not be needing Qubemax or the TouchDFX generator. Of course if you want to experiment on this on your own afterwards you should install these. All of this is mentioned in the documentation in the installation chapter. For this workshop it is assumed that you have the necessary tools installed and I said before if you are following this on video on YouTube or whatever afterwards you can of course pause it and make sure you have all the needed tools installed. Okay, let's get started then. We have a set of exercises with a lot of steps in them. The idea is that I will show you the steps and then you'll have some time to try to do the same on your computer and then we'll continue with the next step and so on. Okay, so the first step here is to simply open the designer and get an example up and running on your PC. So, okay, what we'll do is we'll open the designer. I'm using the 4.13 here. You might have a newer one if you are watching this on video but it should be more or less the same. So here we have the opening screen of the designer. We can create a new application. We can name it, we can place it and so on. We can select an application template which is the defining part of the project which will mention where on what board you will be running this whether it's a premade ST board whether it's the simulator or maybe it's your own custom board. But for now we'll just use the simulator for this project. The UI template is where you can select what UI you will want to start out with. So a blank UI of course if you want to start with a fresh UI or you can select one of the examples we have here. Most examples show one single thing in touch with the effects. So for example the widget animated image or the radio button or scroll wheel or whatever. We also have a set of demos that you can run. You can have a look. They are more comprehensive than the examples and of course also more advanced to understand. But for now let's select this animated image example. So we have it here. You can see this example is for this resolution so that makes sense. Actually it does support other resolutions as well. But let's go with this one. We press create and it will create the application for us. So it looks like this. That's great. Now we just want to get up and running on the simulator so we can press the run simulator button. It will compile and it will execute the simulator if compilation isn't successful of course. You can follow the progress here. So now it's done. So we have here. Very simple. I can do like this. And I can stop it again. So you can try to do this. Your own is the first two steps here. If you have more time you can try to experiment a bit on your own and try to move things around and so on. One detail that I missed as I see here in point two and three is that if you want, when built, building you can press this detail lock. You can see what it's doing. So it's actually generating some code and compiling it and so on. Very useful. You should press the browse code button. You'll get a file viewer here placed on the project you have created and you can see the files generated and so on. I'll come back to that later in one of the later steps. Okay, so try to do this on your own now and we'll continue afterwards. Okay, so let's proceed with the next couple of steps. So this is actually doing more or less the same but at this time we want to not run the simulator but we want to run it on a board like this. So most of you should have this H7V3 discovery board. If not, well then you can continue doing this on the simulator. But let me show you how. So what we will do here is of course select a different application template, create a new project. Step four here will tell us to connect the evaluation kit and flash it and so on. But let me show you instead. Okay, so here we want a new project. So select new. We still want this UI. That's good enough for us for this example. Press this change here. So here we can select among all the application templates available from TouchDFx for a lot of STM evaluation boards here. We want the STM32H7V3, this one. So here we can read about the details of this application template about the board, we can see some pictures and so on. But let's select it and then press create. So now it will download the application template and create the project for you based on this. So we have the same as we had before, but now as we have selected and based our project on an application template that has a target specified, the run target button here is activated. So what we want to do is to connect our board to the PC with a USB cable, this and then we press run target. Now we can see here it starts generating some code and it will start compiling using GCC actually. Generating the entire project, splitting it out in an internal and external part or something will go to the internal flash or something will go to the external flash. It will use the cube programmer for this to flash the board. So now that is invoked and it is flashing. It's 100% and now it is running on my board here. Maybe you can check it. So that was step three and four. It says here troubleshooting so that is one detail. So of course you can also open cube programmer on its own like this. If you have that running already and that is connected to your board, the flashing will fail from within. Touch the effects designer because you can only have one program having the connection to the board. So please if you are using this, then disconnect if you want to use the designer. Of course the designer also, you can also use the cube programmer instead of the designer so you can build your project and then open the output in the cube programmer and flash the board from there if you prefer to do that. Okay, so I will give you a couple of minutes to try this out on your own. Okay, great. So let's continue with the next exercises. So now let's move to creating your own UI application. So for this we will create a new application. We will select the blank UI as our starting point. We will then insert a box which is a widget that has a single color. We'll use that as the background. We'll insert a button as well on top. Run the simulator, see that we can press the button, flash the board and run it there and see that we can still flash, also repress the button. Okay, so let's do that. So first of all, we have the designer here. Let's create a new project. I select again the 873. Right there, I'll have the blank UI. And when you copy it, it says OK. And the resolution is fixed. It's set to the display on the boss resolution. So that's great. Yes, so now we have a blank UI ready to insert some widgets. So over here in the designer, we have the set of widgets that is directly supported. So if we go to shapes here, we will find a box. Double click it. We have a box here. We can drag it to resize it. We can go over here. We have the properties of this particular box. We could rename it if we want to. So this is the name that the instance of this box will have in our code. Box one is fine for now. We can select some blue color. And then we should insert a button as well. So on top we have a list of various buttons. So we have a normal button here. We have buttons with label and icons and so on. Radio buttons, toggle buttons. And we have a flex button, which is a flexible button that can be a combination of a lot of things. So it can have an image or a box as background. It can have text and or icons on top and so on. But for now we will just use a normal button here. Place it in the middle. So most of the widgets in touch effects come with a predefined style. So I could select another one here. So this is a different looking button and so on. So these are predefined images that is available for you to use. Typically in a prototyping setup. In a real project you will of course normally not use our graphics. So you can specify here. So you can select whatever images you have in your project. I'll show you that later. And use as the released image of the button. And the same goes for the pressed image. So the button will switch between these when you press it. The size of something like a button is defined by the bitmap. So if you want a different size button then you will resize your bitmap in whatever program you use for handling your graphics. This is simply because we do not want to do any scaling at runtime because this will take up resources. It's much easier just to draw an image without needing to stretch it or anything. So that's a performance. You too, performance. So let's select this one here. Place it in the middle and try to run the simulator. So it is here. You can see I can press the button. Nothing happens. I haven't associated any actions to a button click yet. We can do the same for run targets. On our builds, compiles and flash. We can follow the compression here. So you can see here the output files are mentioned here. So we have, these are the output files of various different output files. So the target.hex is the complete compile project. But we also have the thing that goes into internal flash and external flash. The thing goes to external flash as an output. So if we do some manual flashing we could select the specific one we want to flash. But here it is the target.hex, which is a combined thing. Okay, so now I have it running on my board and I can press the button and it reacts. If you want to do, if you have extra time please you can try to add some other widgets play around with them. But for now try this out yourself and see if you can get it running on your board. Okay, I think most of you are succeeding in doing that. So let's continue with the next step. This is about importing images into our project and use them in a widget. So first we'll add a PNG file to our project and then we'll use it in the image widget which is a simple widget that displays an image in our application. Imported images can also be used for things like defining the appearance of a button. Just as we saw it had a release and a pressed state which is defined by an image. And when doing it on your own if you have more time you can try to play around with it, add more images and use them in widgets. Okay, so in the designer we'll go to the image tab up here. It's the image manager which shows you the images that you have in your project right now. So we can see the designer has added these two images on its own because we use that for the button. Now we want to import an image on our own so we can do like this or we can simply locate them in a file manager here and drag and drop them here. So now we have the SD logo in our project. We can see the size, we can see the location of it so all our images here goes to the external flash when we compile and link. Of course you should not be adding a lot of images here that you are not using because they will take up space in your flash. So only add the ones that you are actually using or intend to use. Okay, so now this has been imported and we can go to our canvas here and locate the image widget at this one. And then we see the properties over here. Again we have some predefined styles if we wanted to add some images without importing any but we want to add something from our project so we select project here and then we select the one we want which is the SD logo. We place it here. We can try to compile and run the simulator to see that we actually succeeded. Yes, and you see we have the application here as well. Okay, so I will give you a few minutes to try this out on your own. Okay, let's continue to the next step which is about inspecting the generated code. So here we will have a look at the code that has been generated when we press run simulator or run target and see how that is structured. Okay, so in our project here we can press the browse code button here which will open the touch the effects part of our application. So my application too is the name of our application. Here we have some of the drivers and the embedded project files so for IR and car for example and also the drivers for the board. But in this presentation we will concentrate on the UI part of it. So if we break this down a bit then we can see the app here is some code for the target as well. So in the asset folder here which is more interesting for us right now is the actual assets that has been added to our project. So here we can see our images. So we have the button images and we have the logo that we just added. So that was the PNG files and in here we also have like text, we have the text database and so on. In the generated folder here we will see that we also have the images but these are the images in the CPP format. So this is the transformed PNG image into a CPP file which is compiled and linked in our project. So actually the generated files are the ones that are in this generated folder. Here the build is the output of our project. So here in the binary folder we can actually see the simulator X file. So if we press that one we will have the simulator here. Here you can zip this binary folder and hand it over to someone and he can try out the simulator if he wants. Configuration files here, not of much interest right now. The GUI folder is quite interesting because here we have our classes that we will actually be changing if we want to add something. So here we can see our screen one. We have a view and a presenter class for those. If you want to dig more into the architecture of a TouchDFX project then I think you should then you can follow some of the other presentations or read about it in the chapter about UI development and our documentation. Simulator folder is here we have how to build the simulators. We have the make file for the GCC. We have the project file for Visual Studio if you want to use that. Target again, things that has to do with the specific target we have selected. And down here we have some configuration part and we have the TouchDFX file itself which is the one you should be opening if you want to open or reopen your project in the design. For now let us have a look at the project. I will open Visual Studio. Of course you could browse the code in whatever editor you want. But yeah, I'll be using Visual Studio for this. So here you can see we have the project file updated already so we have the generated files in here and I have my screen, screen one here. And screen one we can see that this is actually where you can add code of your own. So we have the header file here and we have the source file down here. So it is an empty shell more or less, so nothing specific added here. We can see that it inherits from what is called screen one viewbase which is the auto-generated counterpart of this view class. So if we look at that one it is in the generated screen one. We have the viewbase here. So here we can see as it says here this has been generated by TouchDFX designers and do not modify it. This is for the designer to modify. So here we can recognize that we have box one, we have button one and image one. So everything about this one is being set up in the viewbase class. And if we have a look at the source file here we can see that the position of the box and so on, the color and so on is here and it is being added to the canvas of this screen. But as such you do not need to worry about that right now. It is auto-generated and handled by the designer. One thing to notice is that if we jump back to the designer here and let's say that we add a new button here, it is called button two. Generate the code or run the simulator or run Tiger. It will update this file and now we see we have a button two here. So you can jump back and forth between code and the designer. In the class that you can modify, since it inherits from this class you can of course reference all the widgets in this view. Let's delete this button again in general. I think you should try this out yourself. Take a few minutes to browse the code, open the code and see that you can find these relevant files there. Next step for us is to add an interaction to our project. An interaction is an event that has a trigger and an action. The trigger is well triggering their interaction so when that happens we will have the action executed. In this case we will have the trigger being the button clicked and the action is to move a widget. You can see the other properties we want to use here. If we jump to the project here in the designer we have a tab over here in the right hand side, interactions. We can add an interaction here. We have the trigger and the action to be specified here. The trigger in this case we have a button clicked since we have a button on our screen. So we can select that. We have to select which button we mean, but in this case we will have one, so it's button one. And the action, here we have a set of things. We can have as action, in this case we will have the move widget. We have to choose which widget we want to move. Let's select the image, so the st-loader. We can specify the position, 0.0 being the upper left corner, so that's okay. We have an easing equation, that is the movement. This is a specification of the movement. It can be linear, it can be a lot of things. A cubic here, we can have ease in and out if we want to. The duration, we can say 2,000 milliseconds. Yeah, that's it, we can give the interaction an aim if we want to. Let's try it out, run the simulator. And when we press the button, we should see the st-logo move. Great. You can try this out on your own. You can play around with some of the settings, the position, the easing and so on. The next and final step in this exercise is for us to react to the button click in a different way. Not reacting with the move widget, which is a built-in action in the designer. Here we want to call a new virtual function, so tying an interaction together with execution of user code, so your own code. For this we will change the action to call new virtual function. This is a two-slide step, so on the next slide we can see what file we need to open and what we need to implement. I'll show you that in a second. If you have more time, you can play around with other things, so use the setAlpha value maybe to change the appearance of some of the widgets in your application. You can also try to touch the effects on the score printf, which is a debug printer you can use, so it will print in a shell. Very useful in debugging. First of all, let's try to change the interaction here. Instead of move widget, I'll now use call new virtual function. I can name my function or the function that I want to call. I'll call it my function. Press Generate Code and jump to Visual Studio here. Now if I go into the View Base class, remember that is the one that is generated by the designer, it has been updated with a virtual function called my function. You can see we still have our Box1, Box1 and Image1 here, but we now have this my function as well. And as it says here in the comment, we can override it and implement it in our own part of this Screen1 view. In the header file, I'll add this my function. I'll do the actual implementation here. Of course, normally you would use the source file for that, but for convenience sake, I'll do it here. So what should we do? Let's try Box1. It has a setColor and well, it also has a getColor. So getColor plus a random number. So this should set the color to a different color than the one it has. I also need to inform TouchGFX the framework that this widget has changed, so I want to invalidate it, meaning that the framework will redraw this one next time. I compile and I run. So here's the similar icon press here and we see the background is changing. I can actually also set a break point here in Visual Studio and we hit that one. So easy to debug as well. Okay, great. Yeah, so try this out. You'll see the example of the code here on the second slide for this task, the step and try to play around with it if you've got the time. This concludes this webinar on how to get started doing UI application development in TouchGFX. Hope you had fun and hope you did follow all the steps and you were able to do it on your computer as well. As I said earlier on, please keep on reading in the documentation side. Here you'll find a lot of information and next steps on how to improve your skills in TouchGFX. You can follow some of the tutorials, you can read chapters on interesting things. So just keep on. Yeah, that's all from me and thank you for today and see you. Bye.