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

[Axel]

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.

[jpx]

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!

[Axel]

I finally found the solution, the trick is to first click here to add the image:

In the code:

import Poco from “commodetto/Poco”;
…
// load first bitmap of the ressources
let background = new Poco.PebbleBitmap(1);
…
// draw background picture
render.begin();
render.drawBitmap(background, 0, 0);

That’s it, bingo

[CapnAndyman]

Excellent! This also worked for me. The background image is pulling in now. I would never have thought to click on that button.

Many thanks!

[tudza]

@Axel

let background = new Poco.PebbleBitmap(1);

Did the import incorrectly twice and got a flashing Pebble with sun icon in the emulator.

Did it by clicking where indicated and it works.

[tudza]

Well, the artwork for the background shows up as expected, but it messes up the text rendering the time. One value overwrites the next without removing the previous.

[tudza]

Damn, without the artwork lines it still doubles the letters. It did not before this.

Looks like that was because I render the background all white and I removed that when I put in the artwork lines.

Yep. I backed up at started from the beginning. This time I draw the white background and then the image I imported. The issue was probably because my image had a transparent background to start with, so the digits didn’t get over written for the next update without drawing the white first.

All good now. Thanks for the information.