launch 0.25: Remove Vector Font size option (Vector fonts added as other font styles)

Add Height option to set menu item height independently of Font

apps/launch/ChangeLog

@@ -25,5 +25,6 @@
 0.23: Draw a placeholder screen right at the start to speed up apparent boot time
 0.24: Fix Launcher when a custom font from 2v26+ is specified (fix #3787)
       Fix fullscreen when fastloading the launcher. (TODO:fix back btn flicker)
-      Fix showClocks setting not taking effect by now clearing cache when
+0.25: Fix showClocks setting not taking effect by now clearing cache when changing those settings.
-      changing those settings.
+      Remove Vector Font size option (Vector fonts added as other font styles)
+      Add Height option to set menu item height independently of Font

apps/launch/README.md

@@ -8,7 +8,7 @@ The app is needed to display a menu with all the apps installed on your Bangle.
 Settings
 --------
 
-- `Font` - The font used (`4x6`, `6x8`, `12x20`, `6x15` or `Vector`). Default `12x20`.
+- `Font` - The font to use when drawing menu items. Default `22`.
-- `Vector Font Size` - The size of the font if `Font` is set to `Vector`. Default `10`.
+- `Height` - The size of each menu item in the launched. Default `52` where icons are scaled 1:1.
 - `Show Clocks` -  If set to `No` then clocks won't appear in the app list. Default `Yes`.
 - `Fullscreen` - If set to `Yes` then widgets won't be loaded. Default `No`.

apps/launch/app.js

@@ -1,39 +1,35 @@
 { // must be inside our own scope here so that when we are unloaded everything disappears
   let s = require("Storage");
   // handle customised launcher
-  let scaleval = 1, vectorval = 20, fonts = g.getFonts();
-  let font = fonts.includes("12x20") ? "12x20" : "6x8:2";
-  if (fonts.includes("22")) font="22"; // 2v26+
   let settings = Object.assign({
     showClocks: true,
-    fullscreen: false
+    fullscreen: false,
+    height: 52
   }, s.readJSON("launch.json", true) || {});
-  if ("vectorsize" in settings)
+  let font = settings.font;
-    vectorval = parseInt(settings.vectorsize);
+  if (!font || font=="Vector"/*compat with old settings*/) {
-  if ("font" in settings){
+    let fonts = g.getFonts();
-    if(settings.font == "Vector"){
+    font = fonts.includes("12x20") ? "12x20" : "6x8:2";
-      scaleval = vectorval/20;
+    if (fonts.includes("22")) font="22"; // 2v26+
-      font = "Vector"+(vectorval).toString();
-    } else{
-      font = settings.font;
-      scaleval = g.setFont(font).stringMetrics("X").height / 20;
   }
-  }
+  let height = 0|Math.max(settings.height,12), pad = 2;
-  let height = 50*scaleval;
+  let imgsize = height-pad*2, imgscale = imgsize/48;
 
-  // Now apps list is loaded - render
+  // Load widgets if we need to
   if (!settings.fullscreen) {
     Bangle.loadWidgets();
   } else if (global.WIDGETS) {
     require("widget_utils").hide();
   }
-  let R = Bangle.appRect;
+  { // Draw 'placeholder'
+    let R = Bangle.appRect, mid = height/2, th = g.setFont(font).stringMetrics("X").height/2;
     g.reset().clearRect(R).setColor("#888");
     for (var y=R.y;y<R.y2;y+=height) {
-    g.drawRect(5*scaleval,y+5*scaleval,49*scaleval,y+49*scaleval) // image
+      g.drawRect(pad*2,y+pad*2,imgsize-pad,y+imgsize-pad) // image
-     .drawRect(54*scaleval,y+20*scaleval,R.y2-16,y+34*scaleval); // text
+      .drawRect(imgsize+pad*2,y+mid-th,R.y2-R.w/3, y+mid+th); // text
     }
     g.flip();
+  }
 
   // cache app list so launcher loads more quickly
   let launchCache = s.readJSON("launch.cache.json", true)||{};
@@ -62,10 +58,10 @@
       draw : (i, r) => {
         var app = apps[i];
         if (!app) return;
-        g.clearRect((r.x),(r.y),(r.x+r.w-1), (r.y+r.h-1)).setFont(font).setFontAlign(-1,0).drawString(app.name,54*scaleval,r.y+(27*scaleval));
+        g.clearRect(r).setFont(font).setFontAlign(-1,0).drawString(app.name,imgsize+pad*2,r.y+2+r.h/2);
         if (app.icon) {
           if (!app.img) app.img = s.read(app.icon); // load icon if it wasn't loaded
-          try {g.drawImage(app.img,3*scaleval, r.y+(3*scaleval), {scale: scaleval});} catch(e){}
+          try {g.drawImage(app.img, pad, r.y+pad, {scale: imgscale});} catch(e){}
         }
       },
       select : i => {
@@ -85,7 +81,7 @@
         if (lockTimeout) clearTimeout(lockTimeout);
         Bangle.removeListener("lock", lockHandler);
         // Restore widgets if they were hidden by fullscreen setting
-        if (global.WIDGETS && settings.fullscreen) require("widget_utils").show();
+        if (global.WIDGETS) require("widget_utils").show();
       }
     });
     g.flip(); // force a render before widgets have finished drawing
@@ -98,11 +94,12 @@
       lockTimeout = undefined;
       if (locked)
         lockTimeout = setTimeout(Bangle.showClock, 10000);
-    }
+    };
     Bangle.on("lock", lockHandler);
   };
