esp32 arduino tft display supplier

The Makerfabs 3.5 inch TFT Touch is great but the refresh rate is always a problem, some customers feedback they want a higher speed display. The ESP32-S2 Parallel TFT has a much higher refresh rate, but the disadvantage is the lack of Bluetooth...

That is why this latest ESP32-S3 Parallel TFT, compares to the S2 version, not only more SRAM and ROM, the Bluetooth 5.0 make it fit for applications such as local monitoring/controlling.

This 3.5" 320x480 TFT LCD driver is ILI9488, it uses 16bits parallel line for communication with ESP32-S3, the main clock could be up to 20MHz, making the display smooth enough for video displays. With this display, you can freely to create more IoT display projects, check the demo project in the video:

Same as the S2 version, there 2 onboard Mabee pins(A I2c and an IOs) with the breakout connectors, to connect the ESP32-S2 display with sensors/ actuators, suitable for IoT applications.

esp32 arduino tft display supplier

This module is the 3.2” version of the ESP32 touchscreen display, based on ESP32-WROVER, with a built-in 2M pixel OV2640 camera. The LCD is 320x240 TFT, with driver is ILI9341, it uses SPI for communication with ESP32, the SPI main clock could be up to 60M~80M, make the display smooth enough for videos; and the camera OV2640 with pixel 2M, with this camera, you can make applications such as remote photography, face recognition…

While the camera not used, you can freely use all these pins with the breakout connectors, to connect the ESP32 display with sensors/ actuators, suitable for IoT applications.

esp32 arduino tft display supplier

This board works fine with TFT_eSPI when the ST7789 driver is selected. The pin settings are different and the RGB colour order is reversed compared to other boards so I have added an option to the TFT_eSPI library to set the colour order.

I have set the SPI rate to 80MHz and the ST7789 TFT seems to work perfectly at that clock speed, the higher clock frequency boosts the drawing speed (e.g. clear screen in 18ms as opposed to 33.3ms).

The Grove I2C connector is not soldered in, this is clearly because the pins would poke through the board and damage the back of the display. It would be possible to "surface mount" the connector by bending the pins but I think the solder flowing into the PTH may melt the reflective backlight diffuser screen at the back of the display. One way around this would be to fill the holes with epoxy first.

esp32 arduino tft display supplier

I have included the specsheet for this chip in case it is removed, the original source location is https://docs.ai-thinker.com/en/12k_development_board_esp32-s2

Alright, now that we have figured out if the touchscreen you have is touch-capable, time to set up the esp32-s2-12k and the ILI9341 display.esp32-s2-12k PinsTFT Pins3V3VCC

Working with TFT_eSPI, you need to edit User_Setup.h it is located in your Arduino folder libraries folder. To find this location check out https://support.arduino.cc/hc/en-us/articles/4411202655634-Find-Arduino-IDE-files-and-folders which has more info on the exact location for your machine.

#defineILI9341_DRIVER#defineTFT_CS10#defineTFT_MOSI11#defineTFT_SCLK12#defineTFT_MISO13#defineTFT_DC14#defineTFT_RST15#defineTOUCH_CS34#defineLOAD_GLCD#defineLOAD_FONT2#defineLOAD_FONT4#defineLOAD_FONT6#defineLOAD_FONT7#defineLOAD_FONT8#defineLOAD_GFXFF#defineSMOOTH_FONT#defineUSE_HSPI_PORT#defineSPI_FREQUENCY40000000#defineSPI_TOUCH_FREQUENCY2500000

