Library 11- Button library for ILI9341 LCD and STMPE811 touch controller on STM32F429 Discovery board
Now we have both, LCD controller and touch controller configured and we can use this. For this purpose i made a library for buttons. This library can draw buttons on LCD and check if touch has been pressed on any enabled button.
Library
Features
- Set X and Y location of button
- Set button’s width and height
- By default 10 buttons are supported
- Use labels
- Custom background image or color
- Border around button
- Selectable font
- Disable/Enable button
- Selectable color for label, background and border
Dependencies
- CMSIS
- STM32F4xx
- STM32F4xx RCC
- STM32F4xx GPIO
- STM32F4xx I2C
- STM32F4xx SPI
- TM
- defines.h
- TM DELAY
- TMÂ ILI9341
- TM STMPE811
- TM FONTS
- defines.h
If you have more than 10Â buttons, you can make a define in your project’s defines.h file
1 2 |
//This will enable 20 buttons #define TM_ILI9341_BUTTON_MAX_BUTTONS 20 |
Main structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/** * Button options struct * * Parameters: * - uint16_t x: X coordinate of top left button corner * - uint16_t y: Y coordinate of top left button corner * - uint16_t width: button width in pixels * - uint16_t height: button height in pixels * - uint16_t background: 16bit background color * - uint16_t borderColor: 16bit border color * - uint16_t flags: Button flags * - char *label: pointer to first character of label * - TM_FontDef_t *font: pointer to font structure * - uint16_t color: label color * - uint16_t *image: pointer to location at first color for pixel */ typedef struct { uint16_t x; uint16_t y; uint16_t width; uint16_t height; uint16_t background; uint16_t borderColor; uint16_t flags; char *label; TM_FontDef_t *font; uint16_t color; uint16_t *image; } TM_ILI9341_Button_t; |
Add buttons
To add button to library, you have to create an instance of TM_ILI9341_Button_t structure first
1 2 |
//TM_ILI9341_Button_t instance TM_ILI9341_Button_t button; |
Then fill instance with settings, like this
1 2 3 4 5 6 7 8 9 10 11 |
//Button 1, default configuration //Red with black border and black font 11x18 button.x = 10; button.y = 30; button.width = 219; button.height = 50; button.background = ILI9341_COLOR_RED; button.borderColor = ILI9341_COLOR_BLACK; button.label = "Button 1"; button.color = ILI9341_COLOR_BLACK; button.font = &TM_Font_11x18; |
and add button to library with
1 2 |
//Add button, button id is returned or -1 if there is more buttons than defined button1 = TM_ILI9341_Button_Add(&button); |
Button operations
Draw button
1 2 3 4 5 |
//Draw all buttons TM_ILI9341_Button_DrawAll(); //Draw only button1 TM_ILI9341_Button_Draw(button1); |
Enable/disable button
- By default, every button is enabled
- If button is disabled, than is ignoring by touch
1 2 3 4 |
//If you want to disable button1 TM_ILI9341_Button_Disable(button1); //Enable button1 back TM_ILI9341_Button_Enable(button1); |
Delete button
1 2 3 4 |
//Delete all buttons void TM_ILI9341_Button_DeleteAll(); //Delete only button1 void TM_ILI9341_Button_Delete(button1); |
Recognize pressed button
To recognize pressed button, first you have to get touch coordinates. Then, use
1 2 3 |
//Get pressed button //returns -1 if no pressed button, otherwise pressed button id buttonPressed = TM_ILI9341_Button_Touch(&touchData); |
and pass touch data as parameter. If any button is pressed, then his id is returned, otherwise -1 is returned.
Example
Example has 3 buttons
- Button 1 is basic with red background and black border with “Button 1” label
- Button 2 has disabled label with custom background with black border
- Button 3 has “Button 3” label with custom background and without border
On board are two leds. If red led is turned on, then buttons 2 and 3 are enabled, otherwise are disabled.
Buttons operations:
- With button 1 you toggle enable/disable of buttons 2 and 3
- If button 2 is enabled, then it’s used for turning green led on
- if button 3 is enabled, then it’s used for turning green led off
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/** * Keil project for Button example * * @author Tilen Majerle * @email tilen@majerle.eu * @website http://stm32f4-discovery.net * @ide Keil uVision 5 */ #include "stm32f4xx.h" #include "defines.h" #include "tm_stm32f4_ili9341.h" #include "tm_stm32f4_stmpe811.h" #include "tm_stm32f4_ili9341_button.h" #include "tm_stm32f4_disco.h" #include "button_back.h" #include <stdio.h> int main(void) { //TM_STMPE811_TouchData instance TM_STMPE811_TouchData touchData; //TM_ILI9341_Button_t instance TM_ILI9341_Button_t button; int8_t buttonPressed, button1, button2, button3; char str[30]; //Initialize system SystemInit(); //Initialize onboard leds TM_DISCO_LedInit(); //Initialize LCD TM_ILI9341_Init(); //Fill LCD with gray color TM_ILI9341_Fill(ILI9341_COLOR_GRAY); //Select orientation TM_ILI9341_Rotate(TM_ILI9341_Orientation_Portrait_2); //Select touch screen orientation touchData.orientation = TM_STMPE811_Orientation_Portrait_2; //Initialize Touch TM_STMPE811_Init(); //Button 1, default configuration //Red with black border and black font 11x18 button.x = 10; button.y = 30; button.width = 219; button.height = 50; button.background = ILI9341_COLOR_RED; button.borderColor = ILI9341_COLOR_BLACK; button.label = "Button 1"; button.color = ILI9341_COLOR_BLACK; button.font = &TM_Font_11x18; //Add button button1 = TM_ILI9341_Button_Add(&button); //Button with custom background and without label button.x = 10; button.y = 260; button.width = 105; button.height = 50; button.background = ILI9341_COLOR_GREEN; button.borderColor = ILI9341_COLOR_BLACK; button.label = "Button 2"; //Use background image and no label button.flags = TM_BUTTON_FLAG_NOLABEL | TM_BUTTON_FLAG_IMAGE; button.color = ILI9341_COLOR_BLACK; button.font = &TM_Font_11x18; button.image = buttonBackground; //Variable stored in //Add button button2 = TM_ILI9341_Button_Add(&button); //Button with custom background and with label and without border and 7x10 fontsize button.x = 125; button.y = 260; button.background = ILI9341_COLOR_BLUE2; button.borderColor = ILI9341_COLOR_BLACK; button.label = "Button 3"; button.color = ILI9341_COLOR_BLACK; button.font = &TM_Font_7x10; button.flags = TM_BUTTON_FLAG_IMAGE | TM_BUTTON_FLAG_NOBORDER; //Use background image, without border //Add button button3 = TM_ILI9341_Button_Add(&button); if (!TM_DISCO_LedIsOn(LED_RED)) { //If led res is turned off, disable buttons 2 and 3 TM_ILI9341_Button_Disable(button2); TM_ILI9341_Button_Disable(button3); TM_ILI9341_Puts(25, 220, "Buttons disabled!", &TM_Font_11x18, ILI9341_COLOR_RED, ILI9341_COLOR_GRAY); } //Draw buttons TM_ILI9341_Button_DrawAll(); //Draw some strings TM_ILI9341_Puts(45, 245, "LED on LED off", &TM_Font_7x10, ILI9341_COLOR_BLACK, ILI9341_COLOR_GRAY); TM_ILI9341_Puts(10, 100, "Bottom buttons work\nonly if red led is turned on.\nYou can toggle red\nled with Button 1.", &TM_Font_7x10, ILI9341_COLOR_BLACK, ILI9341_COLOR_GRAY); while (1) { if (TM_STMPE811_ReadTouch(&touchData) == TM_STMPE811_State_Pressed) { buttonPressed = TM_ILI9341_Button_Touch(&touchData); if (buttonPressed >= 0) { //Any button pressed sprintf(str, "Pressed: Button %d", (buttonPressed + 1)); } else { sprintf(str, "Press the button "); } if (buttonPressed == button1) { //Red button 1 is pressed, toggle led TM_DISCO_LedToggle(LED_RED); if (TM_DISCO_LedIsOn(LED_RED)) { //If led is turned on, enable button 2 and button 3 TM_ILI9341_Button_Enable(button2); TM_ILI9341_Button_Enable(button3); TM_ILI9341_Puts(25, 220, "Buttons enabled! ", &TM_Font_11x18, ILI9341_COLOR_GREEN, ILI9341_COLOR_GRAY); } else { //otherwise disable both TM_ILI9341_Button_Disable(button2); TM_ILI9341_Button_Disable(button3); TM_ILI9341_Puts(25, 220, "Buttons disabled!", &TM_Font_11x18, ILI9341_COLOR_RED, ILI9341_COLOR_GRAY); } } else if (buttonPressed == button2) { //If button 2 is pressed, turn green led on TM_DISCO_LedOn(LED_GREEN); } else if (buttonPressed == button3) { //if button 3 is pressed, turn green led off TM_DISCO_LedOff(LED_GREEN); } } TM_ILI9341_Puts(10, 5, str, &TM_Font_11x18, ILI9341_COLOR_GREEN, ILI9341_COLOR_GRAY); } } |
Project available on Github, download library below.
BUTTON library for ILI9341 LCD and STMPE811 touch screen controller
Recent comments