Resource loading issue: Display stays blank when using drawBitmap in Alloy js

Watchapp/Face Developers Corner
1

Hi everyone,

I’m trying to add a background image to my watchface using Alloy (Moddable-based) for the new Pebble, but my screen stays completely blank as soon as I try to load/draw a resource.

Setup:

  • Image: assets/Tree.png (260x260, 64 colors)

  • SDK: Alloy js / Poco renderer

My manifest.json:

JSON

"resources": {
  "Tree-img": [
    {
      "source": "./assets/Tree",
      "format": "clut64"
    }
  ]
}

My main.js:

JavaScript

import Resource from "Resource";
import Poco from "commodetto/Poco";
const render = new Poco(screen);
const background = new Resource("Tree-img.bmp"); // I also tried "Tree-img"

function draw(event) {
  render.begin();
  render.drawBitmap(background, 0, 0);
  render.end();
}

Problem: The screen remains blank. If I comment out the Resource and drawBitmap lines, my text and other elements render perfectly. It seems like the script crashes or the resource isn’t found/formatted correctly.

Has anyone successfully implemented a fullscreen background bitmap recently? Am I missing a naming convention or a specific format in the manifest?

Thanks for your help, Axel.

1 Like
2

Hi Axel,

I reached out to the Moddable developers about this, and they have a pretty solid idea of what might be going wrong here.

They noted that the blank screen is likely happening because the app is throwing an exception - most likely because it simply can’t find the resource due to an incorrect path. When an exception like this happens and isn’t caught, it halts the script before the screen can render anything else.

Here are their recommendations for tracking this down:

* Check your logs: Look closely at your console output when launching the app to see if an error message is already being printed.

* Add a try/catch block: If there isn’t an obvious error in the standard logs, wrap your resource loading in a try/catch block to force the app to log the exact exception.

You can temporarily update your main.js to look like this:

import Resource from "Resource";
import Poco from "commodetto/Poco";
const render = new Poco(screen);
let background;

try {
  background = new Resource("Tree-img.bmp"); // or "Tree-img"
} catch (e) {
  console.log("new Resource failed: " + e);
}

function draw(event) {
  render.begin();
  if (background) {
    render.drawBitmap(background, 0, 0);
  }
  render.end();
}

Give that a shot and see what prints out in the console!

2 Likes