 Hi, I'm Jesper, and I'm part of the ST TouchDFX team. In this video I'll show you some of the basic features of the new static graph that has been added to TouchDFX 4.19. For this I'll create a new application, like this. For starters I'll add a background, we'll just take a one-color single-color box here, make it all white, and that's it. Then let me add a static graph, you see we have a dynamic graph and a static graph. Here I add the static graph, since that is what I want to talk about. I'll expand it to fill up the entire display. As you might know from dynamic graph, the static graph has also a set of grid lines or labels that you can put on the X and Y axis. To use that you have to make space for it, so a graph has a margin that you can put up. If we want the graph to be having space for this, we could change these parameters like this. Now we have the lines of the graph in this position, and then let's see if we add some grid lines like this. And we have the X axis as well here. Then all of a sudden our graph looks like this. Let's try just to compile, run the simulator, see that everything is as it is shown here on the canvas in the designer. Here's the application and it looks similar. It has some random points inserted just as in this here, but you can disable that if you do not want that to happen in a real application. Just as for dynamic graph you can have a lot of options for grid lines and the labels to match your needs. For example this interval, so if you do not want all these grid lines to show up, you can change it to be each 40th instead. You have minor and major divisions of the grid lines, so you can add a second one. Let's change the color so we can see the difference. It has its own interval and so on. The reason why this is a minor is that if they coincide, so have the same X value in this case, then it is the major one that will be shown. The same goes for the labels, so you can change them. You can set up the interval to match your need and the way you want it to look. You can change the typography and so on. Now we have our static graph, so let me explain to you what is a static graph, what is a dynamic graph, what is the difference. To do that I will show you the documentation side of the dynamic graph. If I add a dynamic graph here I have a link to the web page of the documentation. Here you see a dynamic graph. Here is one way of the dynamic part of the graph. In a dynamic graph you add a point to the end of this graph and these points are equally divided on the X axis. There are different ways the dynamic graph can behave. If we scroll down here we see some example on the dynamic part. This one just clears when it reaches the end. This one like scrolls and this one has this final line when it overrides again. That is the dynamic part of it. The static graph as it says is a static. The view is static so you specify the range where you want to see this graph. In this case minus 100 to 100 in the X axis and minus 100 to 100 in the Y axis. The static graph is static in the sense that it does not change the axis on your view on the dataset as you insert points. You can insert points. You can specify how many points you want to allocate for. In this case you have 100 so you can add 100 points. They do not need to be inside of this range. You can plug them outside and you will see the line go towards that point. You can later change the view you have on this so you can change what part of the X axis you see and what part of the Y axis you see. You can override points in the dataset. If you have added a point 0.10 if you later on add 0.11 the graph will update with this new override the 10 and write 11 and then update the graph accordingly. An extra thing is that if you do not want integers on your X and Y axis you can set a precision. What precision you want for your X axis in this case and then when you enter numbers it can be in this range. For this example I will just leave them to be integers. Let's try to add some points to the graph. For that let me add a button so let's make space for it. Let's do like this and then add a button over here like this. Create an interaction so when the button is clicked this one we will call a virtual function. Let's just add a point and leave it with that. We generate the code. In this case we also run the simulator just to see that everything is as expected. We have a button nothing happens of course. Let's open the files that has been generated like this. I use Visual Studio of course you can use whatever editor you like. I have my code here. I have screen 1. If I go to the view base class we see my add point. We see all my elements that I put into the screen so the graph is here. We can see it has the 100 data points and we see we have a lot of elements for the grid lines. As such we don't want to do anything with those. Let me just grab this function here and add it to my view so that I can override it. I'll move it to the C file and ready to implement. Let's try to add a data point like this. It either takes flows or integers in our case. Let's just add an integer so 2.5. That's it. If we want a line to be shown let's do like this. Let's try to compile and see if we will add these points when we press the button. Hopefully we will. We saw a change here and that was probably our new two data points. One thing to notice is that you have a lot of help of functions in a graph. Here if we go to get there is a getGraph area padding range. If you want to know the range that the graph has right now you can get it here. The max value for the x-axis and the minimum value for the x-axis as well. Same for y. This can be used if you want to normalize data points or something like that when you insert them into your graph. All of these functions can be seen in the API for the graph and also the description of the static graph itself in the documentation. You can play around yourself with adding data points to your graph. Or you can go and have a look at the static graph example which inserts some random points whenever you press a button. The final thing I would like to show you is for some other interactions for the graph. If you add an interaction here you can say when you click the graph then you can also have a function called here GraphClicked. Let's generate the code here and see the base class. Now I have a graph clicked. Let's add that to my view and do something with this value here. This function is called when the graph is clicked. The value here contains an index which is an index in the array of your data points. From an index you can do a lot of things. You can get the x-value. There is a method in the graph called index to data point where you can do the conversion. You can also get something like this screen coordinate. If you want to put something on top of your graph like a circle or something where you have pressed. Let me just show you how to get a hold of it. If I include touch-the-effects utilities like this I have the touch-the-effects-print-f method. Let me show you so I can say graph1.index to screen x. From the value I will retrieve the index where I pressed again. The point in my array of data points or the index in the array of data points for the point where I pressed. If we go ahead and compile here we should see the output of the x-coordinates in which I pressed or the point in the graph where I pressed closes to. We have the console here and you can see the number getting out. Of course you can play around with all of this also. So get the index, convert it to an x-value if you need that to get the x and the y-value or you do like I did here to get the screen coordinate from where you pressed. So that concludes my short run-through of the static graph for touch-the-effects 4.19. I hope that you will try it out, play around with it and see what kind of things you can do and what applications you can do with all of this. Thank you for listening. Bye-bye.