[Control Pad] Refactor app for consistency and reliability, as well as UI updates #4135

RKBoss6 · 2026-01-20T21:33:37Z

Refactors for better responsiveness, reliability, toggle behaviour, ui look and feel, etc. Look at the changelog for a full description. Also, tagging @bobrippling as the author of this app.

Refactor Overlay and Controls for improved functionality and visuals.

Updated version number and enhanced description for clarity.

Updated the README to include additional features and clarify gesture handling.

Copilot

Pull request overview

This PR refactors the Control Pad app to improve UI consistency, reliability, and user experience. The changes transition from text-based controls to icon-based controls with a new rounded visual style, add a settings shortcut, and improve the toggle behavior for BLE, quiet mode, and HRM controls.

Changes:

Refactored control system from callback-based state management to separate get/toggle functions for better reliability
Updated UI with rounded borders, icons instead of text, and wider overlay for better visual appeal
Added a sixth control button for quick access to settings app

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 27 comments.

File	Description
apps/ctrlpad/metadata.json	Version bump to 0.03 and updated description to reflect new features
apps/ctrlpad/README.md	Updated documentation to reflect reduced touch activation area (40px → 10px) and new shortcuts
apps/ctrlpad/ChangeLog	Comprehensive changelog documenting all refactoring changes and new features
apps/ctrlpad/main.js	Major refactor: new UI styling with rounded corners, icon-based controls, refactored toggle logic for BLE/DnD/HRM, added settings button

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

apps/ctrlpad/main.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

RKBoss6 · 2026-01-21T02:12:06Z

I want to add a screenshot, but I don't think g.dump() supports lcd overlays - any alternatives?

bobrippling · 2026-01-21T08:08:38Z

Hey, this looks great! One problem however - the app is typescript. Before you go any further, would you be able to migrate your changes to main.ts ?

For the screenshot, you'll want to call ui.overlay.g2.dump() - here after ui is assigned, you can copy it to global.ui or similar:

BangleApps/apps/ctrlpad/main.ts