+  // Now apps list is loaded - render
   drawMenu();
-
+  // finally draw widgets
-  if (!settings.fullscreen) // finally draw widgets
+  if (!settings.fullscreen)
     Bangle.drawWidgets();
 }

apps/launch/metadata.json

@@ -2,7 +2,7 @@
   "id": "launch",
   "name": "Launcher",
   "shortName": "Launcher",
-  "version": "0.24",
+  "version": "0.25",
   "description": "This is needed to display a menu allowing you to choose your own applications. You can replace this with a customised launcher.",
   "readme": "README.md",
   "icon": "app.png",

apps/launch/settings.js

@@ -1,42 +1,58 @@
-// make sure to enclose the function in parentheses
 (function(back) {
   let settings = Object.assign({
     showClocks: true,
-    fullscreen: false
+    fullscreen: false,
+    height: 52
   }, require("Storage").readJSON("launch.json", true) || {});
 
-  let fonts = g.getFonts();
+  let fonts = g.getFonts().filter(f=>f!="Vector");
-  function save(key, value) {
+  for (var f=10;f<20;f++) fonts.push("Vector"+f);
-    settings[key] = value;
+  let defaultfont = fonts.includes("12x20") ? "12x20" : "6x8:2";
+  if (fonts.includes("22")) defaultfont="22"; // 2v26+
+
+  let heights = [28,40,52,64,76];
+
+  function save() {
     require("Storage").write("launch.json",settings);
   }
   function clearCache() {
-    require("Storage").erase("launch.cache.json")
+    require("Storage").erase("launch.cache.json");
   }
   const appMenu = {
     "": { "title": /*LANG*/"Launcher" },
     /*LANG*/"< Back": back,
     /*LANG*/"Font": {
-      value: fonts.includes(settings.font)? fonts.indexOf(settings.font) : fonts.indexOf("12x20"),
+      value: fonts.includes(settings.font)? fonts.indexOf(settings.font) : fonts.indexOf(defaultfont),
       min:0, max:fonts.length-1, step:1,wrap:true,
-      onchange: (m) => {save("font", fonts[m])},
+      onchange: (m) => {
+        settings.font=fonts[m];
+        save();
+      },
       format: v => fonts[v]
      },
-    /*LANG*/"Vector Font Size": {
+    /*LANG*/"Height": {
-      value: settings.vectorsize || 10,
+      value: heights.includes(settings.height) ? heights.indexOf(settings.height) : heights.indexOf(52),
-      min:10, max: 20,step:1,wrap:true,
+      min:0, max: heights.length-1,step:1,wrap:true,
-      onchange: (m) => {save("vectorsize", m)}
+      format: v => heights[v]+"px",
+      onchange: (m) => {
+        settings.height=heights[m];
+        save();
+      }
     },
     /*LANG*/"Show Clocks": {
-      value: settings.showClocks == true,
+      value: !!settings.showClocks,
       onchange: (m) => {
-        save("showClocks", m);
+        settings.showClocks=m;
+        save();
         clearCache();
       }
     },
     /*LANG*/"Fullscreen": {
-      value: settings.fullscreen == true,
+      value: !!settings.fullscreen,
-      onchange: (m) => { save("fullscreen", m) }
+      onchange: (m) => {
+        settings.fullscreen=m;
+        save();
+      }
     }
   };
   E.showMenu(appMenu);