[widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen #3680

cbkerr · 2024-12-01T20:41:39Z

Fixes bug with widclkinfo interacting with widget_utils.

Expose a ensure_blur in clock_info that widclkinfo can call. Handles animation with events.

The relevant versions are in my app loader: https://cbkerr.github.io/BangleApps/

I've been testing with the watchface Andark.

Symptoms

Load widget_utils and widclkinfo.

The Clock Info of widclkinfo stays focused after the widgets autohide, so the selected clock info (options.menuA, options.menuB) changes when swiping the screen (like when using menus).
When the widgets are hidden, tapping in the top left corner focuses the clock info inside widclkinfo.
Swiping up to hide the widget bar also changes the selected Clock Info, and if the hidden widclkinfo is focused, swiping down to show widgets also changes the selected clock info.

Minimal reproduction of bug

With useful debug info printed

// development
WIDGETS = [];
widget_utils = require("widget_utils");

//(() => { // don't load if a clock_info was already loaded
// Load the clock infos
let clockInfoItems = require("clock_info").load();
// Add the
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
  app: "widclkinfo",
  // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
  x: 0,
  y: 0,
  w: 72,
  h: 24,
  // You can add other information here you want to be passed into 'options' in 'draw'
  // This function draws the info
  draw: (itm, info, options) => {
    // itm: the item containing name/hasRange/etc
    // info: data returned from itm.get() containing text/img/etc
    // options: options passed into addInteractive
    clockInfoInfo = info;
    if (WIDGETS["clkinfo"])
      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
  }
});
let clockInfoInfo; // when clockInfoMenu.draw is called we set this up

// The actual widget we're displaying
WIDGETS["clkinfo"] = {
  area: "tl",
  width: clockInfoMenu.w,
  draw: function(e) {
    clockInfoMenu.x = e.x;
    clockInfoMenu.y = e.y;
    var o = clockInfoMenu;
    // Clear the background
    g.reset();
    // indicate focus - make background reddish
    //if (clockInfoMenu.focus) g.setBgColor(g.blendColor(g.theme.bg, "#f00", 0.25));
    if (clockInfoMenu.focus) g.setColor("#f00");
    g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);
    if (clockInfoInfo) {
      var x = o.x;
      if (clockInfoInfo.img) {
        g.drawImage(clockInfoInfo.img, x, o.y); // draw the image
        x += 24;
      }
      var availableWidth = o.x + clockInfoMenu.w - (x + 2);
      g.setFont("6x8:2").setFontAlign(-1, 0);
      if (g.stringWidth(clockInfoInfo.text) > availableWidth)
        g.setFont("6x8:1x2");
      g.drawString(clockInfoInfo.text, x + 2, o.y + 12); // draw the text
    }
  }
};
//})();

Bangle.setUI('clock');
g.clear();
Bangle.loadWidgets();
require("widget_utils").swipeOn();

setInterval(() => {
  g.clear(Bangle.appRect);
  g.setFont("6x8");

  g.drawString("widget_utils.offset: " + widget_utils.offset, 4, 40);
  g.drawString("Bangle.CLKINFO_FOCUS: " + Bangle.CLKINFO_FOCUS, 4, 50);
  g.drawString("clockInfoMenu.y: " + clockInfoMenu.y, 4, 70);
  g.drawString("clockInfoMenu.focus: " + clockInfoMenu.focus, 4, 60);
  g.drawString("menuA: " + clockInfoMenu.menuA, 4, 80);
  g.drawString("menuB: " + clockInfoMenu.menuB, 4, 90);
  //g.drawString(clock_info.clockInfos, 4, 90);
  // g.drawString("cIM.x: " + clockInfoMenu.x, 4, 100);
  //g.drawString("items: " + clockInfoItems, 4, 90)
}, 500);

Expected behavior

When widgets autohide, the Clock Info in widclkinfo blurs itself just like tapping outside of its region.
Tapping only selects the Clock Info in widclkinfo if it is visible. (when widget_utils.offset == 0)

To test these fixes

Upload to storage the slightly tweaked clock_info to clock_info
Run this from web IDE:

Code to upload to RAM from Web IDE that writes custom widget_utils to storage

const clock_info = require("clock_info"); // only slight modification to expose force_blur

