How to Make an ESP32 WiFi OLED Drawing Pad Using Your Phone

ESP32 WiFi OLED Drawing Pad controlled using smartphone

{getToc} $title={Table of Contents}

Have you ever wanted to write something on your phone and see it appear on a small OLED display at the same time? That is exactly what we are going to make in this project.

This is a simple ESP32 WiFi OLED Drawing Pad. The ESP32 creates its own WiFi network and hosts a small web page. After connecting your phone to that WiFi network, you can open the drawing page and start writing or drawing with your finger.

Whatever you draw on the phone is sent to the ESP32 through WiFi. The ESP32 then converts the drawing into pixels and displays it on a small 128 × 64 SSD1306 OLED display.

There is no separate Bluetooth module or internet connection required for the basic setup. The ESP32 handles the WiFi communication and the OLED communication by itself.

The original project and code were created by Technical Tushar. This article documents the project and explains how the different parts work together.

Technical Tushar YouTube Channel

What Is This Project?

The project works like a small wireless drawing board. Instead of drawing directly on the OLED, your phone becomes the drawing pad.

The ESP32 creates a WiFi access point and runs a web server. Once the phone connects to the ESP32 network, the drawing interface can be opened in the phone's browser.

You can then use your finger to draw letters, numbers, symbols or simple sketches.

The ESP32 receives the drawing coordinates and updates the OLED display.

The complete working flow is:

SMARTPHONE
↓
WI-FI
↓
ESP32
↓
I2C
↓
SSD1306 OLED

Project Features

ESP32 based project
WiFi controlled
No separate Bluetooth module
Phone browser based drawing interface
128 × 64 SSD1306 OLED
Live drawing mode
Reveal mode
Pen tool
Eraser tool
Adjustable brush size
Clear canvas button
Works without internet for local control

Components Required

The hardware required for this project is quite small. Most of the components are easily available online or from a local electronics shop.

Component	Quantity
ESP32 Development Board	1
0.96 inch SSD1306 OLED Display 128 × 64	1
Breadboard	1
Jumper Wires	As required
USB Cable	1

Tools and Software

Computer or laptop
Arduino IDE
USB data cable
Smartphone
Internet connection for downloading software and libraries

Arduino IDE can be downloaded from the official Arduino website:

Download Arduino IDE

Why Use ESP32?

The ESP32 is a great choice for this project because WiFi is already built into the board.

That allows the ESP32 to create its own WiFi access point and communicate directly with a phone.

It can also run a web server, which means we can put the drawing controls directly into a webpage instead of developing a separate mobile application.

The ESP32 Arduino platform provides WiFi support including Access Point mode, where other devices can connect directly to the ESP32.

ESP32 WiFi documentation

The OLED Display

For the display, we are using a small 128 × 64 SSD1306 OLED.

It is a monochrome display, which means the drawing is made using individual pixels rather than full colour.

Even though the display is small, it is enough for simple writing, symbols and small drawings.

The OLED communicates with the ESP32 using the I2C protocol.

I2C only needs two communication lines:

SDA for data
SCL for the clock

The display also needs VCC and GND.

The Adafruit SSD1306 library supports 128 × 64 and 128 × 32 monochrome OLED displays and supports ESP32 boards.

Adafruit SSD1306 Library

Circuit Diagram

The OLED is connected directly to the ESP32 using I2C. The connections used in this project are:

ESP32	OLED
GPIO 5	SCL
GPIO 4	SDA
3.3V	VCC
GND	GND

So the main connections are:

GPIO 5 → SCL
GPIO 4 → SDA
3.3V → VCC
GND → GND

ESP32 GPIO 4 GPIO 5 SSD1306 OLED circuit diagram

ESP32 to SSD1306 OLED I2C circuit diagram

How the Circuit Works

There isn't much hardware in this project. The ESP32 is the main controller and the OLED is the output display.

When the ESP32 receives a drawing point from the phone, it calculates which OLED pixel needs to be changed.

The OLED is then updated through the I2C connection.

Because the OLED has only 128 × 64 pixels, the drawing is eventually converted into a small monochrome image.

Setting Up Arduino IDE

Before uploading the program, we need to configure Arduino IDE for ESP32.

Open Arduino IDE and make sure the ESP32 board package is installed.

Then select your ESP32 board from:

Tools → Board → ESP32 Arduino

Select the board that matches your ESP32 development board. For a common ESP32-WROOM development board, the appropriate ESP32 Dev Module option is typically used.

You can find the official Arduino ESP32 documentation here:

Arduino ESP32 Getting Started Guide

Libraries Required

Install the following libraries through the Arduino IDE Library Manager:

Adafruit GFX Library
Adafruit SSD1306 Library

The Wire library is used for I2C communication.

The ESP32 WiFi and WebServer libraries are used to create the wireless drawing interface.

The Adafruit SSD1306 library also requires the Adafruit GFX library for graphics functions.

Adafruit GFX Library

How the WiFi Drawing Pad Works

This is where the project gets interesting.

The ESP32 creates a WiFi network called:

OLED_DRAWING_PAD

The password configured in the project is:

12345678

Your phone connects directly to this network.

The ESP32 then serves the drawing webpage to the phone.

There is no need for the phone to access the internet while using the drawing pad. The communication happens locally between the phone and ESP32.

The Drawing Interface

Once the webpage is opened, you will see a simple drawing interface.

The main drawing area is black and the pen draws in white.

There are several controls available:

Pen
Eraser
Live mode
Reveal mode
Brush size
Clear canvas

The interface is designed to work with both touch input on a phone and mouse input on a computer.

Live Drawing Mode

In live mode, the drawing is sent to the ESP32 while you are drawing.

Move your finger across the phone screen and the ESP32 receives the drawing points. The OLED is updated as those points arrive.

This gives the effect that the OLED is following your finger.

Reveal Mode

The project also has another option called Reveal Mode.

In this mode, you can draw on the phone first and send the finished drawing to the OLED afterwards.

This is useful when you don't want the OLED to update while you are still drawing.

Pen and Eraser

The pen adds white pixels to the drawing.

The eraser removes pixels by sending black pixels to the OLED.

You can also change the brush size using the size slider. This makes it possible to create thinner or thicker lines.

How the Phone Drawing Becomes OLED Pixels

The phone drawing canvas is larger than the physical OLED.

The web interface uses a 256 × 128 pixel canvas. The OLED itself has only 128 × 64 pixels.

So the JavaScript code converts the coordinates from the larger canvas into the smaller OLED coordinate system.

The OLED coordinates range from:

X: 0 to 127
Y: 0 to 63

The program also fills the pixels between two points so that fast finger movement doesn't leave large gaps in the line.

Upload the Program

Now connect the ESP32 to your computer using the USB cable.

Open Arduino IDE.
Select the ESP32 board.
Select the correct COM port.
Make sure the required libraries are installed.
Open the project code.
Check the OLED I2C pins.
Click Verify to compile the program.
Click Upload.
Wait for the upload to finish.

After the upload is complete, the ESP32 should start the WiFi access point.

ESP32 OLED Drawing Pad Code

Below is a complete working-style sketch for the ESP32 version of this project. The web interface is built directly into the ESP32 program.

Add-Text-or-Codes

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

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

#define OLED_SDA 4
#define OLED_SCL 5

Adafruit_SSD1306 display(
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
  &Wire,
  -1
);

WebServer server(80);

const char* ssid = "OLED_DRAWING_PAD";
const char* password = "12345678";

const char webpage[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no">

<title>OLED Drawing Pad</title>

<style>

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  user-select:none;
  -webkit-user-select:none;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  font-family:Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
}

.container{
  width:96%;
  max-width:900px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  padding:15px;
  display:flex;
  gap:15px;
  align-items:center;
}

