[E.showMenu] Add option to add separators

libs/banglejs/jswrap_bangle.c

@@ -6001,7 +6001,8 @@ var mainmenu = {
   "" : { title : "-- Main Menu --" }, // options
   "LED On" : function() { LED1.set(); },
   "LED Off" : function() { LED1.reset(); },
-  "Submenu" : function() { E.showMenu(submenu); },
+  "Submenu" : function() { E.showMenu(submenu); }, // can call any function here
+  "A Separator":"separator", // displays a separator with the title "A Separator". 
   "A Boolean" : {
     value : boolean,
     format : v => v?"On":"Off",

libs/js/banglejs/E_showMenu_Q3.js

@@ -111,33 +111,44 @@
   };
   var scr = {
     h : H, c : keys.length/*title*/,
-    scrollMin : -24, scroll : options.scroll??-24, // title is 24px, rendered at -1
+    scrollMin : -32, scroll : options.scroll??-32, // title is 32px high, rendered at -1
     back : back,
     remove : options.remove,
     draw : (idx, r) => {
       g.setFontAlign(-1,0);
       if (idx<0) // TITLE
-        return g.drawString(g.findFont(menuIcon+" "+options.title, {w:r.w,h:24,max:24}).text, r.x+12, r.y+H-10);
-      g.setColor(g.theme.bg2).fillRect({x:r.x+4, y:r.y+2, w:r.w-8, h:r.h-4, r:5}).setColor(g.theme.fg2);
+        return g.drawString(g.findFont(menuIcon+" "+options.title, {w:r.w,h:24,max:24}).text, r.x+12, (r.y+r.h/2)+4);
       var item = menu[keys[idx]], pad = 16;
+      var isSeparator = "string" == typeof item && (item == "separator" || item == "Separator")
+      if(isSeparator){
+        g.setColor(g.theme.fg).drawLine(r.x, r.y+r.h-3, r.w, r.y+r.h-3);
+      }else{
+        g.setColor(g.theme.bg2).fillRect({x:r.x+4, y:r.y+2, w:r.w-8, h:r.h-4, r:5}).setColor(g.theme.fg2);
+      }
       if ("object" == typeof item) {
         var v = item.value;
         if (item.format) v=item.format(v);
         if (v!==undefined) {
           var val = g.findFont(v, {w:r.w/2,h:r.h,wrap:1,trim:1});
           g.setFontAlign(1,0).drawString(val.text,r.x+r.w-8,2+r.y+H/2);
           pad += g.stringWidth(val.text);
+          pad+=5;//add more padding so text is not right against the box
         }
       } else if ("function" == typeof item) {
         g.drawImage(/* 9x18 */atob("CRKBAGA4Hg8DwPB4HgcDg8PB4eHg8HAwAA=="), r.x+r.w-21, r.y+H/2-9);
         pad += 16;
       }
-      g.setFontAlign(-1,0).drawString(g.findFont((item&&item.title)??keys[idx], {w:r.w-pad,h:r.h,wrap:1,trim:1}).text, r.x+8, 2+r.y+H/2);
+      if(isSeparator){
+        g.setFontAlign(0).drawString(g.findFont((item&&item.title)??keys[idx], {w:r.w-pad,h:r.h-15,wrap:1,trim:1}).text,r.x+r.w/2, 2+r.y+H/2);
+      }else{
+        g.setFontAlign(-1,0).drawString(g.findFont((item&&item.title)??keys[idx], {w:r.w-pad,h:r.h,wrap:1,trim:1}).text,r.x+8, 2+r.y+H/2);
+      }
     },
     select : function(idx, touch) {
       if (idx<0) return back&&back(); // title
       var item = menu[keys[idx]];
-      Bangle.buzz(20);
+      var isSeparator= "string" == typeof item&&(item=="separator"||item=="Separator")
+      if(!isSeparator)Bangle.buzz(20);
       if ("function" == typeof item) item(touch);
       else if ("object" == typeof item) {
         if ("number" == typeof item.value) {
@@ -157,4 +168,4 @@
   }
   show();
   return l;
-})
+})