require("Storage").write("mywidut", `
exports.offset = 0;
exports.hide = function() {
  exports.cleanup();
  if (!global.WIDGETS) return;
  g.reset(); // reset colors
  for (var w of global.WIDGETS) {
    if (w._draw) return; // already hidden
    w._draw = w.draw;
    w.draw = () => {};
    w._area = w.area;
    w.area = "";
    if (w.x!=undefined) g.clearRect(w.x,w.y,w.x+w.width-1,w.y+23);
  }
};

/// Show any hidden widgets
exports.show = function() {
  exports.cleanup();
  if (!global.WIDGETS) return;
  for (var w of global.WIDGETS) {
    if (!w._draw) return; // not hidden
    w.draw = w._draw;
    w.area = w._area;
    delete w._draw;
    delete w._area;
    w.draw(w);
  }
};

/// Remove anything not needed if the overlay was removed
exports.cleanupOverlay = function() {
  exports.offset = -24;
  Bangle.setLCDOverlay(undefined, {id: "widget_utils"});
  delete exports.autohide;
  delete Bangle.appRect;
  if (exports.animInterval) {
    clearInterval(exports.animInterval);
    delete exports.animInterval;
  }
  if (exports.hideTimeout) {
    clearTimeout(exports.hideTimeout);
    delete exports.hideTimeout;
  }
};

/// Remove any intervals/handlers/etc that we might have added. Does NOT re-show widgets that were hidden
exports.cleanup = function() {
  exports.cleanupOverlay();
  delete exports.offset;
  if (exports.swipeHandler) {
    Bangle.removeListener("swipe", exports.swipeHandler);
    delete exports.swipeHandler;
  }
  if (exports.origDraw) {
    Bangle.drawWidgets = exports.origDraw;
    delete exports.origDraw;
  }
};

/** Put widgets offscreen, and allow them to be swiped
back onscreen with a downwards swipe. Use .show to undo.
First parameter controls automatic hiding time, 0 equals not hiding at all.
Default value is 2000ms until hiding.
Bangle.js 2 only at the moment. On Bangle.js 1 widgets will be hidden permanently.

Note: On Bangle.js 1 is is possible to draw widgets in an offscreen area of the LCD
and use Bangle.setLCDOffset. However we can't detect a downward swipe so how to
actually make this work needs some thought.
*/
exports.swipeOn = function(autohide) {
  if (process.env.HWVERSION!==2) return exports.hide();
  exports.cleanup();
  if (!global.WIDGETS) return;
  exports.autohide=autohide===undefined?2000:autohide;
  /* TODO: maybe when widgets are offscreen we don't even
  store them in an offscreen buffer? */

  // force app rect to be fullscreen
  Bangle.appRect = { x: 0, y: 0, w: g.getWidth(), h: g.getHeight(), x2: g.getWidth()-1, y2: g.getHeight()-1 };
  // setup offscreen graphics for widgets
  let og = Graphics.createArrayBuffer(g.getWidth(),26,16,{msb:true});
  og.theme = g.theme;
  og._reset = og.reset;
  og.reset = function() {
    return this._reset().setColor(g.theme.fg).setBgColor(g.theme.bg);
  };
  og.reset().clearRect(0,0,og.getWidth(),23).fillRect(0,24,og.getWidth(),25);
  let _g = g;
  exports.offset = -24; // where on the screen are we? -24=hidden, 0=full visible

  function queueDraw() {
    const o = exports.offset;
    Bangle.appRect.y = o+24;
    Bangle.appRect.h = 1 + Bangle.appRect.y2 - Bangle.appRect.y;
    if (o>-24) {
      Bangle.setLCDOverlay(og, 0, o, {
        id:"widget_utils",
        remove:()=>{
          require("widget_utils").cleanupOverlay();
        }
      });
    } else {
      Bangle.setLCDOverlay(undefined, {id: "widget_utils"});
    }
  }

  for (var w of global.WIDGETS) if (!w._draw) { // already hidden
    w._draw = w.draw;
    w.draw = function() {
      g=og;
      this._draw(this);
      g=_g;
      if (exports.offset>-24) queueDraw();
    };
    w._area = w.area;
    if (w.area.startsWith("b"))
      w.area = "t"+w.area.substr(1);
  }

  exports.origDraw = Bangle.drawWidgets;
  Bangle.drawWidgets = ()=>{
    g=og;
    exports.origDraw();
    g=_g;
  };

  function anim(dir, callback) {
    if (exports.animInterval) clearInterval(exports.animInterval);
    exports.animInterval = setInterval(function() {
      exports.offset += dir;
      let stop = false;
      if (dir>0 && exports.offset>=0) { // fully down
        stop = true;
        exports.offset = 0;
        exports.emit("shown");
      } else if (dir<0 && exports.offset<-23) { // fully up
        stop = true;
        exports.offset = -24;
        exports.emit("hidden");
      }
      if (stop) {
        clearInterval(exports.animInterval);
        delete exports.animInterval;
        if (callback) callback();
      }
      queueDraw();
    }, 50);
  }
  // On swipe down, animate to show widgets
  exports.swipeHandler = function(lr,ud) {
    if (exports.hideTimeout) {
      clearTimeout(exports.hideTimeout);
      delete exports.hideTimeout;
    }
    let cb;
    if (exports.autohide > 0) cb = function() {
      exports.hideTimeout = setTimeout(function() {
        anim(-4);
      }, exports.autohide);
    };
    if (ud>0 && exports.offset<0) anim(4, cb);
    if (ud<0 && exports.offset>-24) anim(-4);
  };
  Bangle.on("swipe", exports.swipeHandler);
  Bangle.drawWidgets();
};
`);

