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

discussion: SetUI Q3 changes #2526

Closed
wants to merge 4 commits into from
Closed

discussion: SetUI Q3 changes #2526

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ba083b
Bangle_setUI_Q3: set custom handlers on any mode
thyttan Jul 1, 2024
6567b77
Bangle_setUI_Q3: only add custom btn handler
thyttan Jul 1, 2024
8a3210c
Bangle_setUI_Q3: Make custom btn edge configurable
thyttan Jul 1, 2024
b978df5
Bangle_setUI_Q3: Change default btn edge to rising
thyttan Jul 1, 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
56 changes: 31 additions & 25 deletions libs/js/banglejs/Bangle_setUI_Q3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
Bangle.on('drag',Bangle.dragHandler);
Bangle.touchHandler = d => {b();cb();};
Bangle.btnWatches = [
setWatch(function() { b();cb(); }, BTN1, {repeat:1, edge:"falling"}),
setWatch(function() { b();cb(); }, BTN1, {repeat:1, edge:"rising"}),
];
} else if (mode=="leftright") {
var dx = 0;
Expand All @@ -68,12 +68,12 @@
Bangle.on('drag',Bangle.dragHandler);
Bangle.touchHandler = d => {b();cb();};
Bangle.btnWatches = [
setWatch(function() { b();cb(); }, BTN1, {repeat:1, edge:"falling"}),
setWatch(function() { b();cb(); }, BTN1, {repeat:1, edge:"rising"}),
];
} else if (mode=="clock") {
Bangle.CLOCK=1;
Bangle.btnWatches = [
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"falling"})
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"rising"})
];
} else if (mode=="clockupdown") {
Bangle.CLOCK=1;
Expand All @@ -82,31 +82,37 @@
b();cb((e.y > 88) ? 1 : -1);
};
Bangle.btnWatches = [
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"falling"})
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"rising"})
];
} else if (mode=="custom") {
if (options.clock) Bangle.CLOCK=1;
if (options.touch)
Bangle.touchHandler = options.touch;
if (options.drag) {
Bangle.dragHandler = options.drag;
Bangle.on("drag", Bangle.dragHandler);
}
if (options.swipe) {
Bangle.swipeHandler = options.swipe;
Bangle.on("swipe", Bangle.swipeHandler);
}
if (options.btn) {
Bangle.btnWatches = [
setWatch(function() { options.btn(1); }, BTN1, {repeat:1,edge:"falling"})
];
} else if (options.clock) {
Bangle.btnWatches = [
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"falling"})
];
}
} else
throw new Error("Unknown UI mode "+E.toJS(mode));
if (options.clock) Bangle.CLOCK=1;
if (options.touch)
Bangle.touchHandler = options.touch;
if (options.drag) {
Bangle.dragHandler = options.drag;
Bangle.on("drag", Bangle.dragHandler);
}
if (options.swipe) {
Bangle.swipeHandler = options.swipe;
Bangle.on("swipe", Bangle.swipeHandler);
}
if (options.btn) {
if (Bangle.btnWatches) Bangle.btnWatches.forEach(clearWatch);
var e = "rising";
if ("object"==typeof options.btn) {
e = options.btn.edge;
options.btn = options.btn.fn;
}
Bangle.btnWatches = [
setWatch(function() { options.btn(1); }, BTN1, {repeat:1,edge:e})
];
Comment on lines +101 to +110
Copy link
Contributor Author

@thyttan thyttan Jul 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@gfwilliams I'm particularly interested in what you think about this solution to letting the user choose button edge (between rising/falling/both). Since it's different from what you proposed with callbacks.

The solution I opted for here for now follows the same coding style of how the type/mode parameter of setUI can be either a string or an object.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here it's used from spotrem:
https://github.com/espruino/BangleApps/pull/3485/files#diff-f23a88305664ab4df5d78b95d4770ca5e752014d9742f2d36c1d7529500d61a6R109-R115

Copy link
Member

Choose a reason for hiding this comment

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

Thanks, but honestly, I think I prefer the callback solution mentioned before - the main reason is that this was isn't backwards compatible. At least the old one would silently continue but not add the watch - if someone ran spotrem on an old firmware it'd just fail with an error and not do anything

Copy link
Member

Choose a reason for hiding this comment

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

... also I feel like the implementation is actually marginally tidier:

if (options.btn) Bangle.btnWatches.push(setWatch(options.btn.bind(options), BTN1, {repeat:1,edge:"rising"}))
if (options.btnRelease) Bangle.btnWatches.push(setWatch(options.btnRelease.bind(options), BTN1, {repeat:1,edge:"falling"}))

} else if (options.clock) {
Bangle.btnWatches = [
setWatch(Bangle.showLauncher, BTN1, {repeat:1,edge:"rising"})
];
}
if (options.remove) // handler for removing the UI (intervals/etc)
Bangle.uiRemove = options.remove;
if (options.redraw) // handler for redrawing the UI
Expand All @@ -133,7 +139,7 @@
btnWatch = setWatch(function() {
btnWatch = undefined;
options.back();
}, BTN1, {edge:"falling"});
}, BTN1, {edge:"rising"});
WIDGETS = Object.assign({back:{
area:"tl", width:24,
draw:e=>g.reset().setColor("#f00").drawImage(atob("GBiBAAAYAAH/gAf/4A//8B//+D///D///H/P/n+H/n8P/n4f/vwAP/wAP34f/n8P/n+H/n/P/j///D///B//+A//8Af/4AH/gAAYAA=="),e.x,e.y),
Expand Down
Loading