 In this video I will show you some of the advanced features of the dynamic graph that has been added to TouchTFX 4.15. In particular I will touch upon how to use interactions in a dynamic graph and I will show you how to use some of the values you can retrieve from a dynamic graph and use them in user code. I'll start by opening the designer. I create a project using a simulator, 480x272, a standard resolution. I have my list of widgets here. Let me add an image for the background. I'll have a box with border as well, also for the background but for the background of the graph that we'll make here. I'll add a dynamic graph to my screen as well. Here we see the dynamic graph and the graph area itself is taking up all the space of the graph. I would like to add some labels showing the values on the left side here for the y-axis and the bottom for the x-axis. I'll add some marking to the left here and I'll add some to the bottom as well. Actually I'll also add a bit to the top so that we can have some extra space for the text that will go on top here. I'll move down the property list at major labels for the x-axis. The font is a little bit too big for my taste so I'll select one that is already available in the project if I wanted a different one I could add a new one here in the text typography list. I'll go with this one and for the y-axis I will have major labels as well, also using the small one. As you can see here they kind of collide and the right side of the text is very close to the graph so I'll add some padding here that is what it's mainly for. I can do it like this and create some more spacing there. I can do the same in the bottom if I want that as well. Let's go with this. Additionally I would like to have some horizontal grid lines as well. I'll put them on here, interval maybe I'll go for 20, each step of 20. I'll make them slightly gray like this. Okay, I'll try to run the simulator and just have a look that everything is okay and that we can compile and so on. Yes, I got the application here. Everything looks as expected. Okay, so let's try to add an interaction or two. So here's the interaction pane, I'll select a trigger that is graph clicked. The dynamic graph one is the one in question. The action I want to perform is call new virtual function or call this graph one clicked. I'll add another one, graph dragged as a trigger. I'll call another function called graph one dragged. I'll generate the code and then I'll open up the code in visual studio like this. So I'll find the screen one view that I've been editing. The screen one view base is the generated class from the designer. I can find it here or I can just press F12 and go here. So here we see I have the two virtual functions being defined. I'll copy those and add them to my screen one view which is the one I can edit without being overwritten by the designer. I'll move them to the source file instead. So like this. Okay, and just to check that things are working, I'll do a printf, I'll touch the effects printf saying hi compile. And we'll see that when I run the application and I press point I'll get a prompt saying hi. And if we look closely we can see there are two highs there when I press and when I release. So that's because I'll get a clicked event on both released and pressed and cancel actually. So if we want to avoid that and we want so I can look at the value provided to me is a click event. So that's a basic click event in touch effects I can say get type on that one. And if it is a click event pressed then I want to print. And let me just fetch some values as well. So let me see. So if we again go into the value and then say index here. So this is the index that is closest to where I click. So in the dynamic graph you have a range of points. So if we go into the designer I can show you. So we have a number of data points specified here. So a hundred data points in this one. So that is what you see here and each one represents a data point. The dynamic graph will do something if you add more than in this case hundred data points. It will do something either it will clear and wrap. So that's this one wrap and clear. This one is scrolling so it will move the graph to the left and then add a new point. And this one is wrap and override where it will wrap around and then just override the point itself. So when I click at some point I'll get the index of the nearest data point. So if I click here I'll get 20 and here 30 and so on. And even if it has been cleared and then it will start over again with a zero to up 200. So that index can be used to retrieve data from the graph. So my graph is called dynamic graph one. And if you have a look here there's a lot of index two functions. So I can have index to screen coordinates. We'll use that in a while. Or I can get index to the data point y value as integer. So if I select that one and use the value dot index as argument. We should see the value of the graph where I click. So if I click here it should be around 100. So now it says high 99 and so on. And it's the point where I press in the X axis. So even though I press up here it will match this one down here. Okay in a similar fashion I could get as you saw I can get the screen coordinates of the plotted value on this graph. And similarly I can do this for the dragged. So if I do like this put it down here. Let me say high two so we can distinguish the events. Compile again run and we can see I'll get a lot of dragged events here. Okay so let's do a little bit more fancy stuff here. So what I would like to do now is to instead of just printing out in the prompt where the value is. I would like some sort of info bubble to appear showing the value and following the graph line. To do this I'll create a custom container that has an image as a background and a text on top. So it's a great one of this. Let's call it info widget. I have an image here that I want to use. I'll add that to my project. Add an image widget. Select this one. I want my custom widget to be of that size. I'll add a text area here. Let's use bigger font. Make it center, make it remove auto size. So I want it to be exactly of this size even if the text is too big. It's centered and I want it to be a wildcard so I want to print a text here. So I'll type in these or actually I could also just have pressed there. I would receive a wildcard. In here I'll say I want to use a buffer for this wildcard. We can have an initial value of let's say 10. Examples. Here I need to remember so I'm using the default font. I need to remember that I have to enter these wildcard characters that I want to use. If you are not familiar with the text and how to use text and touch effects I can recommend you to read more on that in the documentation. But for now I'm just telling the system I want these characters to be available in this font. Okay so now I have this custom container. Let me add such a one to my project like this. Okay. First of all I don't want it to be visible unless I press the buttons. I would like to press here and it should appear there. So I'll put it out here. Generate code. And when done it is I'll move to Visual Studio. Here I've made some changes so I'll just reload. Okay if we move to my generated code I'll see here I have an info widget 1 appearing. So let's see if I click I'd like to move that one into the right position to move to. It's a function that will move this widget and invalidate the screen at the right positions. So I need an X and a Y coordinate here. So first of all how to get that. So first of all I have the dynamic graph itself. It has an X. So that's the coordinate of the graph. And then I need to get it to the right point so I can say here. And again use the index. So I have an index to screen X and an index to screen Y. So if I use this one I'll need the index. This one I should be good then more or less because I need some extra but I'll show you in a minute. So I'll do the same for the Y. So get Y and get Y here. Okay let's see how that plays out. So it appears here. So it's slightly off. I was expecting the left corner of this to be placed at the graph where I press. But it isn't. So what I'm missing here is that I should be what I get. So this index to screen X is relative to the graph area which is here. So I'm missing the margin I have here. So I need to add that to both of them. So if I say dynamic graph one. Get graph area margin left. And for this one get graph area top like this. Let's see if the position is correct now. Yes it's better. So the image of course has this transparent part up here. So that's the corner of this that matches the graph. Okay great. Okay so what if I want to do the same when I drag? I'll make a function now saying update info widget position. And I want to have an index for that one. Create the implementation and let's see plus plus file. So basically I will be doing this down here. And I'll use the index for that. So if I call update with the value.index. I'll have the same behavior here. And I'll remove the printf part now. Yeah so I should have the same behavior here. Compile run again. And we'll see when I drag it will move like this. Okay great. So let's update the value here. So it's not 10 all the time. So for that I will go to containers info widgets. So just like a screen I have a class for the info widget where I can write my code. So on update the value. So for doing this you need the SN printf in the Unicode class. So here as you might remember I had the designer create a buffer for me. So if I go to the info widget base class which can be found here. I see that I have my buffer and a predefined size for that one. So I'll use that one. I'll use the correct size. And then I'll just add the number. So value. So a simple thing like that. Remember to invalidate the text area that holds this value. So I'll do like this. Okay so now I have an update function here. It goes back to this again. I could say in this. So here I want my info widget to be updated. Now I need the value of this. So I should be able to find that here. So again the index that I have clicked on. I would like the Y value as an integer. Like this. Compile and run. And we see the value being updated accordingly. Now let's add some more dynamics into our application. So what you can do there. Normally in an application you would receive some external event. And based on that you will insert some value in your dynamic graph. Here we just simulate that by using the handle tick event. So that's an event called periodically by TouchDFX. Each time the screen is refreshed. So I will introduce a member called tick counter. Which I will use to control how often I insert into the graph. So initializes to zero. I need an implementation of this. Here I will increment my tick counter. And let's see each third time. I want to insert a point into my graph. And for that I will need some sort of randomness. So I will include the math.h. To insert something as you can see in the basic graph example provided in the designer. I will say add data point. And then let's see. So if I do like this I use the sign function. Like this. So if I add one then this function will vary between zero and two. And my range for the graph is from zero to 100 in the y-axis. So if I multiply this by let's say 40. I should have a nice looking wave. So I want to enter integer values in this particular graph. And I need to do like this. So what is going on here? I shouldn't be doing this. That's the error. So actually the error was that I did not have float there and not that I needed to convert it. So here you see the sign wave from ranging from zero to 80. Let's just add a little bit of randomness to this. So random model 10. Okay so now we have a nice more or less random graph here. And as you can see we have the delete or wrap and clear as it called dynamic behavior. I can still use this of course. Like this. I'll actually try to go and change it. So if we move over to the designer. I can try to have this one instead the dynamic behavior of scrolling. Generate code, go back here again and build. And you'll see here go like this. And I can each time I click I'll get a new position. But if I'm just clicking here it doesn't really look correct I would say. So here I would like it to be updated each time. So how can I achieve that? Well if I just say update here. I would get that behavior but I do not have the index value where I last clicked. So let me save that one. So last index. So instead of providing it here let me update it and then use that value. So value.index and then no argument here. I'll do the same down here. No argument here. And down here instead of using index. I'll use last index. Let's see what goes for here. Last index and I will remove the argument to this method. And then this should be correct. Then it will update the info widget with wherever I pressed or dragged last time. So we see this behavior here. Nice, sort of nice at least. Okay so if we go back to the designer and change the dynamic behavior again to wrap and clear. We'll see a couple of things that we need to fix. So at the beginning I have my text box already clicked. And that's because I set this index to zero. It will be updated when I clear it. But something like this is actually looking wrong as well. So first of all let's remove it so that it will not appear if I haven't clicked. So for this I would say I'll have an initial value of minus one. And down here I'll say if last index is less than zero. Well then I will move this one out of sight. I could also set visible to false so that it would disappear. But I could also do something like this. Move it out of sight. And if it's okay then I'll do like this. Let's check that out. Now it's not there at the beginning. And now it's there when I click and drag. Okay so this problem. So I want when I clear the graph I want to remove this as well. So how do I do that? Well each time I add a new data point I get the index that is where it's added. And remember the index is from zero to number of data points in this case a hundred. So a hundred minus one so from zero to 99. So when I clear the screen I know the return value here will be zero. So if I say new index so where I add this I could do like this. So if the newly added index is zero then I know the screen has been cleared. If this one is zero well what could I do? So one idea was to say last index minus one. So if that is the case then it's minus one. And as we did just create this thing if it's less than zero it will be moved out of sight. It should work. So let us try it out. Put this here and it's removed. I could also have placed it on zero of course. So I could have written zero here and then it would move back here. Okay now I have this behavior instead. Okay so that was what I wanted to show you in this video. Hope that it has been educational and that you will try out all these nice features of the dynamic graph.