128x64 OLED with u8g2 lib drawBox() with map() function

rcjp · May 13, 2023, 4:29am

Hello everyone I'm currently working on my project water level indicator and I'm using OLED display to display the output. I'm trying to draw a box using drawBox() and map() function to fill the container from bottom to top but the output of my code draws box from top to bottom. How can i fix this?

Here's my code:

  // ---> Libraries
  #include <Wire.h>
  #include <U8g2lib.h>


//[page buffer, size = 128 bytes]
U8G2_SH1106_128X64_NONAME_1_HW_I2C OLED(U8G2_R0); 


// 'water level (1)', 128x64px
const unsigned char epd_bitmap_water_level__1_ [] 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, 0x80, 0xaa, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x50, 0x55, 0x15, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0xa8, 0xaa, 0x2a, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x54, 0x55, 0x55, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x31, 0xef, 0x45, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x1f, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x22, 0x29, 0x25, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x1f, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x21, 0x29, 0x11, 0x00, 0x00, 0x00, 0x00, 0x06, 0x18, 0x00, 0x00, 
	0x00, 0x80, 0x2a, 0x00, 0xa8, 0x22, 0x29, 0x59, 0x00, 0x00, 0x00, 0x00, 0x06, 0x18, 0x00, 0x00, 
	0x00, 0x00, 0x05, 0x55, 0x41, 0x71, 0xef, 0x4d, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x07, 0x00, 0x00, 
	0x00, 0x80, 0xa0, 0xaa, 0x0a, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x07, 0x00, 0x00, 
	0x00, 0x00, 0x54, 0x55, 0x55, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff, 0x7f, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff, 0x7f, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xf1, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x80, 0x01, 0x60, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x92, 0x52, 0x02, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xf1, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0x00, 0x80, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x92, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x15, 0x00, 0x50, 0xf1, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x82, 0xaa, 0x82, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x50, 0x55, 0x15, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0xf2, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x31, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0xf2, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xb1, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x0a, 0x00, 0xa0, 0xf2, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xc1, 0xff, 0x07, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xfc, 0xff, 0x7f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xc3, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xa3, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xb3, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x83, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x07, 0x00, 0xe0, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xe0, 0xff, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xff, 0xff, 0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xc3, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x01, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xf8, 0xff, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x2f, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0x29, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0x89, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0xc9, 0x02, 0x00, 0x00, 0x00, 0x40, 0x00, 0x80, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x73, 0x6f, 0x02, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
  
int progress = 0;

void setup() {
    // put your setup code here, to run once:
  OLED.begin(); 
  OLED.setFont(u8g2_font_t0_12b_mf);
  OLED.setColorIndex(1); //White color
  }

void loop() {
    // put your main code here, to run repeatedly:
  OLED.firstPage();
  do {
  OLED.setColorIndex(1); //White color 
  OLED.drawXBMP(0, 0, 128, 64, epd_bitmap_water_level__1_); //Image
  OLED.setColorIndex(0); //Black color
  OLED.drawBox(95, 22, 16, 36); //Empty container
  OLED.setColorIndex(1); //White color
  OLED.drawBox(96, 23, 14, map(progress, 0, 100, 0, 34)); //Filling the container from bottom to top
  } while ( OLED.nextPage() );

  if (progress < 100) {
    progress++;
  } else {
    progress = 0;
  }
}

Output:

xfpd · May 13, 2023, 4:50am

transpose 0 and 34

  OLED.drawBox(96, 23, 14, map(progress, 0, 100, 34, 0)); //Filling the container from bottom to top

And the colors black and white:

  OLED.setColorIndex(1); //Black color
  OLED.drawBox(95, 22, 16, 36); //Empty container
  OLED.setColorIndex(0); //White color
  OLED.drawBox(96, 23, 14, map(progress, 0, 100, 34, 0)); //Filling the container from bottom to top

This will fill a black box with white box from bottom to top.

david_2018 · May 13, 2023, 4:56am

Move the box position along with the box height, so that the bottom of the box is maintained at the same location.

    int barHeight = map(progress, 0, 100, 0, 34);
    OLED.drawBox(96, 23 + 34 - barHeight, 14, barHeight); //Filling the container from bottom to top

rcjp · May 13, 2023, 5:46am

Thankyou. I can now continue working on my project.

