ESP32 OLED Drawing Pad V2

Project

ESP32

ESP32 OLED AI Drawing Pad V2

Wiring Schematic

ARDUINO / C++

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// Wi-Fi Configuration
const char* ssid = "yourhotspotssidd";
const char* password = "your password";

// I2C OLED Configuration
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

#define OLED_SDA 21
#define OLED_SCL 22
#define OLED_RESET -1
#define OLED_ADDRESS 0x3C

Adafruit_SSD1306 display(
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
  &Wire,
  OLED_RESET
);

WebServer server(80);

// Custom Functions for drawing shapes on OLED

void drawOLEDHeart() {

display.fillCircle(54, 25, 12, SSD1306_WHITE);

display.fillCircle(74, 25, 12, SSD1306_WHITE);

display.fillTriangle(42, 29, 86, 29, 64, 55, SSD1306_WHITE);

}

void drawOLEDSquare() {

display.fillRect(44, 12, 40, 40, SSD1306_WHITE);

}

void drawOLEDRectangle() {

display.fillRect(34, 17, 60, 30, SSD1306_WHITE);

}

void drawOLEDTriangle() {

display.fillTriangle(64, 10, 39, 52, 89, 52, SSD1306_WHITE);

}

void drawOLEDStar() {

// Standard 5-point star simplified geometry for 128x64

display.fillTriangle(64, 5, 54, 38, 74, 38, SSD1306_WHITE);

display.fillTriangle(39, 23, 89, 23, 64, 45, SSD1306_WHITE);

display.fillTriangle(50, 32, 34, 57, 64, 38, SSD1306_WHITE);

display.fillTriangle(78, 32, 94, 57, 64, 38, SSD1306_WHITE);

}

// 3. Web UI (HTML + CSS + Optimized JS)

const char HTML_INDEX[] PROGMEM = R"=====(

<!DOCTYPE html>

<head>

<title>AI OLED Drawing Pad</title>

<style>

:root {

--bg-color: #0f172a;

--card-color: #1e293b;

--accent-color: #38bdf8;

--pad-bg: #ffffff;

}

body {

font-family: 'Segoe UI', system-ui, sans-serif;

background-color: var(--bg-color);

color: #ffffff;

margin: 0;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

padding: 10px;

}

.container {

background-color: var(--card-color);

padding: 25px;

border-radius: 20px;

box-shadow: 0 10px 30px rgba(0,0,0,0.4);

text-align: center;

border: 1px solid #334155;

max-width: 450px;

width: 100%;

}

h1 {

margin-top: 0;

color: var(--accent-color);

font-size: 22px;

text-transform: uppercase;

letter-spacing: 1.5px;

}

.status {

font-size: 16px;

margin-bottom: 15px;

color: #4ade80;

font-weight: bold;

min-height: 22px;

}

.pad-container {

position: relative;

background: var(--pad-bg);

border-radius: 12px;

overflow: hidden;

box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);

margin: 0 auto 20px auto;

width: 320px;

height: 320px;

border: 3px solid #475569;

}

canvas {

display: block;

cursor: crosshair;

touch-action: none;

}

.control-panel {

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 15px;

}

