CODEWITHSUNDEEP
indicatorpebble-watchbatterylevelcloudpebble
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10658

Pebble Watchface Battery Indicator

I'd would like to add a battery indicator to my Pebble watch face that will indicate the battery-level of my Pebble watch.

I know that I could get it right if I used the documentation found here: http://developer.getpebble.com/docs/c/Foundation/Event_Service/BatteryStateService/
which provides a bunch of way for determining the battery state and Icould just link different states with different images that I make.

But my questions are:

  1. Is there an easier way of implementing a small battery state icon on my watch face without me having to create my own battery state images.
  2. If there isn't an easier way of implementing it, are there any small battery state icons available out there to use instead of making my own images.

I'm basically looking for the best way to implement this so that I don't have to waste time and energy reinventing the wheel.

Upvotes: 1

Views: 1084

Answers (3)

Neil
Neil

Reputation: 4049

You could just draw one:

static Layer* s_output_layer;

static void draw_battery(Layer *layer, GContext *ctx) {
  graphics_context_set_stroke_color(ctx, GColorWhite);
  graphics_context_set_fill_color(ctx, GColorWhite);
  graphics_draw_rect(ctx, GRect(2, 0, 5, 2));
  graphics_draw_rect(ctx, GRect(0, 2, 9, 18));

  // Can't draw a 1 pixel rectangle.  Use 13 to ensure 10% => 2px height
  int gone = 13 - 0.13 * battery_state_service_peek().charge_percent;
  if (14-gone >= 2)
    graphics_fill_rect(ctx, GRect(2, 4+gone, 5, 14-gone), 0, GCornerNone);
}

void create_battery_layer(Layer *window_layer) {
  s_output_layer = layer_create(GRect(4, 22, 9, 20));
  layer_add_child(window_layer, s_output_layer);
  layer_set_update_proc(s_output_layer, draw_battery);
}

void destroy_battery_layer() {
  layer_destroy(s_output_layer);
}

Upvotes: 1

sarfata
sarfata

Reputation: 4675

You can use some code to draw a rectangle inside an "empty" battery icon. This way you have just one icon and you "fill" it depending on the battery status.

Upvotes: 1

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10658

I've done some digging and I've found that there are many open source projects out there with battery indication icons for different levels of battery power.

I'm using images for every 10 percentage level (because the battery charge only returns the power level in increments of 10)

The images are stored in a GBitmap array declared using static GBitmap *battery_images[22];

Include the images in your resource folder and assign them using gbitmap_create_with_resource eg. battery_images[2] = gbitmap_create_with_resource(RESOURCE_ID_BATTERY_20);

May array size is 22 because I used 0 - 100 battery level and 0 - 100 charging level. Here is the handle_battery function.

void handle_battery(BatteryChargeState charge_state) {
  bitmap_layer_set_bitmap(battery_layer, battery_images[
    (charge_state.is_charging ? 11 : 0) + (charge_state.charge_percent / 10)]);
}

Hope this is helpful to anyone who runs into a similar problem.

Upvotes: 1

Related Questions