Changing the background image depending on the time

[Sugarfish]

Fitbit SDK noob here. I have a simple clock face that I've written with a bunch of custom functionality for me. It's based on a free clock face that I liked, but I wanted to include my own photos as the background. What I have so far is a simple switcher that loads a different image from an array based on the time. It's supposed to switch every hour.

This simple code calls util.getImage to pull an image randomly from an array that is appropriate for the time of day (sunrise, day, dusk, etc.)

if(mins != 0 && changeImage == false) {
    changeImage = true;
}
if(mins == 0 && changeImage) {
    bg.href = `images/${util.getImage(hours)}`;
    changeImage = false;
}

This runs just fine for the first four or so images, and then it gets stuck on one image. I've refactored the code a number of times but nothing seems to be amiss. I'm wondering if there is a performance issue and maybe I'm using too many images or they need to be optimized to death.

Does anyone have a clue what the issue is, or perhaps I'm going about this the wrong way?

[SunsetRunner]

I wonder what your

bg.href = `images/${util.getImage(hours)}`;

actually returns.

Did you log it?

I would probably just refresh the href inside my onTick to full hour

(mins === 0 && secs === 0)

and name the images 12.png, 1.png...

So href = `yourPath/${hour}.png`

[SunsetRunner]

Oh... and make sure your images have the size you want to display. The fw doesn't like resizing images.

[Gondwana]

What BarbWire said.

In addition, there can be risks to such code within ontick because ontick isn't called when the display isn't on. Could it be that?

[SunsetRunner]

Oh of course, Gondwana! 🤦🏼‍:female_sign:

Perhaps a global var for lastSwitched and then check for that OR full hour in onTick

[Gondwana · Accepted solution]

An alternative: whenever the image is changed, calculate the time at which it's due to be replaced.

Then, ontick can compare the current time with the replace time; if the current time is ahead, replace the image as above.

This should work even if the clockface isn't displayed for days.

[Sugarfish]

I think you’re onto something here. When I was simply checking for mins == 0 I noticed that the image would change each time I turned the display on. I’ll have to do something like your suggestion in your other comment.

[Sugarfish]

So, it turns out that your assertion was correct. The clock.ontick function does not run when the display is off. One caveat is that it seems to run for at least four hours when the clock face is updated or switched from another clock face. Then it goes into hibernation and wakes when the display is turned on. The solution for me was to simply alter the condition around the util.getImage(hours) call that was originally trying to check for 0 mins. A global is used to ensure that the time is at least 15 minutes since the last image change. That's just my preference but wasn't necessary. The image has been changing as expected for about 8 hours now. It's fixed.