Robotic Expressions Using Oled Display and ESP32

by Random Creations in Circuits > Robots

2262 Views, 17 Favorites, 0 Comments

Robotic Expressions Using Oled Display and ESP32

Screenshot_2023-11-14-18-43-50-296_com.miui.videoplayer.jpg
Screenshot_2023-11-14-18-35-09-935_com.miui.videoplayer.jpg
Screenshot_2023-11-14-18-43-03-488_com.miui.videoplayer.jpg

If you are here, then I can tell you that somewhere in your heart,you have love for robots and want to have one. Or maybe you just want to make a robot with somekind of expressions. That's exactly what you are going to learn today. I personally wanted to have a breadboard setup showing emotions and by watching it I can think about new ideas. It's really easy project and you can do it even if you have a little knowledge or beginner. You just need few things mentioned below. So I guess we should dive into it.

Supplies

IMG_20231112_132801.jpg
IMG_20231112_132827.jpg

Hardware

  • 128 x 64 OLED Display 1306
  • ESP32 (Mine is devkit V1)
  • Breadboard and Wires
  • A laptop

Softwares

Converting Video to GIF and Frames

Splitted.png
effects.png
resize.png
Video to GIF.png
Oledanimation.png
Advanced.png
Irfanview.png

I searched on google and found this video really cool and thought to convert it into code and display it on OLED display. So, I downloaded it and uploaded it on ez-gif website, on tab named Video to GIF conversion.

Then Click on Convert, and it'll convert it into GIF.

Now without leaving tab click on Resize Icon in menu.

(Note: You can perform new action on your previously generated or converted result. This saves us from repeatedly uploading converted results again and again for new steps. So you can simply proceed forward to next step and perform task on your most recently conversion.)

Select the new size, Width of 128 px and Height of 64 px and click on Resize Image.

Once conversion is done, now we can apply some effect on our GIF.

Select effects from the menu

And Check the following boxes:(you can refer to image titled effects)

Color Preset: Grayscale

Replace Color with transparency: Black

And then click on Apply Selected

Once it's finished we'll be able to see the result in preview panel.

Now we can split this modified GIF into frames. For that we can click on Split icon.

And then simply click on Split to Frames and we'll be able to see individual splited frame.

Click on Download as ZIP folder for ease.

Now Extract the content into a new folder.

IrfanView

That's it our one part is done. Now we need will openanother software call IrfanView.

I'm using this software just because it'll rename the long name into something simpler and short. And also it'll convert our images into grayscale. And also if you are using different display then it can also change the dimensions. It can do batch conversions which saves our time. I know this all can be done by using EZ-gif website. but Rename part is missing in that. So that's the reason I used IrfanView.

Open IrfanView software and navigate to your extracted folder and click on Add All.

Click on Advance setting and check the following boxes. (Or you can refer to image titled as Advance setting)

Change color depth: 2 colors(Black and White)

and Negative

And if you want to resize your frames you can also do that from resizing image option.

And now select the Output Folder. where you want to export your output.

And click on Start Batch and let it get completed.

Now we can jump to next step.

So now we have fullu customized frames. Which basically are images. And we cannot directly display them on OLED display.So we have to convert them into C code. So for that purpose you can use different options. Like most famously Image to CPP software. But I peronally found this software OLEDanimation by VolvosProject very easy to use. He's a nice guy teaching about arduino on Youtube. He's a good teacher by the way.

So now just openthis software OLEDanimation.

And on Select Folder and navigate to the folder in which you stored your output from IrfanView software.

An it'll start generating code which you can copy and paste into your Arduino IDE. Or you can download from below.

Circuit Diagram

Screenshot (26).png

It's a simple circuit.

Connect the wires:

VCC of oled to VCC of ESP32

GND of oled to GND of ESP32

SCL of oled to D22 of ESP32 which is SCL pin basically.

SDA of oled to D21 of ESP32 which is SDA pin.

CODE

You can download the example file from below.

You'll also need to download library in arduino ide. You can do this by going to Arduino library manager and search for SSD1306 and install it. Most likely the second library Adafruit GFX gets downlaoded automatically as dependacy of the main library. But if somehow it doesn't.Then you can simply install it by searching for it in library manager again.

Then compile the sketch and upload it by selecting the Exact com port.

If you don't see your board in there then most likely it's your first time using ESP32.

In that case go to Board Manager and Search for ESP32 from there you can install it.

Then choose the board, in my case it is Esp32-DEVKIT-V1, and choose the port and upload it.

You can download it from my Github

Results

Robotic Emotions on OLED Display using Esp32 board

Result

FB8PDMTLOYCG0O9.jpg
F8UJJ4ZLOYCG0NC.jpg