Thickness of Menu Items in Bangle 2

Posted on
Page
of 2
/ 2
Next
  • 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.

  • 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.


    1 Attachment

    • settingsmenu2.png
  • Is it possible to hack the font in ShowMenu to support some experimentation ?

  • 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?

  • Is it possible to hack the font in ShowMenu to support some experimentation ?

    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/blo­b/master/libs/js/banglejs/E_showMenu_Q3.­js

    How hard would it be to make the only the selected item bigger?

    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...

  • Here's where I got to with a quick hack.
    Using setFont("Vector",20) and fontheight=20 (Bottom screenshot)

    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)
    and Inconsolata20 (Top screenshot) from fonts.google.com
    I think I like Lato20 the best.

    // save E_showMenu_Q3.js as hackmenu.js and change fontsize to 20 and setFont("Vector",20)
    var hackmenu = eval(require("Storage").read("hackmenu.j­s"));
    
    var m = {
      "" : { "title" : "Settings" },
      "Make Connectable" : function() { LED1.set(); },
      "App/Widget Settings" : function() { LED1.reset(); },
      "BLE" : function() { LED1.set(); },
      "Debug Info" : function() { LED1.reset(); },
      "Beep" : function() { LED1.set(); },
      "Vibration" : function() { LED1.reset(); },
      "Quiet Mode" : function() { LED1.reset(); },
      "Locale" : function() { LED1.reset(); },
      "Exit" : function() { }, // nothing for now
    };
    
    hackmenu(m);
    

    3 Attachments

    • inconsolata20.jpg
    • lato20.jpg
    • vector20.jpg
  • text too tiny to read, even with my reading glasses on.

    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.


    1 Attachment

    • BangleJS2menu.png
  • What about more font control like

    • scale x and y separately
    • kerning



  • Issue with larger font is the line length.

    Options are
    1) narrower spidery font - not a fan, they log butt ugly
    2) when the line is selected the TEXT could be aligned to the end of the line showing the other half
    3) When line is selected it could auto scroll as in ticker tape.
    4) The lines just become menu headings and the selection of the setting itself is done in sub menu's.

    My preference would be 4 as it is visually consistent.

  • Moving the arrow into the same line with the menu title

    I've not really figured out what this arrow does :(

  • I've not really figured out what this arrow does :(

    It is a indicator that there are more menu items as displayed.

  • 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 :)

    4) The lines just become menu headings and the selection of the setting itself is done in sub menu's.

    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)

  • although I feel like the scaling in X and Y could be a good start for testing

    Would really love that ;-)

  • 'g.dump()' in the IDE and it'll give you a nice screenshot

    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.
    Could it be made to work with options 2 or 3 above ?


    1 Attachment

    • download.jpg
  • 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.


    1 Attachment

    • Screenshot at 2021-09-20 14-54-59.png
  • 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.

  • Not sure I understand? But to get the above screenshot I did what's mentioned at http://forum.espruino.com/comments/16182­113/ - and you can change whatever you want in that case

  • hope this describes it better what I tried to suggest :

    • increase line spacing

    • menu text start at offset eg 5 and not 0

  • @MaBe - I think what you mean is the spacing (black) between the line area (yellow) as in the screenshot below which is from an Apple Watch (BTW I don't have one, just grabbed a screenshot off a YouTube video). The advantage of what you suggest is that the text might still fit on the line. But if you are struggling to read the text in the first place there is no change to the font.

    Personally if the selected option line is highlighted using contrasting colours I'd rather have a larger font than a dead region between lines.

    The interesting thing about the Apple screenshot is that they have gone for 4 lines in the scrolling window for lists. The Apple watch settings works the same way, when you select the line you jump to its options list; though some have selector slider switches for on/off etc in the same line.


    1 Attachment

    • apple.png
  • 6x8 font scaled 1x2, but I'm not entirely sure it's an improvement.

    6x8 :1x2 results in a font size of 16 high - so its still around the same size as the existing font.
    I think we need a font height of 20 to be readable (for me anyway).

    I tried setFont('6x8:1x3') - the results looks ok in the screenshot not so readable on the wrist.


    1 Attachment

    • menu6x8x3.jpg
  • Yes, less lines, more space and no menu item at x offset 0, which leads to a easy to readable menu for me. Not sure if easyer to scroll, have to find out by my self. But I believe easier to touch, because it has a lager area.

  • I guess at the end it is all about easy to read and to navigate without slowing it down.

  • 6x8 font scaled 1x2, but I'm not entirely sure it's an improvement.

    There is a small improvement.
    The existing font height is 15.
    The 6x8:1x2 is 16, it looks heavier and hence easier to read, it results in 7 lines rather than 8.

    Here are the 6x8:1x2 (top) and the existing (bottom) screen dumps.

    Conclusion - some marginal improvement by switching to 6x8:1x2 - at low cost effort to implement.


    2 Attachments

    • 6x8x3.jpg
    • existing.jpg
  • The 6x8:1x2 is 16, it looks heavier and hence easier to read

    If the built-in font isn't good for the menu then we could pull it out completely and just use the scaled 6x8 one. My only concern really is it then looks a bit blocky and low-tech.

    The other thing I haven't mentioned so far is the built-in fonts are all fixed-width. Potentially it would be possible to tweak them to give them the option of being variable width, which would help make them take a bit less space.

    I wonder whether we just need to find a different built-in font then. The new bigger one was added specifically for menus - it should be possible to get something like the existing one, but that is more 'bold' and maybe a smidge taller.

  • Agree, think this comes down to a readable built in font of the right size.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Thickness of Menu Items in Bangle 2

Posted by Avatar for HughB @HughB

Actions