{"id":3508,"date":"2017-12-13T10:18:48","date_gmt":"2017-12-13T18:18:48","guid":{"rendered":"https:\/\/visualgdb.com\/w\/?p=3508"},"modified":"2017-12-13T10:18:48","modified_gmt":"2017-12-13T18:18:48","slug":"developing-embedded-gui-using-stemwin-library","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/arm\/stemwin\/","title":{"rendered":"Developing Embedded GUI using STemWin Library"},"content":{"rendered":"

This tutorial shows how to create a basic GUI application for the STM32F429I-Discovery board using the STemWin library. We will start with a basic example shipped with the STM32 SDK, will show how to locate different demos inside it and will create a basic demo using the TreeView control to show how the message handling works.<\/p>\n

    \n
  1. Start Visual Studio and open the VisualGDB Embedded Project Wizard:\"01-prjname\"<\/a><\/li>\n
  2. Proceed with the default “Create a new MSBuild project” options:\"02-msbuild\"<\/a><\/li>\n
  3. On the next page select the ARM toolchain and choose your device. In this tutorial we will use the STM32F429-Discovery board with an on-board LCD screen, so we select the STM32F429ZI device:\"03-device\"<\/a><\/li>\n
  4. On the next page select “Show STM32 CubeMX Samples”. Search for “STemWin” to locate STemWin samples for your board:\"04-sample\"<\/a><\/li>\n
  5. Connect your board to the computer via USB so that VisualGDB automatically detects it and select your ST-Link in the “Debug using” field:\"05-debug\"<\/a><\/li>\n
  6. Press “Finish” to create the project. VisualGDB will generate a project based on the STemWin sample. Build it start :\"06-main\"<\/a><\/li>\n
  7. Calibrate the on-board screen and wait for the radial menu demo to appear:\"radial\"<\/a><\/li>\n
  8. Press the “break all” button in Visual Studio and use the Call Stack window to navigate to the _Main()<\/strong> function. See how it is looping through the tests defined in _GUIDemoConfig.apFunc:\"07-call\"<\/a><\/li>\n
  9. You can use the Code Map powered by VisualGDB Clang IntelliSense to quickly locate the function responsible for filling the apFunc array: GUIDemo_Config()<\/strong>. The function reads the list of tests from the global _apfTest<\/strong> variable and writes them to apFunc:\"08-map\"<\/a><\/li>\n
  10. Double-click on _apfTest<\/strong> and go to its definition. Hover the mouse over it to see the list of tests actually included in the build:\"09-funcs\"<\/a><\/li>\n
  11. One of the tests shown in the list is GUIDEMO_Treeview. Locate the corresponding file in Solution Explorer and open it:\"10-treeview\"<\/a><\/li>\n
  12. The demo creates a basic tree view using the TREEVIEW_CreateIndirect()<\/strong> function and fills it with sample items. We will now create a new demo based on it to show the basic usage of STemWin. Create a new file called Experiments.cpp<\/strong> and add the following code there:\n
    #include \"main.h\"\r\n#include \"rtc.h\"\r\n#include \"GUIDEMO.h\"\r\n#include \"WM.h\"\r\nstatic bool s_bDone;\r\n\r\nextern \"C\" void RunExperiments()\r\n{\r\n\u00a0\u00a0\u00a0 WM_HWIN\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hWin, hClient, hTree;\r\n\u00a0\u00a0\u00a0 int\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xSize, ySize, xSizeClient, ySizeClient;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 GUI_WIDGET_CREATE_INFO controlList[] = {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { FRAMEWIN_CreateIndirect, \"Explorer\", 0, 0, 0, 0, 0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { TREEVIEW_CreateIndirect, NULL, GUI_ID_TREEVIEW0, 0, 0, 0, 0 },\r\n\u00a0\u00a0\u00a0 };\r\n\r\n\u00a0\u00a0\u00a0 xSize\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = LCD_GetXSize();\r\n\u00a0\u00a0\u00a0 ySize\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = LCD_GetYSize();\r\n\u00a0\u00a0\u00a0 controlList[0].xSize = xSize \/ 2;\r\n\u00a0\u00a0\u00a0 controlList[0].ySize = ySize;\r\n\u00a0\u00a0\u00a0 controlList[1].xSize = xSize \/ 2;\r\n\u00a0\u00a0\u00a0 controlList[1].ySize = ySize;\r\n\u00a0\u00a0\u00a0 hWin\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = GUI_CreateDialogBox(controlList, GUI_COUNTOF(controlList), DialogCallback, WM_HBKWIN, 0, 0);\r\n\u00a0\u00a0\u00a0 hClient\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = WM_GetClientWindow(hWin);\r\n\u00a0\u00a0\u00a0 xSizeClient\u00a0\u00a0\u00a0\u00a0\u00a0 = WM_GetWindowSizeX(hClient);\r\n\u00a0\u00a0\u00a0 ySizeClient\u00a0\u00a0\u00a0\u00a0\u00a0 = WM_GetWindowSizeY(hClient);\r\n\u00a0\u00a0\u00a0 hTree\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = WM_GetDialogItem(hWin, GUI_ID_TREEVIEW0);\r\n\u00a0\u00a0\u00a0 WM_SetSize(hTree, xSizeClient, ySizeClient);\r\n\r\n\u00a0\u00a0\u00a0 while (!s_bDone)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GUI_Exec();\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 WM_DeleteWindow(hWin);\r\n}<\/pre>\n
    The code creates a basic window in the left half of the screen that will consist of a basic window frame and a tree view. STemWin uses messages and functions similar to the native Win32 API functions for managing windows. Once your application creates all the GUI elements, it should call GUI_Exec() in a loop.<\/li>\n
  13. Add a DialogCallback function similar to the Win32 dialog function that will handle the WM_INIT_DIALOG and WM_NOTIFY_PARENT messages:\n
    static void DialogCallback(WM_MESSAGE * pMsg) \r\n{\r\n\u00a0\u00a0\u00a0 WM_HWIN hItem, hDlg;\r\n\u00a0\u00a0\u00a0 hDlg = pMsg->hWin;\r\n\u00a0\u00a0\u00a0 switch (pMsg->MsgId)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0 case WM_INIT_DIALOG:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hItem = WM_GetDialogItem(hDlg, GUI_ID_TREEVIEW0);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 PopulateTreeView(hItem);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;\r\n\u00a0\u00a0\u00a0 case WM_NOTIFY_PARENT:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 switch (pMsg->Data.v)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 case WM_NOTIFICATION_CLICKED:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (WM_GetId(pMsg->hWinSrc) == GUI_ID_TREEVIEW0)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 WM_HWIN hItem = TREEVIEW_GetSel(pMsg->hWinSrc);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 unsigned char tmp[32];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 TREEVIEW_ITEM_GetText(hItem, tmp, sizeof(tmp));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 printf(\"%s\\n\", tmp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n<\/li>\n
  14. Finally add a PopulateTreeView() function that will create 2 levels of items in the tree view: 3 books with 5 pages in each book:\n
    static void PopulateTreeView(WM_HWIN hTree)\r\n{\r\n\u00a0\u00a0\u00a0 TREEVIEW_ITEM_Handle hBook, hPage;\r\n\u00a0\u00a0\u00a0 char tmp[128];\r\n\u00a0\u00a0\u00a0 for (int i = 0; i < 3; i++)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sprintf(tmp, \"Book %d\", i);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (!i)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hBook = TREEVIEW_InsertItem(hTree, TREEVIEW_ITEM_TYPE_NODE, 0, 0, tmp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hBook = TREEVIEW_InsertItem(hTree, TREEVIEW_ITEM_TYPE_NODE, hBook, TREEVIEW_INSERT_BELOW, tmp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for (int j = 0; j < 5; j++)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sprintf(tmp, \"Page %d\", j);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (!j)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hPage = TREEVIEW_InsertItem(hTree, TREEVIEW_ITEM_TYPE_LEAF, hBook, TREEVIEW_INSERT_FIRST_CHILD, tmp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 hPage = TREEVIEW_InsertItem(hTree, TREEVIEW_ITEM_TYPE_LEAF, hPage, TREEVIEW_INSERT_BELOW, tmp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 TREEVIEW_SetAutoScrollH(hTree, 1);\r\n\u00a0\u00a0\u00a0 TREEVIEW_SetAutoScrollV(hTree, 1);\r\n\u00a0\u00a0\u00a0 TREEVIEW_ITEM_Expand(TREEVIEW_GetItem(hTree, 0, TREEVIEW_GET_FIRST));\r\n\u00a0\u00a0\u00a0 WM_SetFocus(hTree);\r\n}<\/pre>\n<\/li>\n
  15. In order to see the output from printf() <\/strong>you need to enable semihosting (mechanism for sending text from the program to the debugger). You can do this via the first page of VisualGDB Project Properties:\"11-semihost\"<\/a><\/li>\n
  16. Now you can build the program and start it by pressing F5. Check the screen on your board to see the tree view:\"treeview\"<\/a><\/li>\n
  17. Try tapping on some of the elements and observe the ARM Semihosting Console window in Visual Studio: \"12-run\"<\/a><\/li>\n
  18. Normally each semihosting call (i.e. a call to printf()<\/strong>) requires the debugger to handle an interrupt, read memory and resume the program, resulting in noticeable delays. You can reduce them by enabling the fast semihosting framework via VisualGDB Project Properties:\"13-fast\"<\/a>Fast semihosting will use a ring buffer inside the device memory to send the data to the debugger non-stop, greatly improving the performance.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to create a basic GUI application for the STM32F429I-Discovery board using the STemWin library. We will<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[90],"tags":[154,99,155,61],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/3508"}],"collection":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/comments?post=3508"}],"version-history":[{"count":1,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/3508\/revisions"}],"predecessor-version":[{"id":3525,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/3508\/revisions\/3525"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=3508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=3508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=3508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}