chronowid 0.04: Change to 7 segment font, move to top widget bar

Better auto-update behaviour, less RAM used

apps.json

@@ -1989,11 +1989,12 @@
     "id": "chronowid",
     "name": "Chrono Widget",
     "shortName": "Chrono Widget",
-    "version": "0.03",
+    "version": "0.04",
     "description": "Chronometer (timer) which runs as widget.",
     "icon": "app.png",
     "tags": "tool,widget",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "screenshots": [{"url":"screenshot.png"}],
     "readme": "README.md",
     "storage": [
       {"name":"chronowid.wid.js","url":"widget.js"},

apps/chronowid/ChangeLog

@@ -1,3 +1,5 @@
 0.01: New widget and app!
 0.02: Setting to reset values, timer buzzes at 00:00 and not later (see readme)
-0.03: Display only minutes:seconds when less than 1 hour left
+0.03: Display only minutes:seconds when less than 1 hour left
+0.04: Change to 7 segment font, move to top widget bar
+      Better auto-update behaviour, less RAM used

apps/chronowid/README.md

@@ -5,14 +5,13 @@ The advantage is, that you can still see your normal watchface and other widgets
 The widget is always active, but only shown when the timer is on.
 Hours, minutes, seconds and timer status can be set with an app.
 
-When there is less than one seconds left on the timer it buzzes.
+When there is less than one second left on the timer it buzzes.
 
 The widget has been tested on Bangle 1 and Bangle 2
 
 ## Screenshots
 
-![](chrono_with_wave.jpg)
-![](chrono_with_pastel.jpg)
+![](screenshot.png)
 
 
 ## Features
@@ -28,15 +27,15 @@ There are no settings section in the settings app, timer can be set using an app
 * Hours: Set the hours for the timer
 * Minutes: Set the minutes for the timer
 * Seconds: Set the seconds for the timer
-* Timer on: Starts the timer and displays the widget when set to 'On'. You have to leave the app to load the widget which starts the timer. The widget is always there, but only visible when timer is on. 
+* Timer on: Starts the timer and displays the widget when set to 'On'. You have to leave the app to load the widget which starts the timer. The widget is always there, but only visible when timer is on.
 
 
 ## Releases
 
-* Offifical app loader: https://github.com/espruino/BangleApps/tree/master/apps/chronowid (https://banglejs.com/apps/)
+* Official app loader: https://github.com/espruino/BangleApps/tree/master/apps/chronowid (https://banglejs.com/apps/)
 * Forked app loader: https://github.com/Purple-Tentacle/BangleApps/tree/master/apps/chronowid (https://purple-tentacle.github.io/BangleApps/index.html#)
 * Development: https://github.com/Purple-Tentacle/BangleAppsDev/tree/master/apps/chronowid
 
 ## Requests
 
-If you have any feature requests, please write here: http://forum.espruino.com/conversations/345972/
+If you have any feature requests, please write here: http://forum.espruino.com/conversations/345972/

apps/chronowid/app.js

@@ -3,7 +3,6 @@ Bangle.loadWidgets();
 Bangle.drawWidgets();
 
 const storage = require('Storage');
-const boolFormat = v => v ? "On" : "Off";
 let settingsChronowid;
 
 function updateSettings() {
@@ -12,6 +11,7 @@ function updateSettings() {
     now.getHours() + settingsChronowid.hours, now.getMinutes() + settingsChronowid.minutes, now.getSeconds() + settingsChronowid.seconds);
   settingsChronowid.goal = goal.getTime();
   storage.writeJSON('chronowid.json', settingsChronowid);
+  if (WIDGETS["chronowid"]) WIDGETS["chronowid"].reload();
 }
 
 function resetSettings() {
@@ -44,6 +44,7 @@ function showMenu() {
         timerMenu.started.value = settingsChronowid.started;
       }
     },
+    '< Back' :  ()=>{load();},
     'Reset values': function() {
       settingsChronowid.hours = 0;
       settingsChronowid.minutes = 0;
@@ -84,15 +85,15 @@ function showMenu() {
     },
     'Timer on': {
       value: settingsChronowid.started,
-      format: boolFormat,
+      format: v => v ? "On" : "Off",
       onchange: v => {
         settingsChronowid.started = v;
         updateSettings();
       }
     },
   };
-  timerMenu['-Exit-'] =  ()=>{load();};
+
   return E.showMenu(timerMenu);
 }
 
-showMenu();
+showMenu();

apps/chronowid/widget.js