Lines 247 to 250 in 4593630

    
           const overlay = new Overlay(); 
        
           ui = { 
        
           	overlay, 
        
           	ctrls: new Controls(overlay.g2, controls),

RKBoss6 · 2026-01-21T11:05:16Z

Thanks! Is there a way to generate typescript from the js code, or do I have to manually reimplement everything?

bobrippling · 2026-01-21T17:40:15Z

Thanks! Is there a way to generate typescript from the js code, or do I have to manually reimplement everything?

It's the other way round in fact, JS is generated from TS. You could try your hand at patching across but that's not likely to help much (git diff | sed 's/\.js/\.ts/' | patch -p1)

RKBoss6 · 2026-01-21T18:01:41Z

Hmm, I don't know typescript (at all), so I'm afraid I won't be of much use. Do you think it's possible for you to make those changes? The other option is I can ask an AI to see if that'll work, but I'm not sure about that either. Perhaps I'm misunderstanding something fundamental with TypeScript though, but I'm just not sure how to go about this...

(the git diff | sed 's/\.js/\.ts/' | patch -p1 didn't work...)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Expanded the README with additional details about the app's design and contributors.

bobrippling

Thanks - I've moved the changes into main.ts, it doesn't compile yet but thought I'd comment a few thoughts before going further. Let me know what you think!

apps/ctrlpad/metadata.json

apps/ctrlpad/README.md

bobrippling · 2026-01-21T21:25:38Z

apps/ctrlpad/main.js

+          var border = 3;
+          this.g2
+              .reset()
+              .setColor(13)


What's the 13 all about here?

ah- it was just a number in the palette that's used as a transparent background color for the corners. It's the best solution I was able to come up with, but if you have another way, I would prefer having a more elegant solution over this.

Gotya - I don't know of any way to set transparent otherwise. Do you have the source palette for us to see how likely it is that this will change?

I'm not sure what you mean by source palette :( If it helps, in the screenshot before I edited the layers on, the transparent color was shown as an orange..

Ah, I mean just where the 13 comes from, like where you found it - the image bytes themselves?

No, like I said before, it's just a random number I chose, with no significance at all. That probably isn't the best way to go about something like that, but I didn't find another way :(
Do we need to change it/actually source the value from somewhere? It has worked for all I've been using it, you can upload the boot.js to your watch as well if you need to test it.
(I could still be misunderstanding what you're trying to ask, I'm sorry for the confusion)

Ah, I see! I think 13 is ok then, let's make it clear in a comment that it's a somewhat arbitrary variable chosen out of nowhere in particular :)

bobrippling · 2026-01-21T21:45:08Z

apps/ctrlpad/main.js

+    toggle: () => {
+      let s = require("Storage").readJSON("setting.json", 1);
+      s.quiet = s.quiet ? 0 : 1;
+      require("Storage").writeJSON("setting.json", s);


I think we should make this optional, I want the quiet mode to be temporary and also avoid the flash writes on each tap

My only gripe with that is when I first used the control panel, bluetooth wouldn't connect, and it took me a few days before I figured out that it was locally turning bluetooth off, and just wouldn't display that. I would prefer to have it global so all apps are affected but haptics still work, but possibly avoiding flash writes if we can.

I think there's a mix-up here? This is quiet mode, not bluetooth?

Sorry, I was using it as an example. The point was I didn't want any local change to quiet mode when there's already a global implementation. Could we have a global variable used in messages instead that is saved on e. Kill? I think that would be a better solution for system-level quiet mode, as it avoids writes unnecessarily until E.kill is triggered, and can just be appended in bootloader for simplicity.

Ah I see - my use case is different - I want a global change to just buzz but I don't want quiet mode installed or to have it as a hard dependency of the app. Perhaps have the code check if quiet mode scheduler or similar is installed and enable the functionality in that case?

And yes, agreed - saving quiet mode setting in the kill event handler sounds good

Sounds good! For the e.kill handler, we'll need a global variable to act in the file's place, which we have to create. Should we do that, and then update all the apps that use quiet mode? Alternatively, we could have a more system level one, and create a Bangle.quietMode variable for the system instead that achieves the same effect. @gfwilliams wdyt?

I really don't like the idea of starting to mess with other apps and adding global variables just to deal with this case. So the reason you want to save is because the messages lib looks at quiet in setting.json?

It looks like you and @bobrippling want different things, and as he says maybe you need it to be an option.

Either:

You have a temporary change which you can do by just overwriting the .buzz function (although if quiet was set already in settings, you won't ever be able to unset it by changing .buzz)

You change the global setting by writing to setting.json which I think is the best bet - I wouldn't worry about the kill handler (as then you've got these two ways of disabling buzzing which are overlapping). You're only writing in response to a user input which you'll do at most a few times a day, so I don't think this is a big deal.

I think probably the best bet it to switch to just changing .quiet, and then if it's temporary (as bob would like) in a kill handler you set the setting back to what it was before.

Interestingly internally Bangle.js actually reads the settings file each time an app is loaded and looks at the value of vibrate, and if so disables JSBF_ENABLE_BUZZ which stops vibration regardless of what you do to .buzz or what quiet is set to. Really, longer term we should probably just expose the ability to set that flag and delete all the checks for .quiet.

I guess quiet was added rather than changing vibrate because someone still wanted the haptics even when quiet, but maybe we could have a Bangle.haptic that the built-in menus use, and then that gives us a bit more flexibility (to disable haptics as well as making them stronger/weaker).

That sounds good! As for this however, I can make it a setting and use that to decide whether we want buzzes at all, or only quiet mode for messages, etc. It might take some time though, as I'm a bit busy now, but I'll try to get it done soon.

bobrippling · 2026-01-21T21:46:07Z

apps/ctrlpad/main.js

+  {
+    text: "HRM",
+    img:atob("GBiBAAAAAA+B8B/D+D/n/H///v/////////P///P///H/3+WQAC2Xj82HB86uA/48Af54AP9wAH9gAD/AAB+AAA8AAAYAAAAAAAAAA=="),
+    get: () => Bangle.isHRMOn(),


This will mislead users - tapping the button will have no visible effect if another app/widget has enabled it (it'll remain on)

Hmm, how do you propose we go about fixing it? It has tripped me up when I used it, so is there a way to distinguish whether we triggered it, or if it's on in general? I suppose if we really want the 'control center feel' that we get on phones, it might be best to have it as it is now, as it just shows the state of the HRM and allows you to toggle...

There is - we can either have a boolean to keep track if we triggered it, or we delve into Bangle internals to find out, which is what the code does atm

Gotya, let me look and see how it's done now to see if we can add that functionality in!

Sounds good - the code had the checks in, you could pinch that:

BangleApps/apps/ctrlpad/main.ts

Lines 220 to 221 in 1782ced

const hrm = (Bangle as any)._PWR?.HRM as undefined | Array<string> ;

const off = !hrm || hrm.indexOf(id) === -1;

bobrippling · 2026-01-21T21:47:11Z

apps/ctrlpad/main.js

+      if (result === "close") {
+        terminateUI();
+        return;
+      }


I think it's ok to have the callback terminate the UI itself, rather than spread the responsibility and allocate strings in the code

This was due to ui being undefined when it's called, because it's defined later in scope, so this just passes it down to a place where it can actually terminate the UI first.

Can you show me the code where that's the problem and the error output? These functions are all executed after they're all defined, so I don't see how it can be a scoping problem.

For it being a problem that ui isn't set (not a scope problem, just logic), then:

var result = ctrl.cb(...); // if ui was `undefined` here then if(result == "close"){ terminateUI(); // there's no code between there and here which will make it defined return; }

Co-authored-by: Rob Pilling <robpilling@gmail.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

RKBoss6 added 4 commits January 20, 2026 15:46

Refactor Overlay and Controls in main.js

1427e0b

Refactor Overlay and Controls for improved functionality and visuals.

Update ChangeLog

8e88249

Bump version to 0.03 and update description

1b9a08a

Updated version number and enhanced description for clarity.

Enhance README with new features and gesture details

15cc162

Updated the README to include additional features and clarify gesture handling.

Copilot AI review requested due to automatic review settings January 20, 2026 21:33

Copilot started reviewing on behalf of RKBoss6 January 20, 2026 21:34 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

RKBoss6 and others added 10 commits January 20, 2026 17:40

Update apps/ctrlpad/main.js

d416be2

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

a0ca73a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

3315d0e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

14fd511

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

14a01e5

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

800628a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

ddf5a3c

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

544cd3a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update apps/ctrlpad/main.js

c6b9a11

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update ChangeLog

32152b1

Fix color setting logic for background

4593630

RKBoss6 and others added 5 commits January 21, 2026 14:35

Apply suggestions from code review

99074a1

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Add files via upload

908a49c

Add screenshots field to metadata.json

04e4031

Enhance README with design details and contributors

f8878e4

Expanded the README with additional details about the app's design and contributors.

ctrlpad: copy changes from js -> ts

47a0eea

bobrippling reviewed Jan 21, 2026

View reviewed changes

Update apps/ctrlpad/README.md

32d8545

Co-authored-by: Rob Pilling <robpilling@gmail.com>

Apply suggestions from code review

5ef9b07

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

	const hrm = (Bangle as any)._PWR?.HRM as undefined \| Array<string> ;
	const off = !hrm \|\| hrm.indexOf(id) === -1;

[Control Pad] Refactor app for consistency and reliability, as well as UI updates #4135

Are you sure you want to change the base?

[Control Pad] Refactor app for consistency and reliability, as well as UI updates #4135

Conversation

RKBoss6 commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RKBoss6 commented Jan 21, 2026

Uh oh!

bobrippling commented Jan 21, 2026

Uh oh!

RKBoss6 commented Jan 21, 2026

Uh oh!

bobrippling commented Jan 21, 2026

Uh oh!

RKBoss6 commented Jan 21, 2026

Uh oh!

bobrippling left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RKBoss6 Jan 22, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gfwilliams Jan 30, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

RKBoss6 commented Jan 20, 2026 •

edited

Loading

RKBoss6 Jan 22, 2026 •

edited

Loading

gfwilliams Jan 30, 2026 •

edited

Loading

bobrippling Jan 22, 2026 •

edited

Loading