Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[widclkinfo] Keeps focus when widget_utils.swipeOn() #3680

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

[widclkinfo] Keeps focus when widget_utils.swipeOn() #3680

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8d626dc
clock_info: Expose internal blur function as force_blur
Dec 1, 2024
0d4d1b8
widget_utils: Add shown and hidden events
Dec 1, 2024
a906075
widclkinfo: work in progress: Be aware of widget_utils.swipeOn
Dec 1, 2024
9ec6acc
Suggestions from review: emit events from Bangle and moving force_blu…
Dec 1, 2024
73cf053
Also emit event when autohiding
Dec 2, 2024
6cf3393
Listen for widget events from Bangle
Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/clock_info/lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,12 +299,15 @@ exports.addInteractive = function(menu, options) {
const blur = () => {
options.focus=false;
Bangle.CLKINFO_FOCUS--;
// if (Bangle.CLKINFO_FOCUS < 0) Bangle.CLKINFO_FOCUS = 0;
const itm = menu[options.menuA].items[options.menuB];
let redraw = true;
if (itm.blur && itm.blur(options) === false)
redraw = false;
if (redraw) options.redraw();
};
// better to only call blur when we know it's focused. Maybe we can rename force_blur to ensure_blur.
options.force_blur = blur;
const focus = () => {
let redraw = true;
Bangle.CLKINFO_FOCUS = (0 | Bangle.CLKINFO_FOCUS) + 1;
Expand Down
48 changes: 37 additions & 11 deletions apps/widclkinfo/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
if (!require("clock_info").loadCount) { // 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",
let clockInfoItems = clock_info.load();

// TODO only do checks if widget_utils.swipeOn is being used
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, w: 72, h:24,
x: 0,
y: 0, // maybe 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) => {
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"])
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
Expand All @@ -25,12 +35,12 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
width: clockInfoMenu.w,
draw:function(e) {
clockInfoMenu.x = e.x;
clockInfoMenu.y = e.y;
wuo = 0 | widget_utils.offset;
clockInfoMenu.y = e.y + wuo;
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));
// 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) {
Expand All @@ -47,4 +57,20 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
}
}
};
}

widget_utils.on("hidden", () => {
console.log("hidden");
Copy link
Contributor Author

@cbkerr cbkerr Dec 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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});
    }
  });

clockInfoMenu.y = -24;
if (clockInfoMenu.focus) {
clockInfoMenu.force_blur();
Comment on lines +64 to +65
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

@cbkerr cbkerr Dec 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

console.log("Forced blur bc hidden");
}
});

widget_utils.on("shown", () => {
clockInfoMenu.y = 0;
console.log("shown");
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
});
16 changes: 13 additions & 3 deletions modules/widget_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I think so, no start-..., just widgets-hidden right?

};

/// Show any hidden widgets
Expand Down Expand Up @@ -132,9 +133,11 @@ exports.swipeOn = function(autohide) {
if (dir>0 && exports.offset>=0) { // fully down
stop = true;
exports.offset = 0;
Bangle.emit("widgets-shown");
} else if (dir<0 && exports.offset<-23) { // fully up
stop = true;
exports.offset = -24;
Bangle.emit("widgets-hidden");
}
if (stop) {
clearInterval(exports.animInterval);
Expand All @@ -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");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it work if we moved the widgets-start-show/hide into the start of the anim() function?

anim(-4);
}, exports.autohide);
};
if (ud>0 && exports.offset<0) anim(4, cb);
if (ud<0 && exports.offset>-24) anim(-4);
if (ud>0 && exports.offset<0) {
Bangle.emit("widgets-start-show");
anim(4, cb);
}
if (ud<0 && exports.offset>-24) {
Bangle.emit("widgets-start-hide");
anim(-4);
}
};
Bangle.on("swipe", exports.swipeHandler);
Bangle.drawWidgets();
};
};