// ---> Libraries
  #include <Wire.h>
  #include <U8g2lib.h>


//[page buffer, size = 128 bytes]
U8G2_SH1106_128X64_NONAME_1_HW_I2C OLED(U8G2_R0); 


// 'water level (1)', 128x64px
const unsigned char epd_bitmap_water_level__1_ [] 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, 0x80, 0xaa, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x50, 0x55, 0x15, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0xa8, 0xaa, 0x2a, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x54, 0x55, 0x55, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x31, 0xef, 0x45, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x1f, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x22, 0x29, 0x25, 0x00, 0x00, 0x00, 0x00, 0xfe, 0x1f, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x21, 0x29, 0x11, 0x00, 0x00, 0x00, 0x00, 0x06, 0x18, 0x00, 0x00, 
	0x00, 0x80, 0x2a, 0x00, 0xa8, 0x22, 0x29, 0x59, 0x00, 0x00, 0x00, 0x00, 0x06, 0x18, 0x00, 0x00, 
	0x00, 0x00, 0x05, 0x55, 0x41, 0x71, 0xef, 0x4d, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x07, 0x00, 0x00, 
	0x00, 0x80, 0xa0, 0xaa, 0x0a, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x07, 0x00, 0x00, 
	0x00, 0x00, 0x54, 0x55, 0x55, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff, 0x7f, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff, 0x7f, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xf1, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x80, 0x01, 0x60, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x92, 0x52, 0x02, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xf1, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0x00, 0x80, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0x92, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x15, 0x00, 0x50, 0xf1, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x82, 0xaa, 0x82, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x50, 0x55, 0x15, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xaa, 0xaa, 0xaa, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0xf2, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0x31, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xaa, 0xaa, 0xaa, 0xf2, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0x55, 0x55, 0x55, 0xb1, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x0a, 0x00, 0xa0, 0xf2, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xc1, 0xff, 0x07, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xfc, 0xff, 0x7f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xc3, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xa3, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xb3, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x83, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x07, 0x00, 0xe0, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xe0, 0xff, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xff, 0xff, 0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0x5e, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xc3, 0x52, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x12, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x92, 0x05, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0xf3, 0xde, 0x04, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0x01, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x00, 0xf8, 0xff, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x33, 0x2f, 0x02, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0x29, 0x01, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0x89, 0x00, 0x00, 0x00, 0x00, 0x40, 0xff, 0xbf, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x23, 0xc9, 0x02, 0x00, 0x00, 0x00, 0x40, 0x00, 0x80, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x73, 0x6f, 0x02, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x00, 0x00, 
	0x00, 0x80, 0xff, 0xff, 0xff, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
  
int progress = 0;

void setup() {
    // put your setup code here, to run once:
  OLED.begin(); 
  OLED.setFont(u8g2_font_t0_12b_mf);
  OLED.setColorIndex(1); //White color
  }

void loop() {
    // put your main code here, to run repeatedly:
  OLED.firstPage();
  do {
  OLED.setColorIndex(1); //White color 
  OLED.drawXBMP(0, 0, 128, 64, epd_bitmap_water_level__1_); //Image
  OLED.setColorIndex(0); //Black color
  OLED.drawBox(95, 22, 16, 36); //Empty container
  OLED.setColorIndex(1); //White color
  int barHeight = map(progress, 0, 100, 0, 34);
  OLED.drawBox(96, 23 + 34 - barHeight, 14, barHeight); //Filling the container from bottom to top
  } while ( OLED.nextPage() );

  if (progress < 100) {
    progress++;
  } else {
    progress = 0;
  }
}

Output:

rcjp · May 13, 2023, 5:48am

Thankyou😊
map(progress, 0, 100, 0, 34);

system · November 9, 2023, 5:48am

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Draw box with pot Programming	9	1178	May 5, 2021
128x64 OLED with u8g2 lib drawBitmap() General Guidance	8	4173	November 6, 2023
Using U8glib with SSD1322 controller and 128x64 OLED Displays	11	3961	May 6, 2021
If mit drawBox Funktion u8g2 Display Deutsch	29	247	January 8, 2025
BarGraph ändern über Berechnung Deutsch	46	418	August 12, 2024

128x64 OLED with u8g2 lib drawBox() with map() function

Related topics