.canvas-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

h1{
  color:white;
  font-size:18px;
}

.status{
  color:white;
  font-size:11px;
  background:rgba(0,0,0,.3);
  padding:5px 10px;
  border-radius:20px;
}

.canvas-wrapper{
  width:100%;
  background:black;
  border-radius:12px;
  overflow:hidden;
}

canvas{
  width:100%;
  aspect-ratio:2/1;
  display:block;
  background:black;
  touch-action:none;
}

.toolbar{
  width:150px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.row{
  display:flex;
  gap:5px;
}

button{
  flex:1;
  padding:10px 5px;
  border:2px solid rgba(255,255,255,.25);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:white;
  font-weight:bold;
}

button.active{
  border-color:#4ade80;
  background:rgba(74,222,128,.25);
}

.clear{
  background:#e11d48;
  border:none;
}

.send{
  background:#0284c7;
  border:none;
}

input{
  width:100%;
}

label{
  color:white;
  font-size:12px;
}

@media(max-width:650px){

.container{
  flex-direction:row;
  padding:8px;
}

.toolbar{
  width:120px;
}

button{
  font-size:10px;
  padding:8px 3px;
}

h1{
  font-size:13px;
}

}

</style>
</head>

<body>

<h1>OLED DRAWING PAD</h1>

<div class="status"
id="status">
● LIVE DRAWING
</div>

</div>

<button id="eraser"
onclick="setTool('eraser')">
ERASER
</button>

</div>

<button id="reveal"
onclick="setMode('reveal')">
REVEAL
</button>

</div>

<button
class="clear"
onclick="clearCanvas()">
CLEAR CANVAS
</button>

</div>

const canvas =
document.getElementById("canvas");

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

let drawing=false;
let lastX=null;
let lastY=null;

let tool="pen";
let mode="live";

let brushSize=3;
let buffer=[];

ctx.fillStyle="black";
ctx.fillRect(0,0,256,128);

ctx.lineCap="round";
ctx.lineJoin="round";

document.getElementById("size")
.addEventListener("input",function(){
  brushSize=parseInt(this.value);
  document.getElementById("sizeText")
  .textContent=brushSize;
});

function setTool(t){

tool=t;

document.getElementById("pen")
  .classList.toggle("active",t==="pen");

document.getElementById("eraser")
  .classList.toggle("active",t==="eraser");

}

function setMode(m){

mode=m;

document.getElementById("live")
  .classList.toggle("active",m==="live");

document.getElementById("reveal")
  .classList.toggle("active",m==="reveal");

document.getElementById("send")
  .style.display=m==="reveal" ? "block":"none";

document.getElementById("status")
  .textContent=m==="live"
  ? "● LIVE DRAWING"
  : "REVEAL MODE";

clearCanvas();

}

function position(e){

const r=canvas.getBoundingClientRect();

let x,y;

if(e.touches){

x=e.touches[0].clientX;
    y=e.touches[0].clientY;

}else{

x=e.clientX;
    y=e.clientY;

}

x=(x-r.left)*
  canvas.width/r.width;

y=(y-r.top)*
  canvas.height/r.height;

x=Math.max(0,Math.min(255,x));
  y=Math.max(0,Math.min(127,y));

return {
    x:Math.floor(x),
    y:Math.floor(y)
  };

}

function draw(e){

e.preventDefault();

const p=position(e);

ctx.strokeStyle=
  tool==="eraser" ? "black":"white";

ctx.lineWidth=brushSize;

ctx.beginPath();

if(lastX===null){

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

}else{

ctx.moveTo(lastX,lastY);

}

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

const ox=Math.floor(p.x*128/256);
  const oy=Math.floor(p.y*64/128);

const value=
  tool==="eraser" ? 0:1;

buffer.push(
    value+","+ox+","+oy
  );

lastX=p.x;
  lastY=p.y;

}

function start(e){

drawing=true;
  lastX=null;
  lastY=null;

draw(e);

}

function move(e){

if(!drawing)return;

draw(e);

}

function end(){

drawing=false;
  lastX=null;
  lastY=null;

}

canvas.addEventListener(
  "mousedown",start
);

canvas.addEventListener(
  "mousemove",move
);

window.addEventListener(
  "mouseup",end
);

canvas.addEventListener(
  "touchstart",start,
  {passive:false}
);

canvas.addEventListener(
  "touchmove",move,
  {passive:false}
);

canvas.addEventListener(
  "touchend",end
);

setInterval(function(){

if(mode!=="live")return;

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

fetch(
    "/drawbatch?points="+
    encodeURIComponent(buffer.join(";"))
  );

buffer=[];

},100);

function sendDrawing(){

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

fetch(
    "/drawbatch?points="+
    encodeURIComponent(buffer.join(";"))
  );

buffer=[];

}

function clearCanvas(){

ctx.fillStyle="black";

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

buffer=[];

lastX=null;
  lastY=null;

fetch("/clear");

}

</script>

</body>
</html>
)rawliteral";

