pebble/devsite/source/_posts/2015-05-13-tips-and-tricks-transparent-images.md

title	author	tags
Tips and Tricks - Transparent Images	chrislewis	Beautiful Code

Ever wondered how to draw transparent images in a Pebble app? This post will walk you through the process.

In this post, we'll be using a sample image with a transparency component, shown below:

When adding your project resource, ensure you set its ‘type’ correctly. On CloudPebble, this is done when uploading the resource and choosing the 'PNG' type. In the SDK, this is done with the png type in the project's appinfo.json.

"media": [
  {
    "type": "png",
    "name": "GLOBE",
    "file": "globe.png"
  }
]

This will create a resource ID to use in code:

RESOURCE_ID_GLOBE

Simply create a GBitmap with this resource and draw the image with GCompOpSet as the compositing mode:

static GBitmap *s_bitmap;
static Layer *s_canvas_layer;

static void window_load(Window *window) {
  Layer *window_layer = window_get_root_layer(window);

  // Create GBitmap
  s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_GLOBE);

  // Create canvas Layer
  s_canvas_layer = layer_create(layer_get_bounds(window_layer));
  layer_set_update_proc(s_canvas_layer, layer_update_proc);
  layer_add_child(window_layer, s_canvas_layer);
}

static void layer_update_proc(Layer *layer, GContext *ctx) {
  // Draw the image with the correct compositing mode
  graphics_context_set_compositing_mode(ctx, GCompOpSet);
  graphics_draw_bitmap_in_rect(ctx, s_bitmap, gbitmap_get_bounds(s_bitmap));
}

When drawing on a TextLayer underneath s_canvas_layer, the result looks like this:

See a full demo of this technique on the pebble-examples GitHub repo.

Job done! Any transparent pixels in the original image will be drawn as clear, leaving the color beneath unaffected.

Read the Image Resources guide to learn more about transparent PNGs.

Conclusion

So there you have it. Using these examples you can easily implement transparency on all Pebble platforms. To learn more, read the GCompOp documentation or the pebble-examples/feature-image-transparent SDK example.