ESP32 OLED Drawing Pad V1

Project

ESP32

ESP32 OLED Drawing Pad V1

Wiring Schematic

ARDUINO / C++

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <U8g2lib.h>
#include <Wire.h>

// ── Access Point config ───────────────────────────────────
#define AP_SSID  "OLED-Draw"   // WiFi name shown on your phone
#define AP_PASS  ""            // Empty = open network, no password
#define AP_IP    "192.168.4.1" // Fixed IP — always the same
// ──────────────────────────────────────────────────────────

// SH1106 128×64, I2C hardware pins (SDA=21, SCL=22)
U8G2_SH1106_128X64_NONAME_F_HW_I2C display(U8G2_R0, U8X8_PIN_NONE);

AsyncWebServer server(80);
AsyncWebSocket  ws("/ws");

// 1-bit pixel buffer: 128 × 64 = 8192 bits = 1024 bytes
#define OLED_W 128
#define OLED_H  64
uint8_t pixelBuf[OLED_W * OLED_H / 8];

// ── Pixel buffer helpers ──────────────────────────────────

inline void setPixel(int x, int y) {
  if ((unsigned)x >= OLED_W || (unsigned)y >= OLED_H) return;
  int i = y * OLED_W + x;
  pixelBuf[i >> 3] |= (1 << (i & 7));
}

inline void clearPixel(int x, int y) {
  if ((unsigned)x >= OLED_W || (unsigned)y >= OLED_H) return;
  int i = y * OLED_W + x;
  pixelBuf[i >> 3] &= ~(1 << (i & 7));
}

inline bool getPixel(int x, int y) {
  if ((unsigned)x >= OLED_W || (unsigned)y >= OLED_H) return false;
  int i = y * OLED_W + x;
  return (pixelBuf[i >> 3] >> (i & 7)) & 1;
}

// Bresenham thick line into pixel buffer
void drawThickLine(int x0, int y0, int x1, int y1, int r) {
  int dx = abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
  int dy = -abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
  int err = dx + dy;
  while (true) {
    for (int ty = -r; ty <= r; ty++)
      for (int tx = -r; tx <= r; tx++)
        if (tx*tx + ty*ty <= r*r) setPixel(x0+tx, y0+ty);
    if (x0 == x1 && y0 == y1) break;
    int e2 = 2 * err;
    if (e2 >= dy) { err += dy; x0 += sx; }
    if (e2 <= dx) { err += dx; y0 += sy; }
  }
}

void flushToOLED() {
  display.clearBuffer();
  for (int y = 0; y < OLED_H; y++)
    for (int x = 0; x < OLED_W; x++)
      if (getPixel(x, y)) display.drawPixel(x, y);
  display.sendBuffer();
}

// ── WebSocket event handler ───────────────────────────────

void onWsEvent(AsyncWebSocket*, AsyncWebSocketClient*,
               AwsEventType type, void* arg, uint8_t* data, size_t len) {
  if (type != WS_EVT_DATA) return;
  AwsFrameInfo* info = (AwsFrameInfo*)arg;
  if (info->opcode != WS_TEXT) return;

String msg((char*)data, len);

if (msg == "CLEAR") {
    memset(pixelBuf, 0, sizeof(pixelBuf));
    flushToOLED();
    return;
  }

// "LINE x0 y0 x1 y1 radius"  (canvas coords 320×160)
  if (msg.startsWith("L")) {
    int x0, y0, x1, y1, r;
    sscanf(msg.c_str(), "L %d %d %d %d %d", &x0, &y0, &x1, &y1, &r);
    // Map canvas (320×160) → OLED (128×64)
    x0 = x0 * OLED_W / 320;  y0 = y0 * OLED_H / 160;
    x1 = x1 * OLED_W / 320;  y1 = y1 * OLED_H / 160;
    r  = max(1, r * OLED_W / 320 / 2);
    drawThickLine(x0, y0, x1, y1, r);
    flushToOLED();
  }
}

