# Control or at least visibility on image numbers

**URL:** <https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823>\
**Category:** Watchapp/Face Developers Corner\
**Created:** [June 3, 2026, 11:35am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823 "2026-06-03T11:35:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 3, 2026, 11:35am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/1 "2026-06-03T11:35:52Z")

</div>

This is in CloudPebble using Javascript.

Again with not knowing what number to use to call a given image.

I did what I did last time that seemed to work. Delete all the images under resources and loaded them in order. I want to call an image for a day by the returned value of now.getDay() which should be between 0 and 6. First tests, fail.

I loaded my images in from Sunday to Saturday again, originally in the CloudPebble editor it listed these images in the order I loaded them. Look down when a test failed and find -

 ![Day List](https://canada1.discourse-cdn.com/flex033/uploads/pebble1/original/1X/5ee92296917a1ec6a3166a54abc9063ab2e6a7cf.png)

No idea why the system decided to re-order them. I tried again and still no luck. So, I walked through the images by setting the day to 0-whatever to see what happened. Fails, and then images, but in the wrong order. Finally, I decided to take what I found and just live with it. This required a case statement to translate the value of now.getDay() to the number I needed to call up the proper image.

```auto
let dayCode = 0;

switch(day) {
  case 0:
    dayCode = 4;
    break;  
  case 1:
    dayCode = 6;
    break;
  case 2:
    dayCode = 7;
    break;
  case 3:
    dayCode = 1;
    break;       
  case 4:
    dayCode = 2;
    break;
  case 5:
    dayCode = 3;
    break;
  case 6:
    dayCode = 5;
    break;   
  default:
    dayCode = 1
} 

```

Well isn’t that a mess. But, a mess that works…for now.

It doesn’t help that all through this the emulator run throws up these:

 ![Emulator Error](https://canada1.discourse-cdn.com/flex033/uploads/pebble1/original/1X/b86b27657ec024befc1c89f81a5a92acd989347d.png)

Sometimes for a real error, sometimes…well I don’t know how many fail conditions that don’t depend on my own errors there might be.

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 4, 2026, 1:52am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/2 "2026-06-04T01:52:34Z")

</div>

OK, there is at least visibility. I found when I was making a new version of this that if I mouse over the names of the images in the Resources window it gives you the identifier it was assigned.

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 4, 2026, 1:56am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/3 "2026-06-04T01:56:43Z")

</div>

Actually, no, that’s the identifier I assigned when uploading the image file. I was trying to see if that helped, but obviously it doesn’t. I identify an image as “1” but that doesn’t change what I have to put in the render options to call it up and display it so far as I can tell.

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 5, 2026, 2:07pm UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/4 "2026-06-05T14:07:29Z")

</div>

Seriously. I made image 1, told the code to render image 1, it did.

Did 2, 3, 4. The same.

Added image 5 and now I have to call image 2 to get image 1 and calling image 5 yields the image for 4.

```auto
const hours = 2;
    
let background = new Poco.PebbleBitmap(hours); 

This is just really silly. In the Alloy/Javascript environment it doesn't look like I have any control over this.

Not sure how I managed to get another face such that I just needed to call the face by hour number 1-12. So far the only tool I have when this gets messed up somehow is to use a case statement. That's not bad, but I have at least one watch face example of how it ought to work.

Any suggestions?

```

---

<div class="post-metadata">

**Author:** ![Flynn](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/flynn/32/73_2.png) [@Flynn](https://forum.repebble.com/u/Flynn)\
**Post date:** [June 5, 2026, 3:24pm UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/5 "2026-06-05T15:24:21Z")

</div>

Have you submitted a bug report on GitHub? Might be useful so there’s more visibility to the devs

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 5, 2026, 3:39pm UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/6 "2026-06-05T15:39:23Z")

</div>

Worth a try. Even if I’m doing something wrong they might be able to explain how to avoid it in the future.

I decided to try once more, so I deleted all the images I had loaded and loaded them again in order. Mostly correct, but still I need a case statement because two are still not the the order expected.

 ![Screenshot 2026-06-05 at 11-37-30 CloudPebble – Snoopy Time Round](https://canada1.discourse-cdn.com/flex033/uploads/pebble1/original/1X/7f884064d24b4f96432bbf48066e1de17793370e.png)

```auto
// Get hours and set hour art code
const hours = (now.getHours() % 12 || 12);

let hourCode = 1;

switch(hours) {
  case 1:
    hourCode = 1;
    break;  
  case 2:
    hourCode = 3;
    break;
  case 3:
    hourCode = 2;
    break;
  case 4:
    hourCode = 4;
    break;       
  case 5:
    hourCode = 5;
    break;
  case 6:
    hourCode = 6;
    break;
  case 7:
    hourCode = 7;
    break;  
  case 8:
    hourCode = 8;
   break;
  case 9:
    hourCode = 9;
    break;
  case 10:
    hourCode = 10;
    break;       
  case 11:
    hourCode = 11;
    break;
  case 12:
    hourCode = 12;
    break;      
  default:
    hourCode = 1;
}  
    
let background = new Poco.PebbleBitmap(hourCode); 
render.drawBitmap(background, 0, 0);

```

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 12, 2026, 2:56am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/7 "2026-06-12T02:56:09Z")

</div>

OK, Github guy gave me a way to see the order of images in a project. Export a ZIP file and examine the package.json file in there to see the order images are in.

I tried editing the order in that file and putting it back in the ZIP file and uploading it to CloudPebble as a new project. That edit appears to have put the images in the order desired.

At the very least, if that trick doesn’t work all the time I can at least see the image order when creating my case statement ( that I’m trying to avoid needing ) rather than putting in values and seeing what images come up for all images. That’s so far a maximum of 12.

---

<div class="post-metadata">

**Author:** ![NoahK](https://avatars.discourse-cdn.com/v4/letter/n/bc79bd/32.png) [@NoahK](https://forum.repebble.com/u/NoahK)\
**Post date:** [June 12, 2026, 2:27pm UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/8 "2026-06-12T14:27:06Z")

</div>

In all the examples JS projects that I’ve looked at, the image resources are called out by filename:

texture: new Texture(``dial.png``), width:screen.width, height:screen.height

Take a look at the minato example/template when making a new Alloy project in CloudPebble

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 12, 2026, 8:45pm UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/9 "2026-06-12T20:45:28Z")

</div>

Interesting. I started at the Your First Watchface and somehow arrived at calling them up by number order in a list.

---

<div class="post-metadata">

**Author:** ![tudza](https://yyz1.discourse-cdn.com/flex033/user_avatar/forum.repebble.com/tudza/32/431_2.png) [@tudza](https://forum.repebble.com/u/tudza)\
**Post date:** [June 13, 2026, 3:58am UTC](https://forum.repebble.com/t/control-or-at-least-visibility-on-image-numbers/823/10 "2026-06-13T03:58:18Z")

</div>

Like this example:

> **[Poco Graphics](https://developer.repebble.com/guides/alloy/poco-guide/)**
>
> Low-level graphics rendering with the Poco framework.

```auto
import Poco from "commodetto/Poco";

const render = new Poco(screen);

// Load bitmap by resource ID
const bitmap = new Poco.PebbleBitmap(2);

render.begin();
    // Center the bitmap
    const x = (render.width - bitmap.width) / 2;
    const y = (render.height - bitmap.height) / 2;
    render.drawBitmap(bitmap, x, y);
render.end();

```