Graph bug

[wctltya]

I've implemented the graph demo but the picture looks slightly different than result-640x480.gif (aside of the widow dimensions, of course) : 

1. Seems the Graph grid x/y are exchanged?  Obviously the mistake is in gwin_graph.c between lines 220 and 238.

2. The background color is not black, so in order to see the axes and grid I've changed their colors.

In order to set it's  background I tried:

- setting custom style at creation time wi.customStyle = &black; and

- setting the widget color at drawing time: gwinSetBgColor(gh, Black);  gwinRedraw(gh);

both w/o success. 

Could you tell me, please, how can I set it?

[Joel Bodenmann]

Hi,

I looked into the code and I couldn't find either of the problems you're describing. Could you please create a minimal test case example that allows us to reproduce the problem?

[inmarket]

Note the graph window does not store the graph data. After clearing you need to reissue the graph drawing commands. gwinRedraw() does not redraw the graph.

Also, have you run the gdisp basics demo to ensure that the display colors and orientation are correct for your hardware? It is precisely to enable you to compare the results you got with what it should look like that we added the images to the demo directories.

[wctltya]

Hi guys,

Sorry for delayed replay. The code looks like:

// GHandles
static GHandle ghGraphPageContainer;
static GHandle ghGraphPageToolbarButtonBack;
static GHandle ghGraphPageContentContainer;
static GHandle ghGraphPageGraphWindow;
// A set of data points that will be displayed in the graph
static const point data[5] = {
    { -40, -40 },
    { 70, 40 },
    { 140, 60 },
    { 210, 60 },
    { 280, 200 }
};
// A graph styling
static GGraphStyle GraphStyle1 = {
    { GGRAPH_POINT_DOT, 0, Blue },          // Point
    { GGRAPH_LINE_NONE, 2, Gray },          // Line
    { GGRAPH_LINE_SOLID, 0, Red/*White*/ },        // X axis
    { GGRAPH_LINE_SOLID, 0, Blue/*White*/ },        // Y axis
    { GGRAPH_LINE_DASH, 5, Red/*Gray*/, 50 },      // X grid
    { GGRAPH_LINE_DOT, 7, Blue/*Yellow*/, 50 },     // Y grid
    GWIN_GRAPH_STYLE_POSITIVE_AXIS_ARROWS   // Flags
};
// Another graph styling
static const GGraphStyle GraphStyle2 = {
    { GGRAPH_POINT_SQUARE, 5, Red },        // Point
    { GGRAPH_LINE_DOT, 2, Pink },           // Line
    { GGRAPH_LINE_SOLID, 0, Red/*White*/ },        // X axis
    { GGRAPH_LINE_SOLID, 0, Blue/*White*/ },        // Y axis
    { GGRAPH_LINE_DASH, 5, Red/*Gray*/, 50 },      // X grid
    { GGRAPH_LINE_DOT, 7, Blue/*Yellow*/, 50 },     // Y grid
    GWIN_GRAPH_STYLE_POSITIVE_AXIS_ARROWS   // Flags
};
void createPageGraph(void)
{
	GWidgetInit wi;
	gwinWidgetClearInit(&wi);

//Creates a page container with show = false, a toolbar inside with a title and a back button
	page_common_start(&ghGraphPageContainer,
	            &ghGraphPageToolbarButtonBack,
	            NO_SUB_PAGE_BUTTON,
	            NO_SUB_PAGE_BUTTON_LABEL,
	            strID_SERVICE_LOGS_PARAMETERS_GRAPHS_TITLE,
	            0);	//no subpages
//Creates a content container with application's common backgownd color
	page_common_add_generic_container(&ghGraphPageContainer, &ghGraphPageContentContainer);

//Graph 320x320
	wi.g.show = TRUE;
	wi.g.x = 0;
	wi.g.y = (PAGE_COMMON_ELEMENTS_HEIGHT - 320)/2;
	wi.g.width = 320;
	wi.g.height = 320;
	wi.g.parent = ghGraphPageContentContainer;
	//wi.customStyle = &black;	//doesn't work
	ghGraphPageGraphWindow = gwinGraphCreate(0, &wi.g);
}

