Filled line graph with emwin - no create handle function for vertical line or filled polygon

siare-software · April 17, 2023 at 9:06 AM

Hi,

I'm struggling with how to plot a filled line graph using emWin widget.
I know that there is no ready to use widget for a filled graph and that this topic has been already asked in the past in this forum, here:
How do plot a filled line graph using emWin widget?

But I really don't understand how I can achieve the result with the suggestion provided.

If I have the following to create a YT Graph:

hData = GRAPH_DATA_YT_Create( ... );
GRAPH_AttachData(hGraph, hData);
GRAPH_DATA_YT_AddValue(hData, ....);

I would like to do the same with something that for each new value, build a vertical line,
but there is no "create" function that allows me to obtaon a handle doing something like this:

hLine = GRAPH_LINE_Create ();

Alternatively, I would like to make a filled polygon adding each new value,
but still there is no "create" polygon handle like:

hPolygon = GRAPH_POLYGON_Create ();

Please can you help me?
Many thanks in advance.
Best,

Giovanni

SEGGER - Schoenen · June 20, 2023 at 10:37 AM

Hi,

I guess you have already a solution, but I'll post it just in case other people have a similar problem.

Here is the code showing how to hook into the drawing process of the GRAPH widget and fill the area under the GRAPH. You might want to improve it by searching the largest rectangular area under the GRAPH and fill it with GUI_FillRect() instead of line by line.

You can use the switch USE_PUNCH_OUT_DEVICE fill the the area with a gradient.

C

#include "DIALOG.h"


#include "stdlib.h"


/*********************************************************************
*
*       Defines
*
**********************************************************************
*/


#define USE_PUNCH_OUT_DEVICE  0


#define LEFT_BORDER    (30)
#define Y_OFFSET       (75)


static GRAPH_DATA_Handle _hData;


/*********************************************************************
*
*       Static code
*
**********************************************************************
*/
/*********************************************************************
*
*       _UserDrawGraph
*
*  Function description:
*    This function is periodically called: after the border was drawn,
*    before anything is drawn except the background being filled,
*    and at last when the final drawing operation is done.
*
*  Notes:
*    Therefore you're not able to completely draw the widget yourself,
*    but instead just add drawings.
*
*/
static void _UserDrawGraph(WM_HWIN hWin, int Stage) {
  GUI_RECT          Rect;
  int               xSize;
  int               i;
  I16               Value;
#if USE_PUNCH_OUT_DEVICE
  int               ySize;
  GUI_MEMDEV_Handle hMemGradient;
  GUI_MEMDEV_Handle hMemMask;
#endif


  switch (Stage) {
  case GRAPH_DRAW_LAST:
#if USE_PUNCH_OUT_DEVICE


    WM_GetClientRect(&Rect);
    xSize = WM_GetWindowSizeX(hWin);
    ySize = WM_GetWindowSizeY(hWin);
    hMemGradient = GUI_MEMDEV_CreateFixed32(Rect.x0, Rect.y0, xSize - 1, ySize - 1);
    hMemMask     = GUI_MEMDEV_CreateFixed  (Rect.x0, Rect.y0, xSize - 1, ySize - 1, GUI_MEMDEV_NOTRANS, GUI_MEMDEV_APILIST_8,  GUICC_8);


    GUI_MEMDEV_Select(hMemGradient);
    GUI_SetBkColor(GUI_TRANSPARENT);
    GUI_Clear();
    GUI_DrawGradientV(Rect.x0, Rect.y0, Rect.x1, Rect.y1 + 60, GUI_RED, GUI_TRANSPARENT);
    GUI_MEMDEV_Select(hMemMask);
    GUI_SetBkColor(GUI_BLACK);
    GUI_Clear();
    for (i = 0; i < xSize; i++) {
      if (GRAPH_DATA_YT_GetValue(_hData, &Value, i) == 1) {
        break;
      }
      if (Value) {
        GUI_SetColor(GUI_WHITE);
        GUI_DrawVLine(Rect.x0 + i + LEFT_BORDER + 1, Rect.y1 - Value - Y_OFFSET, Rect.y1);
      }
    }
    GUI_MEMDEV_Select(0);
    GUI_MEMDEV_PunchOutDevice(hMemGradient, hMemMask);
    GUI_MEMDEV_Write(hMemGradient);
    GUI_MEMDEV_Delete(hMemGradient);
    GUI_MEMDEV_Delete(hMemMask);


#else
    GUI_USE_PARA(hWin);
    xSize = LCD_GetXSize();
    WM_GetClientRect(&Rect);
    for (i = 0; i < xSize; i++) {
      if (GRAPH_DATA_YT_GetValue(_hData, &Value, i) == 1) {
        break;
      }
      if (Value) {
        GUI_SetColor(GUI_RED);
        GUI_DrawVLine(Rect.x0 + i + LEFT_BORDER + 1, Rect.y1 - Value - Y_OFFSET, Rect.y1);
      }
    }
#endif
    break;
  }
}


