Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)

Dual-axis Joystick module with ESP32 and IPS LCD Screen (Paint App)

a year ago, April 1, 2023
Reading time: 3 mins

In this blog post, we’ll explore how to build a simple paint app using a dual-axis joystick module, ESP32, and an IPS LCD screen, powered by the TFT_eSPI graphics library. The following components are required for this project.

  1. LCD
  2. Dual-axis Joystick module
  3. ESP32-S3 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)
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 in having 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 have 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
ESP32-S3-WROOM-1, ESP32-C3-WROOM-2 and ATTinyXX4 – 3 in one development board
Next
Writing data files to flash memory of ESP32
© 2024 Anil Maharjan