void handleRoot(){

server.send(
    200,
    "text/html",
    webpage
  );

}

void handleClear(){

display.clearDisplay();
  display.display();

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

}

void handleDrawBatch(){

if(!server.hasArg("points")){

server.send(
      400,
      "text/plain",
      "Missing points"
    );

return;

}

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

int start=0;

while(start < data.length()){

int end =
    data.indexOf(';',start);

if(end==-1)
      end=data.length();

String point =
    data.substring(start,end);

int c1 =
    point.indexOf(',');

int c2 =
    point.indexOf(',',c1+1);

if(c1>0 && c2>c1){

int value =
      point.substring(0,c1).toInt();

int x =
      point.substring(
        c1+1,c2
      ).toInt();

int y =
      point.substring(
        c2+1
      ).toInt();

if(x>=0 && x<128 &&
         y>=0 && y<64){

display.drawPixel(
          x,
          y,
          value
          ? SSD1306_WHITE
          : SSD1306_BLACK
        );

}

start=end+1;

}

display.display();

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

}

void setup(){

Serial.begin(115200);

Wire.begin(
    OLED_SDA,
    OLED_SCL
  );

if(!display.begin(
    SSD1306_SWITCHCAPVCC,
    0x3C
  )){

Serial.println(
      "OLED initialization failed"
    );

while(true){
      delay(1000);
    }

}

display.clearDisplay();
  display.setTextColor(
    SSD1306_WHITE
  );

display.setTextSize(1);
  display.setCursor(0,0);

display.println(
    "OLED DRAWING PAD"
  );

display.println();
  display.println(
    "Connect to:"
  );

display.println(
    "OLED_DRAWING_PAD"
  );

display.display();

WiFi.mode(WIFI_AP);

WiFi.softAP(
    ssid,
    password
  );

Serial.println();
  Serial.println(
    "WiFi Access Point Started"
  );

Serial.print(
    "SSID: "
  );

Serial.println(ssid);

Serial.print(
    "IP Address: "
  );

Serial.println(
    WiFi.softAPIP()
  );

server.on(
    "/",
    handleRoot
  );

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

server.on(
    "/drawbatch",
    handleDrawBatch
  );

server.begin();

Serial.println(
    "Web server started"
  );

}

void loop(){

server.handleClient();

}
</code>

How the Code Works

There are three main parts to the program.

1. WiFi Access Point

The ESP32 is configured as a WiFi access point. The important part is:

WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password);

This creates the WiFi network that the phone connects to.

2. Web Server

The ESP32 also runs a web server on port 80. The HTML, CSS and JavaScript drawing interface is stored inside the ESP32 program.

When the phone opens the ESP32 address, the ESP32 sends the webpage to the browser.

3. OLED Drawing

