BOTZO 🐾

The good boy quadruped robot :)

Result

https://github.com/IERoboticsAILab/botzo_media/blob/main/botzo%20startup%20animation%20vid.gif

For the OLED Display we are using the SH1106 I2C arduino oled display.

Setup

First thing to do is set up the display with an Arduino UNO: Connect VDD to 5V, GND to GND, SCK to A5, SDA to A4.

SH1106 OLED Pin	Arduino Mega Pin
VCC	5V
GND	GND
SDA	A4
SCL	A5

In our case the UNO wasn't working but I believe this is an issue to do with the specific board I had, so an UNO should be fine. In case you use a Mega board like I had to, you can connect the wires like this:

SH1106 OLED Pin	Arduino Mega Pin
VCC	5V
GND	GND
SDA	SDA (Pin 20)
SCL	SCL (Pin 21)

Prerequisites

For this script I used the U8g2 library which handles the display drivers for SH1106. This and Wire.h are enough to handle creating the animation. On top of this I obviously needed an animation, so I used the Aseprite software to make a simple white on black pixel animation, matching the 128x64 px resolution of the display.

Make sure to save each frame of the animation in .bmp so that you have a bitmap file (this makes it easier for the next process to be done) but .png works too. Last thing we need before we actually write the code for the animation is to convert our bitmap files into code that can be displayed on the display. To do this I uploaded the .bmp files onto this website with the following settings:

Output Format: Monochrome
Byte Orientation: Horizontal
Size: 128x64 (or whatever matches your display's resolution)

The website will output a bitmap code that translates the pixels on each of your animation's frames into something that is readable by the arduino, like this:

// 'Sprite-0001', 128x64px
const unsigned char myBitmapSprite_0001 [] PROGMEM = {
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x14, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x2a, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x4c, 0x00, 0x19, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x32, 0x00, 0x26, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x21, 0x00, 0x42, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x20, 0x77, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xb8, 0x94, 0x0e, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xa4, 0x94, 0x12, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xa2, 0xb6, 0x22, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xa2, 0xb6, 0x22, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xa2, 0x94, 0x22, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 0xe1, 0xff, 0xc3, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x08, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x1c, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x1c, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x1c, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x08, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x08, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x08, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x08, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x08, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x1c, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x36, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30, 0x22, 0x06, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 0xc1, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

I know it looks scary but this is just an array where every element is a pixel on the screen, so this one has 8192 elements (128 * 64). The code above is the first frame of our animation (the one I pasted above on the gif). Since this is a huge piece of code I put each frame into their own .h file to make it easier to navigate and then imported each file into the main script, but you can also put them all in one .h file and only import that.

Once all these steps are done here are all my imports at the start of the script:

#include <Wire.h>
#include <U8g2lib.h>
#include "frame1.h"
#include "frame2.h"
#include "frame3.h"
#include "frame4.h"
#include "frame5.h"
#include "frame6.h"
#include "frame7.h"
#include "frame8.h"
#include "frame9.h"
#include "frame10.h"
#include "frame11.h"
#include "frame12.h"

Main code

Once we've imported all the frames as well as the necessary libraries, you can initialize your display with the following line: U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE, 0x60);. The one thing to watch out for here is the 0x60, as this is your Arduino board's address and it varies from model to model and sometimes even between individual boards (the most common is 0x3C). You can find out your board's address by pasting the code on (this)[https://playground.arduino.cc/Main/I2cScanner/] page and checking your serial monitor.

Assigning variables

We create an array that holds pointers all frames so that we can loop through them as needed, like this:

const unsigned char* frames[] = {
    myBitmapSprite_0001, myBitmapSprite_0002, myBitmapSprite_0003, 
    myBitmapSprite_0004, myBitmapSprite_0005, myBitmapSprite_0006, 
    myBitmapSprite_0007, myBitmapSprite_0008, myBitmapSprite_0009, 
    myBitmapSprite_0010, myBitmapSprite_0011, myBitmapSprite_0012
};

Then we assign the following variables:

const int frameCount = 12;
const int maxLoops = 5;
int loopCounter = 0;

This is very simple. The first one (frameCount) is obviously just keeping how many frames our animation has. This will be useful for looping through each frame to create a coherent animation later. The second one (MaxLoops) defines how many times over the animation will play. I made it play a limited number of times because when I tried using a while true loop after some point the animation would freeze, likely caused by an overflow issue that I haven't looked into yet. the final variable (loopCounter) is, again, very obviously to keep track of which iteration of the loop we are in.

Setting up the display

To start the display up we run two simple lines of code in the setup function from the Arduino IDE:

void setup() {
    u8g2.setI2CAddress(0x60 * 2);  // Set correct I2C address
    u8g2.begin();
}

The first line ensures that we have set up the correct board address (to find your board's address refer to the website mentioned above or look for an I2C scanner yourself). The reason we multiply the address by 2 is because U8g2 requires an 8-bit address so this is how we convert it. The next line just initializes the OLED display and sets up communication with the board.

Running the animation

Finally, we finish off by running the animation. The way to do this is very simple, we first run an if statement checking how many times we have already looped through the animation, and if it is lower than the maxLoops variable we set, it runs the animation. Otherwise, it stops the animation at the last frame. Here is the entire loop function:

void loop() {
    if (loopCounter < maxLoops) {
        for (int i = 0; i < frameCount; i++) {
            u8g2.clearBuffer();
            u8g2.drawXBMP(0, 0, 128, 64, frames[i]);
            u8g2.sendBuffer();
            delay(100);
        }
        loopCounter++;
    } else {
        u8g2.clearBuffer();
        u8g2.drawXBMP(0, 0, 128, 64, frames[frameCount - 1]);
        u8g2.sendBuffer();
        while (1);
    }
}

As you can see this is very simple and straightforward. The functions used in each loop are all from the library we imported in the beginning, and the two main ones are drawXBMP(), which draws the BMP code onto the screen (obtained from the array above) and the clearBuffer()/sendBuffer() functions, which clear the memory (preventing flickering or leftover pixels from the last frame) and update the display, respectively.

The next steps are to calculate battery information from botzo and display them on the screen :)

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
Startup Animation		Startup Animation
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

BOTZO 🐾

Result

Setup

Prerequisites

Main code

Assigning variables

Setting up the display

Running the animation

About

Releases

Packages

Languages

IERoboticsAILab/botzo_oled

Folders and files

Latest commit

History

Repository files navigation

BOTZO 🐾

Result

Setup

Prerequisites

Main code

Assigning variables

Setting up the display

Running the animation

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages