Need help moving bitmap images on a small oled display with buttons

Using Arduino Programming Questions
1

Hi

So I'm extremely new to using Arduino and just coding in general, so for a project that i'm working on I want to be able to move a bitmap image for example in my test sketch a ball across an oled display pixel by pixel with two buttons one adjusting X axis and the other adjusting Y. I'm using an Arduino nano, a 128px by 64px oled display and the U8g library. I've poorly created a basic test code from all that I've learned in the past couple days for what i'd like, but not only is it very time consuming as i have to draw and convert a bitmap image for each position of the ball but it takes up a lot of the space in my Arduino so i was wondering is there a more efficient way or different way from what I've done to do this as I've dug around the internet and have yet to come up with anything. Any help or advice will be greatly appreciated

Here is my Test/sample code

#include "U8glib.h"

U8GLIB_SH1106_128X64 u8g(U8G_I2C_OPT_NO_ACK); 

const int buttonPinX = 5;     
const int buttonPinY = 7;     

int X = 0;

int Y = 1;

 const uint8_t frame1[] PROGMEM = {

//Bitmap values would go here but can't due to word limit

const uint8_t frame2[] PROGMEM = {

//Bitmap values would go here

const uint8_t frame3[] PROGMEM = {

//Bitmap values would go here

const unsigned char PROGMEM frame4 [] = {

//Bitmap values would go here

const uint8_t frame5[] PROGMEM = {

//Bitmap values would go here

const uint8_t frame6[] PROGMEM = {

//Bitmap values would go here

int buttonState = LOW;  
       
int buttonState1 = LOW;        

void draw()
{
  if(X == 0 && Y == 1 )
   u8g.drawBitmapP( 0, 0, 16, 64, frame1); //Move ball Top Left
  if (X == 1 && Y == 1 )
   u8g.drawBitmapP( 0, 0, 16, 64, frame2); //Move ball Top Mid
  if(X == 2 && Y == 1)
   u8g.drawBitmapP( 0, 0, 16, 64, frame3); //Move ball Top Right
  if(X == 0 && Y == 2 )
   u8g.drawBitmapP( 0, 0, 16, 64, frame4); //Move ball Bottom Left
  if(X == 1 && Y == 2 )
   u8g.drawBitmapP( 0, 0, 16, 64, frame5); //Move ball Bottom Mid
  if (X == 2 && Y == 2 )
   u8g.drawBitmapP( 0, 0, 16, 64, frame6); //Move ball Bottom Right
}

void setup() { 
  pinMode(buttonPinX, INPUT);

  pinMode(buttonPinY, INPUT);
}

void loop(void) {
  buttonState = digitalRead(buttonPinX);
   buttonState1 = digitalRead(buttonPinY);
  
 u8g.firstPage();
  do{
   draw();
 } while(u8g.nextPage());
 
 if (buttonState == HIGH) 
  { X ++;}
  else if (buttonState1 == HIGH)
  { Y ++;}
 if(X>2)
   X = 0;
 if(Y>2)
   Y = 1;
delay(1000);
}
2

Give the adafruit or similar library a go, its much easier to use with bitmaps and just in general.

I would just use fillCircle(x, y, radius, color); where color is either 0 or 1 for black or white.
and even bitMaps are easy, just having to change the x and y for each of your button presses.

I use LCD Assistant to make OLED bitmaps, set Byte orientation to Horizontal and then just click file and load image, make sure the image your loading is a Monochrome bitmap format, with the pixel size equal to a byte size, i.e. 8x table such as 96 x 96 in height and width, then click file, save image. save it as something you can refer to such as ball, and then make a new tab in your arduino project and name it Icons.h or whatever but make sure it ends with .h, if you don't know how to make a new tab click the arrow in the top right of the IDE and click new tab. then include that file in you project before the setup i.e. #include "Icons.h"

Then go into the tab named Icons.h and paste each icons Hex array created from the saved output from the LCD Assistant tool. You can use notepad++ to view the Bitmap files your see something like

const unsigned char ice [] = {
** 0x40, 0xC4, 0x96, 0xD8, 0x9C, 0xA0, 0xCB, 0xFE, 0xCB, 0xA0, 0x9C, 0xD8, 0x96, 0xC4, 0x40, 0x00,**
** 0x01, 0x11, 0x34, 0x0D, 0x1C, 0x02, 0x69, 0x3F, 0x69, 0x02, 0x1C, 0x0D, 0x34, 0x11, 0x01, 0x00**
};

the tool will create the wrong type definition so a quick change is required. From

const unsigned char ice [] = {
to
static const uint8_t PROGMEM ice [] = {

thus

static const uint8_t PROGMEM ice[] = {
** 0x40, 0xC4, 0x96, 0xD8, 0x9C, 0xA0, 0xCB, 0xFE, 0xCB, 0xA0, 0x9C, 0xD8, 0x96, 0xC4, 0x40, 0x00,**
** 0x01, 0x11, 0x34, 0x0D, 0x1C, 0x02, 0x69, 0x3F, 0x69, 0x02, 0x1C, 0x0D, 0x34, 0x11, 0x01, 0x00**
};

Then you can just draw the bitmap anywhere you want and invert it.

display.drawBitmap(32, 0, ice, 16, 16, 1); // (x, y, icon_name, width, height, invert);
display.display();

If you're new to using tabs in the Arduino IDE ,you can also use the tabs to split up your code so things are nice and easy to find and refer to, again make a new tab but just give it a name like OLED with no file extension and just treat it like normal, you don't need to include the tab anywhere unlike the Icon tab.

3

Thanks for the reply and the help I will definitely try the adafruit library and look more into working with tabs