When the phone sends drawing coordinates, the ESP32 reads them and uses the SSD1306 library to turn the corresponding OLED pixels on or off.

Connect Your Phone

After uploading the program, disconnect and reconnect the ESP32 if necessary.

Open the WiFi settings on your phone.

Look for:

OLED_DRAWING_PAD

Connect using:

Password: 12345678

Once connected, open the ESP32 access point address in your browser:

http://192.168.4.1

The OLED Drawing Pad should now appear on your phone.

Start Drawing

Now simply touch the black drawing area and start writing.

Try writing your name first.

For example, you can write:

The ESP32 receives the points from the phone and displays them on the OLED.

You can change the brush size if the lines are too thin or too thick.

Try the Eraser

If you make a mistake, there is no need to clear the entire drawing. Select the ERASER button and draw over the part you want to remove.

The eraser sends black pixels to the OLED instead of white pixels.

Clear the Display

When you want to start a completely new drawing, press the CLEAR CANVAS button.

The phone canvas is cleared and the ESP32 also receives the clear command, which clears the OLED.

Testing the Project

I recommend testing the project in this order:

Power the ESP32.
Check that the OLED turns on.
Check that the OLED_DRAWING_PAD WiFi network appears.
Connect your phone to the network.
Open 192.168.4.1 in the browser.
Draw a small line.
Check the OLED.
Try writing a letter.
Test the eraser.
Test the clear button.
Try Reveal Mode.

Troubleshooting

OLED Display Is Blank

Start by checking the four wires. Make sure the connections are:

GPIO 5 → SCL
GPIO 4 → SDA
3.3V → VCC
GND → GND

Also check the OLED I2C address. Many SSD1306 modules use 0x3C, which is the address used in this example.

ESP32 Cannot Connect to OLED

Check the wiring first and make sure the OLED is receiving power. If the program reports an OLED initialization failure in the Serial Monitor, check the I2C connections and address.

WiFi Network Is Not Appearing

Make sure the ESP32 program uploaded correctly. Open the Serial Monitor at 115200 baud and check whether the access point starts successfully.

Webpage Does Not Open

Make sure your phone is connected to OLED_DRAWING_PAD. Then open:

http://192.168.4.1

Some smartphones may automatically switch to another WiFi network because the ESP32 network does not provide internet access. If this happens, reconnect to the ESP32 network manually.

Drawing Has Gaps

The phone sends a series of coordinates as your finger moves. If the points are too far apart, fast movements can produce gaps.

The web interface can be improved further by interpolating the points between two coordinates, especially for very fast drawing.

OLED Shows Only Part of the Drawing

Remember that the OLED is only 128 × 64 pixels. The phone drawing area is larger, so the program scales the coordinates down before sending them to the ESP32.

Detailed drawings may therefore look different on the OLED compared with the phone screen.

Things You Can Add Later

Once the basic drawing pad is working, you can take the project much further.

Add a text input box.
Type text and send it directly to the OLED.
Add undo and redo buttons.
Add different brush styles.
Add preset shapes.
Add a save drawing option.
Add OLED animations.
Add different fonts.
Add a larger OLED display.
Add multiple OLED displays.

One of the most useful improvements would be a text input option. Instead of manually drawing every letter, you could type a message on the phone and send it directly to the OLED.

What We Learn From This Project

This project looks simple, but it combines several useful concepts.

ESP32 WiFi Access Point
ESP32 Web Server
HTML
CSS
JavaScript
Touch input
HTTP requests
I2C communication
OLED graphics
Coordinate conversion
Pixel based drawing

So this is more than just an OLED project. It is also a good introduction to using an ESP32 as a small web-connected device.

Final Result

And that's it. We now have a small wireless drawing pad using an ESP32 and SSD1306 OLED.

The phone acts as the drawing surface, the ESP32 handles the WiFi communication and the OLED displays the result.