const widget_utils = require("mywidut"); // only 8 chars allowed in name

// development
WIDGETS = [];


// code from widclkinfo for debugging

//(() => { // don't load if a clock_info was already loaded
  // Load the clock infos
  let clockInfoItems = clock_info.load();

  let wuo = widget_utils.offset;

  let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
    app: "widclkinfo",
    // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
    x: 0,
    y: 0, // set offset to initial offset
    w: 72,
    h: 24,
    // You can add other information here you want to be passed into 'options' in 'draw'
    // This function draws the info
    draw: (itm, info, options) => {
      // itm: the item containing name/hasRange/etc
      // info: data returned from itm.get() containing text/img/etc
      // options: options passed into addInteractive
      clockInfoInfo = info;
      //wuo = 0 | widget_utils.offset;
      clockInfoMenu.y = options.y + wuo;
      if (WIDGETS["clkinfo"]) {
        WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
        console.log("Clock Info was updated, thus drawing widget.");
      }
    }
  });

  let clockInfoInfo; // when clockInfoMenu.draw is called we set this up

  // The actual widget we're displaying
  WIDGETS["clkinfo"] = {
    area: "tl",
    width: clockInfoMenu.w,
    draw: function(e) {
      clockInfoMenu.x = e.x;
      wuo = 0 | widget_utils.offset;
      clockInfoMenu.y = e.y + wuo;
      var o = clockInfoMenu;
      // Clear the background
      g.reset();
      // indicate focus
      if (clockInfoMenu.focus) g.setColor("#f00");
      g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);

      if (clockInfoInfo) {
        var x = o.x;
        if (clockInfoInfo.img) {
          g.drawImage(clockInfoInfo.img, x, o.y); // draw the image
          x += 24;
        }
        var availableWidth = o.x + clockInfoMenu.w - (x + 2);
        g.setFont("6x8:2").setFontAlign(-1, 0);
        if (g.stringWidth(clockInfoInfo.text) > availableWidth)
          g.setFont("6x8:1x2");
        g.drawString(clockInfoInfo.text, x + 2, o.y + 12); // draw the text
      }
    }
  };

  widget_utils.on("hidden", () => {
    console.log("hidden");
    clockInfoMenu.y = -24;
    clockInfoMenu.force_blur(); // needs to be here so it doesn't stay the focused color
    if (clockInfoMenu.focus) {
      //clockInfoMenu.force_blur();
      console.log("Forced blur bc hidden");
    }
  });

  widget_utils.on("shown", () => {
    clockInfoMenu.y = 0;
    console.log("shown");
    if (WIDGETS["clkinfo"]) {
      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
    }
  });

  // for debug:
//})();



Bangle.setUI('clock');
g.clear();
Bangle.loadWidgets();
widget_utils.swipeOn();


// debug info:
setInterval(() => {
  g.clear(Bangle.appRect);
  g.setFont("6x8");

  g.drawString("widget_utils.offset: " + widget_utils.offset, 4, 40);
  g.drawString("Bangle.CLKINFO_FOCUS: " + Bangle.CLKINFO_FOCUS, 4, 50);
  g.drawString("clockInfoMenu.y: " + clockInfoMenu.y, 4, 70);
  g.drawString("clockInfoMenu.focus: " + clockInfoMenu.focus, 4, 60);
  g.drawString("menuA: " + clockInfoMenu.menuA, 4, 80);
  g.drawString("menuB: " + clockInfoMenu.menuB, 4, 90);
  //g.drawString(clock_info.clockInfos, 4, 90);
  // g.drawString("cIM.x: " + clockInfoMenu.x, 4, 100);
  //g.drawString("items: " + clockInfoItems, 4, 90)
}, 500);

