New Bangle.js 2 menu system

The built-in versions can be found in the Espruino repo (if there is a Q3 version, that is specific for the Bangle.js 2)
If you search for "menu" in the app loader there are already some apps that show how to replace menus using a .boot.js file

https://www.espruino.com/Bangle.js+Modification

As a UX designer... thank you for defending checkboxes vs radio buttons!

Or, maybe we just detect > on the end of the string

That seems an intuitive way to distinguish an action from a submenu.

@Gordon,

not totally different. Currently I just want to draw a color box on top of an "Color" item.
That shows a current color, and calls a submenu that allows user to select a color from list.

If a rectangle x1,y1,x2,y2 of the item will be passed into the callback it should not break.
The alternate menu system has to be compatible with the standard one anyway. It also should support this callback, same way as it should support format() callback.

Whoops, that's much better, sorry for not pointing to the docs after you put in so much effort in writing decent ones.

Currently I just want to draw a color box on top of an "Color" item.

But I posted the exact code you need to do that (which even works with the old menu system without modification) earlier in this thread at http://forum.espruino.com/conversations/372830/?offset=25#16394848

Why can't you just use that? When you drag up/down on the Bangle.js 2 the menu system has to redraw the menu items at the top/bottom every frame - having extra rendering calls in there (even the check) adds overhead which will slow the experience down for everyone, all the time.

Ok. I see. I thought the scrolling is done as a whole bitmap shifting.
Thanks for the example.

Last evening I updated to 2v12.55.

Every time I open a menu item in Settings I get "[AppName]: Error in settings! BTN1 to go back" and then the Settings menu freezes for 3/4 seconds.

I already use the Rewrite Settings/Reset Settings but nothing changed :-(

Does it happen to others?

Is downgrading the firmware (from .55 to latest stable release) a safe operation?

Ok, that's a bit strange. I don't see that at all on my device here with that exact firmware. Is it all app menus that have the issue, or just one in particular.

Is downgrading the firmware (from .55 to latest stable release) a safe operation?

Yes, there's no problem at all.

All menu items in "App Settings". But I have issues with other menu also: I can open System/LCD menu but I cannot change the settings here

Please can you update all your JS from the development app loader? It's possible you have 'ptlauncher' or 'swipelaunch' installed? I just found an issue with those

Ok, thank you (but I already downgraded to stable release)

swipelaunch

Do you mean Swiper Clock Launch? Yes, I have it installed!

Do you mean Swiper Clock Launch? Yes, I have it installed!

That's your problem then :) However I put in a fix so if you update it to the latest version from the app loader then you should be fine now

I like the new menu system system very much :-)

Today I have recognized a small drawing issue with multi-line menu entries when they are scrolled into the widget area just a bit and back.
When hitting exactly the right spot before scrolling back, it seems that some horizontal lines are not re-drawn completely.

I could reproduce it in the System->LCD menu with scrolling up&down repeatedly for different lengths and then suddenly especially horizontal lines (like in F and T) disappear. See the screenshot attached.

1 Attachment

This is looking really nice so far. How would it be if a swipe right was a "back"?

Possibly counter-intuitive? (Though I guess it depends on which wrist you wear your watch...)

@Kosi2801 thanks! I just tried here and I can reproduce this here too. I've just fixed it for the latest cutting-edge firmwares

With the new menu system I cannot open the Passkey or Whitelist menu in the Bluetooth settings. The Web IDE shows "Unhandled item type" (firmware 2v12.97).

Swiping right to go "back" makes sense to me, I think of it as

• the arrow points left
  
• that means "back" is hidden to the left of the current screen/display
  
• swiping to the right drags the current screen to the right, and the "back" screen onto the display
  
  

(I'm not entirely sure we want to "sacrifice" swiping right on every screen with a back button though, especially for the Bangle 1 where we only get horizontal swipes to begin with.)

@ChrisS thanks - I'll look into this now.

I'm not entirely sure we want to "sacrifice" swiping right on every screen with a back button though

Yeah, although I'm struggling to think of screens where there might be a back button and you'd use swiping? Usually it'd be in some kind of menu, and it's the main app where you'd use swiping?

@ChrisS ok, latest builds now have this fixed

I figured it would be nice to have the back button in main apps as well, as it provides an easy and consistent touch-only exit button for minimal screen space.

But thinking about it, adding it to main screens will cause all kinds of problems/inconsistencies (especially on the Bangle 1, where it eats all left-side touches).
So yeah, swiping probably would be a nice addition. (setUI({mode:"leftright"}) should probably complain about back: though)

And we can add a Bangle.js 2-only X widget.

I like this! The back button seems a bit out of style for the rest of Bangles look and feel, but that could also be me dealing with change ><
I like that it also supports longer entry names :-)

I only just noticed the menu draws g.theme.fg text on g.theme.bg2 background, is that supposed to be readable?
Asking because I thought things were supposed to stick to fg+bg/fg2+bg2/fgH+bgH, and fiddling with my theme resulted in some hard to read text.

Thanks - I've just put a fix in. That wasn't intentional, no :)