// ── Embedded web page ─────────────────────────────────────

const char PAGE[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>LifeTronix OLED Console</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
--c:#00d9ff;
--bg:#04070d;
--card:#09131d;
--line:#143247;
--txt:#dffcff;
}
body{
font-family:'Share Tech Mono',monospace;
background:var(--bg);
color:var(--txt);
display:flex;
flex-direction:column;
align-items:center;
padding:20px;
overflow-x:hidden;
}
body:before{
content:"";
position:fixed;inset:0;
background-image:
linear-gradient(rgba(0,217,255,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,217,255,.08) 1px,transparent 1px);
background-size:40px 40px;
animation:grid 8s linear infinite;
pointer-events:none;
}
@keyframes grid{to{background-position:40px 40px}}
.header{
width:min(900px,100%);
padding:20px;
border:1px solid var(--line);
background:rgba(9,19,29,.85);
backdrop-filter:blur(12px);
border-radius:18px;
box-shadow:0 0 30px rgba(0,217,255,.18);
margin-bottom:18px;
text-align:center;
}
h1{letter-spacing:.25em;color:var(--c)}
.sub{opacity:.7;font-size:.8rem;margin-top:6px}
.panel{
width:min(900px,100%);
display:grid;
grid-template-columns:320px 1fr;
gap:18px;
}
.card{
background:rgba(9,19,29,.88);
border:1px solid var(--line);
border-radius:18px;
padding:14px;
box-shadow:0 0 25px rgba(0,217,255,.12);
}
.label{font-size:.7rem;color:var(--c);letter-spacing:.2em;margin-bottom:10px;text-align:center}
#preview{
width:100%;
height:auto;
image-rendering:pixelated;
background:#000;
border:2px solid #19384f;
border-radius:10px;
box-shadow:0 0 20px rgba(0,217,255,.25), inset 0 0 15px rgba(0,217,255,.15);
}
#canvas{
width:100%;
height:auto;
display:block;
background:#000;
border-radius:12px;
touch-action:none;
cursor:crosshair;
}
.controls{
width:min(900px,100%);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin-top:18px;
align-items:center;
}
.btn{
padding:10px 22px;
border-radius:12px;
background:#08131f;
border:1px solid rgba(0,217,255,.5);
color:var(--c);
font-family:inherit;
cursor:pointer;
transition:.25s;
}
.btn:hover{
background:var(--c);
color:#000;
box-shadow:0 0 20px rgba(0,217,255,.7);
transform:translateY(-2px);
}
input[type=range]{width:160px}
.status{
padding:10px 18px;
border-radius:999px;
border:1px solid var(--line);
}
.ok{color:#00ff88}
.err{color:#ff4d6d}
.footer{
margin-top:18px;
opacity:.6;
font-size:.75rem;
}
@media(max-width:760px){
.panel{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div class="header">
<h1>OLED CONTROL CONSOLE</h1>
<div class="sub">ESP32 • SH1106 • LifeTronix Engineering</div>
</div>

<div class="controls">
<label>Brush <input type="range" id="brush" min="2" max="22" value="8"></label>
<button class="btn" onclick="clearAll()">CLEAR</button>
<div id="status" class="status">CONNECTING...</div>
</div>

<div class="footer">LifeTronix • OLED Drawing Console v2</div>

let draw=false,lx=0,ly=0;
function pos(e){
 const r=C.getBoundingClientRect();
 const s=e.touches?e.touches[0]:e;
 return{
 x:Math.round((s.clientX-r.left)*C.width/r.width),
 y:Math.round((s.clientY-r.top)*C.height/r.height)
 };
}
function line(x0,y0,x1,y1,size){
 ctx.strokeStyle="#00d9ff";
 ctx.lineWidth=size;
 ctx.beginPath();
 ctx.moveTo(x0,y0);
 ctx.lineTo(x1,y1);
 ctx.stroke();

pctx.strokeStyle="#00d9ff";
 pctx.lineWidth=Math.max(1,size*128/320);
 pctx.beginPath();
 pctx.moveTo(x0*128/320,y0*64/160);
 pctx.lineTo(x1*128/320,y1*64/160);
 pctx.stroke();

send(`L ${x0} ${y0} ${x1} ${y1} ${size}`);
}
function start(e){
e.preventDefault();
draw=true;
const p=pos(e);
lx=p.x;ly=p.y;
line(lx,ly,lx,ly,+brush.value);
}
function move(e){
if(!draw)return;
e.preventDefault();
const p=pos(e);
line(lx,ly,p.x,p.y,+brush.value);
lx=p.x;ly=p.y;
}
function end(){draw=false;}
["mousedown","touchstart"].forEach(v=>C.addEventListener(v,start,{passive:false}));
["mousemove","touchmove"].forEach(v=>C.addEventListener(v,move,{passive:false}));
["mouseup","mouseleave","touchend"].forEach(v=>C.addEventListener(v,end));
function clearAll(){
ctx.fillStyle="#000";ctx.fillRect(0,0,C.width,C.height);
pctx.fillStyle="#000";pctx.fillRect(0,0,128,64);
send("CLEAR");
}
</script>
</body>
</html>
)HTML";

// ── setup() ──────────────────────────────────────────────

void setup() {
  Serial.begin(115200);

// ── Start OLED
  display.begin();
  display.clearBuffer();
  display.setFont(u8g2_font_6x10_tf);
  display.drawStr(14, 24, "Starting AP...");
  display.sendBuffer();

// ── Start Access Point (no password = open network)
  WiFi.softAP(AP_SSID, strlen(AP_PASS) ? AP_PASS : nullptr);
  delay(500);

Serial.println("=== AP Ready ===");
  Serial.println("SSID : " AP_SSID);
  Serial.println("URL  : http://" AP_IP);

// ── Show connection info on OLED
  display.clearBuffer();
  display.setFont(u8g2_font_5x8_tf);
  display.drawStr(0,  10, "WiFi: OLED-Draw");
  display.drawStr(0,  22, "No password needed");
  display.drawStr(0,  38, "Open browser:");
  display.drawStr(0,  52, "192.168.4.1");
  display.sendBuffer();
  delay(4000);

// ── Ready screen
  memset(pixelBuf, 0, sizeof(pixelBuf));
  display.clearBuffer();
  display.setFont(u8g2_font_6x10_tf);
  display.drawStr(10, 28, "OLED-Draw");
  display.drawStr(6,  44, "Draw on phone!");
  display.sendBuffer();

// ── WebSocket
  ws.onEvent(onWsEvent);
  server.addHandler(&ws);

// ── Route: serve the page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest* req) {
    req->send_P(200, "text/html", PAGE);
  });

server.begin();
}

void loop() {
  ws.cleanupClients();
}

ESP32 OLED Drawing Pad V1

Project Overview

The ESP32 OLED Drawing Pad teaches advanced techniques for creating interactive graphics applications with wireless control using I2C display communication and WiFi connectivity.

This project creates a real-time drawing application on a 128×64 SSD1306 OLED display controlled remotely through a web browser interface on any connected device. Users can draw freehand artwork, control cursor movement, adjust brush size, and clear the display using an intuitive web-based drawing canvas interface.

When you run the project, the ESP32 creates an access point that broadcasts a WiFi network accessible from mobile phones or computers. Users connect to the web interface and draw on a 320×160 canvas which maps to the 128×64 OLED display showing real-time pixel rendering.

Key Features: I2C communication between ESP32 and OLED displays, WiFi access point hosting embedded web server, WebSocket protocol for real-time command transmission, pixel buffer management with efficient bit-packing storage, Bresenham line drawing algorithm with adjustable brush thickness, responsive web interface with live preview display, 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 Access Point Configuration

The setup function configures the SSD1306 OLED display with I2C communication at GPIO pins 21 and 22 for reliable data transmission. The ESP32 creates a WiFi access point allowing nearby devices to connect wirelessly without requiring existing network infrastructure or router.

Setup Pixel Buffer System and Drawing Functions

The project uses a 1024-byte bit-packed pixel buffer storing 128×64 pixels efficiently using one bit per pixel for monochrome display. Helper functions setPixel, clearPixel, and getPixel manage individual pixel states while drawThickLine implements the Bresenham algorithm for smooth line rendering with variable brush thickness.

Implement WebSocket Communication Protocol Handler

The WebSocket server receives drawing commands transmitted from the web interface in real-time through persistent bidirectional communication. The onWsEvent function parses drawing commands including line coordinates and brush radius then maps canvas coordinates from 320×160 to 128×64 display dimensions.

Process and Map Drawing Commands from Web Interface

Commands received from the web browser are parsed and scaled to match OLED display resolution automatically adjusting coordinates and brush size. The drawing coordinates from the larger web canvas are mapped proportionally to the smaller OLED display ensuring accurate representation of user drawings.

Render Graphics and Update OLED Display Buffer

The flushToOLED function reads the pixel buffer and renders each active pixel to the OLED display using the Adafruit GFX library drawing functions. The embedded web page includes HTML canvas for user drawing with JavaScript handling touch and mouse input events sending commands via WebSocket.

Expected Output

After uploading your code to the ESP32, connect the USB cable and power on the development board.

The OLED display shows connection information directing users to access the web interface at the access point IP address. Users connect their phone or computer to the WiFi network named OLED-Draw and open the browser to access the interactive drawing interface.

The web interface displays a live preview of the OLED content alongside a larger drawing canvas allowing real-time visualization of artwork. Users can draw freehand, adjust brush size with a slider, and clear the display with a button while seeing updates on the OLED instantly.

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 Access Point Does Not Appear or Web Interface Not Accessible :- Verify the WiFi setup code is executing by checking serial monitor output for connection messages. Check that your device is searching for and attempting to connect to the OLED-Draw network name. Try restarting the ESP32 board by pressing the reset button and waiting for the startup sequence to complete.

Drawing Commands Received But Not Rendering on OLED Display :- Confirm both Adafruit GFX and SSD1306 libraries are correctly installed in your Arduino IDE folder. Verify the flushToOLED function is being called to update the display after each drawing operation. Check I2C communication stability and confirm the pixel buffer is being populated with drawing data.

Web Canvas Draws But OLED Display Shows Corrupted or Partial Graphics :- Ensure all jumper wire connections are secure with no loose contacts interrupting data transmission between devices. Verify the coordinate mapping calculation correctly scales from 320×160 canvas to 128×64 display resolution. Check that the pixel buffer is large enough to store all data without overflow or memory corruption.

What You Learned

By finishing this project, you understand how to create interactive applications with WiFi connectivity and real-time data transmission using WebSocket communication protocols. You have learned techniques for managing pixel buffers, implementing line drawing algorithms, and mapping coordinate systems between different resolutions on microcontroller systems.

You can apply web server technologies to create remote control interfaces for embedded devices and sensors. You have experienced how to combine hardware display control with wireless network capabilities to create sophisticated interactive applications on resource-constrained microcontroller platforms.

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 Drawing Pad V1

Instagram

Youtube

Wiring Schematic

ESP32 OLED Drawing Pad V1

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 Access Point Configuration

Setup Pixel Buffer System and Drawing Functions

Implement WebSocket Communication Protocol Handler

Process and Map Drawing Commands from Web Interface

Render Graphics and Update OLED Display Buffer

Expected Output

Operational Troubleshooting

What You Learned

WHAT'S NEXT?

Ready to Build More?