// these work:
//global.clockInfoMenu
//clockInfoMenu.focus

// get list of all added infos:
//clock_info.clockInfos

// Added a function clockInfoMenu.force_blur()

bobrippling · 2024-12-01T21:13:32Z

Nice find, and I like your fix too.

How can we make these components not interfere while keeping them fairly modular?

I like your event approach - one way to avoid having a dependency between the modules is to copy what's done elsewhere and emit (and listen to) the events on Bangle, so:

-exports.emit("shown");
+Bangle.emit("widgets-shown");

For the issue with "refcounting" blur, were there some problems with this initial approach you had?

-clockInfoMenu.force_blur(); // needs to be here so it doesn't stay the focused color
 if (clockInfoMenu.focus) {
-  //clockInfoMenu.force_blur();
+  clockInfoMenu.blur();
   console.log("Forced blur bc hidden");
 }

cbkerr · 2024-12-01T23:40:43Z

For the issue with "refcounting" blur, were there some problems with this initial approach you had?

I was having a problem with the widclkinfo sliding back in still in the redish "focused" color. Actually, in the current state with always calling clockInfoMenu.force_blur(), it still slides back in redish. Even when I add extra draws on widgets-hidden, it still comes down red. Even with a frequently updating clock_info like HRM.

Not sure if we should make events for the animation steps.

apps/widclkinfo/widget.js

bobrippling

Cool, yes this looks good!

modules/widget_utils.js

apps/widclkinfo/widget.js

bobrippling · 2024-12-02T08:43:58Z

apps/widclkinfo/widget.js

Because we've checked focus above, I think it's safe to just have the blur method and avoid the cost of an extra jsvar, wdyt?

I don't think clockInfoMenu.blur() is exposed. I chose the name force_blur to avoid internal name confusion inside clock_info. Also, clock_info exposes focus as a boolean but internally uses focus as a function, so I wasn't sure how to keep names consistent

Ah I see your problem - I think that's ok to have the internal focus and the exposed one, we could rename the internal one so we present an API that doesn't give away internal details if you like?

...so an external action like hiding widgets with widclkinfo can unfocus the clock info. This always decrements Bangle.CLKINFO_FOCUS, so in the future we should only call force_blur if we know the Clock Info is focused. We could provide a different function ensure_blur.

This can help widgets, such as widclkinfo, know when they are on screen.

TODO: disable these changes when widget_utils are not being used. Use new (prototype) widget_utils events to blur and set offscreen the clock info when the widgets are hidden. This prevents activating or further interacting with the widclkinfo.

…r calls

Key change to function: not setting `clockInfoMenu.y = e.y`

I think it's okay to not update the clock_info in this case because they are designed to be on screen.

bobrippling · 2025-08-17T17:39:37Z

Let me know when you're happy for a re-review :)

1) Run exports.offset+=dir only in animation steps using the existing stop variable. We check if near animation boundary instead of doing the addition and seeing if we overstepped the animation boundary. The logic table now has absolute values that mean "nearly done with animation". This should mean that, eg, if the user swipes up in the last frame of the show animation, the widgets-start-hide event will still be triggered. 2) Also, standardize event name to widgets-*

cbkerr · 2025-08-17T17:57:18Z

@bobrippling I think I'm ready for a look now!

Identified and hopefully fixed two pernicious bugs that I thought were due to my new code in widclkinfo, but were actually:

in my widget_utils logic
a possible off-by-one error in the touch handler in clock_info.

Before I mark as officially "ready for review" I'm:

updating the intro blurb to include IDE test code.
making sure the changes work when installed from my app loader

cbkerr · 2025-08-17T17:58:09Z

apps/clock_info/lib.js

