0.06: Complete rewrite in 80x80, better perf, add settings

apps.json

@@ -1092,14 +1092,16 @@
   },
   { "id": "toucher",
     "name": "Touch Launcher",
-    "shortName":"Menu",
+    "shortName":"Toucher",
     "icon": "app.png",
     "version":"0.06",
     "description": "Touch enable left to right launcher.",
     "tags": "tool,system,launcher",
     "type":"launch",
     "storage": [
-      {"name":"toucher.app.js","url":"app.js"}
+      {"name":"toucher.app.js","url":"app.js"},
+      {"name":"toucher.settings.js","url":"settings.js"},
+      {"name":"toucher.json"}
     ],
     "sortorder" : -10
   },

apps/toucher/ChangeLog

@@ -3,4 +3,4 @@
 0.03: Close launcher when lcd turn off
 0.04: Complete rewrite to add animation and loop ( issue  #210 )
 0.05: Improve perf
-0.06: Only store relevant app data (saves RAM when many apps)
+0.06: Complete rewrite in 80x80, better perf, add settings

apps/toucher/app.js

@@ -1,160 +1,206 @@
-Bangle.setLCDMode("120x120");
+const Storage = require("Storage");
+const filename = 'toucher.json';
+let settings = Storage.readJSON(filename,1) || {
+  hightres: true,
+  animation : true,
+  frame : 3,
+  debug: false
+};
+
+if(!settings.highres) Bangle.setLCDMode("80x80");
+else Bangle.setLCDMode();
+
 g.clear();
 g.flip();
 
-const Storage = require("Storage");
+let icons = {};
+
+const HEIGHT = g.getHeight();
+const WIDTH = g.getWidth();
+const HALF = WIDTH/2;
+const ORIGINAL_ICON_SIZE = 48;
+
+const STATE = {
+  settings_open: false,
+  index: 0,
+  target: 240,
+  offset: 0
+};
+
+function getPosition(index){
+  return (index*HALF);
+}
 
 function getApps(){
-  return Storage.list(/\.info$/).map(app=>{var a=Storage.readJSON(app,1);return a&&{name:a.name,type:a.type,icon:a.icon,sortorder:a.sortorder,src:a.src,version:a.version}})
+    const exit_app = {
-    .filter(app=>app && (app.type=="app" || app.type=="clock" || !app.type))
+      name: 'Exit',
+      special: true
+    };
+    const raw_apps = Storage.list(/\.info$/).filter(app => app.endsWith('.info')).map(app => Storage.readJSON(app,1) || { name: "DEAD: "+app.substr(1) })
+        .filter(app=>app.type=="app" || app.type=="clock" || !app.type)
         .sort((a,b)=>{
         var n=(0|a.sortorder)-(0|b.sortorder);
         if (n) return n; // do sortorder first
         if (a.name<b.name) return -1;
         if (a.name>b.name) return 1;
         return 0;
+    }).map(raw => ({
+      name: raw.name,
+      src: raw.src,
+      icon: raw.icon,
+      version: raw.version
+    }));
+
+    const apps = [Object.assign({}, exit_app)].concat(raw_apps);
+    apps.push(exit_app);
+    return apps.map((app, i) => {
+      app.x = getPosition(i);
+      return app;
     });
 }
 
-const HEIGHT = g.getHeight();
+const APPS = getApps();
-const WIDTH = g.getWidth();
-const HALF = WIDTH/2;
-const ANIMATION_FRAME = 4;
-const ANIMATION_STEP = HALF / ANIMATION_FRAME;
 
-function getPosition(index){
+function noIcon(x, y, scale){
-  return (index*HALF);
+  if(scale < 0.2) return;
+  g.setColor(scale, scale, scale);
+  g.setFontAlign(0,0);
+  g.setFont('6x8',settings.highres ? 6:3);
+  g.drawString('x_x', x+1.5, y);
+  const h = (ORIGINAL_ICON_SIZE/3);
+  g.drawRect(x-h, y-h, x+h, y+h);
 }
 
-let current_app = 0;
+function render(){
-let target = 0;
+  const start = Date.now();
-let slideOffset = 0;
 
-const back = {
+  const ANIMATION_FRAME = settings.frame;
-  name: 'BACK',
+  const ANIMATION_STEP = Math.floor(HALF / ANIMATION_FRAME);
-  back: true
+  const THRESHOLD = ANIMATION_STEP - 1;
-};
 
-let icons = {};
+  g.clear();
+  const visibleApps = APPS.filter(app => app.x >= STATE.offset-HALF && app.x <= STATE.offset+WIDTH-HALF );
 
-const apps = [back].concat(getApps());
+  visibleApps.forEach(app => {
-apps.push(back);
 
-function noIcon(x, y, size){
+    const x = app.x+HALF-STATE.offset;
-  const half = size/2;
+    const y = HALF - (HALF*0.3);
-  g.setColor(1,1,1);
-  g.setFontAlign(-0,0);
-  const fontSize = Math.floor(size / 30 * 2);
-  g.setFont('6x8', fontSize);
-  if(fontSize) g.drawString('-?-', x+1.5, y);
-  g.drawRect(x-half, y-half, x+half, y+half);
-}
 
-function drawIcons(offset){
+    let dist = HALF - x;
-  apps.forEach((app, i) => {
+    if(dist < 0) dist *= -1;
-    const x = getPosition(i) + HALF - offset;
-    const y = HALF - (HALF*0.3);//-(HALF*0.7);
-    let diff = (x - HALF);
-    if(diff < 0) diff *=-1;
 
-    const dontRender = x+(HALF/2)<0 || x-(HALF/2)>120;
+    const scale = 1 - (dist / HALF);
-    if(dontRender) {
+
-      delete icons[app.name];
+    if(!scale) return;
+
+    if(app.special){
+      const font = settings.highres ? '6x8' : '4x6';
+      const fontSize = settings.highres ? 2 : 1;
+      g.setFont(font, fontSize);
+      g.setColor(scale,scale,scale);
+      g.setFontAlign(0,0);
+      g.drawString(app.name, HALF, HALF);
       return;
     }
-    let size = 30;
-    if((diff*0.5) < size) size -= (diff*0.5);
-    else size = 0;
-
-    const scale = size / 30;
-    if(size){
-      let c = size / 30 * 2;
-      c = c -1;
-      if(c < 0) c = 0;
-
-      if(app.back){
-        g.setFont('6x8', 1);
-        g.setFontAlign(0, -1);
-        g.setColor(c,c,c);
-        g.drawString('Back', HALF, HALF);
-        return;
-      }
-      // icon
 
+    //draw icon
     const icon = app.icon ?
         icons[app.name] ? icons[app.name] :  Storage.read(app.icon)
         : null;
+
     if(icon){
       icons[app.name] = icon;
       try {
-          g.drawImage(icon, x-(scale*24), y-(scale*24), { scale: scale });
+        const rescale = settings.highres ? scale*ORIGINAL_ICON_SIZE : (scale*(ORIGINAL_ICON_SIZE/2));
+        const imageScale = settings.highres ? scale*2 : scale;
+        g.drawImage(icon, x-rescale, y-rescale, { scale: imageScale });
       } catch(e){
-          noIcon(x, y, size);
+        noIcon(x, y, scale);
       }
     }else{
-        noIcon(x, y, size);
+      noIcon(x, y, scale);
     }
-      //text
-      g.setFont('6x8', 1);
-      g.setFontAlign(0, -1);
-      g.setColor(c,c,c);
-      g.drawString(app.name, HALF, HEIGHT - (HALF*0.7));
 
+    //draw text
+    g.setColor(scale,scale,scale);
+    if(scale > 0.1){
+      const font = settings.highres ? '6x8': '4x6';
+      const fontSize = settings.highres ? 2 : 1;
+      g.setFont(font, fontSize);
+      g.setFontAlign(0,0);
+      g.drawString(app.name, HALF, HEIGHT/4*3);
+    }
+
+    if(settings.highres){
         const type = app.type ? app.type : 'App';
         const version = app.version ? app.version : '0.00';
         const info = type+' v'+version;
         g.setFontAlign(0,1);
-      g.setFont('4x6', 0.25);
+        g.setFont('6x8', 1.5);
-      g.setColor(c,c,c);
+        g.setColor(scale,scale,scale);
-      g.drawString(info, HALF, 110, { scale: scale });
+        g.drawString(info, HALF, 215, { scale: scale });
     }
-  });
-}
 
-function draw(ignoreLoop){
+  });
-  g.setColor(0,0,0);
+
-  g.fillRect(0,0,WIDTH,HEIGHT);
+  const duration = Math.floor(Date.now()-start);
-  drawIcons(slideOffset);
+  if(settings.debug){
+    g.setFontAlign(0,1);
+    g.setColor(0, 1, 0);
+    const fontSize = settings.highres ? 2 : 1;
+    g.setFont('4x6',fontSize);
+    g.drawString('Render: '+duration+'ms', HALF, HEIGHT);
+  }
   g.flip();
-  if(slideOffset == target) return;
+  if(STATE.offset == STATE.target) return;
-  if(slideOffset < target) slideOffset+= ANIMATION_STEP;
+
-  else if(slideOffset > target) slideOffset -= ANIMATION_STEP;
+  if(STATE.offset < STATE.target) STATE.offset += ANIMATION_STEP;
-  if(!ignoreLoop) draw();
+  else if(STATE.offset > STATE.target) STATE.offset -= ANIMATION_STEP;
+
+  if(STATE.offset >= STATE.target-THRESHOLD && STATE.offset < STATE.target) STATE.offset = STATE.target;
+  if(STATE.offset <= STATE.target+THRESHOLD && STATE.offset > STATE.target) STATE.offset = STATE.target;
+  setTimeout(render, 0);
 }
 
 function animateTo(index){
-  target = getPosition(index);
+  STATE.index = index;
-  draw();
+  STATE.target = getPosition(index);
-}
+  render();
-function goTo(index){
-  current_app = index;
-  target = getPosition(index);
-  slideOffset = target;
-  draw(true);
 }
 
-goTo(1);
+function jumpTo(index){
+  STATE.index = index;
+  STATE.target = getPosition(index);
+  STATE.offset = STATE.target;
+  render();
+}
 
 function prev(){
-  if(current_app == 0) goTo(apps.length-1);
+  if(STATE.settings_open) return;
-  current_app -= 1;
+  if(STATE.index == 0) jumpTo(APPS.length-1);
-  if(current_app < 0) current_app = 0;
+  setTimeout(() => {
-  animateTo(current_app);
+    if(!settings.animation) jumpTo(STATE.index-1);
+    else animateTo(STATE.index-1);
+  },1);
 }
 
 function next(){
-  if(current_app == apps.length-1) goTo(0);
+  if(STATE.settings_open) return;
-  current_app += 1;
+  if(STATE.index == APPS.length-1) jumpTo(0);
-  if(current_app > apps.length-1) current_app = apps.length-1;
+  setTimeout(() => {
-  animateTo(current_app);
+    if(!settings.animation) jumpTo(STATE.index+1);
+    else animateTo(STATE.index+1);
+  },1);
 }
 
-function run() {
+function run(){
-  const app = apps[current_app];
+
-  if(app.back) return load();
+  const app = APPS[STATE.index];
+  if(app.name == 'Exit') return load();
+
   if (Storage.read(app.src)===undefined) {
     E.showMessage("App Source\nNot found");
-    setTimeout(draw, 2000);
+    setTimeout(render, 2000);
   } else {
     Bangle.setLCDMode();
     g.clear();
@@ -162,15 +208,12 @@ function run() {
     E.showMessage("Loading...");
     load(app.src);
   }
+
 }
 
-
-setWatch(prev, BTN1, { repeat: true });
-setWatch(next, BTN3, { repeat: true });
-setWatch(run, BTN2, {repeat:true,edge:"falling"});
-
 // Screen event
 Bangle.on('touch', function(button){
+  if(STATE.settings_open) return;
   switch(button){
     case 1:
       prev();
@@ -185,6 +228,7 @@ Bangle.on('touch', function(button){
 });
 
 Bangle.on('swipe', dir => {
+  if(STATE.settings_open) return;
   if(dir == 1) prev();
   else next();
 });
@@ -193,3 +237,10 @@ Bangle.on('swipe', dir => {
 Bangle.on('lcdPower', on => {
   if(!on) return load();
 });
+
+
+setWatch(prev, BTN1, { repeat: true });
+setWatch(next, BTN3, { repeat: true });
+setWatch(run, BTN2, { repeat:true });
+
+jumpTo(1);

apps/toucher/settings.js

@@ -0,0 +1,59 @@
+(function(back) {
+
+  const Storage = require("Storage");
+  const filename = 'toucher.json';
+  let settings = Storage.readJSON(filename,1)|| null;
+
+  function getSettings(){
+    return {
+      highres: true,
+      animation : true,
+      frame : 3,
+      debug: true
+    };
+  }
+  
+  function updateSettings() {
+    require("Storage").writeJSON(filename, settings);
+    Bangle.buzz();
+  }
+  
+  if(!settings){
+    settings = getSettings();
+    updateSettings();
+  }
+
+  function saveChange(name){
+    return function(v){
+      settings[name] = v;
+      updateSettings();
+    }
+  }
+
+  E.showMenu({
+    '': { 'title': 'Toucher settings' },
+    "Resolution" : {
+      value : settings.highres,
+      format : v => v?"High":"Low",
+      onchange: v => {
+        saveChange('highres')(!settings.highres);
+      }
+    },
+    "Animation" : {
+      value : settings.animation,
+      format : v => v?"On":"Off",
+      onchange : saveChange('animation')
+    },
+    "Frame rate" : {
+      value : settings.frame,
+      min: 1, max: 10, step: 1,
+      onchange : saveChange('frame')
+    },
+    "Debug" : {
+      value : settings.debug,
+      format : v => v?"On":"Off",
+      onchange : saveChange('debug')
+    },
+    '< Back': back
+  });
+});