[Load Anim] Add new animation

[RKBoss6]

Added a black and white wipe animation that uses the bg color to slide across the screen for a wipe effect

[Copilot]

Pull request overview

This pull request adds a new "Wipe B/W" loading animation that creates a sliding wipe effect across the screen using the background color. The PR also modifies the behavior when no loading image is defined, changing from erasing the .loading file to writing "NO" to it, and increments the version to 0.03.

Key Changes:

• Adds a new "Wipe B/W" animation option that uses a sliding rectangle effect
• Changes .loading file handling to write "NO" instead of erasing when no loading image exists
• Updates version from 0.02 to 0.03 and adds changelog entry

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
apps/loadanim/settings.js	Adds new "Wipe B/W" animation implementation and modifies saveBootAnim to write "NO" to .loading file instead of erasing it
apps/loadanim/metadata.json	Version bump from 0.02 to 0.03
apps/loadanim/ChangeLog	Documents the addition of the new animation and the .loading file handling change

Comments suppressed due to low confidence (1)

apps/loadanim/settings.js:90

• Avoid automated semicolon insertion (90% of all statements in the enclosing function have an explicit semicolon).

        o.setColor(g.theme.bg2)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gfwilliams]

can you fillrect from n-3 to n+7? That way we're not wasting time filling a larger area that needed

[gfwilliams]

This shouldn't work I'm afraid - you have 2 bit colour (4 shades of grey) so trying to set it to the 16 bit themes background colour will be effectively random. You're better off just setting to 0.

[gfwilliams]

I don't really get what you're trying to do here. You want to copy the contents of the screen into a black and white image and then swipe across it to make it all one colour? For me, on the normal theme, it inverts the screen colours (white->black), and then swipes over in black which is hardly visible.

It appears not to be converting the image to greyscale either, so you probably don't need a 2bpp image if that's what you're after, just 1bpp.

If you just wanted to swipe over, couldn't you do like we did for the circle one and just use a transparent colour in the image, then you could keep the background full colour until it was swiped over? If you want to keep the previous contents all you have to do is remove the g.clear call.

[gfwilliams]

I think probably what you wanted is more like this?

{
      name : "Wipe B/W",
      code : function() {
        let o = Graphics.createArrayBuffer(176,176,1);
        let n = 0, gl = g;
        o.drawImage(g.asImage(),0,0);
        o.palette = new Uint16Array([g.theme.fg, g.theme.bg]);
        o.clearRect(0,0,7,176);
        Bangle.setLCDOverlay(o,0,0,{id:"loadanim"});
        gl.flip(2);
        let id = timer.add({
          type:"EXEC", fn: () => { "ram";
            if (n>=176) { done(); return; }
            n+=10;
            o.clearRect(n-3,0,7+n,176);
            gl.flip(2);
          },
          time:120,
          interval:30,
        });
        let done = function() {
          if (id===undefined) return;
          require("timer").remove(id);
          id = undefined;
          Bangle.setLCDOverlay(undefined, {id: "loadanim"});
        };
        setTimeout(done, 0);
      }
    },

but even so, using transparency would allow colour unless you really wanted it to be made black and white

[RKBoss6]

Sorry, I am pretty inexperienced with overlays :( How would you go about setting areas transparent? In the docs it says o.transparent=1, but does not have the effect I expect...

[gfwilliams]

o.transparent=1 makes colour value 1 transparent... So:

{
      name : "Wipe B/W",
      code : function() {
        let o = Graphics.createArrayBuffer(176,176,1);
        let n = 0, gl = g;
        o.palette = new Uint16Array([g.theme.fg, g.theme.bg]);
        o.transparent=0;
        o.fillRect(0,0,7,176);
        Bangle.setLCDOverlay(o,0,0,{id:"loadanim"});
        gl.flip(2);
        let id = timer.add({
          type:"EXEC", fn: () => { "ram";
            if (n>=176) { done(); return; }
            n+=10;
            o.fillRect(n-3,0,7+n,176);
            gl.flip(2);
          },
          time:120,
          interval:30,
        });
        let done = function() {
          if (id===undefined) return;
          require("timer").remove(id);
          id = undefined;
          Bangle.setLCDOverlay(undefined, {id: "loadanim"});
        };
        setTimeout(done, 0);
      }
    },

might do it - it'll start off transparent (all 0) and then areas are filled with 1, which isn't transparent and which the palette makes g.theme.bg when it's rendered?

[RKBoss6]

Thanks! Is there a way to tell whether loading is done? the done() function only gets called when the animation finished, and it doesn't look like the timer library is connected to that load call, but if I wanted a part of that animation to play when it's done, is that currently possible?

[gfwilliams]

Is there a way to tell whether loading is done?

The done function from setTimeout(0) is called when the app has finished loading - so if you want to change the animation when it's loaded then do something on setTimeout(0) and add a setTimeout(500) or something to actually stop the animation.

edit: but actually adding something that effectively elongates the load time does feel like a bit of a step backwards

[RKBoss6]

Thanks! Now that I think of it, is there documentation on this somewhere explaining what the time: ... and interval: ... settings do as well? It would be good for other people as well who are curious in how this works...

[gfwilliams]

yes - but as with all the Espruino functions it's defined in the C source code as comments: https://github.com/espruino/Espruino/blob/master/src/jswrap_timer.c#L215-L270

When a new release (2v29) is made it'll update in the main reference pages, but until then you can build your own reference file if needed, or just look at the code comments.