Add Block Clock watch face app

apps/blockclock/ChangeLog

@@ -0,0 +1 @@
+0.1: New clock app - "Block Clock"

apps/blockclock/README.md

@@ -0,0 +1,36 @@
+# Block Clock
+
+A clock made from blocks where numbers are overly simplified and barely readable, this clock hopelessly strives for aesthetics rather than utility.
+
+Time is displayed in a grid of 4 numbers…
+
+> **HH  
+> MM**
+
+<img alt="Photo of Block Clock" src="blockclock-photo-2339.png" width="400" />
+
+### The digits
+
+Each number is a grid of 4 blocks.
+
+| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+| ⬛⬛<br>⬛⬛ | ⬛⬜<br>⬛⬜ | ⬛⬜<br>⬜⬛ | ⬛⬜<br>⬜⬜ | ⬜⬛<br>⬛⬜ | ⬜⬜<br>⬜⬛ | ⬜⬛<br>⬜⬜ | ⬜⬜<br>⬛⬛ | ⬜⬜<br>⬜⬜ | ⬜⬜<br>⬛⬜ |
+
+Example time: 12:34
+
+⬛⬜⬛⬜<br>⬛⬜⬜⬛<br>⬛⬜⬜⬛<br>⬜⬜⬛⬜
+
+## Options
+
+### Beginner mode
+
+Joins the blocks of a digit together.
+
+### Colour mode
+
+Display each digit as a different color.
+
+Example time: 12:34
+
+⬛🟨⬛🟦<br>⬛🟨🟦⬛<br>⬛🟩🟪⬛<br>🟩🟩⬛🟪

apps/blockclock/app.js

@@ -0,0 +1,142 @@
+var settings = Object.assign({
+  beginner: false,
+  colour: false,
+}, require('Storage').readJSON("blockclock.json", true) || {});
+
+// Gap between digits.
+const digitGap = settings.beginner ? 4 : 3;
+const blockGap = settings.beginner ? 0 : 3;
+// Size of a block ("pixel").
+const blockSize = settings.beginner ? 41 : 40;
+// Colours.
+const colours = {
+  normal: ["#000", "#fff"],
+  colour: [
+    "#000", "#ff0", "#0ff", "#0f0", "#f0f",
+  ],
+};
+// A digit is made-up of four blocks.
+// [0][1]
+// [2][3]
+const digits = [
+  [
+    // Top left
+    [0,0],
+    [1 * blockSize, 1 * blockSize]
+  ],
+  [
+    // Top right
+    [1 * blockSize + blockGap, 0],
+    [2 * blockSize + blockGap, 1 * blockSize]
+  ],
+  [
+    // Bottom left
+    [0, 1 * blockSize + blockGap],
+    [1 * blockSize, 2 * blockSize + blockGap]
+  ],
+  [
+    // Bottom right
+    [1 * blockSize + blockGap, 1 * blockSize + blockGap],
+    [2 * blockSize + blockGap, 2 * blockSize + blockGap]
+  ]
+];
+// Top-left of each digit.
+const digitGrid = [
+  [
+    // Hour tens
+    digitGap,
+    digitGap
+  ],
+  [
+    // Hour units
+    2 * digitGap + blockGap + 2 * blockSize,
+    digitGap
+  ],
+  [
+    // Minute tens
+    digitGap,
+    2 * digitGap + blockGap + 2 * blockSize
+  ],
+  [
+    // Minute units
+    2 * digitGap + blockGap + 2 * blockSize,
+    2 * digitGap + blockGap + 2 * blockSize]
+];
+
+// Decimal representation of the digit's binary value.
+const numbers = [0, 5, 6, 7, 9, 14, 11, 12, 15, 13];
+
+// Global timer.
+let timer = null;
+
+function getArray(num) {
+  return num.toString(2).padStart(4, 0).split("").map(Number);
+}
+
+function buildBangleClock() {
+  // Clear background.
+  g.clear(1);
+  //Bangle.drawWidgets();
+  g.reset();
+  // Set background.
+  g.setColor("#000");
+  g.fillRect(0, 0, g.getWidth(), g.getWidth());
+
+  const time = new Date();
+  // Get numbers.
+  const clockDigits = getDigits(time);
+  for (const idx in clockDigits) {
+    buildBangleDigit(~~idx, clockDigits[idx]);
+  }
+
+  const t = time.getSeconds()*1000 + time.getMilliseconds();
+  timer = setTimeout(buildBangleClock, 60000 - t); // time till next minute
+}
+
+function getDigits(time) {
+  const hours = `${time.getHours()}`.padStart(2, 0).split("");
+  const hourDigit1 = hours[0], hourDigit2 = hours[1];
+  const minutes = `${time.getMinutes()}`.padStart(2, 0).split("");
+  const minDigit1 = minutes[0], minDigit2 = minutes[1];
+
+  return [
+    numbers[~~hourDigit1],
+    numbers[~~hourDigit2],
+    numbers[~~minDigit1],
+    numbers[~~minDigit2]
+  ];
+}
+
+function buildBangleDigit(pos, number) {
+  const digitArray = getArray(number);
+  // Draw each of the four blocks.
+  for (let block=0; block<4; block++) {
+    if (settings.colour) {
+      g.setColor(
+        digitArray[block]
+          ? colours.colour[pos + 1]
+          : colours.colour[0]
+      );
+    } else {
+      g.setColor(colours.normal[~~digitArray[block]]);
+    }
+    g.fillRect(
+      digitGrid[pos][0] + digits[block][0][0],
+      digitGrid[pos][1] + digits[block][0][1],
+      digitGrid[pos][0] + digits[block][1][0],
+      digitGrid[pos][1] + digits[block][1][1]
+    );
+  }
+}
+
+Bangle.on("lcdPower", function(on) {
+  if (on) {
+    buildBangleClock();
+  } else {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }
+});
+Bangle.setUI("clock");
+buildBangleClock();

