 Hi, I'm Jesper from the ST TouchDFX team. In this video I'll show you two of the new features in the 4.21 release. The first feature I will show you is what we call TouchDFX Stuck. TouchDFX Stuck is a huge collection of graphical designs, widget presets that is a predefined look and feel for widgets, useful images such as backgrounds and a lot of icons. And it contains also examples on how to combine these to make great looking GUIs with all three images supplied by the TouchDFX designer. The way you use these Stuck images in the designer is quite similar to how you did it in the previous versions where there also was a limited set of predefined images for most of the widgets. To try it out let's go and add an image, you can see here it lets you choose a specific image for this image widget. You see all the images that you have in your project, which is none because it's a new project I made. If I instead of selecting one of those, want to use one of the Stuck images I select this one and I get this view here of all available images. This gives me a lot of choices, let's have a look at how to navigate. So first of all there's a theme, a set of themes in the TouchDFX Stuck. Let's press this, I hear I can read about this particular theme which is called alternate theme. It tells me a bit about how it is composed. It shows me some of the colors that I used in the theme and if I want to use this color I can copy it and paste it in whatever widget I am using. I can see some examples on images made from Stuck images from this particular theme. There's a set of themes to pick from. There's a lot of big themes here, so a glass theme, a dark theme and so on. There is a particular icons theme that consists of a lot of icons, but more on that later. For now let me choose the alternate theme and select a background. These are separated into resolutions and if I'm not mistaken this is my current resolution. Let me pick this one and here we go. Let's add a few other widgets as well for a button, that's a white selection as well. Within this theme so these designs go together, but of course you are free to choose from other themes as well, so I can choose this one. And for a slider, same goes. There's a preset. This preset will not just set the images used, but also some of the parameters that defines this slider, I mean where the knob is positioned and so on. I can pick from the same theme as I did just before. So widgets is like the analogue clock, that's a whole bunch of them as well in different sizes and different themes, so a lot to choose from. I think like icons is very often very tedious to find the right one, we have now added a collection of around 2,000 icons to choose from, so there should be something for a lot of situations. So let's try it out, I had a flex button here, I'll add an image as background, so I can do this and here I can again select the preset. Let me stick to this theme. This button, this type of button is called icon because they are squared and matches icons. So let me pick one of those and add one of the icons to it, so I'll add a visual element again and this time an icon. So here we go to stock again and remember we have the icon theme here, I have a search bar here, so let's say I wanted to do something with the play button, it has a set of play icons or something that matches play, this one looks fine for me, I'll select it and now I can position it inside this flex button here, so let me try to do that correct, like this I can change the color of the arrow here, let me choose this one, I can change the size of the icon, maybe I should have done that before I position it, like this and then I need a pressed version, so which icon will I use when the button is pressed, well in this case I'll use exactly the same, so let me find that one again, this one and I need it to be the same size and then a color, I can try it out, I can compile and see that it works, all of the images in all of these themes that are supplied right now are free to use, completely free to use in any TouchDFX based project, so even they are not just for prototyping, they are also if you want to you can use them for your final product, I have it here, so we see the effect is here, a glow effect on these widgets from that particular clay theme, the images from TouchDFX stocks I handled just as in earlier versions of the designer, that is they are placed in a particular folder when compiled and if you delete the widgets that are using it, so if I delete this analog clock and generate again the images will not be in your project anymore, so you are not responsible for handling these images, of course if you want these images to stay in your project or use them for something else, maybe even modify them, you can copy them from your project and yeah, copy them and make the changes you want, so here in the generated folder, here are all the images, so if I want to keep this one, change it, I should copy it here and maybe place them here or in some other folder, then you have the complete or you can do whatever you want with that image, it is not handled by the designer anymore, so all in all TouchDFX stock really give you a lot of opportunities to make nice looking UIs in minutes, so I encourage you to go and have a look, play around with it, see what the options are and how great a UI you can make in just minutes. The next new thing I would like to show you is the new widget called SVGImage. The SVGImage is a widget that shows an image, which is based on an SVG image instead of the traditional PNG image that is used by the other widgets in TouchDFX. Basing your images on SVG, a vector-based format instead of PNG or BMPs, as in the case of TouchDFX when running on target, has some advantages in some cases and a few disadvantages. The advantages is that as it is based on vector graphics you can scale it and rotate the image without losing any quality of the rendering. The disadvantage is that you do this on runtime and thus it will require more of the hardware when rendering it. You'll be aware when using SVG images, especially on smaller hardware, it can require a lot and even more than your hardware can handle. ST comes with some new hardware in the future that will accelerate this very much, which will allow you to do a lot more vector graphics than on older versions of these chips. Another advantage is that in some cases the size of the image will be smaller, of course, depending on the complexity of your SVG image. The way the SVG image works is very much like the texture mapper widget. It gives you a clipping area where you can place the image inside and you can rotate and scale it in this clipping area and if it goes beyond its boundaries it will be clipped. If you have a look at the properties over here, you can see that you can position the image within this widget. You can scale it in X and Y and you can set a rotation center and you can rotate it. So changing the position will change the position of the image inside the widget, scale it and rotate it and in this case you can see it will rotate about 0.0, which is up here. If I instead change this to something like this, we see that it now rotates around, maybe not the center, but close and you can see here it will be clipped when it moves outside or the thing, the part of the image that is outside this clipping area. There are a few helper settings here to be used in certain situations. For example, fit image to size here, the image position and the skates are locked. They are automatically updated when I change the size, so the scale will be changed so that the image will take up all of the widget. The lock image to center will make sure that the image is in the center but will not be scaled. Also the rotation center is updated so that it will rotate around the center point. Be aware that the SVG image you have will be rendered so if the SVG image has some spacing to the left of the image, for example, that is part of the image so it might not appear to be centered because of this spacing that is built into the image. You can manipulate the SVG image through interactions or of course you can use the API directly from your code to change these parameters here. By the way, these two settings here, fit image to size and lock image to center is in the design phase only. So it is not a property on the widget itself that will be active during runtime. If you want to have a look at the API, you can follow this link here and read about the SVG image on our documentation side. Let's try to do an interaction here so when the button is clicked and we have this one button here, I can say rotate SVG image, this SVG image. I can set a specific angle but I can also click this one and have a relative angle change so plus three. Yes, that's how you can tie an interaction to updating your SVG image. One final comment to the SVG image is that not the entire set of SVG functionality is supported by ThirstyFX. There are some more exotic variants that you can use in your SVG that is not supported. You can read more about that in the documentation of the SVG image itself. The way you will notice this if you are using or your SVG image is using something that is not supported, you will have either a warning or an error when you build your project and it will state which part of the SVG is not supported. Okay, that's all for me this time. Hope you'll enjoy ThirstyFX 4.21.