Merge remote-tracking branch 'upstream/master'

README.md

@@ -439,13 +439,16 @@ The screen is parted in a widget and app area for lcd mode `direct`(default).
 | areas | as rectangle or point |
 | :-:| :-: |
 | Widget | (0,0,239,23) |
-| Apps | (0,24,239,239) |
+| Widget bottom bar (optional) | (0,216,239,239) |
+| Apps | (0,24,239,239) (see below) |
 | BTN1 | (230, 55)  |
 | BTN2 | (230, 140) |
 | BTN3 | (230, 210) |
 | BTN4 | (0,0,119, 239)|
 | BTN5 |  (120,0,239,239) |
 
+- If there are widgets at the bottom of the screen, apps should actually keep the bottom 24px free, so should keep to the area (0,24,239,215)
+
 - Use `g.setFontAlign(0, 0, 3)` to draw rotated string to BTN1-BTN3 with `g.drawString()`.
 
 - For BTN4-5 the touch area is named

apps.json

@@ -226,6 +226,19 @@
       {"name":"slidingtext.img","url":"slidingtext-icon.js","evaluate":true}
     ]
   },
+  { "id": "sweepclock",
+    "name": "Sweep Clock",
+    "icon": "sweepclock.png",
+    "version":"0.01",
+    "description": "Smooth sweep secondhand with single hour numeral. Use button1 to toggle the numeral font",
+    "tags": "clock",
+    "type":"clock",
+    "allow_emulator":true,
+    "storage": [
+      {"name":"sweepclock.app.js","url":"sweepclock.js"},
+      {"name":"sweepclock.img","url":"sweepclock-icon.js","evaluate":true}
+    ]
+  },
   { "id": "imgclock",
     "name": "Image background clock",
     "shortName":"Image Clock",
@@ -259,7 +272,7 @@
   { "id": "aclock",
     "name": "Analog Clock",
     "icon": "clock-analog.png",
-    "version": "0.13",
+    "version": "0.14",
     "description": "An Analog Clock",
     "tags": "clock",
     "type":"clock",
@@ -569,6 +582,21 @@
       {"name":"widbt.wid.js","url":"widget.js"}
     ]
   },
