This is part four of our tutorials using STEmWin. You can check previous three parts here: part1, part2, and part3. In this tutorial I will show how we can draw buttons just by using low level STEmWin functions.
Simple button would consist of: gradient fill (for 3D look), border and text inside.
For gradient filling we use function caled GUI_DrawGradientRoundedV. This function draws rounded rectangle with vertical gradient.
For border we use function called GUI_AA_DrawRoundedRect. This function draws anti aliased rouded rectangle. Width of the border can be set with function GUI_SetPenSize.
The text inside button needs another trick. We put the text inside using function GUI_DispStringHCenterAt. But before we do this we need to set text to have transparent background. We do this using function GUI_SetTextMode(GUI_TM_TRANS).
For example to draw button of size 40 by 40 pixels, at location (100, 100) and inside text “OK” we use following code:
/* USER CODE BEGIN 2 */
BSP_SDRAM_Init(); /* Initializes the SDRAM device */
__HAL_RCC_CRC_CLK_ENABLE();
GUI_Init();
GUI_SetBkColor(GUI_LIGHTGRAY);
GUI_Clear();
GUI_SetFont(&GUI_FontComic24B_ASCII);
GUI_SetTextMode(GUI_TM_TRANS);
GUI_SetColor(GUI_BLACK);
GUI_SetPenSize(3);
GUI_DrawGradientRoundedV(100, 100, 140, 140, 10, GUI_LIGHTGRAY, GUI_GRAY);
GUI_SetPenSize(3);
GUI_AA_DrawRoundedRect(100, 100, 140, 140, 10);
GUI_DispStringHCenterAt("OK", 120, 110);
/* USER CODE END 2 */
In line with GUI_DispStringHCenterAt(“OK”, 120, 110); we set x to 120 that is middle of the button and 110 for y so that text is aproximatelly at the middle of button vertically. We need to experiment a little with y value when we switch font.
This concludes tutorial of drawing our own buttons. Next time we will add touch screen support to our program. Here is link to part 5 of tutorial.