@@ -1,93 +1,79 @@
 (() => {
-  const storage = require('Storage');
-  settingsChronowid = storage.readJSON("chronowid.json",1)||{}; //read settingsChronowid from file
-  var height = 23;
-  var width = 58;
+  var settingsChronowid;
   var interval =  0; //used for the 1 second interval timer
-  var now = new Date();
+  var diff;
 
-  var time = 0;
-  var diff = settingsChronowid.goal - now;
-    
   //Convert ms to time
   function getTime(t)  {
     var milliseconds = parseInt((t % 1000) / 100),
       seconds = Math.floor((t / 1000) % 60),
       minutes = Math.floor((t / (1000 * 60)) % 60),
       hours = Math.floor((t / (1000 * 60 * 60)) % 24);
-
-    hours = (hours < 10) ? "0" + hours : hours;
-    minutes = (minutes < 10) ? "0" + minutes : minutes;
-    seconds = (seconds < 10) ? "0" + seconds : seconds;
-      
-    return hours + ":" + minutes + ":" + seconds;
+    return hours.toString().padStart(2,0) + ":" + minutes.toString().padStart(2,0) + ":" + seconds.toString().padStart(2,0);
   }
 
-  function printDebug() {
-    print ("Nowtime: " + getTime(now));
-    print ("Now: " + now);
+  /*function printDebug() {
     print ("Goaltime: " + getTime(settingsChronowid.goal));
     print ("Goal: " + settingsChronowid.goal);
     print("Difftime: " + getTime(diff));
     print("Diff: " + diff);
     print ("Started: " + settingsChronowid.started);
     print ("----");
-  }
+  }*/
 
   //counts down, calculates and displays
   function countDown() {
-    now = new Date();
+    var now = new Date();
     diff = settingsChronowid.goal - now; //calculate difference
-    WIDGETS["chronowid"].draw();
-    //time is up
+    // time is up
     if (settingsChronowid.started && diff < 1000) {
       Bangle.buzz(1500);
       //write timer off to file
       settingsChronowid.started = false;
-      storage.writeJSON('chronowid.json', settingsChronowid);
+      require('Storage').writeJSON('chronowid.json', settingsChronowid);
       clearInterval(interval); //stop interval
+      interval = undefined;
     }
-    //printDebug();
+    // calculates width and redraws accordingly
+    WIDGETS["chronowid"].redraw();
   }
 
-  // draw your widget
-  function draw() {
-    if (!settingsChronowid.started) {
-      width = 0;
-      return; //do not draw anything if timer is not started
-    }
-    g.reset();
-    if (diff >= 0) {
-      if (diff < 3600000) { //less than 1 hour left
-        width = 58;
-        g.clearRect(this.x,this.y,this.x+width,this.y+height);
-        g.setFont("6x8", 2);
-        g.drawString(getTime(diff).substring(3), this.x+1, this.y+5); //remove hour part 00:00:00 -> 00:00
-      }
-      if (diff >= 3600000) { //one hour or more left
-        width = 48;
-        g.clearRect(this.x,this.y,this.x+width,this.y+height);
-        g.setFont("6x8", 1);
-        g.drawString(getTime(diff), this.x+1, this.y+((height/2)-4)); //display hour 00:00:00
-      }
-    }
-    // not needed anymoe, because we check if diff < 1000 now, so 00:00 is displayed.
-    // else {
-    //     width = 58;
-    //     g.clearRect(this.x,this.y,this.x+width,this.y+height);
-    //     g.setFont("6x8", 2);
-    //     g.drawString("END", this.x+15, this.y+5);
-    // }
-  }
-
-  if (settingsChronowid.started) interval = setInterval(countDown, 1000); //start countdown each second
-
   // add the widget
-  WIDGETS["chronowid"]={area:"bl",width:width,draw:draw,reload:function() {
-    reload();
-    Bangle.drawWidgets(); // relayout all widgets
+  WIDGETS["chronowid"]={area:"tl",width:0,draw:function() {
+    if (!this.width) return;
+    g.reset().setFontAlign(0,0).clearRect(this.x,this.y,this.x+this.width,this.y+23);
+    //g.drawRect(this.x,this.y,this.x+this.width-1, this.y+23);
+    var scale;
+    var timeStr;
+    if (diff < 3600000) { //less than 1 hour left
+      width = 58;
+      scale = 2;
+      timeStr = getTime(diff).substring(3); // remove hour part 00:00:00 -> 00:00
+    } else { //one hour or more left
+      width = 48;
+      scale = 1;
+      timeStr = getTime(diff); //display hour 00:00:00 but small
+    }
+    // Font5x9Numeric7Seg - just build this in as it's tiny
+    g.setFontCustom(atob("AAAAAAAAAAIAAAQCAQAAAd0BgMBdwAAAAAAAdwAB0RiMRcAAAERiMRdwAcAQCAQdwAcERiMRBwAd0RiMRBwAAEAgEAdwAd0RiMRdwAcERiMRdwAFAAd0QiEQdwAdwRCIRBwAd0BgMBAAABwRCIRdwAd0RiMRAAAd0QiEQAAAAAAAAAA="), 32, atob("BgAAAAAAAAAAAAAAAAYCAAYGBgYGBgYGBgYCAAAAAAAABgYGBgYG"), 9 + (scale<<8));
+    g.drawString(timeStr, this.x+this.width/2, this.y+12);
+  }, redraw:function() {
+    var last = this.width;
+    if (!settingsChronowid.started) this.width = 0;
+    else this.width = (diff < 3600000) ? 58 : 48;
+    if (last != this.width) Bangle.drawWidgets();
+    else this.draw();
+  }, reload:function() {
+    settingsChronowid = require('Storage').readJSON("chronowid.json",1)||{};
+    if (interval) clearInterval(interval);
+    interval = undefined;
+    // start countdown each second
+    if (settingsChronowid.started) interval = setInterval(countDown, 1000);
+    // reset everything
+    countDown();
   }};
 
   //printDebug();
-  countDown();
-})();
+  // set width correctly, start countdown each second
+  WIDGETS["chronowid"].reload();
+})();