Robotic Eyes on 128×64 OLED Using ESP8266

by BlinkNBuild in Circuits > LEDs

24 Views, 0 Favorites, 0 Comments

Robotic Eyes on 128×64 OLED Using ESP8266

20260126_192451.jpg

In this project, I show how to create robotic eye on a 128×64 SSD1306 OLED using an ESP8266. The workflow combines a browser-based pixel editor and a small Python tool that automatically converts your drawings into Arduino-ready code. This makes it easy to design, test, and update OLED animations without manually writing bitmap arrays.

This project is ideal for robotics projects, DIY robot faces, and anyone experimenting with small OLED displays.


Downloads

oled_animation.mp4

Supplies

  1. ESP8266 Development Board (NodeMCU or Wemos D1 Mini)
  2. Used to run the Arduino sketch and drive the OLED over I2C.
  3. 0.96" OLED Display (128×64, SSD1306, I2C)
  4. Monochrome OLED used to display the blinking eye animation.
  5. Jumper Wires (Male-to-Male)
  6. For connecting the OLED to the ESP8266.
  7. USB Cable (Micro-USB or Type-C)
  8. For powering and programming the ESP8266 board.
  9. Breadboard (Optional)
  10. Makes wiring easier and cleaner during testing.
  11. Computer / Laptop
  12. Used to run the pixel editor, Python script, and Arduino IDE.
  13. Software (Free)
  14. Arduino IDE
  15. Python 3.8+
  16. Web Browser (Chrome, Edge, or Firefox)

Set Up the ESP8266 and OLED

prowire_export_1769876780100.png

Connect the OLED to the ESP8266 using I2C:

VCC to 3.3V

GND to GND

SDA to D2 (GPIO4)

SCL to D1 (GPIO5)

Plug the ESP8266 into your computer using the USB cable. Make sure your board powers on. If the OLED stays completely blank later, this is the first step to double-check.

Open the Pixel Editor

Open the live pixel editor in your web browser:

https://oled-pixel-editor.netlify.app/

This tool lets you draw pixel-by-pixel designs at the same resolution as the OLED. Draw the eye frames or animation pattern you want to display.

When finished, click Export CSV and save the file to your computer.

Download the Project Files

Open the GitHub repository:

https://github.com/S-SUJAN-S/oled-pixel-editor

Download the project as a ZIP file or clone it.

Open the “python” folder and make sure you have the file called csv_to_oled.py.

Install the Python Requirement

Open a terminal or command prompt in the project folder and run:

pip install pyperclip

This allows the script to copy the generated Arduino sketch directly to your clipboard.

Convert CSV to Arduino Code

Run the Python script:

python python/csv_to_oled.py

A file picker window will open. Select the CSV file you exported from the pixel editor.

After processing, the full Arduino sketch for the ESP8266 will be copied to your clipboard automatically.

Open Arduino IDE and Upload

Open Arduino IDE.

Paste the copied code into a new sketch window.

Install these libraries if you do not already have them:

Adafruit GFX

Adafruit SSD1306

Select your ESP8266 board and correct COM port.

Click Upload and wait for the flash process to complete.

View Your Drawing on the OLED

Once the upload finishes, the OLED should display the same eye pattern you drew in the pixel editor. Your design is now rendered on the screen in real time.

If nothing appears, recheck the wiring and confirm the I2C address is set to 0x3C in the code. Also make sure SDA is connected to D2 and SCL to D1.

Watch the Animation Timelapse

Blinking Eye Animation for 64×128 OLED — Robotic Eye Build (Timelapse)

This wiring tool is used only to plan and visualize connections, not to generate or automate the circuit. It helps you manually map out power and I2C pin connections before you wire the hardware.

Wiring Tool Usage Guide (YouTube):

https://youtu.be/W11WCTrYjk0

Use it to double-check your pin layout and reduce wiring mistakes before connecting the OLED to the ESP8266.

Create Your Own Circuit Diagram With the Wiring Tool

I Built a Tool to Turn Component Images into Circuit Diagrams (Manual Wiring)

This wiring tool is used only to plan and visualize connections, not to generate or automate the circuit. It helps you manually map out power and I2C pin connections before you wire the hardware.

Live Wiring Tool:

https://dazzling-chimera-d0ca7d.netlify.app/

Wiring Tool Usage Guide (YouTube)

https://youtu.be/W11WCTrYjk0

Use it to double-check your pin layout and reduce wiring mistakes before connecting the OLED to the ESP8266.

Final Notes and Thanks

Thank you for reading through this project. I hope this workflow helps you in your future robotics and OLED-based projects by making design and testing faster and more visual.

If you have any questions, feedback, or ideas for improvements, feel free to reach out:

blinknbuildyt@gmail.com

Happy building and experimenting with your own custom OLED animations.