New Bangle.js 2 menu system #4547
Replies: 1 comment
-
Posted at 2022-02-09 by diego Hi, I liked the menu a lot! I only found the number editing a little bit confusing, as my instinct was to tap on the arrows, not to drag. Posted at 2022-02-09 by @gfwilliams
Thanks - that's a good point. I could always make tap work as well. Posted at 2022-02-09 by malaire Much better. For example with current menu I'm constantly getting item-click when I just try to scroll, but this doesn't happen at all with this new menu. Posted at 2022-02-09 by malaire Also does this mean there is only one kind of menu and not two kinds which is currently really confusing? Posted at 2022-02-09 by rigrig Looks nice, definitely a large improvement! (Still a few bugs, but I assume this is just the first PoC)
I think that's the wrong way round: boolean items should have a checkbox, multiple choices radioboxes. Attachments: Posted at 2022-02-09 by myownself I love it. Not 100% sure about going back. I think more aesthetically than practically. The numbers work as I personally expected - I had been wondering about modifying the alarms app to be like that because I find it fiddly at the moment, but if you're changing the menu system like this then it is covered! The only thing I miss from the current menu system is the tap anywhere to activate the highlighted item. I am clumsy with touchscreens and it is a feature I really appreciate. Only thing as previously mentioned is that I currently find the scroll direction backwards. Oh, I agree with @rigrig that a boolean should be a checkbox, the radio confused me. Posted at 2022-02-09 by uname +1 Posted at 2022-02-09 by @gfwilliams
Yeah, it should be a checkbox (or switch icon) so when there are >1 it's not confusing. I'm not sure if it's worth using the extra space to show radio buttons for multi-choice items? You won't ever see them change, but I guess it does show you what was previously selected?
You mean launcher vs. in-app menus? If so, yes-ish - they will both behave the same way at least.
Yes, I'm not sure there's an easy way around that with this design - I think most people will expect to be able to tap on the item they are interested in. It should be pretty easy to modify it later to highlight the 'middle' item and have tap to select though, so it could always be a new app. Posted at 2022-02-09 by rigrig
It also shows that you are looking at a list of options instead of a submenu. Although I guess that becomes clear soon enough when you pick one. (And in theory you could know the difference because it was showing a value) Posted at 2022-02-09 by HilmarSt
Posted at 2022-02-09 by Mark_M Looks neat! Numbers edit is perfect. In emulator I cannot feel a feedback like buzz (BTW can buzz be added to emulator? as a sound or as a some visual). Will load this to watch. Editing for special types, like for time, date and color would be nice to have. I've added this to current settings menu. Having issues with Git to merge and create pull request. But it looks like, if we go with the new menu, the modification of the old one does not make a sense. Posted at 2022-02-09 by Alessandro Cool! I would add a small icon to make clear that there is a submenu. Attachments: Posted at 2022-02-09 by Serj Good idea! Posted at 2022-02-09 by Alessandro To avoid overlapping of strings what if we put the menu name in top left and its value in bottom right? Attachments: Posted at 2022-02-09 by @gfwilliams
Yes, that sounds like a great idea.
It's a thought... but then you have smaller fonts even when you don't have an overlap? Wrapping the right-hand side if it goes over halfway across the page could be a good start Posted at 2022-02-09 by malaire
I meant that top launcher menu (Messages, Android, Settings, About, ...) is different than submenus (e.g. Settings submenu). That is confusing and also the submenus don't work that well: I often get item-click when I meant to scroll. Posted at 2022-02-09 by @gfwilliams Updated with some of the suggestions in... Posted at 2022-02-09 by Alessandro Nice! Posted at 2022-02-09 by RaoulDuke I like it! Posted at 2022-02-09 by HughB So my first thought before I tried it was, is it using on('drag') or on('touch'). I find any App that has used on drag almost impossible to use. I then tried it in RAM to get the feel on the Bangle and thought, this looks really nice, But I found it very unresponsive. I then looked at the code and saw it was using on('drag'). I'd love to use this style of menu, but sadly would be screaming with frustration after pressing something and not getting any response. Any chance it could be implemented using on('touch') ? Posted at 2022-02-09 by @halemmerich I like it! Posted at 2022-02-10 by @gfwilliams
I don't understand what you're suggesting here... The menu uses the @halemmerich I quite like being able to scroll to exactly the right place, but I think there are some things we can do to improve the rendering performance on Bangle.js 2, so at some point it will get smoother. Posted at 2022-02-10 by andrewg_oz This is looking really nice so far. How would it be if a swipe right was a "back"? Posted at 2022-02-10 by HughB Maybe it's me but all I can do with this is scroll it up and down. Touching or tapping on a submenu has no effect Posted at 2022-02-10 by petefrommars Me too Posted at 2022-02-11 by Mark_M I've added Color item and submenu. Attachments: Posted at 2022-02-11 by @gfwilliams
In the demo, most of the submenus aren't implemented. The one labelled 'submenu' is though.
That looks like a good idea, but I'm a bit concerned it's adding quite a lot of extra code for something that isn't used that much (and what if someone wants to specify something that's not one of those 8 colors?). However, it made my realise that now we can include images inside strings, it's actually as easy as writing:
Obviously that's a little cryptic, but we could maybe create some libraries to make it easy to provide this kind of functionality on top of the existing menu system, such that it only gets included when needed? (also right now it displays a square, but you can adjust the Posted at 2022-02-11 by @gfwilliams I've just merged this into the main builds, so if you try a cutting edge build now, you should get the new menu system by default. Right now, the 'checkbox' only appears if there's a boolean value with no Posted at 2022-02-11 by malaire There seems to be some problems. After updating to I have the default Anton Clock. Posted at 2022-02-11 by HughB
Yes tried that as well, sat there touching, dragging, stroking - no response. I will try the cutting edge firmware. UPDATE: updated to 2.12.27 and seems to be working! Looks really nice. For the menu labels that are 2 words and wrap on 2 lines, could the font be a bit bigger? Attachments: Posted at 2022-02-11 by Alessandro Great, thank you! I installed it before lunch and I played with it for a while. I like it, the UI now is much more usable!
Attachments: Posted at 2022-02-11 by Mark_M
Yes, that is right. Posted at 2022-02-11 by uname The elimination of the red button at the top left and the possibility to go back by swiping right would be perfect. Posted at 2022-02-11 by uname furthermore, again for greater readability, I would increase kerning if possible. Posted at 2022-02-11 by HughB
I'm not keen on that either. I think middle BTN to go back works fine and there is no need for the extra touch control to go back. Posted at 2022-02-11 by HughB
The samller font for the word wrap case is just a bit too small. Posted at 2022-02-11 by myownself I've just flashed this and I agree. The back button doesn't fit in somehow, is easy to miss when touching, and can be confusing because it isn't there when you are e.g. in the multiple choice screen. Aesthetically I also preferred the way the title was displayed before (centred with a horizontal rule rather than the hamburger icon). On the whole though, this feels like a huge improvement. Posted at 2022-02-12 by HughB Had a screen freeze when using the new menu, had to long press reboot. Posted at 2022-02-12 by HughB
So here lies the advantage of having a firmware tag in the metadata.json file. I have spotted that adding a new Yes/No item no longer works as it stays as No when I go back into settings after just setting it to Yes. So I have changed my code to remove the format. But now I really should update the other 2 boolean settings in my pastel.settings.js. But if I do I break my app for everyone else who is on firmware prioor to 2.12.27 if I check in the code. SO now I am blocked from checking in further changes to my app OR I have to revert to old firmware and implement the settings as per the format way. I'd much rather be able to checkin my code with a Posted at 2022-02-12 by Alessandro There's something strange with the LCD brightness settings: only value 0.1 is allowed. Attachments: Posted at 2022-02-14 by @gfwilliams @alessandro thanks - I'll get a fix in for that.
Can you give me a really small code example that shows the issue? This sounds like something in the new menu system that needs fixing maybe? This is an example of why I don't want per-version numbering at the moment :) the menu system is very much in development right now. I don't want people making hacks in their code just because of an issue that existed in the cutting edge firmware for a few days :) re: the back button and title. I feel that's very much personal preference. Before the next full release I'll be trying to add some kind of configurable 'back' functionality. Posted at 2022-02-14 by @gfwilliams Ok, just fixed LCD brightness (and any numeric item with a 'step' value)
If you can find any way to reproduce that, please let me know... @hughb I know you mentioned the font above. Right now we use a 20px high font for the main text, and supposedly a 15px high font for the 'small' text. I think a 3/4 size scaling is probably right in this case, but the font size is not remotely right. I'm looking at replacing the built-in bitmap fonts, so I hope at some point soon we'll be able to have some more sensible font options - so we can have a smaller size without the whole style of the font getting changed. Posted at 2022-02-14 by HughB How do we plan to cater for B1 and B2. We could end up having to have different settings code for each? Could Yes/No's be treated as a straight boolean in B2 or could that create more issues down the line? I have updated to 2.12.32 - no issues spotted so far.
Wow @gfwilliams - Sounds like improvements are coming in thick and fast now :) Really apprecite the work and support you give Bangle. Posted at 2022-02-14 by Alessandro
Thank you, the menu seems ok now! Another problem: the bangle freezes & reboot after some settings update (see attached video) It seems to happen only when Vector font is on) I noticed a similar issues yesterday while changing the pedometer widget settings (without the automatic reboot) Attachments: Posted at 2022-02-14 by HughB You have default clock set to Anton Clock. BUT i think this is due to Yes/No options not being handled anymore by the new Menu System. Posted at 2022-02-15 by RaoulDuke Changing colors in settings>system>theme>customize is strange. It seems like selecting colors works, but the display always shows the same color. Just updated from .27 to .32, but the problem is still there. Posted at 2022-02-15 by RaoulDuke I tried reinstalling settings and locale, but nothing helped. All other settings pages seem to work fine. Posted at 2022-02-15 by @gfwilliams I've just fixed the theme customize based on your other post @raoulduke
Not really, since with the most recent translation stuff they'd change based on the language that was uploaded :( On B2 Yes/No should still work fine - they just display yes/no and not the checkbox. Best bet is probably to update the Bangle.js 1 showMenu to display a checkbox too? Posted at 2022-02-15 by ChrisS I installed 2v12.33 and tried the new menu system and it's a huge improvement over the old version, especially no accidental click instead of scrolling anymore. Posted at 2022-02-15 by nicoboss that s right i don’t struggle any more to select or browse the menus. welldone ! But i noticed the schedule of the quiet mode don’t work anymore, as there are only off modes available EDIT : in fact it s just the display. Instead of ´´off’´ , ´´silent’´ , and ´´alarm’´ , it displays three times the one that is actually set up Attachments: Posted at 2022-02-16 by HughB
The code snippet below works fine on the old menu system, but does not seem to work on the new.
In the run App (which works fine in the new Menu system) the code looks like:
The significant difference would appear to be Posted at 2022-02-16 by rigrig
It's a common trick to force a value into a boolean: so if Another difference seems to be that the run app callbacks actually use Posted at 2022-02-16 by @gfwilliams If you run this code:
It seems to work fine. I'd suggest using the second option above (with If you can come up with a little snippet of code like the above that fails, please let me know and I'll look into it. Posted at 2022-02-16 by HughB I've converted the boolean Yes/No's to the Posted at 2022-02-17 by Alessandro
I found another issue with the LCD brightness menu: the level set is 1.0 but if I open the menu the selected value is always 0.2. It seems that Posted at 2022-02-17 by fanoushs-punching-bag This is so awesome! Posted at 2022-02-18 by @gfwilliams
Just fixed! Posted at 2022-02-18 by Mark_M Hi Gordon, did you have a chance to add a callback after the item is rendered? not sure if menu needs to be passed. In previous system there was a selected item stored in header item[0]. If something will be stored in item[0], the whole menu or just this item[0] should be passed as well. Posted at 2022-02-18 by Ronin This new menu system is great! Posted at 2022-02-19 by @MaBecker Wow, this is a great improvement, I really like it. Posted at 2022-02-19 by HughB Its lush ! Posted at 2022-02-19 by myownself Is it just me (pretty sure I installed the latest update) or does everything still look like it goes to a sub menu? I think the distinction is important - a curious person might press e.g. factory reset if they think there are further options, but don't actually want to factory reset. Posted at 2022-02-21 by @gfwilliams
This is a hard one - as far as the menu system is concerned there is no difference between a menu item that does something and one that opens a menu - they are both items that are tapped. I guess we could try and have some kind of way of distinguishing them... @Mark_M no, I haven't had time for that. Sorry, but I forget why this was needed in the end? Since you can feed images back from the Posted at 2022-02-21 by myownself
If you are happy for this to require a code change in apps, I will submit a PR for this. Unchanged apps would work but would show submenu without the ">" as it was in a previous iteration of the new system. I imagine this is OK, as apps need to change for the booleans anyway. Edit: Actually, I think I can do it without requiring any change on the app side... I will report back. Edit Edit: Ah, no, that was silly. Original offer stands. Edit x 3 ( a longer one): I can do it so it doesn't require any changes on the app side, but it feels a bit dirty... My original idea was to change the way submenus are created to an object with the key My hacky idea is to call Posted at 2022-02-21 by rigrig Another option: maybe support
Sadly this means you can't just use a single object as menu definition :-( Edit: or how about we just look if the label ends with ">"? It would require app changes, but nothing breaking. Posted at 2022-02-21 by malaire I've noticed a bug with some multi-choice menus. For example if I go to Also pressing button does nothing in that menu, i.e. it doesn't go back to previous menu. Firmware: 2v12.45 Posted at 2022-02-21 by myownself This is the gist from the start of the thread, modified in the way I described (the non-hacky way). https://www.espruino.com/ide/?gist=e346a3df9ab3ab26e5f4238c15e8f7f0 The changes required to menu code are:
becomes:
Posted at 2022-02-22 by @gfwilliams @MyOwnSelf I don't think that's a good idea I'm afraid - if you imagine something like the Settings app, it means that it'd have to have every menu loaded into RAM at once. We really need the functions. We could have Or, maybe we just detect
Then it's kind of obvious from the code what it's going to look like anyway. @malaire thanks - looks like something got broken as it worked in earlier firmwares. I've just fixed it now. Not sure what you mean by:
though Posted at 2022-02-22 by myownself
Ah, ok. I thought about it accepting either the object or a function, but looking through my blinkers at the original gist I didn't think about the need memory issue. Personally I don't exactly love using the label for this (nor the back button, not sure about the memory issue, but I'd have been tempted to have parent menu as an optional parameter to E.showMenu rather than needing to put it explicitly in the submenu). Does using the label add any confusion for translations? At the end of the day, though, the important thing is the distinction between submenu and action. Posted at 2022-02-22 by malaire
I meant that if I go to But actually I'm not sure if button is even intended to work there. Posted at 2022-02-22 by @gfwilliams
Yes, ideally we would have an entry for 'back' alongside the title, but I have to be backwards compatible. I've just added a 'back' entry so hopefully we can move new apps to use that when the new major firmware release goes out.
We currently strip out whitespace and punctuation so it wouldn't be the end of the world to strip that (if it's not already handled) Posted at 2022-02-22 by Mark_M
@gfwilliams, Posted at 2022-02-22 by @gfwilliams
What's the use case for this? If you're planning on making menus look totally different by drawing over them, IMO you really just need to make your own menus using Otherwise what you're doing will likely break if the menu system is drawn in a slightly different way in the future (or if for instance someone installs one of the alternate menu systems from the app loader)
Yes - you just use Graphics.createArrayBuffer to create a Graphics instance, then use Posted at 2022-02-22 by malaire
Is that also written in JS? Where is it defined? Posted at 2022-02-22 by rigrig The built-in versions can be found in the Espruino repo (if there is a Posted at 2022-02-22 by @gfwilliams https://www.espruino.com/Bangle.js+Modification Posted at 2022-02-22 by yngv126399 As a UX designer... thank you for defending checkboxes vs radio buttons! Posted at 2022-02-22 by HughB
That seems an intuitive way to distinguish an action from a submenu. Posted at 2022-02-22 by Mark_M not totally different. Currently I just want to draw a color box on top of an "Color" item. If a rectangle x1,y1,x2,y2 of the item will be passed into the callback it should not break. Posted at 2022-02-22 by rigrig Whoops, that's much better, sorry for not pointing to the docs after you put in so much effort in writing decent ones. Posted at 2022-02-23 by @gfwilliams
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. Posted at 2022-02-23 by Mark_M Ok. I see. I thought the scrolling is done as a whole bitmap shifting. Posted at 2022-02-24 by Alessandro 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? Posted at 2022-02-24 by @gfwilliams 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.
Yes, there's no problem at all. Posted at 2022-02-24 by Alessandro 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 Posted at 2022-02-24 by @gfwilliams 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 Posted at 2022-02-24 by Alessandro Ok, thank you (but I already downgraded to stable release)
Do you mean Swiper Clock Launch? Yes, I have it installed! Posted at 2022-02-25 by @gfwilliams
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 Posted at 2022-03-11 by Kosi2801 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. 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. Attachments: Posted at 2022-03-11 by ajkm
Possibly counter-intuitive? (Though I guess it depends on which wrist you wear your watch...) Posted at 2022-03-14 by @gfwilliams @kosi2801 thanks! I just tried here and I can reproduce this here too. I've just fixed it for the latest cutting-edge firmwares Posted at 2022-03-14 by ChrisS 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). Posted at 2022-03-14 by rigrig Swiping right to go "back" makes sense to me, I think of it as
(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.) Posted at 2022-03-15 by @gfwilliams @chriss thanks - I'll look into this now.
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? Posted at 2022-03-15 by @gfwilliams @chriss ok, latest builds now have this fixed Posted at 2022-03-15 by rigrig 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). And we can add a Bangle.js 2-only X widget. Posted at 2022-03-17 by jeroenpeters1986 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 >< Posted at 2022-03-28 by rigrig I only just noticed the menu draws Posted at 2022-03-29 by @gfwilliams Thanks - I've just put a fix in. That wasn't intentional, no :) Posted at 2022-04-26 by Mi Don't know if caused by new menus system, but found wrong behavior in Accel Logger using 2v13 on bangle 1:
Posted at 2022-04-26 by @gfwilliams That's very strange. I just tried it and it works here for me.
all ok... Do you think you could record a video? Maybe you're doing something slightly different to me... Posted at 2022-04-26 by Mi Yes I can do that. Normal video or Is there some kind of screen record? Posted at 2022-04-26 by @gfwilliams No screen record I'm afraid - just a normal video... Posted at 2022-04-26 by Mi Ok Attachments: Posted at 2022-04-27 by @gfwilliams Ahh, thanks! Sorry, because the title said I'll have a go on Bangle.js 1 and see what the problem is :) Posted at 2022-04-27 by @gfwilliams Thanks! Just fixed! Actually this seems to have been a problem for any app that uses the |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-02-09 by @gfwilliams
Hi!
I've been experimenting with a new look and feel for the built-in menus. I'm interested to see what you think...
https://www.espruino.com/ide/?emulator&upload&gist=0aac0c7a020913a0f162571d9d3b1ee6
Click the above then choose 'Bangle.js 2' as the emulator. You could also just go to:
https://www.espruino.com/ide/?gist=0aac0c7a020913a0f162571d9d3b1ee6
Choose 'RAM' and upload it to your Bangle.js 2 for testing yourself.
Any thoughts? I feel like this will probably improve the look of Bangle.js apps a lot.
Attachments:
Beta Was this translation helpful? Give feedback.
All reactions