Image overlay test. Why won't this work?

Watchapp/Face Developers Corner
1

So I’ve loaded several images of hour hands and minute hands with transparent backgrounds and I’ve loaded the face art.

I say write the face, write an hour hand, write a minute hand. This fails with the error:

[VERBOSE] xsHost.c:155: Found mod "pebble.moddable.tech"
[ERROR] gbitmap_png.c:110: PNG memory allocation failed
[ERROR] gbitmap_png.c:160: Failed to load PNG
[ERROR] xsPlatform.c:209: Error: not found
 at ()
 at draw ()
 at ()
[ERROR] xsPlatform.c:217: fxAbort unhandled exception: not found

The code I’m using is this:

    let background = new Poco.PebbleBitmap(10); 
    render.drawBitmap(background, 0, 0);
    let hourhand = new Poco.PebbleBitmap(1); 
    render.drawBitmap(hourhand, 0, 0);
    let minutehand = new Poco.PebbleBitmap(7); 
    render.drawBitmap(minutehand, 0, 0);

If I comment out the hourhand lines, the minute hand will draw over the face.

If I comment out the minutehand lines, the hour will draw over the face.

Now this is not how I am used to making a watch face. I’m used to saying, write face, write rotated image of hour hand, and write rotated image of minute hand. Using 72 images of hour hands and minute hands is a silly way to try this, but I have yet to find an example of the “rotate this image and write it” for CloudPebble and Javascript.

This is what the face looks like with something in the date window.

Screenshot_20260607_000339
Screenshot_20260607_000339273×268 10.2 KB

2

Now I was able to do a face with just the hour and a text value for minutes. This face has 12 images for the face.

Screenshot_20260607_000918
Screenshot_20260607_000918268×271 12.1 KB

3

The Poco renderer that Alloy uses does not natively support rotating bitmaps at arbitrary angles: Moddable | Documentation | COMMODETTO | Poco Renderer

(It is possible in C using the Pebble SDK, but this does not apply to your question: RotBitmapLayer, or graphics_draw_rotated_bitmap.)

Looks like you are running out of memory for PNGs. Might consider using a native bitmap format for the images, or converting your hands into vector format and using rotated vector drawing routines (Called Outlines in Poco: Moddable | Documentation | COMMODETTO | Outlines)

If your background is static, and it is simple ticks + numbers, consider drawing the ticks using graphics line commands and drawing the numbers using draw text commands (not individual text layers). This will save a significant amount of memory and resources, since the static full-screen PNG is eating up a lot of your memory.

4

Well that’s a good answer. There are no examples because what I was looking for is not possible. The rotation I am doing in Javascript for a web page seems dependent on CSS functions so this is not a complete surprise.

Thanks for the response.