.
Here I will present an ESP32-2432S028R board offering, first of all, a large 2.8" TFT colour LCD display based on the ILI9341 (display) and XPT2046 (resistive touch panel, including stylus) controllers, all for just about £50. I'll show here how to operate this display in PlatformIO by example. This section will only cover the basics, but in subsequent topics I will also try to touch on drawing speed (DMA) and LVGL.
Basic information .
You can buy the product from here in the country (generally slightly more expensive, faster shipping) or import it from China (may be slightly cheaper). I leave the choice to the reader. Regardless of where you buy, here are the contents of the kit
.
We also get a stylus and USB cable and expansion cables in the kit. Specifications from the vendor:
.
Board (my version already had USB type C):
.
Scheme:
.
.
Factory demo
The display is received with a demo program uploaded. This program is available for download on my flash dumps repository:
https://github.com/openshwprojects/FlashDumps/tree/main/IoT/ESP32
The program itself is impressive, it shows not only graphics but also interactive elements, of course scrolling works, and you can even type text in the fields (a touch keyboard appears, just like on today's smartphones):
.
Videos showing the demo. General interaction with the demo:
Text entry looks like this:
Basic display .
For presentations, I use the free PlatformIO environment which has already scrolled through some topics:
Clock on ESP12 and MAX7219 display - tutorial - part 1, ArduinoOTA, basics .
How to program a Wemos D1 (ESP8266) board in the shape of an Arduino? ArduinoOTA in PlatformIO .
Wemos D1 "Arduino" and DHT11 - a simple weather station with graphs on a web page .
I'm assuming the reader knows some of the basics of this environment, but I'll still try to show a lot.
I started by choosing a platform for the project. There wasn't this particular board what I have, so I chose another one on WROOM32:
.
Ok, we have the project ready. What do we want to do now?
Let's perhaps start with the character display. We search for the TFT_eSPI library
.
The TFT_eSPI library by Bodmer operates on platforms such as the ESP8266, ESP32, STM32 and even the RP2040. It supports displays such as GC9A01, ILI9163, ILI9225, ILI9341, ILI9342, etc.
Of course, it is available with examples:
.
However, I have not been able to get it to work immediately - I will save you the trouble.
One file needs to be modified as the pin/communication definition doesn't match. Fortunately this same module has been run by someone before, Github user RuiSantosdotme provided a ready-made one:
https://r aw.githubuse rconte nt.co m/RuiSantosdotme/ESP32-TFT-Touchscreen/main/configs/User_Setup.hSo, we find in PlatformIO (or in our project folder) and replace the indicated file. Now it's time to display something. To do this:
- we include the SPI and then the TFT_eSPI headers
- create an object of the TFT_eSPI class
- in setup we initialise it and perform sample graphics operations
Here is the code:
Code: C / C++
Log in, to see the code
First we call init to start the display. Then we can set its rotation (rotation), clear the screen with one colour and display text on it.
The result:
.
Hm, the colours are reversed, I saw that after the fact, but there is a solution for that too: function invertDisplay .
The same can be done for example with a countdown. One would just like to add another drawing of text in the loop, but is that enough?
Code: C / C++
Log in, to see the code
However, it's not perfect. I've specifically done a countdown to highlight a problem - our new text appears on top of the old text:
.
It looks like we have done something wrong. For this to work properly, we should either at least obscure the old pixels every time new text is applied, or fully refresh the entire screen. So far we've done a full refresh, so after this fix the whole display goes into a loop. Here's the result:
Code: C / C++
Log in, to see the code
I took the easier route, which is to clean the whole screen and then redraw everything. Now there are no leftover characters from previous texts on the display. However, this is not an efficient way to do it, because if we displayed more things on the screen, it would force us to redraw everything.... in part two I will show how this problem can be solved.
. Touchscreen bases
The display is already there, but that's only half the story. We still need to handle the touchscreen, i.e. the inputs from the user. The touchscreen is able to give us location and pressure.
We are looking for a library that can handle XPT2046. I have chosen XPT2046_Touchscreen.
.
.
I have added it to my project:
.
By the way, I'll put my platformio.ini here for reference, which is the file that, among other things, specifies the libraries used:
; PlatformIO Project Configuration File
;
; Build options: build flags, source filter
; Upload options: custom upload port, speed and extra flags
; Library options: dependencies, extra library storages
; Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; https://docs.platformio.org/page/projectconf.html
[env:denky32]
platform = espressif32
board = denky32
framework = arduino
lib_deps =
bodmer/TFT_eSPI@^2.5.43
paulstoffregen/XPT2046_Touchscreen@0.0.0-alpha+sha.26b691b2c8
The XPT2046_Touchscreen class object provides us with access to touch events from the screen. We can check if the screen is touched and the position and strength of the touch. First, however, we need to determine what pins the XPT2046 is on:
Code: C / C++
Log in, to see the code
We save, compile... and surprise - something doesn't work. How is this possible? An example from the web doesn't work?
.
The problem is:
src/main.cpp:79:35: error: no matching function for call to 'XPT2046_Touchscreen::begin(SPIClass&)'
A brief web search shows us the solution:
.
It was not until version 1.4 that the SPI port selection was introduced. We need to update.
You have to manually download the newer version from Github:
https://github.com/PaulStoffregen/XPT2046_Touchscreen
And probably in some form the one on PlatformIO is older.
By default, someone changed something in the library and the rest was not updated.
So, I downloaded the newer version from Github and extracted it to where PlatformIO keeps what I downloaded via Visual Code, which is to libdeps:
.
After that my code should work, but I was impatient and added something else right away....
Location and pressure
The previous code just checked for pressure, and here I've added retrieving the pressure point from an object representing the touchscreen. When there is a touch, I display the text and the location of the touch to the screen:
Code: C / C++
Log in, to see the code
Testing, here are the results:
.
Something else seems to have gone wrong. These coordinates are weird. Well, yes, they are in TFT virtual space, not in pixels.... a simple mapping needs to be done:
Code: C / C++
Log in, to see the code
Now the position displayed corresponds to the positions used when drawing on the screen.
You can also add the pressure force, this is stored in the Z-coordinate of the point already taken:
Code: C / C++
Log in, to see the code
We test:
<spanclass="notranslate">
.
It seems to work, but either I have poor touch control in my hands or it's not very authoritative.
It's more correct now, but I think it could be presented a bit nicer....
Draw! .
Now that we know the basics of the display and touchscreen we can do something more interesting. I suggest a simple drawing activity. Here the plus is that we don't have to refresh the whole screen, because we just add more pixels to it. Then we just have to draw, say, a circle in the pressure event, where the pressure is detected:
Code: C / C++
Log in, to see the code
I also removed the wait from the loop to make everything more responsive. I use fillCircle to have a filled circle. Testing:
.
Very cool fun! You could go further and add a toolbox on the side, colours and have a drawing toy.
Summary
The board is very interesting and the price is not bad either. The display, on the other hand, I rate as good, it is not in my opinion "very good" because somehow it did not always respond to my fingers the first time, even though I removed the protective film from it. However, this does not change the fact that I want to present much more on this plate....
There will be a whole series about it - in this series we will first scratch a bit "on foot", learn how to draw efficiently (do you always have to refresh the whole screen? Or will DMA help us?) make some minigames or demos, and then we will get interested in the LVGL topic - both from the code level and from the interface editor.
That's it for now - has anyone used this module? What applications do you see for ESP32 + touchscreen display? .
Cool? Ranking DIY Helpful post? Buy me a coffee.
.
