• Home
  • About
  • Resume

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'»

Cancel long running SQL Command in ASP.NET WebForm application

By , 04/14/2015 3:03 PM

It’s an all too common scenario when your ASP.NET page takes too long to load and the culprit is slow, long running SQL query. It shouldn’t come to this, you should optimize your DB stuff to minimize delays, but if you’re trying to decode feline genome or find alien live in the neighboring galaxies – that’s unavoidable. So the page is running and at some point you decide enough is enough and decide you need to cancel it. But you want to do it gracefully, for example slow page is in an IFRAME and you want to remain in the parent page and you don’t want to close/reload the whole thing.

There’s a way. The idea is, every time you create an SqlCommand – you add it to static (shared in VB.NET) list. If command runs successfully – you remove it from the list. But if it takes too long – you can issue an AJAX call from client page to cancel the command stored in that list.

Thanks Arsalan Tamiz for posting this solution to my question on StackOverflow. His demo project was in C# (you can download it from the above link). but since most of my projects are in VB.NET – I did a conversion with some adjustments.
Continue reading 'Cancel long running SQL Command in ASP.NET WebForm application'»

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'»

Original Pebbles are getting TimeLine! (with special offers)

By , 04/01/2015 12:01 AM

Original Pebble Steel with TimeLine Pebble Corporation is very well know for its visionary ideas. Ideas that kept its incredible smartwatches Pebble and Pebble Steel relevant on the market years after their release. They key to such longevity is regular software updates that bring new features to existing hardware. Multilanguage support, actionable notifications and many other fetures delighted Pebble users to no end.

This worked amazingly well so far. But now Pebble is finally on the verge of releasing new hardware as well. Color Pebble Time is scheduled (as of this writing) to be released in May and a shinier version – Pebble Time Steel is to be shipped in July. Both are getting brand new OS with time-oriented Timeline interface that will streamline the way you interact with the watch.

But what about users of existing Pebbles? Are they doomed to use obsolete devices? Continue reading 'Original Pebbles are getting TimeLine! (with special offers)'»

SliderLayer for Pebble

By , 03/27/2015 4:59 PM

Pebble SDK provides very cool features for programming watchapps and watchfaces. And combining them can yield very useful results. For example “out of the box” Pebble doesn’t have a slider layer – a layer that would slide in over existing information to display new one. But we have all the basic ingredients to create one:

This example uses BitmapLayer to display images, but it just as well maybe text or other items.
Continue reading 'SliderLayer for Pebble'»

Solution: Live Writer Error “Invalid Response Document” while connecting to WordPress

By , 03/23/2015 1:02 PM

If you’re trying to connect to your WordPress blog from Windows Live Writer desktop client, you may get this dreaded error message:

Invalid Server Response – The response to the blogger.getUsersBlogs method received from the blog server was invalid: Invalid response document returned from XmlRpc Server

Invalid Response

This means that instead of expected XML response your blog sent back plain html or text message which is most likely some kind of error message. To see actual message you can either trace request response in an HTTP sniffer like Fiddler or simple enter endpoint url for your blog remote access (e.g. http://your.site.com/wordpress/xmlrpc.php) into your browser address bar.
Continue reading 'Solution: Live Writer Error “Invalid Response Document” while connecting to WordPress'»

Pebble Time: Draw transparent text over color bitmap background

By , 03/20/2015 4:10 PM

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:

Pebble: How to autoscroll large text

By , 02/17/2015 8:17 PM

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 'Pebble: How to autoscroll large text'»

Panorama Theme by Themocracy