Swipe between pages in a Window Dialog

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

    • Swipe between pages in a Window Dialog

      Hello,

      I would like to create something similar to what I've depicted below, a dialog made of 4 full-screen "pages" (each page has its own widgets) that the user can navigate through a swipe gesture.
      I usually create a Window dialog with its child objects with the GUI_WIDGET_CREATE_INFO approach for the individual pages but I'm not sure if this is the correct approach.
      So far I've taken the Move Windows sample as a reference:
      wiki.segger.com/WM_MOTION_-_Move_windows_(Sample)

      I've created a DialogBox and, in the WM_INIT_DIALOG case of the dialog, I've created a Child window and some buttons:

      Source Code

      1. //Dialog creation
      3. hWinMultiPage = GUI_CreateDialogBox(_aGUIMULTIPAGE_MainWinDialogCreate, GUI_COUNTOF(_aGUIMULTIPAGE_MainWinDialogCreate), _cbDialogGUIMULTIPAGE_MainWin, WM_GetDesktopWindowEx(0), 0, 0);
      5. ...
      7. //Dialog callback
      8. static void _cbDialogGUIMULTIPAGE_MainWin(WM_MESSAGE * pMsg) {
      9. WM_HWIN hItem;
      10. WM_HWIN hChildWin;
      11. // USER START (Optionally insert additional variables)
      12. int NCode;
      13. int Id;
      14. uint16_t ix;
      15. int xSize;
      16. int ySize;
      18. // USER END
      20. switch (pMsg->MsgId) {
      21. case WM_INIT_DIALOG:
      22. //
      23. // Initialization of 'Window'
      24. //
      25. hItem = pMsg->hWin;
      26. //Create window as child
      27. hChildWin = WM_CreateWindowAsChild(0, 0, (GUI_XSIZE_PHYS*4), GUI_YSIZE_PHYS, hItem, WM_CF_SHOW | WM_CF_MOTION_X, _cbChildWin, 0);
      28. //Add some buttons
      29. BUTTON_CreateEx(20, 20, 100, 100, hChildWin, WM_CF_SHOW, 0, GUIMULTIPAGE_ID_TEST_01_BTN);
      30. BUTTON_CreateEx(20 + 240*1, 20, 100, 100, hChildWin, WM_CF_SHOW, 0, GUIMULTIPAGE_ID_TEST_02_BTN);
      31. BUTTON_CreateEx(20 + 240*2, 20, 100, 100, hChildWin, WM_CF_SHOW, 0, GUIMULTIPAGE_ID_TEST_03_BTN);
      32. BUTTON_CreateEx(20 + 240*3, 20, 100, 100, hChildWin, WM_CF_SHOW, 0, GUIMULTIPAGE_ID_TEST_04_BTN);
      Display All
      I've used the same code of the example for the Child window adding the WM_NOTIFY_PARENT to get the buttons notifications and it looks fine to me.

      So, at the moment, the WM_MOTION looks like:

      Source Code

      1. //Inside _cbChildWin callback
      3. case WM_MOTION:
      4. pInfo = (WM_MOTION_INFO *)pMsg->Data.p;
      5. switch (pInfo->Cmd) {
      6. case WM_MOTION_INIT:
      7. WM_GetClientRectEx(pMsg->hWin, &Rect);
      8. //
      9. // Snap window at each quarter of the entire window
      10. // Therefore we get several 'pages', each as big as the screen
      11. //
      12. pInfo->SnapX = (Rect.x1 + 1) / 4;
      13. break;
      14. }
      15. break;
      Display All

      The two things I would like to achieve are:

      - I want the swipe movement to end at the start of the next page, no "in between" situations. So when I swipe from page#1 to page#2 I will see a full screen page#2.

      - I want to be able to start the visualization (entering from other windows of the GUI) from a different page than #1 (let's say Page #3 or Page#4) in some cases.

      Could anybody supply a guideline code to achieve the described behavior?
      Thank you in advance!
      Mark
      Images

      • 4pages_swipe.png

        15.53 kB, 800×400, viewed 329 times

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

    • I've managed to make the Snap function working, I was calling periodically WM_Exec() but not GUI_Delay(1) and I guess this was not refreshing some internal library counters.

      I've still a couple of questions if anybody can help me...
      Is there an effective way to know when the motion is in progress (and when it ends) to differentiate the touch button pressed/released from the motion event?
      I want to avoid the buttons to be activated when the user is swiping between the pages.

      Thank you!
      Mark

    • Hello,

      as for the getting whether the motion is in progress or not: I'd just define a variable and set / clear it when processing motion messages. Also as I've noticed the motion is blocking on its own and we need to use GUI_Exec1() for "diving into" that processing and get an access to that variable.

      As for the avoiding buttons react on touch when motion is in progress, oh, I think it's difficult: when you click on a window / widget first WM calls WM_MOTION message and only then it calls touch messages. I think this is because your hardware "doesn't know" what are you going to do: a swipe or just a release your PID back. We see the same things in our smartphones when we swipe on desktop and we see that an icon under the finger is changed its look when motion starts. Smartphone GUI engine differentiates between fast click on an icon to start an app and long click just for a swipe. I'd look at the problem form a different angle: just set a custom paint function for the same look in clicked / released state.

      My code looked like this:

      C Source Code

      1. #include "DIALOG.h"
      2. #include "stdio.h"
      4. WM_HWIN hWinSwipe, hWinParent;
      5. TEXT_Handle hText;
      7. int _Motion = 0, _xPos = 0;
      9. void _cbButton(WM_MESSAGE * pMsg) {
      10. GUI_RECT Rect;
      11. switch (pMsg->MsgId) {
      12. case WM_PAINT:
      13. WM_GetClientRect(&Rect);
      15. GUI_SetBkColor(GUI_LIGHTGRAY);
      16. GUI_ClearRectEx(&Rect);
      18. GUI_SetFont(GUI_FONT_20_ASCII);
      19. GUI_SetColor(GUI_BLACK);
      20. GUI_SetTextMode(GUI_TM_TRANS);
      22. GUI_DispStringInRect("Button", &Rect, GUI_TA_HCENTER | GUI_TA_VCENTER);
      23. break;
      24. case WM_MOTION:
      25. WM_SendToParent(pMsg->hWin, pMsg);
      26. break;
      27. default:
      28. BUTTON_Callback(pMsg);
      29. break;
      30. }
      31. }
      33. void _cbWinSwipe(WM_MESSAGE * pMsg) {
      34. WM_MOTION_INFO * pInfo;
      35. WM_HWIN hItem;
      36. int i, j;
      37. char str[10];
      39. switch (pMsg->MsgId) {
      40. case WM_CREATE:
      41. for (i = GUI_ID_BUTTON0, j = 0; i <= GUI_ID_BUTTON2; i++, j += 240) {
      42. hItem = BUTTON_CreateEx(60 + j, 200, 120, 80, pMsg->hWin, WM_CF_SHOW, 0, i);
      43. WM_SetCallback(hItem, _cbButton);
      44. }
      45. break;
      46. case WM_MOTION:
      47. pInfo = (WM_MOTION_INFO *)pMsg->Data.p;
      49. switch (pInfo->Cmd) {
      50. case WM_MOTION_INIT:
      51. pInfo->Flags = WM_CF_MOTION_X | WM_MOTION_MANAGE_BY_WINDOW;
      52. pInfo->SnapX = 240;
      53. pInfo->Overlap = 30;
      54. break;
      55. case WM_MOTION_MOVE:
      56. _Motion = 1;
      58. _xPos += pInfo->dx;
      60. if ((_xPos < -510) || (_xPos > 30)) {
      61. _xPos = (_xPos > 30) ? 30 : -510;
      63. pInfo->IsOutside = 1;
      65. pInfo->StopMotion = pInfo->IsDragging ^ 1;
      66. }
      68. if (pInfo->FinalMove)
      69. _Motion = 0;
      71. WM_MoveTo(pMsg->hWin, _xPos, 0);
      72. break;
      73. case WM_MOTION_GETPOS:
      74. pInfo->xPos = _xPos;
      75. break;
      76. }
      77. break;
      78. case WM_PAINT:
      79. GUI_SetBkColor(GUI_RED);
      80. GUI_ClearRect(0, 0, 239, 319);
      82. GUI_SetBkColor(GUI_ORANGE);
      83. GUI_ClearRect(240, 0, 479, 319);
      85. GUI_SetBkColor(GUI_DARKGREEN);
      86. GUI_ClearRect(480, 0, 719, 319);
      88. GUI_SetFont(GUI_FONT_20_ASCII);
      89. GUI_SetColor(GUI_BLACK);
      90. GUI_SetTextMode(GUI_TM_TRANS);
      92. for (i = 0, j = 0; i < 3; i++, j += 240) {
      93. sprintf(str, "Page %d", i + 1);
      94. GUI_DispStringHCenterAt(str, 120 + j, 50);
      95. }
      96. break;
      97. default:
      98. WM_DefaultProc(pMsg);
      99. break;
      100. }
      101. }
      103. void _CheckMotion(void) {
      104. char str[32];
      106. sprintf(str, "Motion: %s", _Motion ? "ongoing" : "stopped");
      108. TEXT_SetText(hText, str);
      109. }
      111. void MainTask(void) {
      112. GUI_Init();
      114. WM_MOTION_Enable(1);
      116. WM_MULTIBUF_Enable(1);
      118. WM_SetDesktopColor(GUI_BLACK);
      120. hWinParent = WINDOW_CreateEx(0, 0, 240, 320, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_USER + 0, NULL);
      121. WINDOW_SetBkColor(hWinParent, GUI_BLACK);
      123. hWinSwipe = WM_CreateWindowAsChild(0, 0, 720, 320, hWinParent, WM_CF_SHOW, _cbWinSwipe, 0);
      125. hText = TEXT_CreateEx(0, 320, 240, 30, WM_HBKWIN, WM_CF_SHOW, TEXT_CF_HCENTER | TEXT_CF_VCENTER, GUI_ID_TEXT0, "");
      126. TEXT_SetFont(hText, GUI_FONT_20_ASCII);
      127. TEXT_SetTextColor(hText, GUI_WHITE);
      129. while (1) {
      130. _CheckMotion();
      132. GUI_Exec1();
      133. }
      134. }
      Display All
      Regards,

      Anthony

      The post was edited 2 times, last by cilmagemlu ().