Add new custom font library module

apps/boxclk/ChangeLog

@@ -1,3 +1,3 @@
 0.01: New App!
 0.02: New config options such as step, meridian, short/long formats, custom prefix/suffix
-0.03: Allows showing the month in short or long format by setting `"shortMonth"` to true or false
+0.03: New Font Library Module! Also allows short or long month.

apps/boxclk/README.md

@@ -24,7 +24,7 @@ Here's an example of what a configuration might contain:
 {
   "customBox": {
     "string": "Your text here",
-    "font": "CustomFont", // Custom fonts must be removed in setUI
+    "font": "CustomFont", // Add custom fonts to "boxclk.lib"
     "fontSize": 1,
     "outline": 2,
     "color": "#FF9900", // Use 6 or 3 digit hex color codes
@@ -54,7 +54,7 @@ __Breakdown of Parameters:__
 
 * **string:** The text string to be displayed inside the box. This is only required for custom Box Names.
 
-* **font:** The font name given to g.setFont().
+* **font:** The font name given to g.setFont(). To use a custom font, use the Espruino Font Converter and add it to "boxclk.lib" next to the other custom fonts. Use the font name beginning after "setFont" in your JSON config.
 
 * **fontSize:** The size of the font.
 

apps/boxclk/app.js

@@ -7,6 +7,7 @@
   let storage = require("Storage");
   let locale = require("locale");
   let widgets = require("widget_utils");
+  let customFonts = require("boxclk.lib");
   let date = new Date();
   let bgImage;
   let configNumber = (storage.readJSON("boxclk.json", 1) || {}).selectedConfig || 0;
@@ -46,24 +47,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 4. Font loading function
+  * 4. Initial settings of boxes and their positions
-  * ---------------------------------------------------------------
-  */
-  let loadCustomFont = function() {
-    Graphics.prototype.setFontBrunoAce = function() {
-      // Actual height 23 (24 - 2)
-      return this.setFontCustom(
-        E.toString(require('heatshrink').decompress(atob('ABMHwADBh4DKg4bKgIPDAYUfAYV/AYX/AQMD/gmC+ADBn/AByE/GIU8AYUwLxcfAYX/8AnB//4JIP/FgMP4F+CQQBBjwJBFYRbBAd43DHoJpBh/g/xPEK4ZfDgEEORKDDAY8////wADLfZrTCgITBnhEBAYJMBAYMPw4DCM4QDjhwDCjwDBn0+AYMf/gDBh/4AYMH+ADBLpc4ToK/NGYZfnAYcfL4U/x5fBW4LvB/7vC+LvBgHAsBfIn76Cn4WBcYQDFEgJ+CQQYDyH4L/BAZbHLNYjjCAZc8ngDunycBZ4KkBa4KwBnEHY4UB+BfMgf/ZgMH/4XBc4cf4F/gE+ZgRjwAYcfj5jBM4U4M4RQBM4UA8BjIngDFEYJ8BAYUDAYQvCM4ZxBC4V+AYQvBnkBQ4M8gabBJQPAI4WAAYM/GYQaBAYJKCnqyCn5OCn4aBAYIaBAYJPCU4IABnBhIuDXCFAMD+Z/BY4IDBQwOPwEfv6TDAYUPAcwrDAYQ7BAYY/BI4cD8bLCK4RfEAA0BRYTeDcwIrFn0Pw43Bg4DugYDBjxBBU4SvDMYMH/5QBgP/LAQAP8EHN4UPwADHB4YAHA'))),
-        46,
-        atob("CBEdChgYGhgaGBsaCQ=="),
-        32|65536
-      );
-    };
-  };
-
-  /**
-  * ---------------------------------------------------------------
-  * 5. Initial settings of boxes and their positions
   * ---------------------------------------------------------------
   */
   for (let key in boxesConfig) {
@@ -88,7 +72,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 6. Text and drawing functions
+  * 5. Text and drawing functions
   * ---------------------------------------------------------------
   */
 
@@ -164,7 +148,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 7. String forming helper functions
+  * 6. String forming helper functions
   * ---------------------------------------------------------------
   */
   let isBool = function(val, defaultVal) {
@@ -208,7 +192,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 8. Main draw function
+  * 7. Main draw function
   * ---------------------------------------------------------------
   */
   let draw = (function() {
@@ -269,7 +253,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 9. Helper function for touch event
+  * 8. Helper function for touch event
   * ---------------------------------------------------------------
   */
   let touchInText = function(e, boxItem, boxKey) {
@@ -293,7 +277,7 @@
 
   /**
   * ---------------------------------------------------------------
-  * 10. Setup function to configure event handlers
+  * 9. Setup function to configure event handlers
   * ---------------------------------------------------------------
   */
   let setup = function() {
@@ -380,20 +364,19 @@
         Bangle.removeListener('drag', dragHandler);
         if (drawTimeout) clearTimeout(drawTimeout);
         drawTimeout = undefined;
-        delete Graphics.prototype.setFontBrunoAce;
+        unloadCustomBoxclkFonts(); // Remove custom fonts
         // Restore original drawString function (no outlines)
         g.drawString = g_drawString;
         restoreSetColor();
         widgets.show();
       }
     });
-    loadCustomFont();
     draw(boxes);
   };
 
   /**
   * ---------------------------------------------------------------
-  * 11. Main execution part
+  * 10. Main execution part
   * ---------------------------------------------------------------
   */
   Bangle.loadWidgets();

apps/boxclk/boxclk-1.json

@@ -1,15 +1,15 @@
 {
   "time": {
-    "font": "6x8",
+    "font": "Orbitron",
-    "fontSize": 3,
+    "fontSize": 1,
     "outline": 2,
     "color": "#0ff",
     "outlineColor": "#00f",
     "border": "#0f0",
-    "xPadding": -1,
+    "xPadding": 0,
-    "yPadding": -2.5,
+    "yPadding": -3.5,
-    "xOffset": 2,
+    "xOffset": 0,
-    "yOffset": 0,
+    "yOffset": 2,
     "boxPos": {
       "x": "0.33",
       "y": "0.29"
@@ -35,7 +35,7 @@
   "dow": {
     "font": "6x8",
     "fontSize": 2,
-    "outline": 1,
+    "outline": 2,
     "color": "#000",
     "outlineColor": "#fff",
     "border": "#0f0",
@@ -45,13 +45,13 @@
     "yOffset": 1,
     "boxPos": {
       "x": "0.5",
-      "y": "0.82"
+      "y": "0.83"
     }
   },
   "step": {
     "font": "6x8",
     "fontSize": 2,
-    "outline": 1,
+    "outline": 2,
     "color": "#000",
     "outlineColor": "#fff",
     "border": "#0f0",

apps/boxclk/lib.js

@@ -0,0 +1,53 @@
+/*************************************************
+ * Name: boxclk.lib
+ * Type: Font Library
+ * Desc: Add your custom fonts for Box Clock below
+ *************************************************/
+
+// Create an empty object for exporting module's functions
+var exports={};
+
+// Array to hold the names of the custom fonts
+let fontNames = [];
+
+// Add custom fonts below. Each font is a function that's added to the Graphics.prototype
+// Use the Espruino Font Converter tool to convert your font into the appropriate format
+// Use the name beginning after "setFont", for example "BrunoAce" in your JSON config
+// This module and the main app will automatically delete the custom fonts in setUI
+
+Graphics.prototype.setFontBrunoAce = function() {
+  // Actual height 23 (24 - 2)
+  return this.setFontCustom(
+    E.toString(require('heatshrink').decompress(atob('ABMHwADBh4DKg4bKgIPDAYUfAYV/AYX/AQMD/gmC+ADBn/AByE/GIU8AYUwLxcfAYX/8AnB//4JIP/FgMP4F+CQQBBjwJBFYRbBAd43DHoJpBh/g/xPEK4ZfDgEEORKDDAY8////wADLfZrTCgITBnhEBAYJMBAYMPw4DCM4QDjhwDCjwDBn0+AYMf/gDBh/4AYMH+ADBLpc4ToK/NGYZfnAYcfL4U/x5fBW4LvB/7vC+LvBgHAsBfIn76Cn4WBcYQDFEgJ+CQQYDyH4L/BAZbHLNYjjCAZc8ngDunycBZ4KkBa4KwBnEHY4UB+BfMgf/ZgMH/4XBc4cf4F/gE+ZgRjwAYcfj5jBM4U4M4RQBM4UA8BjIngDFEYJ8BAYUDAYQvCM4ZxBC4V+AYQvBnkBQ4M8gabBJQPAI4WAAYM/GYQaBAYJKCnqyCn5OCn4aBAYIaBAYJPCU4IABnBhIuDXCFAMD+Z/BY4IDBQwOPwEfv6TDAYUPAcwrDAYQ7BAYY/BI4cD8bLCK4RfEAA0BRYTeDcwIrFn0Pw43Bg4DugYDBjxBBU4SvDMYMH/5QBgP/LAQAP8EHN4UPwADHB4YAHA'))),
+    46,
+    atob("CBEdChgYGhgaGBsaCQ=="),
+    32|65536
+  );
+};
+
+Graphics.prototype.setFontOrbitron = function() {
+  // Actual height 24 (25 - 2)
+  return this.setFontCustom(
+    E.toString(require('heatshrink').decompress(atob('AA3AAQMBAYwLDAA8DBYUHwADBjwLCngDCvADC+AWJh4OCDQYWGgPgDQsPGI0cMBUf///wE/AYPAAYc4BoIDCnoDCvIDC+IDBgPhAYMDAYfBAYMHwIDBh6HBnEeAYU8AYV4AYX4AYXwAYM58ADBnfAAYM/wADCI4RTDh4DBMhNAYIqeEQ40+XIx7HAYb/SV4MBC4M+gYDCg6fCg5vCAfxnBAYMf/wDBh/8SIYAJgRrDToOAS4KhBAYKpBf4IvChwD5n5jCj7TCh4DBdoK/BMo3wAQMBAYUDAY0HAYUPuB4CAYU8AYV4AYXwAYMB8ADBQIIDBRoIDBh4DCj8AAYKTBAYK7BJ4IDHFAIrCAZgAFO4I1BAYR/CAYK/7AZDABAYMHYYM4YZAAJb4RrBR4xn/gADDNYT0BKYL8BNYs4AfybHU4XAKwJbCXa8HQYQD+M42AYQK7FAA8H/BrC/0BNYQjDM/5rdMoMA4AdBAIwLCC44A='))),
+    46,
+    atob("BxEbDRsaFxsaFRsbBw=="),
+    32|65536
+  );
+};
+
+// Extract the names of the custom fonts added to the Graphics.prototype
+for (let prop in Graphics.prototype) {
+  if (prop.startsWith('setFont')) {
+    fontNames.push(prop.slice(7));  // remove 'setFont' from the start
+  }
+}
+
+// Function to remove the custom fonts from the Graphics.prototype
+function unloadCustomBoxClkFonts() {
+  for (let i = 0; i < fontNames.length; i++) {
+    delete Graphics.prototype[fontNames[i]];
+  }
+}
+
+// Export the unload function
+exports.unloadCustomBoxClkFonts = unloadCustomBoxClkFonts;

apps/boxclk/metadata.json

@@ -12,11 +12,13 @@
   "type": "clock",
   "tags": "clock",
   "supports": ["BANGLEJS2"],
+  "provides_modules" : ["boxclk.lib"],
   "readme": "README.md",
   "allow_emulator": true,
   "storage": [
     {"name":"boxclk.app.js","url":"app.js"},
     {"name":"boxclk.settings.js","url":"settings.js"},
+    {"name":"boxclk.lib","url":"lib.js"},
     {"name":"boxclk.img","url":"icon.js","evaluate":true},
     {"name":"boxclk.beachhouse.img","url":"beachhouse.js","evaluate":true}
   ],