How to make marker on graph widget

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • How to make marker on graph widget

    Hello,

    I understanding there is no marker facility in the emWin Graph widget. I would like to know how can I make markers on the waveforms that are viewed on the graph. I tried making a vertical line but it wasn't visible.

    Thanks
    Images
    • graphhalt1.gif

      20.19 kB, 800×600, viewed 1,516 times
  • Hello,

    Please try the code below.

    I have overwritten the default callback function of the GRAPH widget and draw marker into the GRAPH.

    C Source Code

    1. #include "DIALOG.h"
    2. /*********************************************************************
    3. *
    4. * Defines
    5. *
    6. **********************************************************************
    7. */
    8. #define ID_WINDOW_0 (GUI_ID_USER + 0x00)
    9. #define ID_GRAPH_0 (GUI_ID_USER + 0x01)
    10. #define ID_BUTTON_0 (GUI_ID_USER + 0x02)
    11. #define ID_BUTTON_1 (GUI_ID_USER + 0x03)
    12. /*********************************************************************
    13. *
    14. * Static data
    15. *
    16. **********************************************************************
    17. */
    18. /*********************************************************************
    19. *
    20. * _aDialogCreate
    21. */
    22. static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
    23. { WINDOW_CreateIndirect, "Window", ID_WINDOW_0, 0, 0, 480, 272, 0, 0x0, 0 },
    24. { GRAPH_CreateIndirect, "Graph", ID_GRAPH_0, 140, 86, 200, 100, 0, 0x0, 0 },
    25. { BUTTON_CreateIndirect, "Right", ID_BUTTON_0, 360, 220, 80, 20, 0, 0x0, 0 },
    26. { BUTTON_CreateIndirect, "Left", ID_BUTTON_1, 40, 220, 80, 20, 0, 0x0, 0 },
    27. };
    28. static GUI_POINT _aPoint[] = { {10, 20}, {50, 60}, {120, 30}, {150, 40}, {175, 60} }; // Some Points to be drawn in the graph
    29. static GUI_POINT _Cursor[] = { {0, 0}, {5, -5}, {5, -10}, {-5, -10}, {-5, -5}, {0, 0} }; // These points describing the cursor
    30. static int CursorPos; // The Cursor Position
    31. /*********************************************************************
    32. *
    33. * Static code
    34. *
    35. **********************************************************************
    36. */
    37. /*********************************************************************
    38. *
    39. * _DrawCursor
    40. */
    41. static void _DrawCursor(int xOrg, int yOrg) {
    42. int i;
    43. int x0, x1;
    44. int y0, y1;
    45. GUI_SetColor(GUI_WHITE);
    46. for (i = 0; i < 5; i++) {
    47. x0 = xOrg + _Cursor[i].x;
    48. y0 = yOrg + _Cursor[i].y;
    49. x1 = xOrg + _Cursor[i + 1].x;
    50. y1 = yOrg + _Cursor[i + 1].y;
    51. GUI_DrawLine(x0, y0, x1, y1);
    52. }
    53. }
    54. /*********************************************************************
    55. *
    56. * _cbGraph
    57. */
    58. static void _cbGraph(WM_MESSAGE * pMsg) {
    59. int xPos, yPos;
    60. GUI_RECT Rect;
    61. switch (pMsg->MsgId) {
    62. case WM_PAINT:
    63. //
    64. // Draw the GRAPH with the default settings
    65. //
    66. GRAPH_Callback(pMsg);
    67. //
    68. // Now draw a cursor over the GRAPH
    69. //
    70. WM_GetClientRect(&Rect); // Get the client rectangle to receive the bottom most y position of the GRAPH area
    71. xPos = _aPoint[CursorPos].x; // Use CursorPos as index and get the x coordinate of the point
    72. yPos = Rect.y1 - _aPoint[CursorPos].y; // Same again but use the lowest y position to calculate where the cursor should be drawn
    73. _DrawCursor(xPos, yPos); // Draw cursor
    74. break;
    75. default:
    76. //
    77. // Handle all other messages by the default callback
    78. //
    79. GRAPH_Callback(pMsg);
    80. break;
    81. }
    82. }
    83. /*********************************************************************
    84. *
    85. * _cbDialog
    86. */
    87. static void _cbDialog(WM_MESSAGE * pMsg) {
    88. WM_HWIN hItem;
    89. static GRAPH_DATA_Handle hGraphData;
    90. int NCode;
    91. int Id;
    92. static int DataAttached;
    93. switch (pMsg->MsgId) {
    94. case WM_INIT_DIALOG:
    95. //
    96. // Initialization of 'Window'
    97. //
    98. hItem = pMsg->hWin;
    99. WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00000000));
    100. //
    101. // Initialize the GRAPH widget
    102. //
    103. hItem = WM_GetDialogItem(pMsg->hWin, ID_GRAPH_0);
    104. hGraphData = GRAPH_DATA_XY_Create(GUI_RED, 100, _aPoint, GUI_COUNTOF(_aPoint));
    105. GRAPH_AttachData(hItem, hGraphData);
    106. GRAPH_SetGridVis(hItem, 1);
    107. GRAPH_SetGridDistX(hItem, 10);
    108. GRAPH_SetGridDistY(hItem, 10);
    109. //
    110. // Set a custom callback, here we want to draw a cursor
    111. //
    112. WM_SetCallback(hItem, _cbGraph);
    113. break;
    114. case WM_NOTIFY_PARENT:
    115. Id = WM_GetId(pMsg->hWinSrc);
    116. NCode = pMsg->Data.v;
    117. switch(Id) {
    118. case ID_BUTTON_0: // Notifications sent by 'Right'
    119. switch(NCode) {
    120. case WM_NOTIFICATION_CLICKED:
    121. break;
    122. case WM_NOTIFICATION_RELEASED:
    123. //
    124. // Handle the cursor position, move it to the right
    125. //
    126. if (CursorPos >= (GUI_COUNTOF(_aPoint) - 1)) {
    127. CursorPos = (GUI_COUNTOF(_aPoint) - 1);
    128. } else {
    129. CursorPos++;
    130. //
    131. // Don't forget to tell the GRAPH it needs to be drawn
    132. //
    133. hItem = WM_GetDialogItem(pMsg->hWin, ID_GRAPH_0);
    134. WM_Invalidate(hItem);
    135. }
    136. break;
    137. }
    138. break;
    139. case ID_BUTTON_1: // Notifications sent by 'Left'
    140. switch(NCode) {
    141. case WM_NOTIFICATION_CLICKED:
    142. break;
    143. case WM_NOTIFICATION_RELEASED:
    144. if (CursorPos <= 0) {
    145. CursorPos = 0;
    146. } else {
    147. CursorPos--;
    148. //
    149. // Don't forget to tell the GRAPH it needs to be drawn
    150. //
    151. hItem = WM_GetDialogItem(pMsg->hWin, ID_GRAPH_0);
    152. WM_Invalidate(hItem);
    153. }
    154. break;
    155. }
    156. break;
    157. }
    158. break;
    159. default:
    160. WM_DefaultProc(pMsg);
    161. break;
    162. }
    163. }
    164. /*********************************************************************
    165. *
    166. * Public code
    167. *
    168. **********************************************************************
    169. */
    170. /*********************************************************************
    171. *
    172. * CreateWindow
    173. */
    174. void MainTask(void) {
    175. WM_SetCreateFlags(WM_CF_MEMDEV);
    176. GUI_Init();
    177. GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
    178. while (1) {
    179. GUI_Delay(100);
    180. }
    181. }
    182. /*************************** End of file ****************************/
    Display All


    Regards,
    Sven
    Please read the forum rules before posting.

    Keep in mind, this is *not* a support forum.
    Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
    Should you be entitled to support you can contact us via our support system: segger.com/ticket/

    Or you can contact us via e-mail.
  • Thanks Schoenen for your response.

    I tried out your callback function and I was successfully able to display marker on my graph. I would like some insights as if how the callback function worked. Also if you could answer me for my following queries.

    1. I had tried drawing a rect on the graph before posting my question over here, but I was not visible.
    2. Is it possible to have marker automatically attach to the graph line and also have some text info around it?
    3. I have created a fixed non realtime YT Graph, and scale is set from 930 to 980. But while plotting i have a 200 byte array which I fill in and attach my data. So basically are Scale and Graph independent entities or they can be connected.

    Thanks

    The post was edited 1 time, last by kashyap.gada ().

  • Hi,

    I had tried drawing a rect on the graph before posting my question over here, but I was not visible.
    Since I don't know how you tried to achieve this I can't say what went wrong.
    Is it possible to have marker automatically attach to the graph line and also have some text info around it?
    There is no ready to use solution from emWin. You are responsible for where and how the marker gets drawn.
    I have created a fixed non realtime YT Graph, and scale is set from 930
    to 980. But while plotting i have a 200 byte array which I fill in and
    attach my data. So basically are Scale and Graph independent entities or
    they can be connected.
    I'm not sure what you mean but the GRAPH and the SCALE are getting created independend of each other. Afterwards the scale gets attached to the GRAPH. You can also detach a scale and attach another one.

    Regards,
    Sven
    Please read the forum rules before posting.

    Keep in mind, this is *not* a support forum.
    Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
    Should you be entitled to support you can contact us via our support system: segger.com/ticket/

    Or you can contact us via e-mail.
  • Thanks for the reply.

    1. I used GUI_DrawHLine() to draw line on the screen but they were not visible on Graph Widget.

    3. In Graph Widget, If I have attached a horizontal scale from 900 to 1000, how to place a point on graph with some vertical axis value at a point say 930. At the moment I have an array whose data is attached to graph.

    Regards