Layout of Settings menu in B1 and B2

Posted on
  • I am trying to draw color box at right side where normally text values are located.
    I use "format" hook. It is possible to draw inside it, but it does not pass the item rect or just X,Y. So I resort to derive Y by the item number and options.fontHeight.

    function drawColorValue(menu, row, col){
      var options=menu[""];
      var fh = options.fontHeight;
      var ay = 0; //(g.getWidth()==240)?0:8; //workaround
      var x=g.getWidth()-50, 
          y=((options.title)?fh+2:0) + row*fh + 2 + ay;
      //print(myMenu);
      //print(x,y,fh);
      var c=g.getColor();
      g.setColor(col);
      g.fillRect(x+2,y,x+50-2,y+fh);
      g.setColor(c);
      return col;
    }
    
    var myMenu = {
        "" : { 
          "title" : "Title"
        },
        "< Back" : () => back(),
        "Red": {
          value:"#f00",
          format : function (v) {
            return drawColorValue(myMenu, 1, v);
          }
        },
        "Green": {
          value:"#0f0",
          format : function (v) {
            return drawColorValue(myMenu, 2, v);
          }
        },
        "Yellow": {
          value:"#ff0",
          format : function (v) {
            return drawColorValue(myMenu, 3, v);
          }
        }
      };
    E.showMenu(myMenu);
    

    While Y is calculated fine for B1, it has some offset for B2. The offset is 8 pixels down from horizontal title line.
    You can see I can work it around - look near comment "//workaround".
    I've looked into code of graphical_menu.js module, but I do not see where that offset is added. Does B2 use different menu module?
    Ideally it would be nice to have a "drawItem" hook with Graphic and Rect params.


    2 Attachments

    • screenshot (2).png
    • screenshot (3).png
  • Hi - yes, the menu is a bit different on the Bangle - check out https://github.com/espruino/Espruino/blo­b/master/libs/js/banglejs/E_showMenu_Q3.­js

    Passing the coordinates into the draw call would be a really neat idea though - it'd make stuff like this a lot easier

  • Thanks Gordon!
    If I want to make and test the changes in this library, should I put it (copy of it) into my /modules/ dir on my web server? Or it should be there in /lib/js/banglejs/ ?

    tried to put it into /modules/ and load with

    require("http://localhost/mark/BangleApp­s/modules/E_showMenu_Q3.js");
    

    Output

    No errors in http://localhost/mark/BangleApps/modules­/E_showMenu_Q3.js. Minified 4256 bytes to 0 bytes.
    >
     ____                 _
    |  __|___ ___ ___ _ _|_|___ ___
    |  __|_ -| . |  _| | | |   | . |
    |____|___|  _|_| |___|_|_|_|___|
             |_| espruino.com
     2v10.187 (c) 2021 G.Williams
    >
    >Uncaught Error: Unable to load module "http://localhost/mark/BangleApps/module­s/E_showMenu_Q3.js"
     at line 1 col 91
    ...howMenu_Q3.js",function(){});
                                  ^
    >Uncaught Error: Module http://localhost/mark/BangleApps/modules­/E_showMenu_Q3.js not found
     at line 1 col 68
    ...s/modules/E_showMenu_Q3.js");
                                  ^
    
  • There's actually a good tutorial on this at: https://www.espruino.com/Bangle.js+Modif­ication

    But you basically just want to put E.showMenu = (function ....) at the top of your JS code for development. Then eventually it can either be turned into an app or you can do a PR on the main Espruino repo

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

Layout of Settings menu in B1 and B2

Posted by Avatar for Mark_M @Mark_M

Actions