Pebble SDK has had a feature allowing to combine 2 images with transparency for a while via different composition modes. Unfortunately this doesn’t apply to texts, so, for example, if you need to display transparent time over bitmap background – you had to draw time digits as custom bitmaps. What’s worse – composition modes do not apply to colors, the result is always black-and white.

But there is a way. Pebble allows you to capture graphics context of a layer as a standard bitmap in the layer update callback. You can access that bitmap as raw data. So if you have another bitmap with the background you want to show through current layer, all you have to do is copy it byte by byte into captured bitmap, but only if pixel of specified color, that you use as a mask is encountered.

For example if your current layer needs to show background bitmap “s_bitmap” thru whatever is drawn in white color (255) you can use following snippet:

GBitmap *fb = graphics_capture_frame_buffer_format(ctx, GBitmapFormat8Bit);
  
uint8_t *fb_data =  gbitmap_get_data(fb);
uint8_t *background_data =  gbitmap_get_data(s_bitmap);
  
for (int i=0; i < 144*168; i++) {
  if (fb_data[i] == 255) {
    fb_data[i] = background_data[i];
  }
}
    
graphics_release_frame_buffer(ctx, fb);

Here Line 1 captures context as a bitmap, Lines 3-4 access captured bitmap and background bitmap as raw data. Lines 6-10 loop thru the captured data (each pixel takes a byte and in this example we’re going thru full 144×168 screen). If pixel of a white color is encountered – it is replaced with pixel from the same address of the background bitmap. And finally Line 12 releases captured framebuffer.

And if you combine this approach with APNG support that Pebble Time features, you can even create animated texture for your texts.

UPDATE: Thanks to @Jnm for this tip: If your masking layer is black-and white (00 & FF) that entire IF block can be replaced with bitwise AND:

fb_data[i] &= background_data[i];

And effect will be the same.

UPDATE 2 You can further optimize this code in 2 ways: First, let’s say your mask begins at Y = 50 and ends at Y = 100 – you don’t have to loop thru entire screen – you can use the loop below. It also demonstrates how you can jump 8 pixels/bytes at a time by utilizing 64-bit type:

uint64_t *fb_data = (uint64_t *)gbitmap_get_data(fb);
uint64_t *background_data = (uint64_t *)gbitmap_get_data(s_bitmap);
  
for (int i=50*144/8; i < 100*144/8; i++) {
  fb_data[i] &= background_data[i];
}

Thanks rajrdajr for the tip!

Useful Links:

• Source code of complete example of text with animated texture background (pictured above)

Last time i described how to load random string from resource. If you recall the code ended up with the line

text_layer_set_text(s_textlayer_quote, (char *)quote);

to display loaded text on the screen. But what if text is too large to fit on the screen? If you’re building a watchface, there’s no scrolllayer with user interaction available. But what we can do is automatically scroll the text for user convenience to gradually reveal entire content.

The trick is to create text layer larger than it’s container. In my case I am displaying text full screen on Pebble window which is 144×168 pixels, but I will create text layer with the height of 2000:

#define WINDOW_HEIGHT 168
#define WINDOW_WIDTH 144  
#define TEXTBOX_HEIGHT 2000
...
s_textlayer_quote = text_layer_create(GRect(0, 0, WINDOW_WIDTH, TEXTBOX_HEIGHT));

If the loaded text is larger then container window we now can dynamically detect the difference:

text_layer_set_text(s_textlayer_quote, (char *)quote);
  
// if height of quote > height of window, initiate animation to scroll
GSize text_size = text_layer_get_content_size(s_textlayer_quote);
int number_of_pixels = WINDOW_HEIGHT - text_size.h;
if (number_of_pixels < 0) {
    animate_quote(number_of_pixels);
}

Here we get dynamic size of loaded text content and if the difference between window height and actual text height is negative – call animation function, passing number of pixel we need to shift by.

Now to animation function. Continue reading →

There’s no doubt that Firefly is a greatest TV series in the history of all creation. That is why when I was learning resource handling in Pebble SDK I have decided to create a watchface that would display a random quote from Firefly. And thanks to Bill Hatcher of http://cubemonkey.net/quotes/ I obtained a plain TXT file with almost 500 quotes.

The file is in the format "quote1%quote2%quote3..." e.g. there is a “%” separator between the quotes, so I quickly wrote a small script that gives me a position of each percentage sign within the file, so I can create an array of the positions in my C code for Pebble:

#define NO_OF_QUOTES 472
int aQuotePointers[NO_OF_QUOTES] = {0, 206, 354, 417, 480, 554, 662, 695,... 88825}

which basically gave me position of each quote in the file and which I prepended with 0 and appended with filesize. Then I added the resource to my project (in CloudPeble environment it’s as easy as loading a BLOB resource and giving it a name). A Pebble watchface or watchapp can handle resources of up to 96K, fortunately file with quotes was less, otherwise some kind of string compression would have to be implemented.

After that it’s a trivial matter to generate random position, retrieve quote from that position and display it on a text layer:

// determining number of quote (that will give us address of begining and end)
srand(time(NULL));
int number_of_quote = rand() % NO_OF_QUOTES;
  
//determining size of quote and allocating memory
int size_of_quote = aQuotePointers[number_of_quote + 1] - aQuotePointers[number_of_quote] - 1;
uint8_t *quote = malloc(size_of_quote);

//loading quote, displaying and freeing memory
ResHandle rh = resource_get_handle(RESOURCE_ID_FIREFLY_QUOTES);
resource_load_byte_range(rh, aQuotePointers[number_of_quote] + 1, quote, size_of_quote);
quote[size_of_quote] = 0; //null terminating string
text_layer_set_text(s_textlayer_quote, (char *)quote);

Lines 2-3 generate random index for the array of quote pointers
Lines 6-7 calculate size of the quote (based on position of current and next quote) and allocate memory for the quote
Lines 10-11 load range from the resource based on index and size
Lines 12-13 0-terminate the loaded range and display data on the text layer.

It’s all pretty straightforward and works like a magic and the result you can see in published watchface: Blue Sun Quotes.

Some useful links:

• Pebble SDK: Resource handling
• Source of “Blue Sun Quotes watchface” at GitHub

Next time I will describe how I handled situation when loaded quote is too long to display on a text layer