Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)
4/1/2023
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.

  1. LCD
  2. Dual-axis Joystick module
  3. ESP32 module
  4. 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.

Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)
Schematics for Joystick / LCD with ESP32-S3-WROOM-1

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.

Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)
Custom designed PCB for ESP32 with joystick and an LCD display
Previous
DIY House plant manager using Moisture Sensor and ATTiny45
Next
Accelerometer / Gyroscope sensor MPU6050 Airmouse with ESP32 x BLE Mouse
© 2023 Anil Maharjan