Difference in BTN 'watch' behavior between Emulator and Bangle.js 1

I just noticed that there's a difference in the way BTN clicks/presses behave in the Emulator/Bangle.js 1 for the same code. In my app, I have a watch similar to the following when BTN2 is 'pressed':

setWatch(() => {
  doSomething();
}, BTN2);

My app used to function identically in both the Emulator and on my Bangle.js 1. But now, my watch function gets called twice when I click on BTN2 in the Emulator--once on mouse button up and once on mouse button down. The double call changes the behavior of my app in the Emulator but surprisingly the same code works as it always has on my Bangle.js 1 (2v15), suggesting the function is only being invoked once on my Bangle.js 1.

To make my app work the same in the Emulator and on my Bangle (an 'xdotool' script I made to capture app screenshots using the Emulator broke because of this change) I changed the code to the following:

setWatch(() => {
  doSomething();
}, BTN2, { edge: 'falling' });

So it's not really a problem at all but I thought I'd mention it in case anybody else gets puzzled by this as well. I suspect this change may have occurred in 2v13 ("Bangle.js1: setUI button handlers now work on falling edge") and I just didn't notice it until now.

Happy Bangle-ing/Developing Everyone!

Ahh, thanks! That's really interesting. However I just tried this:

setWatch(print, BTN2)
// and even...
setWatch(print, BTN2, {repeat:true})

in the emulator and I don't see the behaviour... print only gets called when the button is pressed.

Can you reproduce it with a completely self-contained bit of code, after a reset() so nothing else is running?

Sorry, I should have provided a complete test case to reproduce the behavior but didn't think it was that big of a deal since I found an easy workaround. But since you kindly already went ahead and investigated it, here is code to demonstrate the issue in the Emulator.

After the menu appears, please click on BTN2 to show the 'data' screen. On the 'data' screen, clicking on BTN2 used to return to the menu, but as you'll see, the menu appears on the mouse button down, and when the mouse button is released, the 'data' screen appears again.

Hmm... I had naively assumed this was because the watch function was being called on the mouse up and mouse down events, but as you've verified and I see now, there's actually something more going on. Could it be that showMenu is responding to the mouse up event?

function showMainMenu() {
    E.showMenu();
    
    let menu = {
        '' : {
            'title' : '-- Menu --',
        },
        'Show Data' : function() {
            showDataScreen();
        },
        '< Back' : function() {
//        '<Back' : function() { // hide red back button
        },
    };

    E.showMenu(menu);

}

function showDataScreen() {
    E.showMenu();
    
    setWatch(() => {
        g.clear();
        showMainMenu();
    }, BTN2);
//    }, BTN2, {edge:'falling'});

    displayData();
}

function displayData() {
    g.clear();
    g.setFont("Vector", 30);
    let title = 'Data';
    g.drawString(title,
                 120 - (g.stringWidth(title) / 2), 40);
}

showMainMenu();

Oh, I just noticed and remembered something that may be related! With 2v15 on my Bangle 1, there have been times when a BTN2 press on a showMenu doesn't select a menu item. Pressing BTN2 again works as expected so I figured it was a minor hardware issue (though I've never experienced this behavior before 2v15). But the ignored BTN2 press just happened again when I ran the above code on my Bangle 1 and resulted in the same behavior happening in the Emulator. And strangely, I uploaded and ran the code again on my Bangle 1, and this time showMenu responded to the first BTN2 press and the code worked as intended (i.e., pressing BTN2 while on the 'data' screen didn't briefly show the menu and unexpectedly return to the 'data' screen).

Well suddenly this got a lot more interesting! Thank you in advance for looking into this and I hope you'll be able to reproduce and resolve the inconsistent behavior on the Bangle 1.

Thanks! Well, in this case it seems to be kind-of expected...

Could it be that showMenu is responding to the mouse up event?

Yes, that's the intention - because otherwise we were getting in this state where something would be done when the button was pressed, and then that new code would react to the 'up' event.

So instead we generally react on the 'up' event because then we know we're not going to be getting any other button events.

BTN2 press on a showMenu doesn't select a menu item

Is it not just that the Bangle had locked itself between times (or just as you're pressing the button)? If the bangle is locked, the first button press goes to unlocking it and not to create an actual button event?

Great, thank you very much for the clarification! At the risk of complicating the first "Bangle.js Development" tutorial too much, it would have been helpful if "'edge' : 'falling'" were included in the setWatch() example.

Indeed, it must have been the case that my Bangle locked just before I pressed the button. I guess it might be helpful to display a 'locked' indicator in the widget area on the Bangle 1 as on the Bangle 2. I had assumed that on the Bangle 1, the screen was unlocked whenever the display was on.

Finally, on my Bangle 1 I am able to observe the same behavior seen in the Emulator with the above code if I press, briefly hold, then release the button on the 'data' screen. But if I press and release the button quickly on my Bangle 1, showMenu evidently doesn't get the button 'up' event as the menu remains active, waiting for a selection.

Thank you very much for looking into this, hopefully the info in this post will turn out to be useful to other Bangle developers as well.

I had assumed that on the Bangle 1, the screen was unlocked whenever the display was on.

Yes, that actually be the case I think... It's possible to configure it differently, but not using the normal settings app :)