Once we have the User_Setup.h configured we can use one of the existing sketches. One of the most intricate examples is the keypad example (https://github.com/Bodmer/TFT_eSPI/blob/master/examples/320%20x%20240/Keypad_240x320/Keypad_240x320.ino). It shows off having a single library handle both touch and rendering provides a lot of out of the box wins.

/*The TFT_eSPI library incorporates an Adafruit_GFX compatiblebutton handling class, this sketch is based on the Arduin-o-phoneexample.This example diplays a keypad where numbers can be entered andsend to the Serial Monitor window.The sketch has been tested on the ESP8266 (which supports SPIFFS)The minimum screen size is 320 x 240 as that is the keypad size.*/// The SPIFFS (FLASH filing system) is used to hold touch screen// calibration data#include"FS.h"#include#include// Hardware-specific libraryTFT_eSPI tft=TFT_eSPI();// Invoke custom library// This is the file name used to store the calibration data// You can change this to create new calibration files.// The SPIFFS file name must start with "/".#defineCALIBRATION_FILE"/TouchCalData1"// Set REPEAT_CAL to true instead of false to run calibration// again, otherwise it will only be done once.// Repeat calibration if you change the screen rotation.#defineREPEAT_CALfalse// Keypad start position, key sizes and spacing#defineKEY_X40// Centre of key#defineKEY_Y96#defineKEY_W62// Width and height#defineKEY_H30#defineKEY_SPACING_X18// X and Y gap#defineKEY_SPACING_Y20#defineKEY_TEXTSIZE1// Font size multiplier// Using two fonts since numbers are nice when bold#defineLABEL1_FONT&FreeSansOblique12pt7b// Key label font 1#defineLABEL2_FONT&FreeSansBold12pt7b// Key label font 2// Numeric display box size and location#defineDISP_X1#defineDISP_Y10#defineDISP_W238#defineDISP_H50#defineDISP_TSIZE3#defineDISP_TCOLORTFT_CYAN// Number length, buffer for storing it and character index#defineNUM_LEN12charnumberBuffer[NUM_LEN+1]="";uint8_tnumberIndex=0;// We have a status line for messages#defineSTATUS_X120// Centred on this#defineSTATUS_Y65// Create 15 keys for the keypadcharkeyLabel[15][5]={"New","Del","Send","1","2","3","4","5","6","7","8","9",".","0","#"};uint16_tkeyColor[15]={TFT_RED,TFT_DARKGREY,TFT_DARKGREEN,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE,TFT_BLUE};// Invoke the TFT_eSPI button class and create all the button objectsTFT_eSPI_Button key[15];//------------------------------------------------------------------------------------------voidsetup(){// Use serial portSerial.begin(9600);// Initialise the TFT screentft.init();// Set the rotation before we calibratetft.setRotation(0);// Calibrate the touch screen and retrieve the scaling factorstouch_calibrate();// Clear the screentft.fillScreen(TFT_BLACK);// Draw keypad backgroundtft.fillRect(0,0,240,320,TFT_DARKGREY);// Draw number display area and frametft.fillRect(DISP_X,DISP_Y,DISP_W,DISP_H,TFT_BLACK);tft.drawRect(DISP_X,DISP_Y,DISP_W,DISP_H,TFT_WHITE);// Draw keypaddrawKeypad();}//------------------------------------------------------------------------------------------voidloop(void){uint16_tt_x=0,t_y=0;// To store the touch coordinates// Pressed will be set true is there is a valid touch on the screenboolpressed=tft.getTouch(&t_x,&t_y);// / Check if any key coordinate boxes contain the touch coordinatesfor(uint8_tb=0;b<15;b++){if(pressed&&key[b].contains(t_x,t_y)){key[b].press(true);// tell the button it is pressed}else{key[b].press(false);// tell the button it is NOT pressed}}// Check if any key has changed statefor(uint8_tb=0;b<15;b++){if(b<3)tft.setFreeFont(LABEL1_FONT);elsetft.setFreeFont(LABEL2_FONT);if(key[b].justReleased())key[b].drawButton();// draw normalif(key[b].justPressed()){key[b].drawButton(true);// draw invert// if a numberpad button, append the relevant ## to the numberBufferif(b>=3){if(numberIndex0){numberIndex--;numberBuffer[numberIndex]=0;//" ";}status("");// Clear the old status}if(b==2){status("Sent value to serial port");Serial.println(numberBuffer);}// we dont really check that the text field makes sense// just try to callif(b==0){status("Value cleared");numberIndex=0;// Reset index to 0numberBuffer[numberIndex]=0;// Place null in buffer}// Update the number display fieldtft.setTextDatum(TL_DATUM);// Use top left corner as text coord datumtft.setFreeFont(&FreeSans18pt7b);// Choose a nicefont that fits boxtft.setTextColor(DISP_TCOLOR);// Set the font colour// Draw the string, the value returned is the width in pixelsintxwidth=tft.drawString(numberBuffer,DISP_X+4,DISP_Y+12);// Now cover up the rest of the line up by drawing a black rectangle. No flicker this way// but it will not work with italic or oblique fonts due to character overlap.tft.fillRect(DISP_X+4+xwidth,DISP_Y+1,DISP_W-xwidth-5,DISP_H-2,TFT_BLACK);delay(10);// UI debouncing}}}//------------------------------------------------------------------------------------------voiddrawKeypad(){// Draw the keysfor(uint8_trow=0;row<5;row++){for(uint8_tcol=0;col<3;col++){uint8_tb=col+row*3;if(b<3)tft.setFreeFont(LABEL1_FONT);elsetft.setFreeFont(LABEL2_FONT);key[b].initButton(&tft,KEY_X+col*(KEY_W+KEY_SPACING_X),KEY_Y+row*(KEY_H+KEY_SPACING_Y),// x, y, w, h, outline, fill, textKEY_W,KEY_H,TFT_WHITE,keyColor[b],TFT_WHITE,keyLabel[b],KEY_TEXTSIZE);key[b].drawButton();}}}//------------------------------------------------------------------------------------------voidtouch_calibrate(){uint16_tcalData[5];uint8_tcalDataOK=0;// check file system existsif(!SPIFFS.begin()){Serial.println("Formating file system");SPIFFS.format();SPIFFS.begin();}// check if calibration file exists and size is correctif(SPIFFS.exists(CALIBRATION_FILE)){if(REPEAT_CAL){// Delete if we want to re-calibrateSPIFFS.remove(CALIBRATION_FILE);}else{File f=SPIFFS.open(CALIBRATION_FILE,"r");if(f){if(f.readBytes((char*)calData,14)==14)calDataOK=1;f.close();}}}if(calDataOK&&!REPEAT_CAL){// calibration data validtft.setTouch(calData);}else{// data not valid so recalibratetft.fillScreen(TFT_BLACK);tft.setCursor(20,0);tft.setTextFont(2);tft.setTextSize(1);tft.setTextColor(TFT_WHITE,TFT_BLACK);tft.println("Touch corners as indicated");tft.setTextFont(1);tft.println();if(REPEAT_CAL){tft.setTextColor(TFT_RED,TFT_BLACK);tft.println("Set REPEAT_CAL to false to stop this running again!");}tft.calibrateTouch(calData,TFT_MAGENTA,TFT_BLACK,15);tft.setTextColor(TFT_GREEN,TFT_BLACK);tft.println("Calibration complete!");// store dataFile f=SPIFFS.open(CALIBRATION_FILE,"w");if(f){f.write((constunsignedchar*)calData,14);f.close();}}}//------------------------------------------------------------------------------------------// Print something in the mini status barvoidstatus(constchar*msg){tft.setTextPadding(240);//tft.setCursor(STATUS_X, STATUS_Y);tft.setTextColor(TFT_WHITE,TFT_DARKGREY);tft.setTextFont(0);tft.setTextDatum(TC_DATUM);tft.setTextSize(1);tft.drawString(msg,STATUS_X,STATUS_Y);}//------------------------------------------------------------------------------------------

One of the benefits of using TFT_eSPI is having the ability to calibrate your display and having that as a part of your workflow. This does require SPIFFS to store this information, so having something like the esp32 family is a well-suited library for most of your needs.

#include"Adafruit_GFX.h"#include"Adafruit_ILI9341.h"#include#include#defineSCLK_PIN12#defineMISO_PIN13#defineMOSI_PIN11#defineTOUCH_CS34#defineTFT_DC14#defineTFT_CS10#defineTFT_RST15XPT2046_Touchscreents(TOUCH_CS);Adafruit_ILI9341 tft=Adafruit_ILI9341(TFT_CS,TFT_DC,TFT_RST);voidsetup(){Serial.begin(38400);SPI.begin(SCLK_PIN,MISO_PIN,MOSI_PIN);SPI.setFrequency(40000000);tft.begin(4000000);tft.setRotation(1);tft.fillScreen(ILI9341_BLACK);ts.begin();ts.setRotation(1);while(!Serial&&(millis()<=1000));}boolean wastouched=true;voidloop(){boolean istouched=ts.touched();if(istouched){TS_Point p=ts.getPoint();if(!wastouched){tft.fillScreen(ILI9341_BLACK);tft.setTextColor(ILI9341_YELLOW);tft.setCursor(60,80);tft.print("Touch");}tft.fillRect(100,150,140,60,ILI9341_BLACK);tft.setTextColor(ILI9341_GREEN);tft.setCursor(100,150);tft.print("X = ");tft.print(p.x);tft.setCursor(100,180);tft.print("Y = ");tft.print(p.y);Serial.print(", x = ");Serial.print(p.x);Serial.print(", y = ");Serial.println(p.y);}else{if(wastouched){tft.fillScreen(ILI9341_BLACK);tft.setTextColor(ILI9341_RED);tft.setCursor(120,50);tft.print("No");tft.setCursor(80,120);tft.print("Touch");}Serial.println("no touch");}wastouched=istouched;delay(100);}

Picking the right library for your needs is important. There are considerations to be made between XPT2046_Touchscreen and TFT_eSPI such as compatibility and required space to run on your device. I have yet to use either in any real-life application other than some of the two examples provided, when I do I will put my findings here.

esp32 arduino tft display supplier

Connecting a colour screen over SPI to ESP32 based MCU’s is a straight forward process and is extremely similar to using one with the Arduino or ESP8266. Firstly though you need to ensure that you have set up your ESP32 to work with the Arduino IDE, see this articleif you have not already done so and then come  back here.

Due to the planned game being more advanced than Space Invaders I needed a processor with more memory and speed than the Arduino could offer. Enter the ESP32 was the obvious choice, it has more power than the ESP8266 (not that that was an issue) and more importantly it has loads of input pins, cool! Wifi is also available but will not be required for this project unless we implemented a World High Score Table perhaps! I’m using a NodeMCU development board which brings out all the ESP32’s pins to headers and enables the board to be plugged into a 5V USB power source. It also adds a USB controller chip to handle program transfers with the host computer.

Connections – very careful now!Looking at the back we can see +3v3 (this screen can be powered from 5v as well), several grounds (Gnd) and SCL/SDA. This shouldmean that this device is an I²C device and can be easily connected to our Arduino. Err… Think  again. This screen gave me no end of problems as connecting it to the  I²C connections and running any demo I could find on the internet did not get anything on the display. I went back and looked at the listing for this device, it stated SPI Bus not I²C ! So it began to become apparent that this screen had an SPI interface. SCL and SDA would logically seem to be SPI clock and data (MOSI) respectively but other pin labels didn’t match normal SPI protocol labels. Reading several resources for other different screens and looking at the source code for the examples in the Arduino IDE Examples library lead me to find the correct connections to power and use this screen.

Power is self explanatory. LED adds a little extra brightness to the screen but it does still work if not connected. I’ve seen resistors added in series here and even variable ones to vary the brightness but I’ve ran it directly connected on this screen with no issues and wouldn’t want it dimmer as its not ultra bright. Connect it to the 5V pin of the NodeMCU to get 5V from the USB connection, this will make the screen nice and bright and clear. SCL is the SPI clock and goes to the NodeMCU’s hardware SPI pin (pin GPIO18). SDA is actually the SPI MOSI connection and goes to the NodeMCU’s SPI MOSI pin (GPIO23). RS is a Regsiter Select pin for ST7735 driver chips, this maps to a variable called TFT_DC in the Adafruitcode (explained later) that I was using for testing. This controls whether we are sending a command to the ST7735 chip or actual data. I think that Adafruit call it DC meaning Data Control, but I’m not sure. On some boards it may even be referred to as A0. For our purposed we connect it to GPIO2. RST is the screen reset and and is connected to pin GPIO4. These last two can connect to any NodeMCU pins that are not used for other functions. CS is Chip Select (usually referred to as Slave Select in the SPI protocol) and again can connect to any pin but I use the official SPI SS for the ESP32, GPIO5. If this is pulled low then this device can receive or send data on the SPI bus. If only one device in your design you could pull this low permanently and not use GPIO5.

Driver CodeWhen presented with this board (as mentioned above) it was difficult to work out where wires should go and what driver software I needed for the display. Looking at the solitary chip on the board and Googling revealed nothing. So I went back to the sellers listing and found buried deep in a sub-page description the phrase “7735 drive”. Googling this revealed Adafruit had written some drivers for this chip for a board they had created (which also had an SD card slot on it as well). It was not surprising I didn’t find the 7735 chip on the board as this chip is designed to by embedded onto the back of the screen. It was being armed with this source code and other web pages dealing with different chip sets but similar displays that I managed to work out (with a little trial and error) the connections talked about previously above. Initially I used the Adafruit driver code but gave issues with this screen (as it was designed to work with the one they sell). Look below.

Also when the screen orientation is rotated (in software) so you can write to the display any way up then more things either correct themselves or mess up again.

Fixing the ST7735 driver to work with this screen.So we have some work to do still to make this work well with our display. The driver we have used to get this up and running was not designed for this display exactly. Things appear clipped and off screen. There were other issues with colour (i.e. red was blue and blue was red amongst other colour problems) and other graphics routines were not correct. I won’t bore you with all the tiny re-writes I did but just supply you with the new driver for this particular display. This driver is very specific, i.e. only targeting this display and resolution but it may well work with many other similar displays. At the time of writing I have no other displays to test with but will be expanding the driver code as and when required. The full driver code is available from the link below, add it into your Arduino in the usual manner (Adding libraries to the Arduino IDE.)

Load up the example code that should now be available at “Files->Examples->XTronical ST7735 Library->GraphicsTestESP32”. This is basically the Adafruit example with just some tiny changes (It goes through all the tests for each rotational position of the screen) so that it uses the new driver file and slightly altered initialisation routine.

esp32 arduino tft display supplier

//#define ILI9488_DRIVER // WARNING: Do not connect ILI9488 display SDO to MISO if other devices share the SPI bus (TFT SDO does NOT tristate when CS is high)

esp32 arduino tft display supplier

We have used Liquid Crystal Displays in the DroneBot Workshop many times before, but the one we are working with today has a bit of a twist – it’s a circle!  Perfect for creating electronic gauges and special effects.

LCD, or Liquid Crystal Displays, are great choices for many applications. They aren’t that power-hungry, they are available in monochrome or full-color models, and they are available in all shapes and sizes.

Today we will see how to use this display with both an Arduino and an ESP32. We will also use a pair of them to make some rather spooky animated eyeballs!

There are also some additional connections to the display. One of them, DC, sets the display into either Data or Command mode. Another, BL, is a control for the display’s backlight.

The above illustration shows the connections to the display.  The Waveshare display can be used with either 3.3 or 5-volt logic, the power supply voltage should match the logic level (although you CAN use a 5-volt supply with 3.3-volt logic).

Another difference is simply with the labeling on the display. There are two pins, one labeled SDA and the other labeled SCL. At a glance, you would assume that this is an I2C device, but it isn’t, it’s SPI just like the Waveshare device.

This display can be used for the experiments we will be doing with the ESP32, as that is a 3.3-volt logic microcontroller. You would need to use a voltage level converter if you wanted to use one of these with an Arduino Uno.

The Arduino Uno is arguably the most common microcontroller on the planet, certainly for experiments it is. However, it is also quite old and compared to more modern devices its 16-MHz clock is pretty slow.

The Waveshare device comes with a cable for use with the display. Unfortunately, it only has female ends, which would be excellent for a Raspberry Pi (which is also supported) but not too handy for an Arduino Uno. I used short breadboard jumper wires to convert the ends into male ones suitable for the Arduino.

Once you have everything hooked up, you can start coding for the display. There are a few ways to do this, one of them is to grab the sample code thatWaveshare provides on their Wiki.

The Waveshare Wiki does provide some information about the display and a bit of sample code for a few common controllers. It’s a reasonable support page, unfortunately, it is the only support that Waveshare provides(I would have liked to see more examples and a tutorial, but I guess I’m spoiled by Adafruit and Sparkfun LOL).

Open the Arduino folder. Inside you’ll find quite a few folders, one for each display size that Waveshare supports. As I’m using the 1.28-inch model, I selected theLCD_1inch28folder.

Once you do that, you can open your Arduino IDE and then navigate to that folder. Inside the folder, there is a sketch file namedLCD_1inch28.inowhich you will want to open.

When you open the sketch, you’ll be greeted by an error message in your Arduino IDE. The error is that two of the files included in the sketch contain unrecognized characters. The IDE offers the suggestion of fixing these with the “Fix Encoder & Reload” function (in the Tools menu), but that won’t work.

You can see from the code that after loading some libraries we initialize the display, set its backlight level (you can use PWM on the BL pin to set the level), and paint a new image. We then proceed to draw lines and strings onto the display.

After uploading the code, you will see the display show a fake “clock”. It’s a static display, but it does illustrate how you can use this with the Waveshare code.

This library is an extension of the Adafruit GFX library, which itself is one of the most popular display libraries around. Because of this, there isextensive documentation for this libraryavailable from Adafruit.  This makes the library an excellent choice for those who want to write their own applications.

As with the Waveshare sample, this file just prints shapes and text to the display. It is quite an easy sketch to understand, especially with the Adafruit documentation.

The sketch finishes by printing some bizarre text on the display. The text is an excerpt from The Hitchhiker’s Guide to the Galaxy by Douglas Adams, and it’s a sample of Vogon poetry, which is considered to be the third-worst in the Galaxy!

Here is the hookup for the ESP32 and the GC9A01 display.  As with most ESP32 hookup diagrams, it is important to use the correct GPIO numbers instead of physical pins. The diagram shows the WROVER, so if you are using a different module you’ll need to consult its documentation to ensure that you hook it up properly.

The TFT_eSPI library is ideal for this, and several other, displays. You can install it through your Arduino IDE Library Manager, just search for “TFT_eSPI”.

There is a lot of demo code included with the library. Some of it is intended for other display sizes, but there are a few that you can use with your circular display.

To test out the display, you can use theColour_Test sketch, found inside the Test and Diagnostic menu item inside the library samples.  While this sketch was not made for this display, it is a good way to confirm that you have everything hooked up and configured properly.

A great demo code sample is theAnimated_dialsketch, which is found inside theSpritesmenu item.  This demonstration code will produce a “dial” indicator on the display, along with some simulated “data” (really just a random number generator).

In order to run this sketch, you’ll need to install another library. Install theTjpeg_DecoderLibrary from Library Manager. Once you do, the sketch will compile, and you can upload it to your ESP32.

One of my favorite sketches is the Animated Eyes sketch, which displays a pair of very convincing eyeballs that move. Although it will work on a single display, it is more effective if you use two.

The first thing we need to do is to hook up a second display. To do this, you connect every wire in parallel with the first display, except for the CS (chip select) line.

The Animated Eyes sketch can be found within the sample files for the TFT_eSPI library, under the “generic” folder.  Assuming that you have wired up the second GC9A01 display, you’ll want to use theAnimated_Eyes_2sketch.

The GC9A01 LCD module is a 1.28-inch round display that is useful for instrumentation and other similar projects. Today we will learn how to use this display with an Arduino Uno and an ESP32.