Drawing Pad With ESP32

by kved144 in Circuits > Microcontrollers

52 Views, 1 Favorites, 0 Comments

Drawing Pad With ESP32

WIN_20250622_10_52_35_Pro.jpg

I made a random - colored drawing pad. It uses dots (filled 1px circles) to draw. I also made a clear button to go with it.

Why I made this project: In my opinion, I think TFTs are very beautiful - the abilities to draw, use the touchscreen and have color. So when I got this product I made a touchscreen project that has a clear button, ablitiy to write on it and picks a random of 23 colors.

Supplies

Untitled.jpg
Untitled.jpg
  1. Hosyond SPI TFT (any size - less the size, more money not wasted) - get on Amazon (ILI9341 is used)
  2. ESP32 DEV - get on Amazon
  3. Breadboard
  4. Wires(14)

The Wire Connections

We are connecting the TFT to the ESP32 using a breadboard and wires.

The connections might be hard or easy for you:

TFT ----------------------------- ESP32

  1. VCC >> 3.3V OR 5V
  2. GND >> GND
  3. CS >> pin 15 (chip select)
  4. RESET >> pin 4 (reset)
  5. DC / RS >> pin 13 (control)
  6. SDI >> pin 23 (MOSI)
  7. SCK >> pin 18 (Serial Clock)
  8. LED >> 3.3V or pin 5
  9. SD0 >> pin 19 (MISO)
  10. T_CLK >> pin 12 (touch clock)
  11. T_CS >> pin 14 (touch chip select)
  12. T_DIN >> pin 27
  13. T_DO >> pin 26
  14. T_IRQ >> pin 33 or 25

the sign '>>' are indicators to connect which pin to which pin using wires.

Coding the ESP32

LM.png
DA.png

Go to Arduino IDE app then install libraries by going to Tools > Library Manager then type in XPT2046_Touchscreen, SPI, Adafruit_GFX and Adafruit_ILI9341.

Then write this code:

#include <XPT2046_Touchscreen.h>
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

// Include all the libraries
// Make a color array for picking random colors
uint16_t colorArray[23] = {
ILI9341_RED,
ILI9341_GREEN,
ILI9341_BLUE,
ILI9341_CYAN,
ILI9341_MAGENTA,
ILI9341_YELLOW,
ILI9341_ORANGE,
ILI9341_PINK,
ILI9341_PURPLE,
ILI9341_WHITE,
ILI9341_NAVY,
// Additional colors
0x7800, // MAROON
0x7BE0, // OLIVE
0x0410, // TEAL
0xC618, // SILVER
0x07E0, // LIME (same as GREEN, but kept for logical palette)
0x07FF, // AQUA
0xF81F, // FUCHSIA (same as MAGENTA)
0xFEA0, // GOLD
0xFBEA, // CORAL
0x4810, // INDIGO
0xD343, // CHOCOLATE
0xFB08 // TOMATO
};
// --- TFT Pins ---
#define TFT_CS 15
#define TFT_DC 13
#define TFT_RST 4
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// --- Touch Pins ---
#define T_CS 14
#define T_IRQ 33
// TFT MIN and MAX raw values:
// Change these if needed
#define MINY 3900
#define MAXY 200
#define MINX 3900
#define MAXX 200
// Button Cursor and Size (clear button)
#define BTN_X 1
#define BTN_Y 1
#define BTN_W 120
#define BTN_H 50
// Custom SPI bus for touchscreen: SCK=12, MISO=26, MOSI=27
SPIClass touchSPI(VSPI); // Also try HSPI
XPT2046_Touchscreen ts(T_CS, T_IRQ); // Initalize pins

void setup() {
Serial.begin(115200); // In the setup function...

tft.begin();

tft.setRotation(1);
tft.fillScreen(ILI9341_BLACK); // background color black (also used for clearing)
// CLK, DO, DIN for touch
touchSPI.begin(12, 26, 27); // Do this
ts.begin(touchSPI); // and this if you are using touchscreen and display
ts.setRotation(1);
// Start making "CLEAR" button
tft.fillRect(BTN_X, BTN_Y, BTN_W, BTN_H, ILI9341_DARKGREY);
tft.drawRect(BTN_X, BTN_Y, BTN_W, BTN_H, ILI9341_WHITE);
tft.setTextColor(ILI9341_WHITE);
tft.setTextSize(2);
tft.setCursor(BTN_X + 25, BTN_Y + 15);
tft.print("CLEAR");

Serial.println("Touch to draw colorful dots!");
}

void loop() {
if (ts.touched()) { // If it is touched...
TS_Point p = ts.getPoint(); // This is trying to make 'p' ts.getPoint() - gets the point by adding .x or .y
// get x and y to draw dots (map from raw value) change if needed
// gets point and draws colorful dots (random colors)
int x = map(p.x, MINX, MAXX, 0, tft.width());
int y = map(p.y, MINY, MAXY, 0, tft.height());
Serial.printf("Touch at x=%d, y=%d\n", x, y);
tft.fillCircle(x, y, 1, colorArray[random(1, 23)]);
// clear if pressed
if (x > BTN_X && x < (BTN_X + BTN_W) && y > BTN_Y && y < (BTN_Y + BTN_H)) {
Serial.println("CLEAR button pressed!");
setup(); do setup again to clear
delay(300); // Debounce
}
delay(15);
}
}

Downloads

Code.cpp

Upload the Code

DA.png
DA(1).png

Press the Upload button (or press Verify then Upload), plug in your ESP32, set your board up , and see it happen on the TFT!

What If It Doesn't Work?

If your project doesn't work,

  1. Check your wiring - This also solved my problems. (Connecting the TFT is very hard.)
  2. If you have a different type then please ask for another code or wiring.
  3. If a tutorial came - I recommend you to read it.

HAPPY CODING!