+          e.x>(options.x+options.w-1) || e.y>(options.y+options.h-1)) {
+// touch at y=0 focuses when widclkinfo is off screen
+// may have off by one error here
+// options.y is -24
+// options.h is 24


Want to be sure this is consistent with how we define rectangles for widgets and app area etc

cbkerr · 2025-08-17T17:58:38Z

apps/widclkinfo/widget.js

+        var wi = WIDGETS["clkinfo"];
+        wi.clockInfoInfo = info;
+        wi.clockInfoMenu.y = options.y;
+        if (WIDGETS["clkinfo"] && wi.clockInfoMenu.y > -24) {
+          WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);


Any way to not refer to the global values here?

cbkerr · 2025-08-17T18:00:27Z

modules/widget_utils.js

+// exports.offset < -23 + |dir|     > -|dir|         otherwise
+//     dir >0     start showing     shown this step  showing
+//         <0     hidden this step  start hiding     hiding


There is probably a more efficient way to do these nested conditions

bobrippling · 2025-08-21T17:28:04Z

Great! I'll take an in-depth look soon :)

cbkerr commented Dec 2, 2024

View reviewed changes

apps/widclkinfo/widget.js Outdated Show resolved Hide resolved

bobrippling reviewed Dec 2, 2024

View reviewed changes

Corwin Kerr added 18 commits August 16, 2025 16:50

widget_utils: Add shown and hidden events

e86fca8

This can help widgets, such as widclkinfo, know when they are on screen.

Suggestions from review: emit events from Bangle and moving force_blu…

413b33f

…r calls

Also emit event when autohiding

9bd9344

Listen for widget events from Bangle

b5ffb5a

widget_utils: Emit shown and hidden events on show and hide functions

3a0de90

widclkinfo: Remove references to widget_utils

40059b7

widclkinfo: cleanup event listeners

b44fc18

widclkinfo: move draw function definition.

4584330

Key change to function: not setting `clockInfoMenu.y = e.y`

widclkinfo: Don't redraw widget if its clock_info is off screen

de845be

I think it's okay to not update the clock_info in this case because they are designed to be on screen.

widclkinfo: balance brackets

72a6b1d

widclkinfo: Make clockInfoMenu part of the widget

ba5d98a

widget_utils: Move events to anim function

302e48b

widget_utils: format indentation

86e6f86

clock_info: Use ensure_blur as public function in options

b99bc3e

widclkinfo: update version and changelog

f1b8749

clock_info: update changelog

dd5fcd4

cbkerr force-pushed the widclkinfo-swipeOn-aware branch from a673ea4 to dd5fcd4 Compare August 17, 2025 00:16

cbkerr changed the title ~~[widclkinfo] Keeps focus when widget_utils.swipeOn()~~ [widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen Aug 17, 2025

Corwin Kerr added 3 commits August 16, 2025 20:23

clock_info: bump version

c7d7c8b

Remove test code comment

89fb705

Note possible off by one error in detecting taps on clock_info

dbdf1a5

cbkerr requested a review from bobrippling August 17, 2025 17:57

cbkerr commented Aug 17, 2025

View reviewed changes

Corwin Kerr added 3 commits August 17, 2025 14:03

widclkinfo: Remove debug line

403ee4e

widget_utils: fix missing bracket

1358c99

widget_utils: Fix ambiguous if else

71a98ac

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen #3680

[widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen #3680

Uh oh!

cbkerr commented Dec 1, 2024 •

edited

Loading

Uh oh!

bobrippling commented Dec 1, 2024

Uh oh!

cbkerr commented Dec 1, 2024

Uh oh!

Uh oh!

bobrippling left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bobrippling Dec 2, 2024

Uh oh!

cbkerr Dec 3, 2024 •

edited

Loading

Uh oh!

bobrippling Dec 11, 2024

Uh oh!

bobrippling commented Aug 17, 2025

Uh oh!

cbkerr commented Aug 17, 2025

Uh oh!

cbkerr Aug 17, 2025

Uh oh!

cbkerr Aug 17, 2025

Uh oh!

cbkerr Aug 17, 2025

Uh oh!

bobrippling commented Aug 21, 2025

Uh oh!

Uh oh!

[widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen #3680

Are you sure you want to change the base?

[widclkinfo] Ensure we cancel focus when widget_utils.swipeOn() pushes widget bar off screen #3680

Uh oh!

Conversation

cbkerr commented Dec 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Symptoms

Minimal reproduction of bug

Expected behavior

To test these fixes

Uh oh!

bobrippling commented Dec 1, 2024

Uh oh!

cbkerr commented Dec 1, 2024

Uh oh!

Uh oh!

bobrippling left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bobrippling Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

cbkerr Dec 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bobrippling Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

bobrippling commented Aug 17, 2025

Uh oh!

cbkerr commented Aug 17, 2025

Uh oh!

cbkerr Aug 17, 2025

Choose a reason for hiding this comment

Uh oh!

cbkerr Aug 17, 2025

Choose a reason for hiding this comment

Uh oh!

cbkerr Aug 17, 2025

Choose a reason for hiding this comment

Uh oh!

bobrippling commented Aug 21, 2025

Uh oh!

Uh oh!

cbkerr commented Dec 1, 2024 •

edited

Loading

cbkerr Dec 3, 2024 •

edited

Loading