Add showscroller polyfill, message app tidying

apps.json

@@ -18,7 +18,7 @@
   {
     "id": "boot",
     "name": "Bootloader",
-    "version": "0.32",
+    "version": "0.33",
     "description": "This is needed by Bangle.js to automatically load the clock, menu, widgets and settings",
     "icon": "bootloader.png",
     "type": "bootloader",

apps/boot/ChangeLog

@@ -34,3 +34,4 @@
 0.32: Fix single quote error in g.wrapString polyfill
       improve g.stringMetrics polyfill
       Fix issue where re-running bootupdate could disable existing polyfills
+0.33: Add E.showScroller polyfill

apps/boot/bootupdate.js

@@ -133,6 +133,11 @@ else if (mode=="updown") {
   throw new Error("Unknown UI mode");
 };\n`;
 }
+delete E.showScroller; // deleting stops us getting confused by our own decl. builtins can't be deleted
+if (!E.showScroller) { // added in 2v11 - this is a limited functionality polyfill
+  boot += `E.showScroller = (function(a){function n(){g.reset();b>=l+c&&(c=1+b-l);b<c&&(c=b);g.setColor(g.theme.fg);for(var d=0;d<l;d++){var m=d+c;if(0>m||m>=a.c)break;var f=24+d*a.h;a.draw(m,{x:0,y:f,w:h,h:a.h});d+c==b&&g.setColor(g.theme.fgG).drawRect(0,f,h-1,f+a.h-1).drawRect(1,f+1,h-2,f+a.h-2)}g.setColor(c?g.theme.fg:g.theme.bg);g.fillPoly([e,6,e-14,20,e+14,20]);g.setColor(a.c>l+c?g.theme.fg:g.theme.bg);g.fillPoly([e,k-7,e-14,k-21,e+14,k-21])}if(!a)return Bangle.setUI();var b=0,c=0,h=g.getWidth(),
+k=g.getHeight(),e=h/2,l=Math.floor((k-48)/a.h);g.clearRect(0,24,h-1,k-1);n();Bangle.setUI("updown",d=>{d?(b+=d,0>b&&(b=a.c-1),b>=a.c&&(b=0),n()):a.select(b)})});\n`;
+}
 delete g.imageMetrics; // deleting stops us getting confused by our own decl. builtins can't be deleted
 if (!g.imageMetrics) { // added in 2v11 - this is a limited functionality polyfill
   boot += `Graphics.prototype.imageMetrics=function(src) {

apps/messages/app.js

@@ -21,9 +21,6 @@ GB({"t":"notify-","id":1})
 GB({"t":"notify","id":1,"src":"Maps","title":"0 yd - High St","body":"Campton - 11:48 ETA","img":"Y2MBAA....AAAAAAAAAAAAAA="})
 GB({"t":"notify~","id":1,"body":"Campton - 11:54 ETA"})
 GB({"t":"notify~","id":1,"title":"High St"})
-GB({"t":"notify~","id":1,"body":"Campton - 11:55 ETA"})
-GB({"t":"notify~","id":1,"title":"0 yd - High St"})
-GB({"t":"notify~","id":1,"body":"Campton - 11:56 ETA"})
 
 */
 
@@ -97,140 +94,6 @@ function showMessage(msgid) {
   });
 }
 
