Monthly Archives: July 2015

Sprite animation on original classic Pebble smartwatch

SDK 3.x for Pebble Time smartwatch offers cool and very convenient set of functions to create animation from your existing GIF or MP4 via APNG support. APNG is an obscure “Animated PNG” format (at the time of the post only Mozilla Firefox supports it) but it’s very powerful and can store animation in much more compressed format than traditional animated GIF, so Pebble chose it for a reason. So if you have a GIF, convert it to APNG with Gif2Apng (or if you have a video, convert MP4 to GIF first and then to APNG) and you’re ready to use it on Pebble Time. Just keep the size in check, since Pebble has to load entire APNG sequence in memory, try not to go overboard. The first video is showing animation from my “Vortex” watchface using this approach on Pebble Time.

But what about original classic Pebbles? Eventually they will get firmware 3.x and SDK 3.x support and with that APNG functions among other advantages, but at the time of this writing it is still hazy when this is going to happen. But where there’s a will there’s a way – you can still use your MP4/GIF source for animation it’s just a bit more tricky. Instead of dealing with a single APNG file as your resource and relying on Pebble firmware to draw the frames you will need to help it a little.

First you will need to split your source into individual frames, for example using this service. Yes, you will be dealing with individual frames, so don’t go creating a Hollywood blockbuster. But don’t fret, it’s a bit more manual work, but you won’t have to hand-crank the moving pictures all the way.
Continue reading →

EffectLayers gets (long overdue) remove function

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);
      break;
   case 1:
      effect_layer_remove_effect(effect_layer);
      effect_layer_add_effect(effect_layer, effect_rotate_90_degrees, (void *)true);
      break;
   case 2:
      effect_layer_remove_effect(effect_layer);
      effect_layer_add_effect(effect_layer, effect_mirror_vertical, NULL);
      break;
   case 3:
      effect_layer_remove_effect(effect_layer);
      break;
}
  
anim_count++;
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