void graphPageDrawGraph(GHandle gh) {

	uint16_t    i;

	/* doesn't work
	 * gwinSetBgColor(gh, Black);
	gwinRedraw(gh);*/

	// Set the graph origin and style
    gwinGraphSetOrigin(gh, gwinGetWidth(gh)/2, gwinGetHeight(gh)/2);	//middle
    gwinGraphSetStyle(gh, &GraphStyle1);
    gwinGraphDrawAxis(gh);

    // Draw a sine wave
    for(i = 0; i < gwinGetWidth(gh); i++) {
        gwinGraphDrawPoint(gh, i-gwinGetWidth(gh)/2, 80*sin(2*0.2*M_PI*i/180));
    }

    // Modify the style
    gwinGraphStartSet(gh);
    GraphStyle1.point.color = Green;
    gwinGraphSetStyle(gh, &GraphStyle1);

    // Draw a different sine wave
    for(i = 0; i < gwinGetWidth(gh)*5; i++) {
        gwinGraphDrawPoint(gh, i/5-gwinGetWidth(gh)/2, 95*sin(2*0.2*M_PI*i/180));
    }

    // Change to a completely different style
    gwinGraphStartSet(gh);
    gwinGraphSetStyle(gh, &GraphStyle2);

    // Draw a set of points
    gwinGraphDrawPoints(gh, data, sizeof(data)/sizeof(data[0]));
}

void showPageGraph(void) {
	gwinShow(ghGraphPageContainer);
	graphPageDrawGraph(ghGraphPageGraphWindow);
}

//The main loop invokes:
	createPageGraph();
	showPageGraph();

I'm not in front of device(tomorrow I'll post a picture), but the rendered window is:

- white background color,

- both sine are OK, i.e. they are drawn horizontally

- the third line and dots are OK,

- x axle is solid red west - east line, i.e. horizontal (------>)

- y axle is solid blue, south - north line, i.e. vertical

- the origin is in the graph window center

- x grid's lines are dot, blue (according to GraphStyle1/2 above must be dashed red lines)

- y grid's lines are dash, red (according to GraphStyle1/2 above must be doted blue lines)

i.e. everything is fine, except the grid and background. 

The displays is 320x480 and its orientation is fine. 

Edited September 26, 2017 by wctltya

[inmarket]

We will wait for the picture.

It is also possible to compile this under windows or linux. It makes debugging much easier and seperates hardware from software issues.

[wctltya]

The attached image quality is not the best one, but it is enough to see that the grid x/y are exchanged.

It is always better to read the doc's first  - saw the window background color is the default background color.

[Joel Bodenmann]

Well, maybe I'm still not understanding the problem here but the picture you show is exactly what you wrote in your code:

• X-Axis: Red, Solid-Line
• X-Grid: Red, Dash-Line
• Y-Axis: Blue, Solid-Line
• X-Grid: Blue, Dash-Line

That's exactly what I'm seeing in the picture.

[wctltya]

// A graph styling
static GGraphStyle GraphStyle1 = {
    { GGRAPH_POINT_DOT, 0, Blue },          // Point
    { GGRAPH_LINE_NONE, 2, Gray },          // Line
    { GGRAPH_LINE_SOLID, 0, Red/*White*/ },        // X axis
    { GGRAPH_LINE_SOLID, 0, Blue/*White*/ },        // Y axis
    { GGRAPH_LINE_DASH, 5, Red/*Gray*/, 50 },      // X grid
    { GGRAPH_LINE_DOT, 7, Blue/*Yellow*/, 50 },     // Y grid
    GWIN_GRAPH_STYLE_POSITIVE_AXIS_ARROWS   // Flags
};
// Another graph styling
static const GGraphStyle GraphStyle2 = {
    { GGRAPH_POINT_SQUARE, 5, Red },        // Point
    { GGRAPH_LINE_DOT, 2, Pink },           // Line
    { GGRAPH_LINE_SOLID, 0, Red/*White*/ },        // X axis
    { GGRAPH_LINE_SOLID, 0, Blue/*White*/ },        // Y axis
    { GGRAPH_LINE_DASH, 5, Red/*Gray*/, 50 },      // X grid
    { GGRAPH_LINE_DOT, 7, Blue/*Yellow*/, 50 },     // Y grid
    GWIN_GRAPH_STYLE_POSITIVE_AXIS_ARROWS   // Flags
};

so:

x-Grid, shall be Red, Dash-line

y-Grid, shall be Blue, Dot-line

Edited September 27, 2017 by wctltya

[Joel Bodenmann]

And that's exactly what I see on the picture. The X-Grid is the divisions in X direction, so the lines that divide the X axis. Those are the lines perpendicular to the X-Axis. Same with the Y-axis but the other way around: The Y-Grid divides the Y-Axis and hence the Y-Grid are the horizontal lines.

[wctltya]

Thank you Joel,

As usual it is my mistake 

[Joel Bodenmann]

No problem - We're happy to help wherever we can  

[wctltya]

BTW, my application requiring a second Y-axis (right side), so I've created a function for it.

You might would like to consider adding an optional second Y-axis to a next library revision as well.

[inmarket]

Create a pull request with your changes and we will look at integrating them next time we are in that area.

Nice work on solving the problem.