button {

padding: 12px 24px;

font-size: 15px;

font-weight: 600;

border: none;

border-radius: 8px;

cursor: pointer;

transition: all 0.2s ease;

background-color: #ef4444;

color: white;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

button:hover {

background-color: #dc2626;

transform: translateY(-1px);

}

/* Static OLED Monitor Style Preview Box */

.oled-preview {

width: 96px;

height: 48px;

background-color: #000000;

border: 2px solid #334155;

border-radius: 6px;

display: flex;

align-items: center;

justify-content: center;

font-family: monospace;

font-weight: bold;

font-size: 11px;

color: #00dcff;

text-shadow: 0 0 4px #00dcff;

box-shadow: inset 0 0 10px rgba(0, 220, 255, 0.2);

overflow: hidden;

text-transform: uppercase;

}

</style>

</head>

<body>

<h1>AI OLED Drawing Pad</h1>

<div class="status" id="status">Ready to Draw!</div>

</div>

<button onclick="clearCanvas()">Erase Board</button>

</div>

const canvas = document.getElementById('paintCanvas');

const ctx = canvas.getContext('2d');

const statusText = document.getElementById('status');

const oledDisplay = document.getElementById('oledDisplay');

let isDrawing = false;

let trace = [];

let ink = [];

let aiTimeout;

// Supported Characters, Shapes, and Target Words

const validOutputs = [

"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",

"0","1","2","3","4","5","6","7","8","9",

"HEART","SQUARE","RECTANGLE","TRIANGLE","STAR",

"LIKE","FOLLOW","SHARE"

];

ctx.lineWidth = 14;

ctx.lineCap = 'round';

ctx.lineJoin = 'round';

ctx.strokeStyle = '#000000';

function getPos(e) {

const rect = canvas.getBoundingClientRect();

const clientX = e.touches ? e.touches[0].clientX : e.clientX;

const clientY = e.touches ? e.touches[0].clientY : e.clientY;

return { x: clientX - rect.left, y: clientY - rect.top };

}

function startDrawing(e) {

isDrawing = true;

clearTimeout(aiTimeout);

const p = getPos(e);

ctx.beginPath();

ctx.moveTo(p.x, p.y);

trace = [[], [], []];

addPoint(p.x, p.y);

}

function drawing(e) {

if (!isDrawing) return;

e.preventDefault();

const p = getPos(e);

ctx.lineTo(p.x, p.y);

ctx.stroke();

addPoint(p.x, p.y);

}

function stopDrawing() {

if (isDrawing) {

isDrawing = false;

ctx.closePath();

ink.push(trace);

aiTimeout = setTimeout(askGoogleAI, 500);

}

function addPoint(x, y) {

trace[0].push(Math.round(x));

trace[1].push(Math.round(y));

trace[2].push(Date.now());

}

canvas.addEventListener('mousedown', startDrawing);

canvas.addEventListener('mousemove', drawing);

window.addEventListener('mouseup', stopDrawing);

canvas.addEventListener('touchstart', startDrawing);

canvas.addEventListener('touchmove', drawing);

window.addEventListener('touchend', stopDrawing);

function askGoogleAI() {

if (ink.length === 0) return;

statusText.innerText = "Thinking...";

statusText.style.color = "#38bdf8";

const requestData = {

"options": "enable_pre_space",

"requests": [{

"writing_guide": { "width": 320, "height": 320 },

"ink": ink,

"language": "en"

}]

};

fetch('https://www.google.com/inputtools/request?ime=handwriting&app=mobilesearch&cs=1&oe=UTF-8', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(requestData)

})

.then(response => response.json())

.then(data => {

if (data && data[0] === "SUCCESS") {

const candidates = data[1][0][1];

if (candidates && candidates.length > 0) {

let recognizedToken = "";

// Match full strings first (Words or Shapes)

for(let candidate of candidates) {

let clean = candidate.toUpperCase().trim();

if(validOutputs.includes(clean)) {

recognizedToken = clean;

break;

}

if(recognizedToken) {

statusText.innerText = `Detected: "${recognizedToken}"`;
                        statusText.style.color = "#4ade80";

sendToOLED(recognizedToken);

} else {

statusText.innerText = "Try Again!";

statusText.style.color = "#f87171";

}

})

.catch(err => {

statusText.innerText = "Network Error!";

statusText.style.color = "#f87171";

});

}

function sendToOLED(token) {

// Update Static Web Preview Screen

let displaySymbol = token;

if(token === "HEART") displaySymbol = "❤️";

if(token === "SQUARE") displaySymbol = "🔲";

if(token === "RECTANGLE") displaySymbol = "█";

if(token === "TRIANGLE") displaySymbol = "▲";

if(token === "STAR") displaySymbol = "⭐";

oledDisplay.innerText = displaySymbol;

oledDisplay.style.fontSize = token.length > 4 ? "12px" : "18px";

// Send payload command to ESP32

fetch(`/set?data=${encodeURIComponent(token)}`, {method: 'POST'});

}

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ink = [];

oledDisplay.innerText = "OLED CLR";

oledDisplay.style.fontSize = "11px";

statusText.innerText = "Ready to Draw!";

statusText.style.color = "#94a3b8";

fetch('/clear', {method: 'POST'});

}

</script>

</body>

</html>

)=====";

// HTTP API Routes for OLED Handling

void handleRoot() {

server.send_P(200, "text/html", HTML_INDEX);

}

void handleClear() {

display.clearDisplay();

display.display();

server.send(200, "text/plain", "Cleared");

}

void handleSet() {

if (server.hasArg("data")) {

String inputData = server.arg("data");

display.clearDisplay();

// Check if Input is a Custom Shape

if (inputData == "HEART") {

drawOLEDHeart();

} else if (inputData == "SQUARE") {

drawOLEDSquare();

} else if (inputData == "RECTANGLE") {

drawOLEDRectangle();

} else if (inputData == "TRIANGLE") {

drawOLEDTriangle();

} else if (inputData == "STAR") {

drawOLEDStar();

}

// If it's a Text Word (LIKE, FOLLOW, SHARE)

else if (inputData == "LIKE" || inputData == "FOLLOW" || inputData == "SHARE") {

display.setTextSize(2); // String ke liye balanced size text

display.setTextColor(SSD1306_WHITE);

// Text Auto centering math

int16_t x1, y1;

uint16_t w, h;

display.getTextBounds(inputData, 0, 0, &x1, &y1, &w, &h);

display.setCursor((SCREEN_WIDTH - w) / 2, (SCREEN_HEIGHT - h) / 2);

display.println(inputData);

}

// Standard Character/Number (A-Z, 0-9)

else {

display.setTextSize(5); // Big text size for single character

display.setTextColor(SSD1306_WHITE);

int16_t x1, y1;

uint16_t w, h;

display.getTextBounds(inputData, 0, 0, &x1, &y1, &w, &h);

display.setCursor((SCREEN_WIDTH - w) / 2, (SCREEN_HEIGHT - h) / 2);

display.println(inputData);

}

display.display(); // Push drawings to screen

}

server.send(200, "text/plain", "OK");

}

void setup() {

Serial.begin(115200);

// Initialize I2C OLED Display

Wire.begin(OLED_SDA, OLED_SCL);

if (!display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for (;;);
}

display.clearDisplay();

display.display();

// Connect to Wi-Fi

WiFi.begin(ssid, password);

Serial.print("Connecting to: ");
    Serial.println(ssid);

int attempts = 0;

while (WiFi.status() != WL_CONNECTED && attempts < 30) {
    delay(500);
    Serial.print(".");
    attempts++;
    }

Serial.println();

if (WiFi.status() == WL_CONNECTED) {
    Serial.println("WiFi Connected!");
    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());
} else {
    Serial.println("WiFi Connection Failed!");
    Serial.print("WiFi Status: ");
    Serial.println(WiFi.status());
}

Serial.println("\nConnected!");

Serial.print("Open this IP in your browser: ");

Serial.println(WiFi.localIP());

// Setup HTTP Endpoints

server.on("/", HTTP_GET, handleRoot);

server.on("/clear", HTTP_POST, handleClear);

server.on("/set", HTTP_POST, handleSet);

server.begin();

}

void loop() {

server.handleClient();

}

ESP32 OLED AI Drawing Pad V2

Project Overview

The ESP32 OLED Drawing Pad V2 teaches advanced techniques for creating AI-powered interactive applications using handwriting recognition and cloud-based machine learning services integrated with microcontroller platforms.

This project creates an intelligent drawing application on a 128×64 SSD1306 OLED display with web browser control and automatic handwriting recognition capability. The system recognizes handwritten letters, numbers, geometric shapes, and words then displays the results on the OLED with appropriate graphics and formatting.

When you run the project, the ESP32 creates a WiFi network hosting a web interface where users draw on an interactive canvas. The drawing is sent to Google Handwriting Recognition API which analyzes the stroke patterns and returns candidate matches that are validated and displayed on the OLED display.

Key Features: I2C communication between ESP32 and OLED displays, WiFi web server with embedded HTML interface, handwriting recognition integration with cloud services, shape detection and rendering with custom graphics, word recognition for social media phrases, real-time OLED display updates, responsive canvas with touch and mouse support, lightweight code optimized for microcontroller platforms.

Components Required

To build this project, collect these specific items from your kit and ensure each component is in good working condition.

ESP32 Development Board x 1, SSD1306 OLED Display (128×64) x 1, Breadboard x 1, Jumper Wires x 4, USB Cable x 1.

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Connect the ESP32 GND ground pin directly to the negative rail of your breadboard to establish a shared ground connection for your entire circuit and all connected electronic components throughout the system.

Step 2: Place and Position OLED Display Module

Position the SSD1306 OLED display module carefully near the top edge of your breadboard for convenient access and proper alignment with all jumper wire connections during the assembly process to ensure success.

Step 3: Connect VCC Power Pin to Supply

Connect the OLED VCC power pin directly to the ESP32 3.3V output pin to provide the correct voltage level and adequate power supply for the small OLED display module operation and functionality.

Step 4: Connect Ground Pin for Return Path

Connect the OLED GND ground pin to the breadboard negative rail to complete the power circuit and establish the electrical return path for all current flowing through connected components on the breadboard.

Step 5: Connect SDA Data Pin for I2C

Connect the OLED SDA serial data pin to ESP32 GPIO pin 21 to enable I2C protocol serial data transmission between the ESP32 microcontroller and the OLED display device communication successfully.

Step 6: Connect SCL Clock Pin for Timing

Connect the OLED SCL serial clock pin to ESP32 GPIO pin 22 to provide I2C timing synchronization that coordinates precise data transmission between all connected I2C devices on the bus system.

Step 7: Verify All Connections Before Upload

Double-check all four display pins for correct connections and secure jumper wire placement before uploading any code to your ESP32 microcontroller board to prevent connectivity problems during operation and testing.

Important: The SSD1306 OLED display uses the I2C protocol, a two-wire communication standard where the SDA pin transmits data and the SCL pin provides essential timing synchronization for reliable data transfer.

Software Requirements

Before uploading code to your ESP32, install the following software components, libraries, and drivers on your development system.

Arduino IDE : Download and install the latest version from the official Arduino website for code development, editing, and uploading to your microcontroller board.

ESP32 Board Package : Add the ESP32 board package to Arduino IDE by accessing Boards Manager and searching for ESP32 with proper version selection.

Adafruit GFX Library : Install this library using Arduino IDE Library Manager to access graphics drawing functions and text rendering capabilities for display output.

Adafruit SSD1306 Library : Install this library for complete SSD1306 OLED display control, initialization, and I2C communication protocol implementation.

CH340 USB Driver : Download and install the CH340 USB driver for your specific operating system to enable ESP32 board serial communication with your computer.

Verify Installation : Open Arduino IDE, select your ESP32 board from Tools menu, and confirm the COM port shows your connected microcontroller device.

How the Project Code Works

Initialize Display and WiFi Connectivity for Web Server

The setup function configures the SSD1306 OLED display with I2C communication while simultaneously establishing WiFi connection to user-specified network. The ESP32 then initializes the WebServer listening on port 80 for incoming HTTP requests from connected browser clients.

Implement Web Interface with Drawing Canvas and Controls

The embedded HTML page includes a 320×320 pixel canvas element where users draw using mouse or touchscreen input. The JavaScript code captures canvas drawing strokes tracking coordinates and timestamps creating an ink array that represents the handwritten input.

Send Drawing Data to Google Handwriting Recognition API

After completing each stroke with a configurable timeout delay, the client sends the captured ink data to Google Handwriting Recognition endpoint. The API analyzes the stroke pattern and returns candidate recognition matches ranked by confidence score for evaluation.

Validate Recognition Results Against Supported Token List

The client receives recognition candidates from Google API and validates each match against a predefined list of supported outputs. Valid outputs include uppercase letters A-Z, digits 0-9, shape names, and social media phrases ensuring only intended results display.

Render Recognized Output with Conditional OLED Formatting

The ESP32 routes recognized tokens to appropriate rendering functions based on type including shape drawing for geometric patterns and text display. Text size and positioning are automatically adjusted based on content length ensuring centered display of all recognized results.

Expected Output

After uploading your code to the ESP32, connect the USB cable and open the Serial Monitor at 115200 baud rate.

The OLED display remains black initially then shows connection information when the device joins the specified WiFi network. Users connect to the network and open a browser to the IP address displayed in Serial Monitor which loads an interactive drawing interface.

The web canvas shows a white drawing area where users draw shapes and characters which are automatically recognized and displayed on the OLED. Letters and numbers display large and centered while shape names show custom graphics and social media words display as centered text.

Operational Troubleshooting

OLED Display Remains Blank or Unresponsive to Code :- Verify all four display pins connect to correct ESP32 GPIO pins as specified in the circuit diagram. Check VCC and GND connections for proper power supply with adequate current. Confirm the USB cable provides sufficient power and verify the I2C address matches your OLED model.

WiFi Does Not Connect or Web Interface Remains Inaccessible :- Verify the WiFi network name and password in the code match your actual wireless network credentials. Check that your ESP32 is within range of the WiFi router with adequate signal strength. Restart the ESP32 board using the reset button and monitor Serial output for connection status messages.

Handwriting Recognition Fails or Returns No Valid Results :- Ensure the ESP32 has active internet connectivity to reach the Google Handwriting Recognition API endpoint. Verify drawn strokes are clear and distinct with good contact on the canvas. Check that recognition results are included in the valid outputs list or expand the list to include additional characters.

Drawing Updates Do Not Appear on OLED Display After Recognition :- Confirm both Adafruit GFX and SSD1306 libraries are correctly installed in your Arduino IDE folder. Verify the HTTP POST request reaches the ESP32 server by checking for acknowledgment responses. Check that the OLED I2C communication remains stable without data transmission errors interrupting updates.

What You Learned

By finishing this project, you understand how to integrate cloud-based artificial intelligence services with embedded microcontroller applications for advanced recognition capabilities. You have learned techniques for combining web interfaces, handwriting recognition, and real-time OLED display rendering to create sophisticated interactive applications on resource-constrained platforms.

You can apply cloud API integration to create smart embedded devices with machine learning capabilities and AI-powered decision making. You have experienced how to synchronize client-side validation with server-side rendering to create seamless user experiences on embedded systems connected to cloud services.

WHAT'S NEXT?

Ready to Build More?

Explore more Lifetronix projects, improve your skills, and turn your ideas into real working prototypes.

Project

ESP32

ESP32 OLED AI Drawing Pad V2

Instagram

Youtube

Wiring Schematic

ESP32 OLED AI Drawing Pad V2

Project Overview

Components Required

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Step 2: Place and Position OLED Display Module

Step 3: Connect VCC Power Pin to Supply

Step 4: Connect Ground Pin for Return Path

Step 5: Connect SDA Data Pin for I2C

Step 6: Connect SCL Clock Pin for Timing

Step 7: Verify All Connections Before Upload

Software Requirements

How the Project Code Works

Initialize Display and WiFi Connectivity for Web Server

Implement Web Interface with Drawing Canvas and Controls

Send Drawing Data to Google Handwriting Recognition API

Validate Recognition Results Against Supported Token List

Render Recognized Output with Conditional OLED Formatting

Expected Output

Operational Troubleshooting

What You Learned

WHAT'S NEXT?

Ready to Build More?