• Home
  • About
  • Resume

Search: EffectLayer

EffectLayers gets (long overdue) remove function

By , 07/09/2015 4:50 PM

EffectLayer for Pebble Smartwatch is a library that allows you to easily add special effects to your watchfaces or watch apps. You can even add multiple effects (up to 4 by default) to a single layer. But up until now you couldn’t easily remove added effect.

This feature could be useful when you need to add/remove an effect on the fly. For example user can choose to turn off or on color inversion from watchface config, so instead of creating/showing/destroying/hiding entire layer you can simple add/remove inversion effect.

Another use case is where you need to swap effects, for example remove 90-degree rotation clockwise and add 90-degree rotation counter-clockwise.

Well now you can, the library now has effect_layer_remove_effect function. What it does is simple removes last added effect. The effect showing in the demo above is achieved by this block of code:

switch (anim_count) {
   case 0:
      effect_layer_add_effect(effect_layer, effect_invert, NULL);
   case 1:
      effect_layer_add_effect(effect_layer, effect_rotate_90_degrees, (void *)true);
   case 2:
      effect_layer_add_effect(effect_layer, effect_mirror_vertical, NULL);
   case 3:
if (anim_count == 4)  anim_count = 0;

It is called every time animation movement is initiated for the layer. Layer is moved 4 times in this demo:

  • On 1st call – inversion effect is added to the layer
  • On 2nd call – last added effect (inversion) is removed and 90-degree rotation added
  • On 3rd call – 90-degree rotation removed and vertical mirror effect is added
  • On 4th call – effect is removed so now layer has no effects.

Combined the chain produced the effect shown in the animation above.

Ideally library should have “insert” and “remove_at” function to be able to insert and remove effects from arbitrary index (and not only the end of effect chain). Stay tuned.

Useful Links

Mask Effect for EffectLayer for Pebble

By , 04/15/2015 9:42 AM

I’ve written before about EffectLayer library for Pebble smartwatch I’ve been working on. The idea is – user places the layer over screen and that layer applies an effect to screen content.

I’ve started with a few basic effects (invert, mirror) but since then several more developers joined the project adding more cool features. Ron added 90┬░ rotation, zoom and lens effect. Gregoire Sage added cool blur effect. LeFauve not only added FPS effect, but also optimized the library to run the effects in a very efficient way: now effect can be defined as a function (even user defined function!) and that function passed as a parameter to effect_layer_add_effect method along with parameters for that effect.

I, for my part, contributed “mask” effect. What it does is essentially lets you show parts of background image thru user defined mask, creating a feel of transparency. Continue reading 'Mask Effect for EffectLayer for Pebble'»

Fire on High or Framebuffer in Rocky.js

By , 02/11/2016 10:23 PM

First things first. DISCLAMER: Everything described here is a hack upon a crude hack and most likely, barring a divine intervention, won’t work in final product. And I apologize in advance to Pebble dev team if my attempts at “hacking” seem silly. Now to business. Pebble SDK offers very cool framebuffer API that allows developers to address display memory of the watch directly. This makes possible creation of many cool special effects (matter of fact EffectLayer library uses framebuffer extensively).
Rocky.js is JavaScript incarnation of Pebble SDK and it made me wonder whether it offers framebuffer access. Turned out it is hidden, but it’s there. At least at the latest commit at the time of this article it is. If you take a look at source file html-bindings.js you will see that binding function looks something like this:

Rocky.bindCanvas = function(canvas, options) {
  var framebufferPixels = new Uint8Array(module.HEAPU8.buffer,
                                         canvasW * canvasH);


  var binding = {



  return binding;

Continue reading 'Fire on High or Framebuffer in Rocky.js'»

Solved: Issue with Pebble framebuffer after notification is dismissed

By , 01/08/2016 1:15 PM

Effect Layer Issue I’ve encountered a weird issue while working with EffectLayer Library (a visual effect library for Pebble smartwatch). In this particular watchface called Clean & Smart I used “invert” effect which inverts colors of the watchface should the user choose that option in settings. It was working fine when option changed when watchface was loaded/unload and behaved weirdly only in one particular scenario: when you would receive a notification (email, text etc.) and then dismiss it. Upon coming back from notification to watchface invert effect would only partially cover the watchface (as seen on the screenshot).
I don’t know exactly what was happening, but had a theory. Continue reading 'Solved: Issue with Pebble framebuffer after notification is dismissed'»

Pebble NYC Meetup

By , 06/26/2015 9:08 AM

Pebble had a first NYC developer meetup on June 24th 2015 and yours truly made a presentation about EffectLayer library there. Enjoy!

Universal access to Pebble framebuffer on Basalt and Aplite via coordinates

By , 04/04/2015 11:27 PM

Rotate Effect on Aplite In my previous post I described how you can access framebuffer of Pebble screen via familiar X,Y coordinates. To reiterate: you capture framebuffer as a bitmap, and access bitmap as 2-dimentional matrix:

#define WINDOW_WIDTH 144
GBitmap *fb = graphics_capture_frame_buffer(ctx);
uint8_t (*fb_matrix)[WINDOW_WIDTH] = (uint8_t (*)[WINDOW_WIDTH]) gbitmap_get_data(fb);

After that you can access specific pixel on the screen via coordinates, e.g. fb_matrix[120][60] will represent pixel and coordinates Y = 120, X = 60

This works fine on Pebble Time (Basalt platform) where every pixel represented by a byte. But what about classic Pebble (I think this term is becoming quite popular, but to avoid confusion I will call it Aplite platform). On Aplite every byte in the framebuffer represent 8 pixels and the above approach doesn’t work.

Fortunately there’s a universal solution.
Continue reading 'Universal access to Pebble framebuffer on Basalt and Aplite via coordinates'»

Simplify access to Framebuffer on Pebble Time

By , 04/03/2015 4:43 PM

Pebble smartwatch SDK offers a very extensive graphics library. And if that is not enough – you can access graphics memory directly for pixel-precision manipulation. For example this code

GBitmap *fb = graphics_capture_frame_buffer_format(ctx, GBitmapFormat8Bit);
uint8_t *fb_data = gbitmap_get_data(fb);

captures Pebble screen as a bitmap and consequently as raw uint8_t data you can manipulate. But the problem with this approach – you access the data as 1-dimensional array, which is very inconvinient when you’re dealing with 2-dimensional screen.

Fortunately due to magic of casting this problem can be addressed. Consider following addition to previous code:

#define WINDOW_WIDTH 144  
uint8_t (*fb_matrix)[WINDOW_WIDTH] = (uint8_t (*)[WINDOW_WIDTH]) fb_data;

Using this, you can access screen data via familiar coordinates. For example if you need to set pixel at coordinates Y=120, X=60 to black color, all you have to do is

fb_matrix[120][60] = 0;

And now we can rewrite InverterLayer from previous post to a simpler form. First in layer callback we create bitmap matrix and call effect function:

static void effect_layer_update_proc(Layer *me, GContext* ctx) {
  // getting layer coordinates
  GRect layer_frame = layer_get_frame(me);  
  //capturing framebuffer bitmap into 2-d matix
  GBitmap *fb = graphics_capture_frame_buffer_format(ctx, GBitmapFormat8Bit);
  uint8_t (*fb_matrix)[WINDOW_WIDTH] = (uint8_t (*)[WINDOW_WIDTH]) gbitmap_get_data(fb);
  //callig effect function
  effect_invert(fb_matrix, layer_frame);

  //releasing framebuffer
  graphics_release_frame_buffer(ctx, fb);

And actual inverting function becomes much simpler as well, simple loop thru layer pixel, inverting colors:

// position: x,y,h,w of the layer  
void effect_invert(uint8_t (*fb_a)[WINDOW_WIDTH], GRect position) {
  for (int y = 0; y < position.size.h; y++)
     for (int x = 0; x < position.size.w; x++)
        fb_a[y + position.origin.y][x + position.origin.x] = ~fb_a[y + position.origin.y][x + position.origin.x];

You can see this approach in EffectLayer library.

InverterLayer (and other effects) for Pebble Time

By , 04/03/2015 11:48 AM

Inverter EffectMirror Effect
InverterLayer is a pretty cool feature of Pebble smartwath SDK, its simple purpose to invert colors of everything it’s placed over (black becomes white and vice versa).

Unfortunately it no longer works in SDK 3 (Basalt, Pebble Time) and will be depreciated. Fortunately it’s pretty straightforward to create your own InverterLayer. Continue reading 'InverterLayer (and other effects) for Pebble Time'»

Panorama Theme by Themocracy