-// Show a single menu item for the message
-function showMessageMenuItem(y, idx) {
-  var msg = MESSAGES[idx];
-  var W = g.getWidth(), H=48;
-  if (msg.new) g.setBgColor("#4F4");
-  else g.setBgColor("#CFC");
-  g.clearRect(0,y,W-1,y+H-1).setColor(g.theme.fg);
-  var m = msg.title+"\n"+msg.body;
-  if (msg.src) g.setFontAlign(1,-1).drawString(msg.src, W-2, y+2);
-  if (msg.title) g.setFontAlign(-1,-1).setFont("12x20").drawString(msg.title, 2,y+2);
-  if (msg.body) {
-    g.setFontAlign(-1,-1).setFont("6x8");
-    var l = g.wrapString(msg.body, W-14);
-    if (l.length>3) {
-      l = l.slice(0,3);
-      l[l.length-1]+="...";
-    }
-    g.drawString(l.join("\n"), 12,y+20);
-  }
-}
-//test
-//g.clear(1); showMessageMenuItem(MESSAGES[0],24)
-
-if (process.env.HWVERSION==1) { // Bangle.js 1
-  showBigMenu = function(options) {
-  /* options = {
-    h = height
-    items = # of items
-    draw = function(y, idx)
-    onSelect = function(idx)
-  }*/
-    var selected = 0;
-    var menuScroll = 0;
-    var menuShowing = false;
-    var w = g.getWidth();
-    var h = g.getHeight();
-    var m = w/2;
-    var n = Math.floor((h-48)/options.h);
-
-    function drawMenu() {
-      g.reset();
-      if (selected>=n+menuScroll) menuScroll = 1+selected-n;
-      if (selected<menuScroll) menuScroll = selected;
-      // draw
-      g.setColor(g.theme.fg);
-      for (var i=0;i<n;i++) {
-        var idx = i+menuScroll;
-        if (idx<0 || idx>=options.items) break;
-        var y = 24+i*options.h;
-        options.draw(y, idx);
-        // border for selected
-        if (i+menuScroll==selected) {
-          g.setColor(g.theme.fgG).drawRect(0,y,w-1,y+options.h-1).drawRect(1,y+1,w-2,y+options.h-2);
-        }
-      }
-      // arrows
-      g.setColor(menuScroll ? g.theme.fg : g.theme.bg);
-      g.fillPoly([m,6,m-14,20,m+14,20]);
-      g.setColor((options.items>n+menuScroll) ? g.theme.fg : g.theme.bg);
-      g.fillPoly([m,h-7,m-14,h-21,m+14,h-21]);
-    }
-    g.clearRect(0,24,w-1,h-1);
-    drawMenu();
-    Bangle.setUI("updown",dir=>{
-      if (dir) {
-        selected += dir;
-        if (selected<0) selected = options.items-1;
-        if (selected>=options.items) selected = 0;
-        drawMenu();
-      } else {
-        options.onSelect(selected);
-      }
-    });
-  }
-} else { // Bangle.js 2
-  showBigMenu = function(options) {
-    /* options = {
-      h = height
-      items = # of items
-      draw = function(y, idx)
-      onSelect = function(idx)
-    }*/
-    var menuScroll = 0;
-    var menuShowing = false;
-    var w = g.getWidth();
-    var h = g.getHeight();
-    var n = Math.ceil((h-24)/options.h);
-    var menuScrollMax = options.h*options.items - (h-24);
-
-    function drawItem(i) {
-      var y = 24+i*options.h-menuScroll;
-      if (i<0 || i>=options.items || y<-options.h || y>=h) return;
-      options.draw(y, i);
-    }
-
-    function drawMenu() {
-      g.reset().clearRect(0,24,w-1,h-1);
-      g.setClipRect(0,24,w-1,h-1);
-      for (var i=0;i<n;i++) drawItem(i);
-      g.setClipRect(0,0,w-1,h-1);
-    }
-    drawMenu();
-    g.flip(); // force an update now to make this snappier
-
-    Bangle.dragHandler = e=>{
-      var dy = e.dy;
-      if (menuScroll - dy < 0)
-        dy = menuScroll;
-      if (menuScroll - dy > menuScrollMax)
-        dy = menuScroll - menuScrollMax;
-      if (!dy) return;
-      g.reset().setClipRect(0,24,g.getWidth()-1,g.getHeight()-1);
-      g.scroll(0,dy);
-      menuScroll -= dy;
-      if (e.dy < 0) {
-        drawItem(Math.floor((menuScroll+24+g.getHeight())/options.h)-1);
-        if (e.dy <= -options.h) drawItem(Math.floor((menuScroll+24+h)/options.h)-2);
-      } else {
-        drawItem(Math.floor((menuScroll+24)/options.h));
-        if (e.dy >= options.h) drawItem(Math.floor((menuScroll+24)/options.h)+1);
-      }
-      g.setClipRect(0,0,w-1,h-1);
-    };
-    Bangle.on('drag',Bangle.dragHandler);
-    Bangle.touchHandler = (_,e)=>{
-      if (e.y<20) return;
-      var i = Math.floor((e.y+menuScroll-24) / options.h);
-      if (i>=0 && i<options.items)
-        options.onSelect(i);
-    };
-    Bangle.on("touch", Bangle.touchHandler);
-  }
-}
-
 function checkMessages(forceShowMenu) {
   // If no messages, just show 'no messages' and return
   if (!MESSAGES.length)
@@ -240,31 +103,39 @@ function checkMessages(forceShowMenu) {
       buttons : {"Ok":1}
     }).then(() => { load() });
   // we have >0 messages
-  // TODO: IF A NEW MESSAGE, SHOW IT
+  // If we have a new message, show it
   if (!forceShowMenu) {
     var newMessages = MESSAGES.filter(m=>m.new);
     if (newMessages.length)
       return showMessage(newMessages[0].id);
   }
   // Otherwise show a menu
-  var m = {
+  E.showScroller({
-    "":{title:"Messages"},
-    "< Back": ()=>load()
-  };
-  /*g.setFont("6x8");
-  MESSAGES.forEach(msg=>{
-    // "id":1575479849,"src":"Hangouts","title":"A Name","body":"message contents"
-    var title = g.wrapString(msg.title, g.getWidth())[0];
-    m[title] = function() {
-      showMessage(msg.id);
-    }
-  });
-  E.showMenu(m);*/
-  showBigMenu({
     h : 48,
-    items : MESSAGES.length,
+    c : MESSAGES.length,
-    draw : showMessageMenuItem,
+    draw : function(idx, r) {"ram"
-    onSelect : idx => showMessage(MESSAGES[idx].id)
+      var msg = MESSAGES[idx-1];
+      if (msg && msg.new) g.setBgColor("#4F4");
+      else g.setBgColor((idx&1) ? "#CFC" : "#9F9");
+      g.clearRect(r.x,r.y,r.x+r.w-1,r.y+r.h-1).setColor(g.theme.fg);
+      if (idx==0) msg = {title:"< Back"};
+      var m = msg.title+"\n"+msg.body;
+      if (msg.src) g.setFontAlign(1,-1).drawString(msg.src, r.x+r.w-2, r.t+2);
+      if (msg.title) g.setFontAlign(-1,-1).setFont("12x20").drawString(msg.title, r.x+2,r.y+2);
+      if (msg.body) {
+        g.setFontAlign(-1,-1).setFont("6x8");
+        var l = g.wrapString(msg.body, r.w-14);
+        if (l.length>3) {
+          l = l.slice(0,3);
+          l[l.length-1]+="...";
+        }
+        g.drawString(l.join("\n"), r.x+12,r.y+20);
+      }
+    },
+    select : idx => {
+      if (idx==0) load();
+      else showMessage(MESSAGES[idx-1].id);
+    }
   });
 }