Hello,

I have to develop a bar graph as depicted in the attached image, with two independent variables (red and light blue) that colorize the grey steps according to their value.
I was thinking drawing the gray bar graph (as a bmp/png) on layer #0 and partially plotting on layer #1 the color bars (as a bmp/png) with transparent background but I couldn't find a function that draws only a part of the bitmap.
Moreover the bitmaps are intended to start from the top left corner so it looks like that my idea is not feasible.

Any idea/examples of how can this be achieved with fast computation as well?
Memory devices usage?

Thank you for your support.

Best regards,
Mark

LexaGb wrote:

Hello,

maybe we should place two scales (gray and colored) at one position in an exact matching using IMAGE widgets.

Then invalidate colored bar image within the area related to the bar value using WM_SetUserClipRect() function.

Just a simple code:

C Source Code

1. #include "DIALOG.h"
3. // Bitmaps for the bars, in attach
4. extern GUI_CONST_STORAGE GUI_BITMAP bmimg_bar_gray;
5. extern GUI_CONST_STORAGE GUI_BITMAP bmimg_bar_red;
7. // Image widgets' handlers;
8. IMAGE_Handle hImgBrGr, hImgBrRd;
10. // Bar value (0 - 100)
11. // Delta for ticking the bar up / down
12. // y0 for invalidating the red image widget area related to the bar value
13. int _BarValue = 0, _Delta = 1, y0;
15. // Red bar image widget callback
16. void _cbImgRd(WM_MESSAGE * pMsg) {
17. GUI_RECT Rect;
19. switch (pMsg->MsgId) {
20. case WM_PAINT:
21. // Get whole image rect
22. WM_GetClientRect(&Rect);
24. // y0 correction related to the bar value
25. Rect.y0 = y0;
27. // Set area for invalidating the red bar image
28. WM_SetUserClipRect(&Rect);
30. // Draw the image within the area
31. IMAGE_Callback(pMsg);
33. // Restore default clipping area
34. WM_SetUserClipRect(NULL);
35. break;
36. default:
37. IMAGE_Callback(pMsg);
38. break;
39. }
40. }
42. void MainTask(void) {
44. GUI_Init();
46. WM_MULTIBUF_Enable(1);
48. // Create gray and red bar image widgets and set related bitmaps
49. hImgBrGr = IMAGE_CreateEx(50, 10, 36, 239, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_IMAGE0);
50. IMAGE_SetBitmap(hImgBrGr, &bmimg_bar_gray);
52. hImgBrRd = IMAGE_CreateEx(50, 10, 36, 239, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_IMAGE1);
53. IMAGE_SetBitmap(hImgBrRd, &bmimg_bar_red);
55. // Set callback for the red bar image widget
56. WM_SetCallback(hImgBrRd, _cbImgRd);
58. // Initial value for y0
59. y0 = 238;
61. while (1)
62. {
63. GUI_Delay(50);
65. // Ticking the bar value up / down
66. _BarValue += _Delta;
68. // Calc y0 related to the bar value
69. // 20 pixels is the height of the one "piece"
70. // Invalidate the red bar image widget to redraw it
71. if ((_BarValue % 8) == 0)
72. {
73. y0 -= 20 * _Delta;
74. WM_Invalidate(hImgBrRd);
75. }
77. // Change ticking direction up / down
78. // Reinit value for y0
79. if ((_BarValue == 100) || (_BarValue == 0))
80. {
81. _Delta = -_Delta;
82. y0 = y0 < 0 ? 0 : 238;
83. }
84. }
85. }

Display All

Alex.

Hi Alex,

thank you for your answer and your useful example, I think that WM_SetUserClipRect() was the function I was looking for!

Bests,
Mark