Best approach for 128x64 OLED graphical battery level indicator[solved]

Using Arduino Displays
1

Hi, I'm wondering what approach you think is best when adding a battery level indicator to my project. I don't mean a way to get the voltage. I mean the best approach to displaying it graphically.

I'd like it to look like a battery, like on an android phone. Difference is, I only need 5 different displays. 100%, 75%, 50%, 25%, and very low battery. I'm still not worried about code here. I've been searching on the interwebs, and haven't came up with much.

If you wanted to do this, would you use bitmaps or draw pixels straight to the display? I'm sorry if this seems like it's too 'noobish'. Trying to figure out the best way before I start messing with it. Drawing a 128x64 monochrome bitmap pixel by pixel seems rough, but then again so does drawing pixel by pixel in code. If there's a better way, please let me know.

I really appreciate it, thanks!

Cheers!

2

I would use the same tiny battery icon as your phone does. Just create the five different battery levels and display one based on your battery voltage. The guy in this video looks like he did the same: DIY Digital Wristwatch - YouTube

Mike

3

Hi, thanks for the reply. I ended up using u8glib. I highly recommend it. :slight_smile: Had the full battery indicator done in about 10 minutes. Barely any code. Friggin' awesome.

#include "U8glib.h"

U8GLIB_SSD1306_ADAFRUIT_128X64 u8g(9, 10, 15, 14);	// SW SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9

void draw(void) {
  // graphic commands to redraw the complete screen should be placed here  
  u8g.setFont(u8g_font_unifont);
  //u8g.setFont(u8g_font_osb21);
  u8g.drawFrame(99,0,27,10);
  u8g.drawBox(101,2,23,6);
  u8g.drawBox(126,3,2,4);

}

void setup(void) {

  u8g.getMode() == U8G_MODE_BW; 
    u8g.setColorIndex(1);         // pixel on
  }
void loop(void) {
  // picture loop
  u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
  
  // rebuild the picture after some delay
  delay(50);
}
1 Like
4

I used the Hello World example, hence the extra code in there. Have a good day everyone.

5

For anyone reading this, I ditched the original idea of using only 5 battery levels. The percentage of the battery bar that will be displayed is the actual percentage of the battery level within a given range.

(BattVoltage-BattMin)/(BattMax - BattMin) * 100 = BatteryPercentage

Since we know the battery percentage(lets say 50%, for example)and battery bar will be 30 pixels long, we can figure out how many pixels the battery level should be at 50%.

(batteryPercent*MaxBatteryBar)/100 = 15(battery bars pixels)

(50*30)/100=15 pixels. After the calculation, we can draw the correct length of the battery bar to the display .

Hopefully you can understand this and it'll help someone. :slight_smile:

6

very nice. tyvm.

do you have icon when charging happening?