Wall-E DIY Project with Wifi (Part 2)

And then the display arrived. Time for some tesing. I also switched to an ESP32, since it has more CPU power and more Inputs and Outputs. I got the display working over SPI, but the library that I used didn't seem to be very stable. So I tested it on the ESP12 again and that worked fine. Hmmm what to do. I do need quite some IO to control everything. I planned on using an RGB led and that already takes up 3 Output pins alone. But first I decided to focus on writing the software to control the display. For the code it actually doesn't matter if it runs on an ESP32 or ESP12 so I could decide about that later. So first thing I did was watch some scenes from the Wall-E movie to determine what actually needed to be on the display.

And that also meant digging up some math knowledge. I used to be very good at math in school, but it is amazing how quickly you forget that stuff when you never actually use it. But I did need it because there is a Sun symbol on Wall-E's display and I could not load a bitmap or anything so I had to draw it with lines. And then you need a circle to begin with and then some line originating from the center in certain set angles where the starting point is further on the line. On the right you see that bit of code. Good old Sine and Cosine calculations :) Doesn't that feel like high school again. I did have to fiddle a bit with the scale because the resolution of the display isn't that high (128x128) so sometimes some lines just didn't look nice. But after some experimenting with values I was satisfied with the end result. And could focus on the rest. Next challenge was the bar that shows Wall-E's battery percentage and some text of course.

And here is the result that I managed to get. I think it looked quite OK comparing it to shots from the movie and actually comparing it to the sticker that was on Wall-E's chest. Also the bar is done with math and consists of rectangles. I decided that it should actually work so I made a function that I can feed a percentage and it draws the bar accordingly. You have to draw black rectangles to make the yellow ones disappear again by the way. I could not make the text fit by the way with the default fonts included in the library. So I had to create a custom font for that. Luckily there was an online website where I could do that. Ok enough for now more in the next part.