Built-in project · Cheap Yellow Display (ESP32-2432S028R)

CYD touch paint

Draw on the Cheap Yellow Display with a finger: the XPT2046 touch film on its own SPI pins, a palette and a clear button. The whole build, a Cheap Yellow Display, runs here in your browser on the firmware below; open it in the editor to change the wiring or the code and run it again.

Teaching? Assign it to your class in one click.

Intermediate Runs in your browser. Free, and no account needed.

The parts retail for about $14. On Mokxi they're free.

CYD touch paint · Cheap Yellow Display (ESP32-2432S028R)live0.000 s 0.00x
Click to open it in the editor
The circuit itself, running here on the simulator. Press what can be pressed; click anything else to open it in the editor.

The code

The firmware exactly as the editor opens it. Change a line there and press Run: it compiles in the browser.

sketch.ino · Cheap Yellow Display (ESP32-2432S028R)
// Touch paint: draw on the Cheap Yellow Display with a finger.
//
// The screen is TFT_eSPI with the board's setup. The touch controller, an
// XPT2046, is not on the screen's bus: the board wires it to GPIO 25 (CLK),
// 32 (DIN), 39 (DO) and 33 (CS), so it gets an SPI bus of its own, the way
// the CYD tutorials do it. Press the screen while the sketch runs to draw.

#include <SPI.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>

#define XPT2046_IRQ 36
#define XPT2046_MOSI 32
#define XPT2046_MISO 39
#define XPT2046_CLK 25
#define XPT2046_CS 33

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);
TFT_eSPI tft = TFT_eSPI();

const int kWidth = 320;
const int kHeight = 240;
const uint16_t kInks[4] = {TFT_YELLOW, TFT_CYAN, TFT_MAGENTA, TFT_GREEN};
int ink = 0;

void drawPalette()
{
    for (int i = 0; i < 4; i++) {
        tft.fillRect(i * 40, 0, 40, 30, kInks[i]);
    }
    tft.fillRect(160, 0, 160, 30, TFT_DARKGREY);
    tft.setTextColor(TFT_WHITE, TFT_DARKGREY);
    tft.drawCentreString("clear", 240, 8, 2);
}

void setup()
{
    Serial.begin(115200);
    touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
    touchscreen.begin(touchscreenSPI);
    touchscreen.setRotation(1);

    tft.init();
    tft.setRotation(1);
    tft.fillScreen(TFT_BLACK);
    drawPalette();
}

void loop()
{
    if (!touchscreen.tirqTouched() || !touchscreen.touched()) return;
    TS_Point p = touchscreen.getPoint();
    // The raw readings run about 200 to 3700 across the glass.
    int x = map(p.x, 200, 3700, 0, kWidth - 1);
    int y = map(p.y, 240, 3800, 0, kHeight - 1);
    x = constrain(x, 0, kWidth - 1);
    y = constrain(y, 0, kHeight - 1);
    if (y < 30) {
        if (x < 160) {
            ink = x / 40;
        } else {
            tft.fillRect(0, 30, kWidth, kHeight - 30, TFT_BLACK);
        }
        delay(150);
        return;
    }
    tft.fillCircle(x, y, 3, kInks[ink]);
}

Parts list

1 part, plus the jumper wires. They retail for about $14; on Mokxi they're free.

Change it and keep it

Open it in the editor, change the circuit or the code, and keep your version in a free account.