The best part is that everything happens locally. You don't need an internet connection to draw once your phone is connected to the ESP32 WiFi network.

Related ESP32 and Electronics Projects

If you enjoyed this project, you can also check out our previous WiFi controlled RC car project.

How to Make a WiFi Controlled RC Car Using ESP8266

In that project, a microcontroller is used to control a four-wheel RC car from a smartphone.

Frequently Asked Questions

Can I use ESP32 for this OLED drawing project?

Yes. This project is designed around the ESP32 and uses its built-in WiFi capability to communicate with the phone.

Does this project need Bluetooth?

No. The phone communicates with the ESP32 through WiFi, so a separate Bluetooth module isn't required.

Does the ESP32 need internet?

No. The ESP32 can create its own WiFi access point. Your phone connects directly to it and communicates with the web server running on the ESP32.

What OLED is used?

The project uses a 128 × 64 pixel SSD1306 monochrome OLED display.

Which pins are used for I2C?

In this project, GPIO 4 is used for SDA and GPIO 5 is used for SCL.

Can I use a different ESP32 board?

Yes. You can use another ESP32 development board as long as the required GPIO pins are available. If you use different pins, change the I2C pin definitions in the program.

Can I use a bigger OLED?

Yes, but the program needs to be changed according to the resolution and controller of the new display.

Can I use a phone browser instead of an Android application?

Yes. That's one of the useful parts of this project. The ESP32 hosts the drawing interface itself, so the phone can access it through a browser.

Source and Credit

The original project and code used as the reference for this build were created by Technical Tushar.

You can visit the original creator's YouTube channel here:

Technical Tushar YouTube Channel

If you use the original creator's code, images or other project material, keep the appropriate attribution and follow the applicable licensing or permission requirements.

Conclusion

This ESP32 OLED Drawing Pad is a small project, but it combines quite a few interesting things in one build.

The ESP32 creates the WiFi network, hosts the webpage and receives the drawing data. The phone provides the touch interface, while the SSD1306 OLED shows the drawing.

Once the basic version is working, you can keep improving it and turn it into your own wireless message board, text display or even a small classroom drawing tool.

If you already have an ESP32 and a small SSD1306 OLED, this is definitely a fun project to try.

Start with a simple drawing, make sure the basic communication works and then add your own features.

That's where the project gets really interesting.

License Key

How to Make an ESP32 WiFi OLED Drawing Pad Using Your Phone

What Is This Project?

Project Features

Components Required

Tools and Software

Why Use ESP32?

The OLED Display

Circuit Diagram

How the Circuit Works

Setting Up Arduino IDE

Libraries Required

How the WiFi Drawing Pad Works

The Drawing Interface

Live Drawing Mode

Reveal Mode

Pen and Eraser

How the Phone Drawing Becomes OLED Pixels

Upload the Program

ESP32 OLED Drawing Pad Code

How the Code Works

1. WiFi Access Point

2. Web Server

3. OLED Drawing

Connect Your Phone

Start Drawing

Try the Eraser

Clear the Display

Testing the Project

Troubleshooting

OLED Display Is Blank

ESP32 Cannot Connect to OLED

WiFi Network Is Not Appearing

Webpage Does Not Open

Drawing Has Gaps

OLED Shows Only Part of the Drawing

Things You Can Add Later

What We Learn From This Project

Final Result

Related ESP32 and Electronics Projects

Frequently Asked Questions

Can I use ESP32 for this OLED drawing project?

Does this project need Bluetooth?

Does the ESP32 need internet?

What OLED is used?

Which pins are used for I2C?

Can I use a different ESP32 board?

Can I use a bigger OLED?

Can I use a phone browser instead of an Android application?

Source and Credit

Conclusion

How to Make a WiFi Controlled RC Car Using ESP8266

How to Make an ESP32 WiFi OLED Drawing Pad Using Your Phone

how to make arduino obstacle avoiding Car

نموذج الاتصال