promenu: typescript

apps/promenu/bootb2.js

@@ -1,118 +1,104 @@
+"use strict";
 E.showMenu = function (items) {
-  function RectRnd(x1,y1,x2,y2,r) {
+    var RectRnd = function (x1, y1, x2, y2, r) {
-    let pp = [];
+        var pp = [];
         pp.push.apply(pp, g.quadraticBezier([x2 - r, y1, x2, y1, x2, y1 + r]));
         pp.push.apply(pp, g.quadraticBezier([x2, y2 - r, x2, y2, x2 - r, y2]));
         pp.push.apply(pp, g.quadraticBezier([x1 + r, y2, x1, y2, x1, y2 - r]));
         pp.push.apply(pp, g.quadraticBezier([x1, y1 + r, x1, y1, x1 + r, y1]));
         return pp;
-  }
-  function fillRectRnd(x1,y1,x2,y2,r,c) {
-    g.setColor(c);
-    g.fillPoly(RectRnd(x1,y1,x2,y2,r),1);
-    g.setColor(255,255,255);
-  }
-  function drawRectRnd(x1,y1,x2,y2,r,c) {
-    g.setColor(c);
-    g.drawPoly(RectRnd(x1,y1,x2,y2,r),1);
-    g.setColor(255,255,255);
-  }
-  var menuItems = Object.keys(items);
-  var options = items[""];
-  if (!(options instanceof Object)) options = {};
-
-  Bangle.setLCDPower(1); // ensure screen is on
-  if (!items) {
-    Bangle.setUI();
-    return;
-  }
-  if (options) menuItems.splice(menuItems.indexOf(""),1);
-  options.fontHeight = options.fontHeight||25;
-  if (options.scroll)
-    options.selected = options.scroll;
-  else if (options.selected === undefined)
-    options.selected = 0;
-
-  var ar = Bangle.appRect;
-  if (options.topWidgets)
-    ar = {
-      x: ar.x,
-      y: ar.y + 24,
-      w: ar.w,
-      h: ar.h - 24,
-      x2: ar.x2,
-      y2: ar.y2 - 24,
     };
-
+    var fillRectRnd = function (x1, y1, x2, y2, r, c) {
+        g.setColor(c);
+        g.fillPoly(RectRnd(x1, y1, x2, y2, r));
+        g.setColor(255, 255, 255);
+    };
+    var menuItems = Object.keys(items);
+    var options = items[""] || {};
+    if (!(options instanceof Object))
+        options = {};
+    if (options)
+        menuItems.splice(menuItems.indexOf(""), 1);
+    var fontHeight = options.fontHeight || 25;
+    var selected = options.scroll || options.selected || 0;
+    var ar = Bangle.appRect;
     g.reset().clearRect(ar);
-
     var x = ar.x;
     var x2 = ar.x2;
     var y = ar.y;
-  var y2 = ar.y2 - 12; // padding at end for arrow
+    var y2 = ar.y2 - 12;
     if (options.title)
         y += 22;
-  var loc = require("locale");
+    var lastIdx = 0;
+    var selectEdit = undefined;
     var l = {
-    lastIdx : 0,
         draw: function (rowmin, rowmax) {
-      var rows = 0|Math.min((y2-y) / options.fontHeight,menuItems.length);
+            var rows = 0 | Math.min((y2 - y) / fontHeight, menuItems.length);
-      var idx = E.clip(options.selected-(    rows>>1),0,menuItems.length-rows);
+            var idx = E.clip(selected - (rows >> 1), 0, menuItems.length - rows);
-      if (idx!=l.lastIdx) rowmin=undefined; // redraw all if we scrolled
+            if (idx != lastIdx)
-      l.lastIdx = idx;
+                rowmin = undefined;
+            lastIdx = idx;
             var iy = y;
-      g.reset().setFontAlign(0,-1,0).setFont('12x20');
+            g.reset().setFontAlign(0, -1, 0).setFont12x20();
-      if (options.predraw) options.predraw(g);
+            if (options.predraw)
+                options.predraw(g);
             if (rowmin === undefined && options.title)
                 g.drawString(options.title, (x + x2) / 2, y - 21).drawLine(x, y - 2, x2, y - 2).
                     setColor(g.theme.fg).setBgColor(g.theme.bg);
             iy += 4;
             if (rowmin !== undefined) {
                 if (idx < rowmin) {
-          iy += options.fontHeight*(rowmin-idx);
+                    iy += fontHeight * (rowmin - idx);
                     idx = rowmin;
                 }
-        if (idx+rows>rowmax) {
+                if (rowmax && idx + rows > rowmax) {
                     rows = 1 + rowmax - rowmin;
                 }
             }
             while (rows--) {
                 var name = menuItems[idx];
                 var item = items[name];
-        var hl = (idx==options.selected && !l.selectEdit);
+                var hl = (idx === selected && !selectEdit);
                 if (g.theme.dark) {
-          fillRectRnd(x,iy,x2,iy+options.fontHeight-3,7,hl ? g.theme.bgH : g.theme.bg+40);
+                    fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
-        }else{
+                }
-          fillRectRnd(x,iy,x2,iy+options.fontHeight-3,7,hl ? g.theme.bgH : g.theme.bg-20);
+                else {
+                    fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
                 }
                 g.setColor(hl ? g.theme.fgH : g.theme.fg);
                 g.setFontAlign(-1, -1);
-        var v = item.value;
+                var v = void 0;
-        v = loc.translate(""+v);
+                if (typeof item === "object") {
-        if(loc.translate(name).length >= 17-v.length && "object" == typeof item){
+                    v = "format" in item
-          if (item.format) v=item.format(v);
+                        ? item.format(item.value)
-          g.drawString(loc.translate(name).substring(0, 12-v.length)+"...",x+3.7,iy+2.7);
+                        : item.value;
-        }else{
+                }
-          if(loc.translate(name).length >= 15){
+                else {
-            g.drawString(loc.translate(name).substring(0, 15)+"...",x+3.7,iy+2.7);
+                    v = "";
-          }else{
+                }
-            g.drawString(loc.translate(name),x+3.7,iy+2.7);
+                {
+                    if (name.length >= 17 - v.length && typeof item === "object") {
+                        g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7);
+                    }
+                    else {
+                        if (name.length >= 15) {
+                            g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7);
+                        }
+                        else {
+                            g.drawString(name, x + 3.7, iy + 2.7);
                         }
                     }
-        if ("object" == typeof item) {
                     var xo = x2;
-          var v = item.value;
+                    if (selectEdit && idx === selected) {
-          if (item.format) v=item.format(v);
-          v = loc.translate(""+v);
-          if (l.selectEdit && idx==options.selected) {
                         xo -= 24 + 1;
-            g.setColor(g.theme.fgH).drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@",xo,iy+(options.fontHeight-10)/2,{scale:2});
+                        g.setColor(g.theme.fgH)
+                            .drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", xo, iy + (fontHeight - 10) / 2, { scale: 2 });
                     }
                     g.setFontAlign(1, -1);
                     g.drawString(v, xo - 2, iy + 1);
                 }
                 g.setColor(g.theme.fg);
-        iy += options.fontHeight;
+                iy += fontHeight;
                 idx++;
             }
             g.setFontAlign(-1, -1);
@@ -120,43 +106,63 @@ E.showMenu = function(items) {
             g.flip();
         },
         select: function () {
-      var item = items[menuItems[options.selected]];
+            var item = items[menuItems[selected]];
-      if ("function" == typeof item) item(l);
+            if (typeof item === "function") {
-      else if ("object" == typeof item) {
+                item();
-        // if a number, go into 'edit mode'
+            }
-        if ("number" == typeof item.value)
+            else if (typeof item === "object") {
-          l.selectEdit = l.selectEdit?undefined:item;
+                if (typeof item.value === "number") {
-        else { // else just toggle bools
+                    selectEdit = selectEdit ? undefined : item;
-          if ("boolean" == typeof item.value) item.value=!item.value;
+                }
-          if (item.onchange) item.onchange(item.value);
+                else {
+                    if (typeof item.value === "boolean")
+                        item.value = !item.value;
+                    if (item.onchange)
+                        item.onchange(item.value);
                 }
                 l.draw();
             }
         },
         move: function (dir) {
-      var item = l.selectEdit;
+            var item = selectEdit;
-      if (item) {
+            if (typeof item === "object" && typeof item.value === "number") {
-        item.value -= (dir||1)*(item.step||1);
+                item.value += (-dir || 1) * (item.step || 1);
-        if (item.min!==undefined && item.value<item.min) item.value = item.wrap ? item.max : item.min;
+                if (item.min && item.value < item.min)
-        if (item.max!==undefined && item.value>item.max) item.value = item.wrap ? item.min : item.max;
+                    item.value = item.wrap ? item.max : item.min;
-        if (item.onchange) item.onchange(item.value);
+                if ("max" in item && item.value > item.max)
-        l.draw(options.selected,options.selected);
+                    item.value = item.wrap ? item.min : item.max;
-      } else {
+                if (item.onchange)
-        var lastSelected=options.selected;
+                    item.onchange(item.value);
-        options.selected = (dir+options.selected+menuItems.length)%menuItems.length;
+                l.draw(selected, selected);
-        l.draw(Math.min(lastSelected,options.selected), Math.max(lastSelected,options.selected));
             }
+            else {
+                var lastSelected = selected;
+                selected = (selected + dir + menuItems.length) % menuItems.length;
+                l.draw(Math.min(lastSelected, selected), Math.max(lastSelected, selected));
             }
+        },
     };
     l.draw();
-  Bangle.setUI("updown",dir => {
+    Bangle.setUI("updown", function (dir) {
-    if (dir) l.move(dir);
+        if (dir)
-    else l.select();
+            l.move(dir);
+        else
+            l.select();
+    });
+    var back = options.back;
+    if (!back) {
+        var backItem = items["< Back"];
+        if (typeof backItem === "function")
+            back = backItem;
+        else if (backItem && "back" in backItem)
+            back = backItem.back;
+    }
+    if (typeof back === "function") {
+        var back_1 = back;
+        Bangle.on('swipe', function (lr, _ud) {
+            if (lr < 0)
+                back_1();
         });
-  if (options.back) {
-    Bangle.on('swipe', (lr, _ud) => {
-      if (lr < 0) back();
-    })
     }
     return l;
 };

apps/promenu/bootb2.ts

@@ -0,0 +1,187 @@
+type ActualMenuItem = Exclude<Menu["..."], MenuOptions | undefined>;
+
+(E.showMenu as any) = (items: Menu): MenuInstance => {
+  const RectRnd = (x1: number, y1: number, x2: number, y2: number, r: number) => {
+    const pp = [];
+    pp.push(...g.quadraticBezier([x2 - r, y1, x2, y1, x2, y1 + r]));
+    pp.push(...g.quadraticBezier([x2, y2 - r, x2, y2, x2 - r, y2]));
+    pp.push(...g.quadraticBezier([x1 + r, y2, x1, y2, x1, y2 - r]));
+    pp.push(...g.quadraticBezier([x1, y1 + r, x1, y1, x1 + r, y1]));
+    return pp;
+  };
+  const fillRectRnd = (x1: number, y1: number, x2: number, y2: number, r: number, c: ColorResolvable) => {
+    g.setColor(c);
+    g.fillPoly(RectRnd(x1, y1, x2, y2, r));
+    g.setColor(255, 255, 255);
+  };
+  const menuItems = Object.keys(items);
+  let options = items[""] || {};
+  if (!(options instanceof Object)) options = {};
+
+  if (options)
+    menuItems.splice(menuItems.indexOf(""), 1);
+
+  const fontHeight = options.fontHeight||25;
+
+  let selected = options.scroll || options.selected || 0;
+
+  const ar = Bangle.appRect;
+  g.reset().clearRect(ar);
+
+  const x = ar.x;
+  const x2 = ar.x2;
+  let y = ar.y;
+  const y2 = ar.y2 - 12; // padding at end for arrow
+  if (options.title)
+    y += 22;
+
+  let lastIdx = 0;
+  let selectEdit: undefined | ActualMenuItem = undefined;
+
+  const l = {
+    draw: (rowmin?: number, rowmax?: number) => {
+      let rows = 0|Math.min((y2 - y) / fontHeight, menuItems.length);
+      let idx = E.clip(selected - (rows>>1), 0, menuItems.length - rows);
+
+      if (idx != lastIdx) rowmin=undefined; // redraw all if we scrolled
+      lastIdx = idx;
+      let iy = y;
+      g.reset().setFontAlign(0, -1, 0).setFont12x20();
+      if (options.predraw) options.predraw(g);
+      if (rowmin === undefined && options.title)
+        g.drawString(options.title, (x + x2) / 2, y - 21).drawLine(x, y - 2, x2, y - 2).
+          setColor(g.theme.fg).setBgColor(g.theme.bg);
+      iy += 4;
+      if (rowmin !== undefined) {
+        if (idx < rowmin) {
+          iy += fontHeight * (rowmin - idx);
+          idx = rowmin;
+        }
+        if (rowmax && idx + rows > rowmax) {
+          rows = 1 + rowmax - rowmin;
+        }
+      }
+      while (rows--) {
+        const name = menuItems[idx];
+        const item = items[name]! as ActualMenuItem;
+
+        const hl = (idx === selected && !selectEdit);
+        if(g.theme.dark){
+          fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
+        }else{
+          fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
+        }
+
+        g.setColor(hl ? g.theme.fgH : g.theme.fg);
+        g.setFontAlign( - 1, -1);
+
+        let v;
+        if (typeof item === "object") {
+          v = "format" in item
+            ? (item.format as any)(item.value) // <T>format(), value: T
+            : item.value;
+        } else {
+          v = "";
+        }
+
+        /*???*/{
+          if(name.length >= 17 - v.length && typeof item === "object"){
+            g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7);
+          }else{
+            if(name.length >= 15){
+              g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7);
+            }else{
+              g.drawString(name, x + 3.7, iy + 2.7);
+            }
+          }
+
+          let xo = x2;
+          if (selectEdit && idx === selected) {
+            xo -= 24 + 1;
+            g.setColor(g.theme.fgH)
+              .drawImage(
+                "\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@",
+                xo,
+                iy + (fontHeight - 10) / 2,
+                {scale:2},
+              );
+          }
+          g.setFontAlign(1, -1);
+          g.drawString(v, xo - 2, iy + 1);
+        }
+
+        g.setColor(g.theme.fg);
+        iy += fontHeight;
+        idx++;
+      }
+      g.setFontAlign( - 1, -1);
+      g.setColor((idx < menuItems.length)?g.theme.fg:g.theme.bg).fillPoly([72, 166, 104, 166, 88, 174]);
+      g.flip();
+    },
+    select: () => {
+      const item = items[menuItems[selected]] as ActualMenuItem;
+
+      if (typeof item === "function") {
+        item();
+      } else if (typeof item === "object") {
+        if (typeof item.value === "number") {
+          selectEdit = selectEdit ? undefined : item;
+        } else {
+          if (typeof item.value === "boolean")
+            item.value = !item.value;
+
+          if (item.onchange)
+            (item.onchange as any)(item.value);
+        }
+        l.draw();
+      }
+    },
+    move: (dir: number) => {
+      const item = selectEdit;
+
+      if (typeof item === "object" && typeof item.value === "number") {
+        item.value += (-dir||1) * (item.step||1);
+
+        if (item.min && item.value < item.min)
+          item.value = item.wrap ? item.max as number : item.min;
+
+        if ("max" in item && item.value > item.max)
+          item.value = item.wrap ? item.min as number : item.max;
+
+        if (item.onchange)
+          item.onchange(item.value);
+
+        l.draw(selected, selected);
+
+      } else {
+        const lastSelected = selected;
+        selected = (selected + dir + /*keep +ve*/menuItems.length) % menuItems.length;
+        l.draw(Math.min(lastSelected, selected), Math.max(lastSelected, selected));
+      }
+    },
+  };
+
+  l.draw();
+
+  Bangle.setUI("updown", dir => {
+    if (dir) l.move(dir);
+    else l.select();
+  });
+
+  let back = options.back;
+  if (!back) {
+    const backItem = items["< Back"];
+    if (typeof backItem === "function")
+      back = backItem;
+    else if (backItem && "back" in backItem)
+      back = backItem.back;
+  }
+  if (typeof back === "function") {
+    const back_ = back;
+    Bangle.on('swipe', (lr, _ud) => {
+      if (lr < 0) back_();
+    })
+  }
+
+  return l;
+};