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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 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.