[widclkinfo] Keeps focus when widget_utils.swipeOn() #3680
Conversation
...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.
|
Nice find, and I like your fix too.
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 -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");
} |
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 Not sure if we should make events for the animation steps. |
apps/widclkinfo/widget.js
Outdated
| console.log("hidden"); |
There was a problem hiding this comment.
I couldn't figure out how to get the offscreen buffer to re-draw in the normal color before showing, but blurring the clock info before the widgets leave the screen works and also makes sense for the UI.
| widget_utils.on("hidden", () => { | |
| console.log("hidden"); | |
| Bangle.on("widgets-start-hide", () => { | |
| console.log("starting to hide"); | |
| if (WIDGETS["clkinfo"]) { | |
| WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]); | |
| } |
I was trying things like this in the web IDE:
/*
Bangle.on("widgets-start-hide", () => {
console.log("starting to hide");
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw({x:0,y:0});
}
clockInfoMenu.y = -24;
if (clockInfoMenu.focus) {
clockInfoMenu.force_blur();
console.log("Forced blur bc hidden");
console.log("focus is now: " + clockInfoMenu.focus);
}
});
*/
Bangle.on("widgets-hidden", () => {
console.log("hidden");
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw({x:0,y:-24});
}
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");
console.log("focus is now: " + clockInfoMenu.focus);
}
});
Bangle.on("widgets-shown", () => {
clockInfoMenu.y = 0;
console.log("shown");
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
});
Bangle.on("widgets-start-show", () => {
console.log("showing");
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw({x:0, y:0});
}
});
| @@ -153,12 +156,19 @@ exports.swipeOn = function(autohide) { | |||
| let cb; | |||
| if (exports.autohide > 0) cb = function() { | |||
| exports.hideTimeout = setTimeout(function() { | |||
| Bangle.emit("widgets-start-hide"); | |||
There was a problem hiding this comment.
Would it work if we moved the widgets-start-show/hide into the start of the anim() function?
| @@ -11,6 +11,7 @@ exports.hide = function() { | |||
| w.area = ""; | |||
| if (w.x!=undefined) g.clearRect(w.x,w.y,w.x+w.width-1,w.y+23); | |||
| } | |||
| // TODO: do we need to emit event here too? | |||
There was a problem hiding this comment.
Yes I think so, no start-..., just widgets-hidden right?
|
|
||
| Bangle.on("hidden", () => { |
There was a problem hiding this comment.
Do we want:
| Bangle.on("hidden", () => { | |
| Bangle.on("widgets-hidden", () => { |
(and similarly below)
There was a problem hiding this comment.
Oops yes, I didn't copy over correctly
| clockInfoMenu.force_blur(); |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
I tried implementing a possible fix to understand this emergent bug when using widclkinfo and widget_utils. How can we make these components not interfere while keeping them fairly modular?
Symptoms
Load widget_utils and widclkinfo.
widclkinfostays focused after the widgets autohide, so the selected clock info (options.menuA,options.menuB) changes when swiping the screen (like when using menus).widclkinfois focused, swiping down to show widgets also changes the selected clock info.Minimal reproduction of bug
With useful debug info printed
Expected behavior
When widgets autohide, the Clock Info in
widclkinfoblurs itself just like tapping outside of its region.Tapping only selects the Clock Info in
widclkinfoif it is visible. (whenwidget_utils.offset == 0)To test these fixes
clock_infoCode to upload to RAM from Web IDE that writes custom widget_utils to storage