Merge pull request #2377 from hughbarney/master

Added Simplest++ and Lato Clocks, both support fast load and clock_info's

apps/lato/README.md

@@ -0,0 +1,54 @@
+# Lato
+
+A simple clock with the Lato font, with fast load and clock_info
+
+![](screenshot1.png)
+![](screenshot2.png)
+![](screenshot3.png)
+
+This clock is a Lato version of Simplest++. Simplest++ provided the
+smallest example of a clock that supports 'fast load' and 'clock
+info'.  Lato takes this one step further and adds the lovely Lato
+font.  The clock is derived from Simplest++ and inspired by the
+Pastel Clock.
+
+## Usage
+
+* When the screen is unlocked, tap at the bottom of the csreen on the information text.
+  It should change color showing it is selected.
+
+* Swipe up or down to cycle through the info screens that can be displayed
+  when you have finished tap again towards the centre of the screen to unselect.
+
+* Swipe left or right to change the type of info screens displayed (by default
+  there is only one type of data so this will have no effect)
+
+* Settings are saved automatically and reloaded along with the clock.
+
+## About Clock Info's
+
+* The clock info modules enable all clocks to add the display of information to the clock face.
+
+* The default clock_info module provides a display of battery %, Steps, Heart Rate and Altitude.
+
+* Installing the [Sunrise ClockInfo](https://banglejs.com/apps/?id=clkinfosunrise) adds Sunrise and Sunset times into the list of info's.
+
+
+## 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)
+
+
+## With Thanks
+
+* Gordon for support
+* David Peer for his work on BW Clock
+
+
+Written by: [Hugh Barney](https://github.com/hughbarney) For support
+and discussion please post in the [Bangle JS
+Forum](http://forum.espruino.com/microcosms/1424/)

apps/lato/icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwkA/4A/AH4AUiIAKCxXzC5c/C5PyC5cvC8PxC5cfLxNEABhgI+gXNp4X3//+9wAK96PJC6/zC5bvKC6//C5YWKC4nUoMUpoXS8lDn/zmlOC6NCA4ckC6Hkl4HD+QwCC5c+LoIsCoSKBMIPjC5tD//0olEp//mgXNmMRiYuBC4JjBBAYAK+MRj//CwIABBAgXkI5AXOiRyBC4J8BkIXN+dEoKnFiNEAYIXNa4sUC59EJAIACkIHBC5iMCoMTn/zmIuBSQIXODAMRAAKqDABikCAAqqBC8i8CAArCBC/n0C49PC5oA/AH4AIA=="))

apps/lato/metadata.json

@@ -0,0 +1,16 @@
+{
+  "id": "lato",
+  "name": "Lato",
+  "version": "0.01",
+  "description": "A Lato Font clock with fast load and clock_info",
+  "readme": "README.md",
+  "icon": "app.png",
+  "screenshots": [{"url":"screenshot3.png"}],
+  "type": "clock",
+  "tags": "clock",
+  "supports": ["BANGLEJS2"],
+  "storage": [
+    {"name":"lato.app.js","url":"app.js"},
+    {"name":"lato.img","url":"icon.js","evaluate":true}
+  ]
+}

apps/primetimelato/ChangeLog

@@ -1,3 +1,4 @@
 0.01: first release
 0.02: added option to buzz on prime, with settings
 0.03: added option to debug settings and test fw 2.15.93 load speed ups
+0.04: changed icon

apps/primetimelato/README.md

@@ -1,4 +1,4 @@
-# Prime Time Lato (clock)
+# Prime Lato (clock)
 
 A watchface that displays time and its prime factors in the Lato font.
 For example when the time is 21:05, the prime factors are 5,421.

apps/primetimelato/icon.js

@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwwIdah/wAof//4ECgYFB4AFBg4FB8AFBj/wh/4AoM/wEB/gFBvwCEBAU/AQP4gfAj8AgPwAoMPwED8AFBg/AAYIBDA4ngg4TB4EBApkPKgJSBJQIFTMgIFCJIIFDKoIFEvgFBGoMAnw7DP4IFEh+BAoItBg+DNIQwBMIaeCKoKxCPoIzCEgKVHUIqtFXIrFFaIrdFdIwAV"))
+require("heatshrink").decompress(atob("mEw4X/AAIHB8cYttrJf4AR1gKJgdYBZMCBZdcBZMNsALKuALJhNABZMFwALJmvAAwkOqvAmtAkwSF83+uEV4EMOIpZBznWII5NB7mXGo5BB7Z0HkpBB6x0HFYXVNA4rC6pcFAANXDQhSFqgaEBZGYaBLfIaAUBBZUJNQ4jCm+cHZPcBZFXgdwzELBg1W/PAy/rBY3VPAOVTY863kAnaPHAH4A/ADAA=="))

apps/primetimelato/metadata.json

@@ -1,6 +1,6 @@
 { "id": "primetimelato",
-  "name": "Prime Time Lato",
-  "version": "0.03",  
+  "name": "Prime Lato",
+  "version": "0.04",  
   "type": "clock",
   "description": "A clock that tells you the primes of the time in the Lato font",
   "icon": "app.png",

apps/simplestpp/README.md

@@ -0,0 +1,54 @@
+# Simplest++ Clock
+
+The simplest working clock, with fast load and clock_info
+
+![](screenshot1.png)
+![](screenshot2.png)
+![](screenshot3.png)
+
+
+Simplest++ has 1 clock info menu that is displayed as a single line at the bottom of the screen.
+
+This provides a working demo of how to use the clock_info modules.
+
+
+## Usage
+
+* When the screen is unlocked, tap at the bottom of the csreen on the information text.
+  It should change color showing it is selected.
+
+* Swipe up or down to cycle through the info screens that can be displayed
+  when you have finished tap again towards the centre of the screen to unselect.
+
+* Swipe left or right to change the type of info screens displayed (by default
+  there is only one type of data so this will have no effect)
+
+* Settings are saved automatically and reloaded along with the clock.
+
+## About Clock Info's
+
+* The clock info modules enable all clocks to add the display of information to the clock face.
+
+* The default clock_info module provides a display of battery %, Steps, Heart Rate and Altitude.
+
+* Installing the [Sunrise ClockInfo](https://banglejs.com/apps/?id=clkinfosunrise) adds Sunrise and Sunset times into the list of info's.
+
+
+## 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)
+
+
+## With Thanks
+
+* Gordon for support
+* David Peer for his work on BW Clock
+
+
+Written by: [Hugh Barney](https://github.com/hughbarney) For support
+and discussion please post in the [Bangle JS
+Forum](http://forum.espruino.com/microcosms/1424/)

apps/simplestpp/app.js

@@ -0,0 +1,108 @@
+/**
+ *
+ * Simplestpp Clock
+ *
+ * The entire clock code is contained within the block below this
+ * supports 'fast load'
+ *
+ * To add support for clock_info_supprt we add the code marked at [1] and [2]
+ *
+ */
+
+{
+  // must be inside our own scope here so that when we are unloaded everything disappears
+  // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
+  
+  let draw = function() {
+    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
+
+    // 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
+  var drawTimeout;
+  g.clear();
+
+  // 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();
+  draw();
+  setTimeout(Bangle.drawWidgets,0);
+}  // end of clock

apps/simplestpp/icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4X/AAIHBqOM997IGkq1AKIltVqt4BQ0DBQIAB4ALFktVv/9qtYBYvVA4Ulq4KEgNVwAEBgVVoALDgtcAoc1qAFDitgAocJqguEGoowDgVWBYuVGoUBFwgwCHgUNGgUNuBCCAYY6CBYcJCYUlDYYLCgJxCmozCBYcCG4UVG4QLDgBgCBZeXBY/WBYcC1WtvWqGoILEVAIACJoILQgf/+tf/7jBBYg7JL66DLTZazLZZbjLfZcA6oLFq4EDio8CHQReCGgQwEmpCCHgVVFIUCVAQAD6plCkouEA4VVv/9qoPCAAcDZYa/BAAstBQN4BQwABlWoBRAAr"))

apps/simplestpp/metadata.json

@@ -0,0 +1,16 @@
+{
+  "id": "simplestpp",
+  "name": "Simplest++ Clock",
+  "version": "0.01",
+  "description": "The simplest working clock, with fast load and clock_info, acts as a tutorial piece",
+  "readme": "README.md",
+  "icon": "app.png",
+  "screenshots": [{"url":"screenshot3.png"}],
+  "type": "clock",
+  "tags": "clock",
+  "supports": ["BANGLEJS2"],
+  "storage": [
+    {"name":"simplestpp.app.js","url":"app.js"},
+    {"name":"simplestpp.img","url":"icon.js","evaluate":true}
+  ]
+}