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.

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

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

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
3 changes: 3 additions & 0 deletions apps/clock_info/lib.js
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
107 changes: 75 additions & 32 deletions apps/widclkinfo/widget.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,93 @@
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();

Check warning on line 3 in apps/widclkinfo/widget.js

View workflow job for this annotation

GitHub Actions / build

'clock_info' is not defined

let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {

Check warning on line 5 in apps/widclkinfo/widget.js

View workflow job for this annotation

GitHub Actions / build

'clock_info' is not defined
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: -24, // TODO how know if offscreen to start?
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"])
clockInfoMenu.y = options.y;
if (WIDGETS["clkinfo"] && clockInfoMenu.y > -24) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
}
});

let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
let draw = function(e) {
clockInfoMenu.x = e.x;
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
}
};

// The actual widget we're displaying
WIDGETS["clkinfo"] = {
area:"tl",
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
}
}
draw: draw
};
}

Bangle.on("widgets-start-show", () => {
clockInfoMenu.y = 0;
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
})

Bangle.on("widgets-shown", () => {
clockInfoMenu.y = 0;
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
});

Bangle.on("widgets-start-hide", () => {
clockInfoMenu.y = -24;
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
if (clockInfoMenu.focus) {
clockInfoMenu.blur();
}
});

Bangle.on("widgets-hidden", () => {
clockInfoMenu.y = -24;
if (WIDGETS["clkinfo"]) {
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
}
// check here too in case widget_utils.hide() is called
if (clockInfoMenu.focus) {
clockInfoMenu.blur();
}
});
}
17 changes: 14 additions & 3 deletions modules/widget_utils.js
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);
}
Bangle.emit("widgets-hidden");
};

/// Show any hidden widgets
Expand All @@ -25,6 +26,7 @@ exports.show = function() {
delete w._area;
w.draw(w);
}
Bangle.emit("widgets-shown");
};

/// Remove anything not needed if the overlay was removed
Expand Down Expand Up @@ -132,9 +134,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 +157,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();
};
};
Loading