STEmWin with Touch Screen on STM32F746G Dicovery – Part 4

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:

 

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.