Thickness of Menu Items in Bangle 2 #2990
Replies: 43 comments
-
Posted at 2021-09-15 by @gfwilliams Just interested on other people's views on this. An example of the Bangle.js 2 menu is below. Right now the font size in real life is about the same as on Bangle.js 1. One question is: do we go for large areas that you can physically tap with your finger (but you're looking at realistically only 3 menu items per page), do we keep things as-is, or do we use a bigger font. If you use a much bigger font then you risk some menu items over-running, but potentially we could have something that was taller and more bold, but not actually wider.Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-16 by HughB Is it possible to hack the font in ShowMenu to support some experimentation ? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-16 by NebbishHacker How hard would it be to make the only the selected item bigger? That would allow us to fit nearly as many items on screen, while simultaneously allowing the user to clearly read what they're about to select. It might also make it more obvious that you have to scroll to highlight the item before tapping on it. If text overrun is a problem, maybe we could add some sort of marquee affect? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-17 by @gfwilliams
Yes - an example of doing that is here: http://forum.espruino.com/conversations/367303/#comment16156797 For the Bangle.js 2 you'll need to base it off the code for that: https://github.com/espruino/Espruino/blob/master/libs/js/banglejs/E_showMenu_Q3.js
Interesting idea. Right now we only redraw the menu items that have changed (unless we scroll) so it could be more problematic. Maybe not impossible though... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-18 by HughB Here's where I got to with a quick hack. This shows that you can get 6 lines on a full screen with a font height of 20 and its much more readable. However this is not allowing for the setting of the value eg Show/Hide, On/Off. But that could be in a standard submenu rather than trying to show it on the same line. Other watch menus take that approach. I also tried Lato20 (Middle screenshot)
Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-18 by @allObjects
Absolutely share your pain! Going down to 6 from 8 items is already a great eye relieve. Moving the arrow into the same line with the menu title - at the end of the line - would give some extra pixels for the line height / font height (see 'shopped' attachment). Issue with larger font is the line length. Answer to that would be narrow / condensed font. Uppercase letters with only one or two verticals can be made much narrower to save space too (such as A, B, C, D, E, H,...,U,V,Z). Issue with legibility is the ability to distinguish the number of vertical and horizontal parts in a char.Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-18 by @MaBecker What about more font control like
|
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-19 by HughB
Options are
My preference would be 4 as it is visually consistent. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-19 by HughB
I've not really figured out what this arrow does :( |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-19 by @MaBecker
It is a indicator that there are more menu items as displayed. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-20 by @gfwilliams Just FYI on Bangle.js 2, type 'g.dump()' in the IDE and it'll give you a nice screenshot which you can then share. A lot easier than trying to take a pic by hand :)
I really don't like this - often I want to go into a menu and see what things are set to at a glance, without scrolling to each one and tapping. I can't be the only one... I guess we could do that only in the case where the line is too long, but it just seems a bit messy. In terms of fonts, I had been using https://github.com/Tecate/bitmap-fonts as a source for Espruino since they are already bitmaps (it's much nicer than scaling a vector font), but I'm not sure they do anything particularly narrow (or even 20px). I guess potentially we could look at making a custom font, although I feel like the scaling in X and Y could be a good start for testing (github issue here) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-20 by @MaBecker
Would really love that ;-) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-20 by HughB
Gave it a try, really good. Thank you for reminding me of this. I remember the announcement on a different thread but never checked it out. I remember you said it was a bit slow, but it did it in less than 1 second. Thats going to save a lot of time for me, when I do a README file. I think Vector font, size 20 was significantly more readable. Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-20 by @gfwilliams Vector font could be made to work that way I guess, although I believe rendering would be significantly slower. Just to add that cutting edge builds now have font width/height selection, below is the 6x8 font scaled 1x2, but I'm not entirely sure it's an improvement.Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-20 by @MaBecker Is it possible to pass the vertical distance between menu lines and a left offset? My guess is that this helps as well to achieve more readability. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-12 by @gfwilliams Thanks! Yes, I think that seems sensible, especially with the margin change. IMO the font could be a little less wide? I guess it's possible I'll end up tweaking the font slightly to customise it. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-12 by HughB No 3 from the top - but with a font height of 20 so that you get 6 options per screen. As shown it looks like you would still get 8 options which is too small. However it looks more readable than the existing font for showMenu(); Its not easy finding a font that works and looks nice. I have just spent a couple of hours trying out various ones on fonts.google.com. The problem is that 300 fonts come out too spidery and weedy, where as regular 400 fonts come out thick and blotchy. I have tried out most of these but they all look very similiar at 400. Attached is my hackemnu.js code.
Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-12 by uname the second from the top, I would really like everything like this (or the possibility of enabling it). |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-13 by @MaBecker I like the second one from top
yes, that would be nice |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-13 by @gfwilliams
Yes, that sounds about right :) I think converting existing web fonts is probably a non-starter as they're not designed for 1bpp rendering. Potentially we'd have to take a font, render it to 1bpp and then tweak it manually pixel by pixel to remove the jaggies. The fonts above are from https://github.com/Tecate/bitmap-fonts and at least they are designed for 1bpp I have a feeling what's going to happen is I'll go for something in the middle, but then I'll provide some apps that allow you to change the built-in menus either to make them bigger or smaller. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-13 by @MaBecker
Like that! |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-13 by HughB Interesting site. I remember messing on with X11 font. Making the Menu Size / Font configurable is probaly the way to go. Each to his own poison. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-14 by @gfwilliams I'm afraid right now I have a massively hacky script I use for conversion that's not part of Espruino - so no easy way to try them I'm afraid |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-15 by HughB The standard 6x8 scaled at 2 is actually quite an acceptable font for the menus in settings.
If this is what had been used on the B2 when I had first seen it I dont think it I would have noticed any usuability issues. To make some of the menu text shorter, App/Widget Settings => App Settings Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-16 by @MaBecker
I like it |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-16 by HughB Just updated to fw 2.10.114 and can see that @gfwilliams has changed the system font for the menu's. Here is what the settings app now looks like. Much easier to read. My preference would be still be the 6x8 x2, but the new solution also works for me.Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-21 by @gfwilliams There's now a tutorial on how to modify menus and things yourself at https://www.espruino.com/Bangle.js+Modification |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-23 by HughB Thanks @gfwilliams - we can now die by our own mis-configurations. I had a look at this and got as far as.
The code is mimified ? Is there a way to unmimify ? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-23 by Robin Sat 2021.10.23 Is this what you are after?
|
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-10-24 by HughB Yes, makes sense. I did not realise there were two versions and associate_min as being mimified- obvious now - doh! |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-09-15 by HughB
Starting a new thread from a discussion around the thickness of the menu item lists in the Bangle 2.
They are possibly a bit thin and hard to use.
If find the text too tiny to read, even with my reading glasses on.
Navigation works well using swipe up / down and you can select an option that is highlighted just by tapping the sceen somewhere else. So my main complaint is not being able to read the text.
Beta Was this translation helpful? Give feedback.
All reactions