+  { "id": "widchime",
+    "name": "Hour Chime",
+    "icon": "widget.png",
+    "version":"0.02",
+    "description": "Buzz or beep on every whole hour.",
+    "tags": "widget",
+    "type": "widget",
+    "storage": [
+      {"name":"widchime.wid.js","url":"widget.js"},
+      {"name":"widchime.settings.js","url":"settings.js"}
+    ],
+    "data": [
+      {"name":"widchime.json"}
+    ]
+  },
   { "id": "widram",
     "name": "RAM Widget",
     "shortName":"RAM Widget",
@@ -779,7 +807,7 @@
   { "id": "vibrclock",
     "name": "Vibrate Clock",
     "icon": "app.png",
-    "version":"0.01",
+    "version":"0.02",
     "description": "When BTN1 is pressed, vibrate out the time as a series of buzzes, one digit at a time. Hours, then Minutes. Zero is signified by one long buzz. Otherwise a simple digital clock.",
     "tags": "clock",
     "type":"clock",
@@ -1227,7 +1255,7 @@
   { "id": "dotclock",
     "name": "Dot Clock",
     "icon": "clock-dot.png",
-    "version":"0.01",
+    "version":"0.02",
     "description": "A Minimal Dot Analog Clock",
     "tags": "clock",
     "type":"clock",
@@ -1872,7 +1900,7 @@
     "id": "beebclock",
     "name": "Beeb Clock",
     "icon": "beebclock.png",
-    "version":"0.02",
+    "version":"0.03",
     "description": "Clock face that may be coincidentally familiar to BBC viewers",
     "tags": "clock",
     "type": "clock",

apps/aclock/ChangeLog

@@ -8,3 +8,4 @@
 0.11: shift face down for widget area, maximize face size, 0 pad single digit date, use locale for date
 0.12: Fix regression after 0.11
 0.13: Fix broken date padding (fix #376)
+0.14: Remove hardcoded hour buzz (you can install widchime if you miss it)

apps/aclock/clock-analog.js

@@ -113,9 +113,6 @@ const onMinute = () => {
   g.setColor(1, 1, 0.9);
   // Minute
   hand((360 * currentDate.getMinutes()) / 60, -8, faceWidth - 10);
-  if (currentDate.getHours() >= 0 && currentDate.getMinutes() === 0) {
-    Bangle.buzz();
-  }
   drawDate();
 };
 

apps/beebclock/ChangeLog

@@ -1,2 +1,3 @@
 0.01: Initial commit.  Not very efficient, and widgets not working for some reason.
 0.02: Fixes; widget support
+0.03: Remove hardcoded hour buzz (you can install widchime if you miss it)

apps/beebclock/beebclock.js

@@ -262,12 +262,6 @@ Graphics.prototype.drawRotLine = function (sina, cosa, cx, cy, r1, r2) {
         g.drawRotLine(Math.sin(a), Math.cos(a), CX, CY+TM, RC1, R1);
       }
 
-      // Clock chime on the hour.
-      if (hours >= 0 && minutes === 0)
-        try {
-          Bangle.buzz();
-        } catch (e) { }
-
       // And draw widgets if we're in that mode
       if (with_widgets)
         Bangle.drawWidgets();

apps/dotclock/ChangeLog

@@ -1 +1,2 @@
-0.01: Based on the Analog Clock app, minimal dot interface
+0.01: Based on the Analog Clock app, minimal dot
+0.02: Remove hardcoded hour buzz (you can install widchime if you miss it)

apps/dotclock/clock-dot.js

@@ -128,9 +128,6 @@ const onMinute = () => {
   g.setColor(1, 0.9, 0.9);
   // Minute
   minDot((360 * currentDate.getMinutes()) / 60,3);
-  if (currentDate.getHours() >= 0 && currentDate.getMinutes() === 0) {
-    Bangle.buzz();
-  }
   drawDate();
 };
 

apps/sweepclock/ChangeLog

@@ -0,0 +1 @@
+0.01: Initial Release 

apps/sweepclock/README.md

@@ -0,0 +1,21 @@
+# Sweep Clock
+
+The Sweep Clock provides a clock with a perfectly smooth sweep second hand with a single Numeral Display. 
+
+![](app.png)
+
+## Usage
+
+Use Button 1 (the top right button) to change the numeral types (currently European and Roman)
+
+## Further Details
+
+For further details of design and working please visit [The Project Page](https://www.notion.so/adrianwkirk/Sweep-hand-clock-6aa5b6b3d1074d4e87fc947975b1e4b7)
+
+## Requests
+
+[Reach out to Adrian](https://www.github.com/awkirk71) if you have feature requests or notice bugs.
+
+## Creator
+
+Made by [Adrian Kirk](https://www.github.com/awkirk71).

apps/sweepclock/sweepclock-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("lEowkE/4AdmU/CaMgCaUQCaPzgQmR+UDCaPxCaUwj525gJ2/CZ0vMSJ2SkEACaCJBgEPRKEAgJ3Q+cxE6Myn8yO6EggMjMSR3Q+ASBgCdRO4KJQCaMwCaPzCQQTPEwYTOJoYTO+cQCaKHCAAizLkEQYgQTF+YTHmMAkITEj//l8wl4UHkcwiIRBAQMD/8/CZKLBiUAiEigMCBAMzCwMyPI8zPQMzgMBn/yh/zgZSICoMxn5kC+ZmBPhY3CHAIAbA"))

apps/sweepclock/sweepclock.js

@@ -0,0 +1,609 @@
+/**
+* Adrian Kirk 2021-03
+* Simple Clock showing 1 numeral for the hour 
+* with a smooth sweep second.
+*/
+
+const screen_center_x = g.getWidth()/2;
+const screen_center_y = g.getHeight()/2;
+
+require("FontCopasetic40x58Numeric").add(Graphics);
+
+class Hand {
+  /**
+  * Pure virtual class for all Hand classes to extend.
+  * a hand class will have 1 main function 
+  * moveTo which will move the hand to the given angle.
+  */
+  moveTo(angle){}
+}
+
+class ThinHand extends Hand {
+  /**
+  * The thin hand is created from a simple line, so its easy and fast
+  * to draw.
+  */
+  constructor(centerX,
+               centerY,
+               length,
+               tolerance,
+               draw_test,
+               red,
+               green,
+               blue){
+    super();
+    this.centerX = centerX;
+    this.centerY = centerY;
+    this.length = length;
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    // The last x and y coordinates (not the centre) of the last draw
+    this.last_x = centerX;
+    this.last_y = centerY;
+    // tolerance is the angle tolerance (from the last draw)
+    // in radians for a redraw to be called.
+    this.tolerance = tolerance;
+    // draw test is a predicate (angle, time). This is called
+    // when the hand thinks that it does not have to draw (from its internal tests)
+    // to see if it has to draw because of another object.
+    this.draw_test = draw_test;
+    // The current angle of the hand. Set to -1 initially
+    this.angle = -1;
+    this.last_draw_time = null;
+  }
+  // method to move the hand to a new angle
+  moveTo(angle){
+    // first test to see of the angle called is beyond the tolerance
+    // for a redraw
+    if(Math.abs(angle - this.angle) > this.tolerance ||
+       // and then call the predicate to see if a redraw is needed
+       this.draw_test(this.angle,this.last_draw_time) ){
+      // rub out the old hand line
+      g.setColor(0,0,0);
+      g.drawLine(this.centerX, this.centerY, this.last_x, this.last_y);
+      // Now draw the new hand line
+      g.setColor(this.red,this.green,this.blue);
+      x2 = this.centerX + this.length*Math.sin(angle);
+      y2 = this.centerY - this.length*Math.cos(angle);
+      g.setColor(this.red,this.green,this.blue);
+      g.drawLine(this.centerX, this.centerY, x2, y2);
+      // and store the last draw details for the next call
+      this.last_x = x2;
+      this.last_y = y2;
+      this.angle = angle;
+      this.last_draw_time = new Date();
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
+
+class ThickHand extends Hand {
+  /**
+  * The thick hand is created from a filled polygone, so its slower to
+  * draw so to be used sparingly with few redraws
+  */
+  constructor(centerX,
+               centerY,
+               length,
+               tolerance,
+               draw_test,
+               red,
+               green,
+               blue,
+               base_height,
+               thickness){
+    super();
+    this.centerX = centerX;
+    this.centerY = centerY;
+    this.length = length;
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.thickness = thickness;
+    this.base_height = base_height;
+    // angle from the center to the top corners of the rectangle
+    this.delta_top = Math.atan(thickness/(2*length));
+    // angle from the center to the bottom corners of the rectangle
+    this.delta_base = Math.atan(thickness/(2*base_height));
+    // the radius that the bottom corners of the rectangle move through
+    this.vertex_radius_base = Math.sqrt( (thickness*thickness/4) + base_height * base_height);
+    // the radius that the top corners of the rectangle move through
+    this.vertex_radius_top = Math.sqrt( (thickness*thickness/4) + length * length);
+    // last records the last plotted values (so we don't have to keep recalculating
+    this.last_x1 = centerX;
+    this.last_y1 = centerY;
+    this.last_x2 = centerX;
+    this.last_y2 = centerY;
+    this.last_x3 = centerX;
+    this.last_y3 = centerY;
+    this.last_x4 = centerX;
+    this.last_y4 = centerY;
+    // The change in angle from the last plotted angle before we actually redraw
+    this.tolerance = tolerance;
+    // predicate test that is called if the hand is not going to redraw to see
+    // if there is an externally defined reason for redrawing (like another hand)
+    this.draw_test = draw_test;
+    this.angle = -1;
+    this.last_draw_time = null;
+  }
+  // method to move the hand to a new angle
+  moveTo(angle){
+    if(Math.abs(angle - this.angle) > this.tolerance || this.draw_test(this.angle - this.delta_base,this.angle + this.delta_base ,this.last_draw_time) ){
+      g.setColor(0,0,0);
+      g.fillPoly([this.last_x1,
+                  this.last_y1,
+                  this.last_x2,
+                  this.last_y2,
+                  this.last_x3,
+                  this.last_y3,
+                  this.last_x4,
+                  this.last_y4
+                 ]);
+      g.setColor(this.red,this.green,this.blue);
+      // bottom left
+      x1 = this.centerX +
+        this.vertex_radius_base*Math.sin(angle - this.delta_base);
+      y1 = this.centerY - this.vertex_radius_base*Math.cos(angle - this.delta_base);
+      // bottom right
+      x2 = this.centerX +
+        this.vertex_radius_base*Math.sin(angle + this.delta_base);
+      y2 = this.centerY - this.vertex_radius_base*Math.cos(angle + this.delta_base);
+      // top right
+      x3 = this.centerX + this.vertex_radius_top*Math.sin(angle + this.delta_top);
+      y3 = this.centerY - this.vertex_radius_top*Math.cos(angle + this.delta_top);
+      // top left
+      x4 = this.centerX + this.vertex_radius_top*Math.sin(angle - this.delta_top);
+      y4 = this.centerY - this.vertex_radius_top*Math.cos(angle - this.delta_top);
+      g.setColor(this.red,this.green,this.blue);
+      g.fillPoly([x1,y1,
+                  x2,y2,
+                  x3,y3,
+                  x4,y4
+                 ]);
+      this.last_x1 = x1;
+      this.last_y1 = y1;
+      this.last_x2 = x2;
+      this.last_y2 = y2;
+      this.last_x3 = x3;
+      this.last_y3 = y3;
+      this.last_x4 = x4;
+      this.last_y4 = y4;
+      this.angle = angle;
+      this.last_draw_time = new Date();
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
+// The force draw is set to  true to force all objects to redraw themselves
+let force_redraw = false;
+// The seconds hand is the main focus and is set to redraw on every cycle
+let seconds_hand = new ThinHand(screen_center_x, 
+                           screen_center_y,
+                           100,
+                            0,
+                            (angle, last_draw_time) => false,
+                           1.0,0.0,0.0);
+// The minute hand is set to redraw at a 250th of a circle,
+// when the second hand is ontop or slighly overtaking
+// or when a force_redraw is called
+let minutes_hand_redraw = function(angle, last_draw_time){
+  return force_redraw || (seconds_hand.angle > angle &&
+    Math.abs(seconds_hand.angle - angle) <2*Math.PI/25 &&
+    new Date().getTime() - last_draw_time.getTime() > 500);
+};
+let minutes_hand = new ThinHand(screen_center_x, 
+                           screen_center_y,
+                           80,
+                            2*Math.PI/250,
+                           minutes_hand_redraw,
+                           1.0,1.0,1.0);
+// The hour hand is a thick hand so we have to redraw when the minute hand
+// overlaps from its behind andle coverage to its ahead angle coverage.
+let hour_hand_redraw = function(angle_from, angle_to, last_draw_time){
+  return force_redraw || (seconds_hand.angle >= angle_from &&
+    seconds_hand.angle <= angle_to  &&
+    new Date().getTime() - last_draw_time.getTime() > 500);
+};
+let hours_hand = new ThickHand(screen_center_x, 
+                           screen_center_y,
+                           40,
+                            2*Math.PI/600,
+                          hour_hand_redraw,
+                           1.0,1.0,1.0,
+                          5,
+                          4);
+
+function draw_clock(){
+  date = new Date();
+  draw_hour_digit(date);
+  draw_seconds(date);
+  draw_mins(date);
+  draw_hours(date);
+  force_redraw = false;
+}
+// drawing the second the millisecond as we need the fine gradation
+// for the sweep second hand.
+function draw_seconds(date){
+  seconds = date.getSeconds() + date.getMilliseconds()/1000;
+  seconds_frac = seconds / 60;
+  seconds_angle = 2*Math.PI*seconds_frac;
+  seconds_hand.moveTo(seconds_angle);
+}
+// drawing the minute includes the second and millisec to make the
+// movement as continuous as possible.
+function draw_mins(date,seconds_angle){
+  mins = date.getMinutes() + date.getSeconds()/60 + date.getMilliseconds()/(60*1000);
+  mins_frac = mins / 60;
+  mins_angle = 2*Math.PI*mins_frac;
+  redraw = minutes_hand.moveTo(mins_angle);
+  if(redraw){
+    console.log("redraw mins");
+  }
+}
+
+function draw_hours(date){
+  hours = (date.getHours() % 12) + date.getMinutes()/60 + date.getSeconds()/3600;
+  hours_frac = hours / 12;
+  hours_angle = 2*Math.PI*hours_frac;
+  redraw = hours_hand.moveTo(hours_angle);
+  if(redraw){
+    console.log("redraw hours");
+  }
+}
+
+/**
+* We want to be able to change the font so we set up
+* pure virtual for all fonts implementtions to use
+*/
+class NumeralFont {
+  /**
+  *  The screen dimensions of what we are going to 
+  * display for the given hour.
+  */
+  getDimensions(hour){return [0,0];}
+  /**
+   * The characters that are going to be returned for 
+   * the hour.
+   */
+  hour_txt(hour){ return ""; }
+  /**
+   * method to draw text at the required coordinates
+   */
+  draw(hour_txt,x,y){ return "";}
+}
+
+class CopasetFont extends NumeralFont{
+  constructor(){
+    super();
+    // dimesion map provides the dimesions of the character for 
+    // each number for plotting and collision detection
+    this.dimension_map = {
+      1 : [20,58],
+      2 : [30,58],
+      3 : [30,58],
+      4 : [30,58],
+      5 : [30,58],
+      6 : [40,58],
+      7 : [30,58],
+      8 : [40,58],
+      9 : [40,58],
+      10: [50,58],
+      11: [40,58],
+      12: [40,58]
+    };
+  }
+  getDimensions(hour){return this.dimension_map[hour];}
+  hour_txt(hour){ return hour.toString(); }
+  draw(hour_txt,x,y){
+    /* going to leave this in here for future testing.
+     uncomment this so that it draws a box behind the string
+     so we can guess the digit dimensions
+    dim = [50,58];
+    g.setColor(0.5,0,0);
+    g.fillPoly([x,y,
+                  x+dim[0],y,
+                  x+dim[0],y+dim[1],
+                  x,y+dim[1]
+                 ]);
+    g.setColor(1.0,1.0,1.0);*/
+    g.setFontCopasetic40x58Numeric();
+    g.drawString(hour_txt,x,y);
+  }
+}
+
+
+class RomanNumeralFont extends NumeralFont{
+  constructor(){
+    super();
+    // text map provides the mapping between hour and roman numeral
+    this.txt_map = {
+      1 : 'I',
+      2 : 'II',
+      3 : 'III',
+      4 : 'IV',
+      5 : 'V',
+      6 : 'VI',
+      7 : 'VII',
+      8 : 'VIII',
+      9 : 'IX',
+      10: 'X',
+      11: 'XI',
+      12: 'XII'
+    };
+    // dimesion map provides the dimesions of the characters for 
+    // each hour for plotting and collision detection
+    this.dimension_map = {
+      1 : [10,40],
+      2 : [25,40],
+      3 : [40,40],
+      4 : [40,40],
+      5 : [30,40],
+      6 : [40,40],
+      7 : [60,40],
+      8 : [70,40],
+      9 : [40,40],
+      10: [20,40],
+      11: [40,40],
+      12: [60,40]
+    };
+  }
+  getDimensions(hour){ return this.dimension_map[hour];}
+  hour_txt(hour){ return this.txt_map[hour]; }
+  draw(hour_txt,x,y){
+    g.setFont("Vector",40);
+    g.drawString(hour_txt,x,y);
+  }
+}
+
+// The problem with the trig inverse functions on 
+// a full circle is that the sector information will be lost
+// Choosing to use arcsin because you can get back the 
+// sector with the help of the original coordinates
+function reifyasin(x,y,asin_angle){
+  if(x >= 0 && y >= 0){
+    return asin_angle;
+  } else if(x >= 0 && y < 0){
+    return Math.PI - asin_angle;
+  } else if(x < 0 && y < 0){
+    return Math.PI - asin_angle;
+  } else {
+    return 2*Math.PI + asin_angle;
+  }
+}
+
+// rebase and angle so be between -pi and pi 
+// rather than 0 to 2PI
+function rebaseNegative(angle){
+  if(angle > Math.PI){
+    return angle - 2*Math.PI;
+  } else {
+    return angle;
+  }
+}
+
+// rebase an angle so that it is between 0 to 2pi
+// rather than -pi to pi
+function rebasePositive(angle){
+  if(angle < 0){
+    return angle + 2*Math.PI;
+  } else {
+    return angle;
+  }
+}
+
+/**
+* The Hour Scriber is responsible for drawing the numeral
+* on the screen at the requested angle.
+* It allows for the font to be changed on the fly.
+*/
+class HourScriber {
+  constructor(radius, numeral_font, draw_test){
+    this.radius = radius;
+    this.numeral_font = numeral_font;
+    this.draw_test = draw_test;
+    this.curr_numeral_font = numeral_font;
+    this.curr_hour_x = -1;
+    this.curr_hour_y = -1;
+    this.curr_hours = -1;
+    this.curr_hour_str = null;
+    this.last_draw_time = null;
+  }
+  setNumeralFont(numeral_font){
+    this.numeral_font = numeral_font;
+  }
+  drawHour(hours){
+    changed = false;
+    if(this.curr_hours != hours || this.curr_numeral_font !=this.numeral_font){
+      g.setColor(0,0,0);
+      this.curr_numeral_font.draw(this.curr_hour_str,
+                             this.curr_hour_x,
+                             this.curr_hour_y);
+      console.log("erasing old hour");
+      hours_frac = hours / 12;
+      angle = 2*Math.PI*hours_frac;
+      dimensions = this.numeral_font.getDimensions(hours);
+      // we set the radial coord to be in the middle
+      // of the drawn text.
+      width = dimensions[0];
+      height = dimensions[1];
+      delta_center_x = this.radius*Math.sin(angle) - width/2;
+      delta_center_y = this.radius*Math.cos(angle) + height/2;
+      this.curr_hour_x  = screen_center_x + delta_center_x;
+      this.curr_hour_y = screen_center_y - delta_center_y;
+      this.curr_hour_str = this.numeral_font.hour_txt(hours);
+      // now work out the angle of the beginning and the end of the 
+      // text box so we know when to redraw
+      // bottom left angle
+      x1 = delta_center_x;
+      y1 = delta_center_y;
+      r1 = Math.sqrt(x1*x1 + y1*y1);
+      angle1 = reifyasin(x1,y1,Math.asin(x1/r1));
+      // bottom right angle
+      x2 = delta_center_x;
+      y2 = delta_center_y - height;
+      r2 = Math.sqrt(x2*x2 + y2*y2);
+      angle2 = reifyasin(x2,y2,Math.asin(x2/r2));
+      // top left angle
+      x3 = delta_center_x + width;
+      y3 = delta_center_y;
+      r3 = Math.sqrt(x3*x3 + y3*y3);
+      angle3 = reifyasin(x3,y3, Math.asin(x3/r3));
+      // top right angle
+      x4 = delta_center_x + width;
+      y4 = delta_center_y - height;
+      r4 = Math.sqrt(x4*x4 + y4*y4);
+      angle4 = reifyasin(x4,y4,Math.asin(x4/r4));
+      if(Math.min(angle1,angle2,angle3,angle4) < Math.PI && Math.max(angle1,angle2,angle3,angle4) > 1.5*Math.PI){
+        angle1 = rebaseNegative(angle1);
+        angle2 = rebaseNegative(angle2);
+        angle3 = rebaseNegative(angle3);
+        angle3 = rebaseNegative(angle4);
+        this.angle_from = rebasePositive( Math.min(angle1,angle2,angle3,angle4) );
+        this.angle_to = rebasePositive( Math.max(angle1,angle2,angle3,angle4) ); 
+      } else {
+        this.angle_from = Math.min(angle1,angle2,angle3,angle4);
+        this.angle_to = Math.max(angle1,angle2,angle3,angle4); 
+      }
+      //console.log(angle1 + "/" + angle2  + " / " + angle3 + " / " + angle4);
+      //console.log( this.angle_from + " to " + this.angle_to);
+      this.curr_hours = hours;
+      this.curr_numeral_font = this.numeral_font;
+      changed = true;
+    }
+    if(changed ||
+       this.draw_test(this.angle_from, this.angle_to, this.last_draw_time) ){
+      g.setColor(1,1,1);
+      this.numeral_font.draw(this.curr_hour_str,this.curr_hour_x,this.curr_hour_y);
+      this.last_draw_time = new Date();
+      console.log("redraw digit");
+    }
+  }
+}
+
+let numeral_fonts = [new CopasetFont(), new RomanNumeralFont()];
+let numeral_fonts_index = 0;
+/**
+* predicate for deciding when the digit has to be redrawn
+*/
+let hour_numeral_redraw = function(angle_from, angle_to, last_draw_time){ 
+  seconds_hand_angle = seconds_hand.angle; 
+  // we have to cope with the 12 problem where the 
+  // left side of the box has a value almost 2PI and the right
+  // side has a small positive value. The values are rebased so
+  // that they can be compared
+  if(angle_from > angle_to && angle_from > 1.5*Math.PI){
+    angle_from = angle_from - 2*Math.PI;
+    if(seconds_hand_angle > Math.PI)
+       seconds_hand_angle = seconds_hand_angle - 2*Math.PI;
+  } 
+  //console.log("initial:" + angle_from + "/" + angle_to  + " seconds " + seconds_hand_angle);
+   redraw = force_redraw ||
+     (seconds_hand_angle >= angle_from && seconds_hand_angle <= angle_to) ||
+     (minutes_hand.last_draw_time.getTime() > last_draw_time.getTime());
+  if(redraw){
+     //console.log(angle_from + "/" + angle_to  + " seconds " + seconds_hand_angle);
+  }
+  return redraw;
+};
+let hour_scriber = new HourScriber(70,
+                                   numeral_fonts[numeral_fonts_index],
+                                   hour_numeral_redraw
+                                  );
+/**
+* Called from button 1 to change the numerals that are
+* displayed on the clock face
+*/
+function next_font(){
+  numeral_fonts_index = numeral_fonts_index + 1;
+  if(numeral_fonts_index >= numeral_fonts.length){
+    numeral_fonts_index = 0;
+  }
+  hour_scriber.setNumeralFont(
+    numeral_fonts[numeral_fonts_index]);
+  force_redraw = true;
+}
+
+function draw_hour_digit(date){
+  hours = date.getHours() % 12;
+  mins = date.getMinutes();
+  if(mins > 30){
+    hours = (hours +1) % 12;
+  }
+  if(hours == 0){
+    hours = 12;
+  }
+  hour_scriber.drawHour(hours);
+}
+
+// Boiler plate code for setting up the clock
+// below
+let intervalRef = null;
+
+function clearTimers(){
+  if(intervalRef) {
+    clearInterval(intervalRef);
+    intervalRef = null;
+  }
+}
+
+function startTimers(){
+  setTimeout(scheduleDrawClock,100);
+  draw_clock();
+}
+
+// The clock redraw is set to 100ms. This is the smallest number
+// that give the (my) human eye the illusion of a continious sweep
+// second hand.
+function scheduleDrawClock(){
+  if(intervalRef) clearTimers();
+  intervalRef = setInterval(draw_clock, 100);
+  draw_clock();
+}
+
+function reset_clock(){
+  g.clear();
+  force_redraw = true;
+}
+
+Bangle.on('lcdPower', (on) => {
+  if (on) {
+    console.log("lcdPower: on");
+    Bangle.drawWidgets();
+    reset_clock();
+    startTimers();
+  } else {
+    console.log("lcdPower: off");
+    reset_clock();
+    clearTimers();
+  }
+});
+
+Bangle.on('faceUp',function(up){
+  console.log("faceUp: " + up + " LCD: " + Bangle.isLCDOn());
+  if (up && !Bangle.isLCDOn()) {
+    //console.log("faceUp and LCD off");
+    clearTimers();
+    Bangle.setLCDPower(true);
+  }
+});
+
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+startTimers();
+
+// Show launcher when middle button pressed
+setWatch(Bangle.showLauncher, BTN2,{repeat:false,edge:"falling"});
+
+function button1pressed(){
+  next_font(); 
+}
+
+// Handle button 1 being pressed
+setWatch(button1pressed, BTN1,{repeat:true,edge:"falling"});
+

apps/vibrclock/ChangeLog

@@ -1 +1,2 @@
 0.01: First commit
+0.02: Made Date more visible

apps/vibrclock/app.js

@@ -5,7 +5,7 @@ require("Font7x11Numeric7Seg").add(Graphics);
 var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 // position on screen
 const X = 160, Y = 140;
-
+ 
 function draw() {
   // work out how to display the current time
   var d = new Date();
@@ -23,15 +23,15 @@ function draw() {
   g.drawString(time, X, Y, true /*clear background*/);
   // draw the seconds (2x size 7 segment)
   g.setFont("7x11Numeric7Seg",2);
-  g.drawString(("0"+d.getSeconds()).substr(-2), X+30, Y, true /*clear background*/);
+  g.drawString(("0"+d.getSeconds()).substr(-2), X+35, Y, true /*clear background*/);
   // draw the date, in a normal font
-  g.setFont("6x8");
+  g.setFont("6x8", 3);
   g.setFontAlign(0,1); // align center bottom
   // pad the date - this clears the background if the date were to change length
   var dateStr = "    "+require("locale").date(d)+"    ";
-  g.drawString(dateStr, g.getWidth()/2, Y+15, true /*clear background*/);
+  g.drawString(dateStr, g.getWidth()/2, Y+35, true /*clear background*/);
 }
-
+ 
 // Clear the screen once, at startup
 g.clear();
 // draw immediately at first
@@ -51,7 +51,7 @@ Bangle.loadWidgets();
 Bangle.drawWidgets();
 // Show launcher when middle button pressed
 setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });
-
+ 
 // ====================================== Vibration
 // vibrate 0..9
 function vibrateDigit(num) {
@@ -74,24 +74,24 @@ function vibrateNumber(num) {
     });
   });
 }
-
+ 
 var vibrateBusy;
 function vibrateTime() {
   if (vibrateBusy) return;
   vibrateBusy = true;
-
+ 
   var d = new Date();
   var hours = d.getHours(), minutes = d.getMinutes();
   if (is12Hour) {
     if (hours == 0) hours = 12;
     else if (hours>12) hours -= 12;
   }
-
+ 
   vibrateNumber(hours.toString()).
     then(() => new Promise(resolve=>setTimeout(resolve,500))).
     then(() => vibrateNumber(minutes.toString())).
     then(() => vibrateBusy=false);
 }
-
+ 
 // when BTN1 pressed, vibrate
 setWatch(vibrateTime, BTN1, {repeat:true,edge:"rising"});

apps/widchime/ChangeLog

@@ -0,0 +1,2 @@
+0.01: First version
+0.02: Bugfix: now it actually chimes the hour instead of crashing

apps/widchime/icons.txt

@@ -0,0 +1 @@
+widget.png: https://icons8.com/icon/15715/plus-1-hour

apps/widchime/settings.js

@@ -0,0 +1,22 @@
+/**
+ * @param {function} back Use back() to return to settings menu
+ */
+(function(back) {
+  // default to buzzing
+  let type = (require("Storage").readJSON("widchime.json", 1) || {type: 1}).type|0
+  const chimes = ["Off", "Buzz", "Beep", "Both"]
+  const menu = {
+    "": {"title": "Hour Chime"},
+    "< Back": back,
+    "Chime Type": {
+      value: type,
+      min: 0, max: 2, // both is just silly
+      format: v => chimes[v],
+      onchange: function(v) {
+        type = v
+        require("Storage").write("widchime.json", {type: v})
+      },
+    },
+  }
+  E.showMenu(menu)
+})

apps/widchime/widget.js

@@ -0,0 +1,26 @@
+(function() {
+  // 0: off, 1: buzz, 2: beep, 3: both
+  const type = (require("Storage").readJSON("widchime.json", 1) || {type: 1}).type;
+  if (!type) return;
+
+  function chime() {
+    if ((require("Storage").readJSON("setting.json", 1) || {}).quiet) return;
+    if (type&1) Bangle.buzz(100);
+    if (type&2) Bangle.beep();
+  }
+
+  let lastHour = (new Date()).getHours(); // don't chime when (re)loaded at a whole hour
+  function check() {
+    const now = new Date(),
+      h = now.getHours(), m = now.getMinutes(),
+      s = now.getSeconds(), ms = now.getMilliseconds();
+    if (h!==lastHour && m===0) chime();
+    lastHour = h;
+    // check again when this hour is over
+    const mLeft = 60-m, sLeft = (mLeft*60)-s, msLeft = (sLeft*1000)-ms;
+    setTimeout(check, msLeft);
+  }
+
+  check();
+})
+();