Examples of use of images in Javascript/CloudPebble environment

Watchapp/Face Developers Corner
1

I’ve got two faces with just text. I’d like to add an image to at least one of them.

Can someone point me to Javascript code for CloudPebble that displays images? Ideally, one where the whole background is an image and one where images are shown along with text fields. Like, at the bottom or top of one of the text faces I put a logo somewhere.

1 Like
2

Hi!

I think images are drawn using the Poco Library. You can find it here:

Here is an example rotating through different images:

1 Like
3

I was just wondering about this myself. I did look into that gbitmap repo, but I’m left with more questions than answers.

  • How do we get the resource IDs from cloudpebble?
  • In the repo example, the images are not in the assets dir, but higher up the chain where we don’t have access in cloudpebble (/resources/images vs /src/embeddedjs/assets)
  • Resources in the repo are listed in /package.json, which we can’t access in cloudpebble, and not in /src/embeddedjs/manifest.json
  • Any examples in the actual docs are either for the C SDK or very vague when it comes to the Alloy SDK.

Any help figuring this out would be great, as I’m also trying to add a tiling background to my watchface

1 Like
4

Ah yeah, the resource IDs. I had the issue that they dont have an ID, but code:

bitmap = new Poco.PebbleBitmap(1 + index);

Uses an index as a list. So you can download the project as a ZIP and open the package.json file and look at your images to determine their place in the list.

1 Like
5

Having some trouble with this too. I tried dropping the Poco “Bitmaps” code from the guide all by itself, but the build keeps failing. I only have one image defined under resources/media in the manifest file. Changing resource ID’s to 0, 1, 2, etc in Poco.PebbleBitmap doesn’t seem to help.

I’m a little new to Java, so I hope it’s not something small and silly that I’m missing.

1 Like
6

Javascript :slight_smile:

But yeah same, I’ve tried everything from the moddable docs and it builds but fails to install, so I think the Pebble version just doesn’t have renderBMP. Following the pebble docs using Poco.PebbleBitmap fails the build entirely.

TypeError: cannot coerce undefined to object
2 Likes
7

Right, yes, JS :sweat_smile: But yeah that’s the same error I get.

1 Like
8

well if I can’t load in a real image of a seigaiha pattern… at least I know I can make one in code

import Poco from “commodetto/Poco”;

const render = new Poco(screen);

const black = render.makeColor(0, 0, 0);
const white = render.makeColor(255, 255, 255);
const blue = render.makeColor(0, 45, 75);

function drawCircle(r, x, y) {
  r.drawCircle(blue, x, y, 30, -60, 60);
  r.drawCircle(white, x, y, 28, -60, 60);
  r.drawCircle(blue, x, y, 24, -60, 60);
  r.drawCircle(white, x, y, 22, -60, 60);
  r.drawCircle(blue, x, y, 18, -60, 60);
  r.drawCircle(white, x, y, 16, -60, 60);
  r.drawCircle(blue, x, y, 12, -60, 60);
  r.drawCircle(white, x, y, 10, -60, 60);
}

render.begin(0, 0, render.width, render.height);

let x = 0;
let y = 15;
while (y < render.height + 31) {
  drawCircle(render, x, y);
  if (x > render.width) {
    y += 15
    if (y % 2 === 0) {
      x = 30
    } else {
      x = 0
    }
  } else {
    x += 60
  }
}

render.end();

Screenshot_20260507_182813
Screenshot_20260507_182813332×293 7.03 KB

Proooobably just a little too heavy to render on every screen update though :laughing:

2 Likes
9

Clever! I’m just trying to draw stars, so you gave me some inspiration to do something similar. On the plus side, it should be a random constellation on every refresh.

image
image283×290 6.97 KB

2 Likes
10

take a look here:

2 Likes
11

Thank you very much! That worked for me! I would have never clicked on that button.

1 Like
12

That sound well within my abilities. I shall give it a try.

1 Like