158 views
in GUI Development by

Hello Embedded Wizard Team,

      I started developping a GUI that will draw a Graph progressively on the screen so I added a Graph, a CoordList, a Timer and a Variable. This is the code implemented in the Slot method:

sender; /* the method is called from the sender object */

/* I chose a sin wave as a demo for my GUI for simplicity purposes, this will be later changed to the desired data */

var float Y = math_sin(Variable1) * float(120);

Variable1 = Variable1 + 3;

CoordList.AddCoord( Variable1, Y);

/* This If statement will make the animation loop instead of drawing the line outside the window */

if (Variable1 >960)
  {
    Variable1 = 0;
    CoordList.ClearList();
  }
Graph.Coordinates = CoordList;

this is the result i got ( I used the Button component from the VehicleDataLogger demo ) :

https://1drv.ms/u/s!AniT7vb6nSSFmHSLsb-y2LJQgrGR

So my question is : how can i make the graph keep drawing inside the borders of the window like in the VehicleDataLogger? Is there a way to do that with the Outline Box tool or am I supposed to shift manually every Coordinates by the step I'm using ? (this is approximately the result I'm looking for. Sorry for the long URL):

https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.imgur.com%2Fc9P9FPl.gif&imgrefurl=https%3A%2F%2Fwww.reddit.com%2Fr%2Foddlysatisfying%2Fcomments%2F4ygw9s%2Funrolling_a_sphere%2F&docid=tcM3qQig3fdWPM&tbnid=5zoM9u-H-tP_mM%3A&vet=10ahUKEwic1IuYpNngAhVjxoUKHehDDMoQMwg-KAIwAg..i&w=432&h=219&client=firefox-b-d&bih=642&biw=1366&q=sine%20wave%20drawing%20gif&ved=0ahUKEwic1IuYpNngAhVjxoUKHehDDMoQMwg-KAIwAg&iact=mrc&uact=8#h=219&imgdii=oVVkxeOu_SDaHM:&vet=10ahUKEwic1IuYpNngAhVjxoUKHehDDMoQMwg-KAIwAg..i&w=432

Best regards,

 

1 Answer

0 votes
by

Hello,

   I figured it out ! I tried using Outline Box but it didn't lead me to anything. So what I did is:

_ Remove the If statement from the Slot ( which was just for demonstration purposes ).

_ Add the InvalidateViewState(); method after adding a new Coordinate (to call the UpdateViewState method) .

_ Add this line of code in the UpdateViewState method:

aState;
Graph.CoordOrigin = point (Graph.Bounds.w - (Variable1 * Graph.PixelPerUnit.x), Graph.Bounds.h -127);

Best regards,

by
Hello,

using the Outline Box is not helpful for this use-case, because it is a container to manage GUI components.

In case you want to shift the content within the graph you can use the property CoordOrigin of the Charts::Graph object. However, there is no need to do that within the UpdateViewState method and to make a call to InvalidateViewState().

Just add the new coordinate to the CoordList, assign the CoordList to the Graph and set the CoordOrigin to the desired value.

Best regards,

Manfred.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...