Simplestpp, removed fast load so that we have the simplest clock with clock_info support

apps/simplestpp/ChangeLog

@@ -0,0 +1,2 @@
+0.01: first release
+0.02: removed fast load, minimalism is useful for narrowing down on issues

apps/simplestpp/README.md

@@ -1,6 +1,6 @@
 # Simplest++ Clock
 
-The simplest working clock, with fast load and clock_info
+The simplest working clock, with clock_info
 
 ![](screenshot1.png)
 ![](screenshot2.png)
@@ -36,8 +36,6 @@ This provides a working demo of how to use the clock_info modules.
 
 ## References
 
-* [What is Fast Load and how does it work](http://www.espruino.com/Bangle.js+Fast+Load)
-
 * [Clock Info Tutorial](http://www.espruino.com/Bangle.js+Clock+Info)
 
 * [How to load modules through the IDE](https://github.com/espruino/BangleApps/blob/master/modules/README.md)

apps/simplestpp/app.js

@@ -1,108 +1,95 @@
+// Simplestpp Clock, see comments 'clock_info_support'
+
+function draw() {
+  var date = new Date();
+  var timeStr = require("locale").time(date,1);
+  var h = g.getHeight();
+  var w = g.getWidth();
+  
+  g.reset();
+  g.setColor(g.theme.bg);
+  g.fillRect(Bangle.appRect);
+
+  g.setFont('Vector', w/3);
+  g.setFontAlign(0, 0);
+  g.setColor(g.theme.fg);
+  g.drawString(timeStr, w/2, h/2);
+
+  clockInfoMenu.redraw();   // clock_info_support
+  queueDraw(); // queue draw in one minute
+};
+
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
 /**
- *
+ * clock_info_support
- * Simplestpp Clock
+ * this is the callback function that get invoked by clockInfoMenu.redraw();
- *
+ * 
- * The entire clock code is contained within the block below this
+ * We will display the image and text on the same line and centre the combined
- * supports 'fast load'
+ * length of the image+text
- *
- * To add support for clock_info_supprt we add the code marked at [1] and [2]
  *
  */
-
+function clockInfoDraw(itm, info, options)
 {
-  // must be inside our own scope here so that when we are unloaded everything disappears
+  g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
-  // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
   
-  let draw = function() {
+  //use info.text.toString(), steps does not have length defined
-    var date = new Date();
+  var text_w = g.stringWidth(info.text.toString());
-    var timeStr = require("locale").time(date,1);
+  // gap between image and text
-    var h = g.getHeight();
+  var gap = 10;
-    var w = g.getWidth();
+  // width of the image and text combined
-    
+  var w = gap + (info.img ? 24 :0) + text_w;
-    g.reset();
+  // different fg color if we tapped on the menu
-    g.setColor(g.theme.bg);
+  if (options.focus) g.setColor(options.hl);
-    g.fillRect(Bangle.appRect);
 
-    g.setFont('Vector', w/3);
+  // clear the whole info line
-    g.setFontAlign(0, 0);
+  g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
-    g.setColor(g.theme.fg);
-    g.drawString(timeStr, w/2, h/2);
-    clockInfoMenu.redraw();   // clock_info_support
-
-    // schedule a draw for the next minute
-    if (drawTimeout) clearTimeout(drawTimeout);
-    drawTimeout = setTimeout(function() {
-      drawTimeout = undefined;
-      draw();
-    }, 60000 - (Date.now() % 60000));
-  };
-
-  /**
-   * clock_info_support
-   * this is the callback function that get invoked by clockInfoMenu.redraw();
-   * 
-   * We will display the image and text on the same line and centre the combined
-   * length of the image+text
-   *
-   *
-   */
-  let clockInfoDraw = (itm, info, options) => {
-
-    g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
-    
-    //use info.text.toString(), steps does not have length defined
-    var text_w = g.stringWidth(info.text.toString());
-    // gap between image and text
-    var gap = 10;
-    // width of the image and text combined
-    var w = gap + (info.img ? 24 :0) + text_w;
-    // different fg color if we tapped on the menu
-    if (options.focus) g.setColor(options.hl);
-
-    // clear the whole info line
-    g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
-    
-    // draw the image if we have one
-    if (info.img) {
-      // image start
-      var x = (g.getWidth() / 2) - (w/2);
-      g.drawImage(info.img, x, options.y);
-      // draw the text to the side of the image (left/centre alignment)
-      g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12);
-    } else {
-      // text only option, not tested yet
-      g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12);
-    }
-
-  };
-
-  // clock_info_support
-  // retrieve all the clock_info modules that are installed
-  let clockInfoItems = require("clock_info").load();
-
-  // clock_info_support
-  // setup the way we wish to interact with the menu
-  // the hl property defines the color the of the info when the menu is selected after tapping on it
-  let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
   
-  // timeout used to update every minute
+  // draw the image if we have one
-  var drawTimeout;
+  if (info.img) {
-  g.clear();
+    // image start
+    var x = (g.getWidth() / 2) - (w/2);
+    g.drawImage(info.img, x, options.y);
+    // draw the text to the side of the image (left/centre alignment)
+    g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12);
+  } else {
+    // text only option, not tested yet
+    g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12);
+  }
 
-  // Show launcher when middle button pressed, add updown button handlers
+};
-  Bangle.setUI({
-    mode : "clock",
-    remove : function() {
-      if (drawTimeout) clearTimeout(drawTimeout);
-      drawTimeout = undefined;
-      // remove info menu
-      clockInfoMenu.remove();
-      delete clockInfoMenu;
-    }
-  });
 
-  // Load widgets
+/**
-  Bangle.loadWidgets();
+ * clock_info_support: retrieve all the clock_info modules that are
-  draw();
+ * installed
-  setTimeout(Bangle.drawWidgets,0);
+ *
-}  // end of clock
+ */
+let clockInfoItems = require("clock_info").load();
+
+/**
+ * clock_info_support: setup the way we wish to interact with the menu
+ * the hl property defines the color the of the info when the menu is
+ * selected after tapping on it
+ *
+ */
+let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
+
+// Clear the screen once, at startup
+g.clear();
+
+// Show launcher when middle button pressed
+Bangle.setUI("clock");
+// Load widgets
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+draw();

apps/simplestpp/metadata.json

@@ -2,8 +2,8 @@
   "id": "simplestpp",
   "name": "Simplest++ Clock",
   "shortName": "Simplest++",
-  "version": "0.01",
+  "version": "0.02",
-  "description": "The simplest working clock, with fast load and clock_info, acts as a tutorial piece",
+  "description": "The simplest working clock, with clock_info, acts as a tutorial piece",
   "readme": "README.md",
   "icon": "app.png",
   "screenshots": [{"url":"screenshot3.png"}],