
Reading time: 3 mins
Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)
A simple paint app to test a dual-axis joystick module with ESP32 and an IPS LCD Screen. TFT_eSPI library is used as a graphic library. The following components are required.
- LCD
- Dual-axis Joystick module
- ESP32 module
- CH340 or a similar USB to UART
The app features 6 colors that are switchable by pressing the joystick switch. The cursor moves to follow the joystick movement and paints with the selected color.

The components are connected as shown in the above circuit diagram. You can connect them as you wish too. The switches on the right are not used in the initial breadboard project yet, but I added them to order a custom PCB so that it supports those four buttons that may be useful for future projects. I have added an early PCB design and 3d view at the end of this post if you are interested to have a look.
Arduino Sketch
#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();
bool pressed = false;
int t = 0;
uint8_t color = 0;
uint32_t colors[6] = { TFT_BLACK, TFT_GREEN, TFT_BROWN, TFT_YELLOW, TFT_SKYBLUE, TFT_WHITE };
void setup() {
pinMode(6, INPUT_PULLUP);
tft.init();
tft.setRotation(0);
tft.fillScreen(TFT_WHITE);
}
void loop() {
int xValue = 0;
int yValue = 0;
int bValue = 0;
xValue = analogRead(15);
yValue = analogRead(4);
bValue = digitalRead(6);
if (!bValue) {
if (!pressed && millis() - t > 1000) {
color++;
if (color > 5) color = 0;
pressed = true;
t = millis();
} else {
pressed = false;
}
}
// Screen limits
int w = tft.width();
int h = tft.height();
int x = map(xValue, 0, 4095, 0, w);
int y = map(yValue, 0, 4095, (h - w) / 2, w + (h - w) / 2);
tft.fillSmoothCircle(x, y, 8, colors[color], TFT_BLACK);
delay(50);
}
Video DEMO
Here is a demo of me drawing a tree with the sky in the background.
Custom designed PCB
I haven not finalized on PCB design yet but the following is an early design that includes a joystick, display, ESP32, and 4 buttons.
