making a custom widget (custom scroller)

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

    • making a custom widget (custom scroller)

      hi i would like to make a custom scroller , but i am not sure what is the best way to make it ,
      The button should work in such a way that when you rotate the circle on the ring, the value changes and accordingly the fill bar changes.(attached picture)



      i started by drawing the circles with gui_draw and now i am trying to understand how i can make the third circle move on the ring .
      and i will fill the ring with draw_arc , is this the right way to do that or there is a simple way?
      thanks
      Kamir.
      Images
      • widget_q.gif

        8.44 kB, 167×149, viewed 119 times
    • Hello,

      I did something similar but it was not a custom widget. It was based on KNOB widget. It is in case you have memory devices option in your emWin package and your hardware has enough memory.

      Something like this:

      C Source Code: main.c

      1. #include "DIALOG.h"
      2. KNOB_Handle hKnob;
      3. GUI_MEMDEV_Handle hMemFront, hMemBack;
      4. // Callback function for drawing the arc on top of the knob
      5. static void _cbKnob(WM_MESSAGE * pMsg) {
      6. int Val;
      7. switch (pMsg->MsgId) {
      8. case WM_PAINT:
      9. // Default drawing function
      10. KNOB_Callback(pMsg);
      11. // Get the knob value
      12. Val = KNOB_GetValue(pMsg->hWin);
      13. // Set arc width
      14. GUI_SetPenSize(10);
      15. // Draw arc respectively to the knob position
      16. GUI_AA_DrawArc(100, 100, 85, 0, (Val - 3600) * 0.1 + 90 + ((Val > 2700) ? 10 : 9), Val > 87 ? 90 : (810 + Val) * 0.1);
      17. break;
      18. default:
      19. KNOB_Callback(pMsg);
      20. break;
      21. }
      22. }
      23. void MainTask(void) {
      24. GUI_Init();
      25. WM_MULTIBUF_Enable(1);
      26. GUI_SetBkColor(GUI_BLACK);
      27. GUI_Clear();
      28. // Create memdev for the knob background
      29. // Draw the ring circles in there
      30. hMemBack = GUI_MEMDEV_Create(0, 0, 200, 200);
      31. GUI_MEMDEV_Select(hMemBack);
      32. GUI_Clear();
      33. GUI_SetPenSize(2);
      34. GUI_SetColor(GUI_WHITE);
      35. GUI_AA_DrawArc(100, 100, 90, 0, 0, 360);
      36. GUI_AA_DrawArc(100, 100, 80, 0, 0, 360);
      37. // Create memdev for the knob button
      38. // Draw the knob button in there
      39. hMemFront = GUI_MEMDEV_Create(0, 0, 200, 200);
      40. GUI_MEMDEV_Select(hMemFront);
      41. GUI_SetBkColor(GUI_TRANSPARENT);
      42. GUI_Clear();
      43. GUI_SetColor(GUI_WHITE);
      44. GUI_SetPenSize(3);
      45. GUI_AA_DrawArc(100, 16, 14, 0, 0, 360);
      46. GUI_SetColor(GUI_BLACK);
      47. GUI_AA_FillCircle(100, 16, 13);
      48. GUI_MEMDEV_Select(0);
      49. // Create knob
      50. hKnob = KNOB_CreateEx(100, 100, 200, 200, WM_HBKWIN, WM_CF_SHOW, GUI_ID_KNOB0);
      51. // Set memdevices to show the knob
      52. KNOB_SetBkDevice(hKnob, hMemBack);
      53. KNOB_SetDevice(hKnob, hMemFront);
      54. // Additional settings
      55. KNOB_SetPeriod(hKnob, 0);
      56. KNOB_SetRange(hKnob, -3600, 0);
      57. // Set custom callback to draw the arc on top of the knob
      58. WM_SetCallback(hKnob, _cbKnob);
      59. while(1)
      60. {
      61. GUI_Delay(50);
      62. }
      63. }
      Display All
      Alex.

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

    • Hi,

      LexaGbs example is pretty good :thumbup:

      Only one little change, the circle in the foreground device is a bit edgy, although it gets drawn with AA functions. To make it work properly add two function calles:

      C Source Code

      1. hMemFront = GUI_MEMDEV_Create(0, 0, 200, 200);
      2. GUI_MEMDEV_Select(hMemFront);
      3. GUI_SetBkColor(GUI_TRANSPARENT);
      4. GUI_Clear();
      5. GUI_SetColor(GUI_WHITE);
      6. GUI_SetPenSize(3);
      7. GUI_PreserveTrans(1); // Make sure the semi transparency doesn't get lost
      8. GUI_AA_DrawArc(100, 16, 14, 0, 0, 360);
      9. GUI_SetColor(GUI_BLACK);
      10. GUI_AA_FillCircle(100, 16, 13);
      11. GUI_PreserveTrans(0); // Disable because this would have an impact on the performance
      12. GUI_MEMDEV_Select(0);
      Display All

      Regards,
      Sven
    • Hi First of all thank you very much for the answers,
      I tried to run the example(copy paste) but it does not show me what I expected, apparently I'm doing something wrong. I use STM32F746G-DISCO.
      In my opinion, I do not use MEMDEV functions correctly. Are there any preliminary actions that I need to make in order to enable them?
      And whether they are included in the package of ST.
      Thank you
      Jeff.
      Images
      • c35cc901-a139-48c8-927d-0ac2c1723010.jpg

        87.18 kB, 747×1,328, viewed 25 times
    • Thank you for your response. In the last two days I tried to understand how I inili the SDRAM component, and it seems I've managed to run your example. The example looks great but now I'm trying to figure out how to run the KNOB. In your example the KNOB should work straight or I need to make changes so I can change values and run it correctly.
      Thank you very much appreciate your answers.
      Jeff.
      Images
      • WhatsApp Image 2019-04-10 at 16.53.20.jpeg

        113.98 kB, 899×1,599, viewed 27 times
    • Hello,

      It depends what was meant by the words "to run the KNOB". So it may be different situations depending on your project configuration:

      1. If a user should not control the KNOB and your project doesn't need the touch input at all then simply don't initialize the touch panel on the DISCO board. So your application can control the KNOB simply by using KNOB_SetPos() function. See emWin manual for detailed description.

      2. If a user should not control the KNOB but your project needs the touch input then you should call initialization function for the touch panel and run periodically touch monitoring function (BSP_TS_Init() and BSP_Pointer_Update() function that executes emWin function GUI_TOUCH_StoreStateEx() as I recall in STM32CubeF7 package examples). In this the KNOB doesn't have to react on touch event. To realize this modify KNOB callback function like this:

      C Source Code

      1. // Callback function for drawing the arc on top of the knob
      2. static void _cbKnob(WM_MESSAGE * pMsg) {
      3. int Val;
      4. switch (pMsg->MsgId) {
      5. case WM_TOUCH:
      6. // Do nothing to avoid KNOB control by a user
      7. break;
      8. case WM_PAINT:
      9. // Default drawing function
      10. KNOB_Callback(pMsg);
      11. // Get the knob value
      12. Val = KNOB_GetValue(pMsg->hWin);
      13. // Set arc width
      14. GUI_SetPenSize(10);
      15. // Draw arc respectively to the knob position
      16. GUI_AA_DrawArc(100, 100, 85, 0, (Val - 3600) * 0.1 + 90 + ((Val > 2700) ? 10 : 9), Val > 87 ? 90 : (810 + Val) * 0.1);
      17. break;
      18. default:
      19. KNOB_Callback(pMsg);
      20. break;
      21. }
      22. }
      Display All

      3. If a user can control the KNOB then call initialization and monitoring function for the touch panel. Then KNOB should work automatically.

      And you should also call GUI_Exec() / GUI_Exec1() / GUI_Delay() functions in all the cases periodically for Window Manager to work and drive the KNOB and other widgets. See chapter "Window Manager" for detailed description in emWin manual (UM03001 document by Segger or STemWin[XXX].pdf by ST in STM32CubeF7 package where XXX is the latest library version compiled by ST).

      Alex.