apps/blockclock/icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwgIPMg/+v/v/gF2IP5BHAAk/+EACIQF1RJAF5ABQA="))

apps/blockclock/metadata.json

@@ -0,0 +1,19 @@
+{
+  "id": "blockclock",
+  "name": "Block Clock",
+  "version": "0.1",
+  "description": "This is a simple clock using minimalist 2x2 pixel numerical digits",
+  "icon": "app.png",
+  "type": "clock",
+  "tags": "clock",
+  "supports": ["BANGLEJS","BANGLEJS2"],
+  "readme": "README.md",
+  "allow_emulator": true,
+  "storage": [
+    {"name":"blockclock.app.js","url":"app.js"},
+    {"name":"blockclock.settings.js","url":"settings.js"},
+    {"name":"blockclock.img","url":"icon.js","evaluate":true}
+  ],
+  "data": [{"name":"blockclock.json"}],
+  "screenshots" : [ { "url":"screenshot_2140.png" } ]
+}

apps/blockclock/settings.js

@@ -0,0 +1,32 @@
+(function(back) {
+  var FILE = "blockclock.json";
+
+  // Load settings
+  var settings = Object.assign({
+    beginner: false,
+    colour: false,
+  }, require('Storage').readJSON(FILE, true) || {});
+
+  function writeSettings() {
+    require('Storage').writeJSON(FILE, settings);
+  }
+
+  E.showMenu({
+    "" : { "title" : "Block Clock" },
+    "< Back" : () => back(),
+    'Beginner mode': {
+      value: !!settings.beginner,
+      onchange: v => {
+        settings.beginner = v;
+        writeSettings();
+      }
+    },
+    'Colour mode': {
+      value: !!settings.colour,
+      onchange: v => {
+        settings.colour = v;
+        writeSettings();
+      }
+    },
+  });
+})