dtlaunch: (WIP) Draw first UI element ASAP, cascade in the rest

Author: thyttan

apps/dtlaunch/ChangeLog

@@ -36,3 +36,5 @@ when moving pages. Add caching for faster startups.
       clearing cache when changing those settings.
       Bangle 2: Use a separate cache file from the standard launcher.
       Bangle 2: Don't leave cache file after uninstalling the app.
+0.29: (WIP) Bangle 2: Start drawing UI ASAP - cascading in elements to initial
+	page.

apps/dtlaunch/app-b2.js

@@ -44,10 +44,6 @@
     initPageAppLast = Math.min(page*4+3, apps.length-1);
   }
 
-  for (let i = initPageAppZeroth; i <= initPageAppLast; i++) { // Initially only load icons for the current page.
-    if (apps[i].icon)
-      apps[i].icon = s.read(apps[i].icon); // should just be a link to a memory area
-  }
 
   let Napps = apps.length;
   let Npages = Math.ceil(Napps/4);
@@ -57,6 +53,36 @@
   const XOFF = 24;
   const YOFF = 30;
 
+  let dotIntvLen = 85;
+  let delayTillFirstIcon = 135; //dotIntvLen*Npages;
+  g.reset();
+  g.clearRect(0,24,175,175);
+  let O = 88+YOFF/2-12*(Npages/2);
+  let j = 0;
+  let drawDot = ()=>{
+    let y = O+j*12;
+    g.setColor(g.theme.fg);
+    if (j==page) g.fillCircle(XOFF/2,y,4);
+      else g.drawCircle(XOFF/2,y,4);
+    g.flip();
+    j++;
+    if (j==Npages) {
+      clearInterval(dotIntv);
+    }
+  }
+  drawDot();
+  let dotIntv = setInterval(drawDot, dotIntvLen)
+
+
+//
+//  for (let j=0;j<Npages;j++){
+//    let y = O+j*12;
+//    g.setColor(g.theme.fg);
+//    if (j==page) g.fillCircle(XOFF/2,y,4);
+//      else g.drawCircle(XOFF/2,y,4);
+//  g.flip();
+//  }
+
   let drawIcon= function(p,n,selected) {
     let x = (n%2)*72+XOFF;
     let y = n>1?72+YOFF:YOFF;
@@ -83,23 +109,48 @@
     g.drawString(line.trim(),x+36,y+54+lineY*8);
   };
 
+  let intv;
   let drawPage = function(p){
-    g.reset();
-    g.clearRect(0,24,175,175);
-    let O = 88+YOFF/2-12*(Npages/2);
-    for (let j=0;j<Npages;j++){
-      let y = O+j*12;
-      g.setColor(g.theme.fg);
-      if (j==page) g.fillCircle(XOFF/2,y,4);
-      else g.drawCircle(XOFF/2,y,4);
+    if (!isFirstDrawPage) {
+      g.reset();
+      g.clearRect(0,24,175,175);
+      let O = 88+YOFF/2-12*(Npages/2);
+      for (let j=0;j<Npages;j++){
+        let y = O+j*12;
+        g.setColor(g.theme.fg);
+        if (j==page) g.fillCircle(XOFF/2,y,4);
+          else g.drawCircle(XOFF/2,y,4);
+      }
     }
-    for (let i=0;i<4;i++) {
+    g.flip();
+    setTimeout(()=>{
+    let i=0;
+    drawIcon(p,i,selected==i && !settings.direct);
+    i++;
+    intv = setInterval(()=>{
       if (!apps[p*4+i]) return i;
       drawIcon(p,i,selected==i && !settings.direct);
-    }
-    g.flip();
+      g.flip();
+      i++
+      if (i==4) {
+          clearInterval(intv);
+          intv = undefined;
+        }
+    }, 90)
+    }, 100);
+    //for (let i=0;i<4;i++) {
+    //  if (!apps[p*4+i]) return i;
+    //  drawIcon(p,i,selected==i && !settings.direct);
+    //g.flip();
+    //}
   };
 
+  for (let i = initPageAppZeroth; i <= initPageAppLast; i++) { // Initially only load icons for the current page.
+    if (apps[i].icon)
+      apps[i].icon = s.read(apps[i].icon); // should just be a link to a memory area
+    //drawPage(page);
+  }
+
   let buzzShort = function() {
     if (settings.interactionBuzz) Bangle.buzz(20);
   };
@@ -109,7 +160,10 @@
 
   Bangle.drawWidgets(); // To immediately update widget field to follow current theme - remove leftovers if previous app set custom theme.
   Bangle.loadWidgets();
-  drawPage(page);
+  let isFirstDrawPage = true;
+  //drawPage(page); 
+  //isFirstDrawPage = false;
+  setTimeout(()=>{drawPage(page); isFirstDrawPage = false; },delayTillFirstIcon);
 
   for (let i = 0; i < apps.length; i++) { // Load the rest of the app icons that were not initially.
     if (i >= initPageAppZeroth && i <= initPageAppLast) continue;
@@ -194,6 +248,7 @@
     touch : touchListenerDt,
     remove : ()=>{
       if (timeoutToClock) {clearTimeout(timeoutToClock);}
+      if (intv) {clearInterval(intv)}
       global.dtlaunch.handlePagePersist(page);
     }
   });

apps/dtlaunch/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "dtlaunch",
   "name": "Desktop Launcher",
-  "version": "0.28",
+  "version": "0.29",
   "description": "Desktop style App Launcher with six (four for Bangle 2) apps per page - fast access if you have lots of apps installed.",
   "screenshots": [{"url":"shot1.png"},{"url":"shot2.png"},{"url":"shot3.png"}],
   "icon": "icon.png",