Go Down

Topic: Best approach for 128x64 OLED graphical battery level indicator[solved] (Read 9872 times) previous topic - next topic

noobdude

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!

0miker0

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: https://www.youtube.com/watch?v=KrUJlZK1ct0

Mike

noobdude

Hi, thanks for the reply. I ended up using u8glib.  I highly recommend it. :)  Had the full battery indicator done in about 10 minutes.  Barely any code.  Friggin' awesome. 
Code: [Select]
#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);
}

noobdude

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

noobdude

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. :)

yose85


Go Up