Control or at least visibility on image numbers

[tudza]

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 -

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.

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:

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.

[tudza]

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.

[tudza]

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.

[tudza]

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.

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?

[Flynn]

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

[tudza]

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.

// 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);

[tudza]

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.

[NoahK]

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

[tudza]

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

[tudza]

Like this example:

Poco Graphics

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();