/*********************************************************************
*
*       Public code
*
**********************************************************************
*/
/*********************************************************************
*
*       MainTask
*/
void MainTask(void) {
  GRAPH_SCALE_Handle hScale;
  WM_HWIN            hGraph;
  int                Angle;
  int                Value;


  //
  // Init GUI
  //
  GUI_Init();
  //
  // Enable multi-buffering to avoid flickering during the continuous update of the graph.
  //
  WM_MULTIBUF_Enable(1);
  //
  // Create graph widget
  // For more explanation on how to create graphs,
  // see the sample GUI_GRAPH_GraphUsage.c
  //
  hGraph = GRAPH_CreateEx(0, 0, LCD_GetXSize(), LCD_GetYSize(), WM_HBKWIN, WM_CF_SHOW, GRAPH_CF_GRID_FIXED_X, GUI_ID_GRAPH0);
  GRAPH_SetGridVis(hGraph, 1);   
  GRAPH_SetGridDistX(hGraph, 10);
  GRAPH_SetGridDistY(hGraph, 10);
  GRAPH_SetGridOffY(hGraph, -5); 
  GRAPH_SetBorder(hGraph, LEFT_BORDER, 0, 0, 0);
  GRAPH_SetColor(hGraph, GUI_WHITE, GRAPH_CI_BK);
  GRAPH_SetColor(hGraph, GUI_GRAY_E7, GRAPH_CI_GRID);
  GRAPH_SetColor(hGraph, GUI_WHITE, GRAPH_CI_BORDER);
  //
  // Create data object
  //
  _hData = GRAPH_DATA_YT_Create(GUI_GRAY_7C, LCD_GetXSize() - LEFT_BORDER, NULL, 0);
  GRAPH_DATA_YT_SetAlign(_hData, GRAPH_ALIGN_LEFT);
  GRAPH_DATA_YT_SetOffY(_hData, 75);
  GRAPH_AttachData(hGraph, _hData);
  //
  // Create scale object
  //
  hScale = GRAPH_SCALE_Create(15, GUI_TA_HCENTER | GUI_TA_VCENTER, GRAPH_SCALE_CF_VERTICAL, 1);
  GRAPH_SCALE_SetNumDecs(hScale, 0);  
  GRAPH_SCALE_SetFactor(hScale, 1);   
  GRAPH_SCALE_SetTickDist(hScale, 20);
  GRAPH_SCALE_SetOff(hScale, 130);
  GRAPH_SCALE_SetTextColor(hScale, GUI_GRAY_C8);
  GRAPH_AttachScale(hGraph, hScale);
  //
  // Set a user draw function to the graph
  //
  GRAPH_SetUserDraw(hGraph, _UserDrawGraph);
  //
  // Continuously feed the graph with data to create a sine curve
  //
  Angle = 0;
  while (1) {
    GUI_Delay(10);
    Value = GUI__SinHQ(((Angle++) % 360) * 1000);
    Value = (50 * Value) >> 16;
    GRAPH_DATA_YT_AddValue(_hData, (I16)Value + 60);
  }
}


/*************************** End of file ****************************/

Display More

Best regards,
Sven

Participate now!