Merge pull request #2833 from stweedo/master

[boxclk] - v0.03 update - New custom font library. Allows short or long month

apps/boxclk/ChangeLog

@@ -1,2 +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

apps/boxclk/README.md

@@ -18,7 +18,7 @@ Each box can be customized extensively via a simple JSON configuration. You can
 
 ## Config File Structure
 
-Here's what an example configuration might look like:
+Here's an example of what a configuration might contain:
 
 ```
 {
@@ -37,8 +37,9 @@ Here's what an example configuration might look like:
     "boxPos": { "x": 0.5, "y": 0.5 },
     "prefix": "", // Adds a string to the beginning of the main string
     "suffix": "", // Adds a string to the end of the main string
-    "disableSuffix": true, // Only used to remove the DayOfMonth suffix
+    "disableSuffix": true, // Use to remove DayOfMonth suffix only
-    "short": false // Gets long format value of time, meridian, date, or DoW
+    "short": false, // Use long format of time, meridian, date, or DoW
+    "shortMonth": false // Use long format of month within date
 
   },
   "bg": { // Can also be removed for no background
@@ -51,9 +52,9 @@ __Breakdown of Parameters:__
 
 * **Box Name:** The name of your text box. Box Clock includes functional support for "time", "date", "meridian" (AM/PM), "dow" (Day of Week), "batt" (Battery), and "step" (Step count). You can add additional custom boxes with unique titles.
 
-* **string:** The text string to be displayed inside the box.
+* **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().
 
 * **fontSize:** The size of the font.
 
@@ -75,17 +76,34 @@ __Breakdown of Parameters:__
 
 * **suffix:** Adds a string to the end of the main string. For example, you can set "suffix": "%" to display "80%" for the battery percentage.
 
-* **disableSuffix:** Applies only to the "date" box. Set to true to disable the DayOfMonth suffix. This is used to remove the "st","nd","rd", or "th" from the DayOfMonth number
+* **disableSuffix:** Applies only to the "date" box. Set to true to disable the DayOfMonth suffix. This is used to remove the "st","nd","rd", or "th" from the DayOfMonth number.
 
-* **short:** Set to false to get the long format value of time, meridian, date, or DayOfWeek. Short formats are used by default, 
+* **short:** Set to false to get the long format value of time, meridian, date, or DayOfWeek. Short formats are used by default if not specified.
+
+* **shortMonth:** Applies only to the "date" box. Set to false to get the long format value of the month. Short format is used by default if not specified.
 
 * **bg:** This specifies a custom background image, with the img property defining the name of the image file on the Bangle.js storage.
 
 ## Multiple Configurations
 
-The app includes a settings menu that allows you to switch between different configurations. The selected configuration is stored in the default JSON file alongside the other configuration data using the selectedConfig property.
+__Settings Menu:__
 
-If the selectedConfig property is not present or is set to 0, the app will use the default configuration. To create additional configurations, create separate JSON files with the naming convention boxclk-N.json, where N is the configuration number. The settings menu will list all available configurations.
+The app includes a settings menu that allows you to switch between different configurations. The selected configuration is stored as a number in the default `boxclk.json` file using the selectedConfig property.
+
+If the selectedConfig property is not present or is set to 0, the app will use the default configuration. To create additional configurations, create separate JSON files with the naming convention `boxclk-N.json`, where `N` is the configuration number. The settings menu will list all available configurations.
+
+## Example Configs:
+
+To easily try out other configs, download and place the JSON configs and/or background images from below onto your Bangle.js storage. Then go to the Box Clock settings menu to select the new config number. You can also modify them to suit your personal preferences.
+
+__Space Theme:__
+
+- **Config:** [boxclk-1.json](https://github.com/espruino/BangleApps/tree/master/apps/boxclk/boxclk-1.json)
+- **Background:** [boxclk.space.img](https://github.com/espruino/BangleApps/tree/master/apps/boxclk/boxclk.space.img) ([Original Source](https://www.pixilart.com/art/fallin-from-outer-space-sr2e0c1a705749a))
+
+__System Color Theme:__
+
+- **Config:** [boxclk-2.json](https://github.com/espruino/BangleApps/tree/master/apps/boxclk/boxclk-2.json)
 
 ## Compatibility
 

apps/boxclk/app.js

@@ -171,10 +171,10 @@
     return typeof val !== 'undefined' ? Boolean(val) : defaultVal;
   };
 
-  let getDate = function(short, disableSuffix) {
+  let getDate = function(short, shortMonth, disableSuffix) {
     const date = new Date();
     const dayOfMonth = date.getDate();
-    const month = short ? locale.month(date, 0) : locale.month(date, 1);
+    const month = shortMonth ? locale.month(date, 1) : locale.month(date, 0);
     const year = date.getFullYear();
     let suffix;
     if ([1, 21, 31].includes(dayOfMonth)) {
@@ -228,7 +228,12 @@
         boxes.meridian.string = modString(boxes.meridian, locale.meridian(date, isBool(boxes.meridian.short, true)));
       }
       if (boxes.date) {
-        boxes.date.string = modString(boxes.date, getDate(isBool(boxes.date.short, true), isBool(boxes.date.disableSuffix, false)));
+        boxes.date.string = (
+          modString(boxes.date,
+          getDate(isBool(boxes.date.short, true),
+          isBool(boxes.date.shortMonth, true),
+          isBool(boxes.date.disableSuffix, false)
+        )));
       }
       if (boxes.dow) {
         boxes.dow.string = modString(boxes.dow, getDayOfWeek(date, isBool(boxes.dow.short, true)));

apps/boxclk/boxclk-1.json

@@ -0,0 +1,88 @@
+{
+  "time": {
+    "font": "6x8",
+    "fontSize": 3,
+    "outline": 2,
+    "color": "#0ff",
+    "outlineColor": "#00f",
+    "border": "#0f0",
+    "xPadding": -1,
+    "yPadding": -2.5,
+    "xOffset": 2,
+    "yOffset": 0,
+    "boxPos": {
+      "x": "0.33",
+      "y": "0.29"
+    }
+  },
+  "meridian": {
+    "font": "6x8",
+    "fontSize": 2,
+    "outline": 1,
+    "color": "#FF9900",
+    "outlineColor": "fg",
+    "border": "#0ff",
+    "xPadding": -0.5,
+    "yPadding": -1.5,
+    "xOffset": 2,
+    "yOffset": 1,
+    "boxPos": {
+      "x": "0.34",
+      "y": "0.46"
+    },
+    "short": false
+  },
+  "dow": {
+    "font": "6x8",
+    "fontSize": 2,
+    "outline": 1,
+    "color": "#000",
+    "outlineColor": "#fff",
+    "border": "#0f0",
+    "xPadding": -0.5,
+    "yPadding": -0.5,
+    "xOffset": 1,
+    "yOffset": 1,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.82"
+    }
+  },
+  "step": {
+    "font": "6x8",
+    "fontSize": 2,
+    "outline": 1,
+    "color": "#000",
+    "outlineColor": "#fff",
+    "border": "#0f0",
+    "xPadding": -0.5,
+    "yPadding": 0.5,
+    "xOffset": 1,
+    "yOffset": 1,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.71"
+    },
+    "prefix": "Steps: "
+  },
+  "batt": {
+    "font": "4x6",
+    "fontSize": 2,
+    "outline": 1,
+    "color": "#0ff",
+    "outlineColor": "#00f",
+    "border": "#0f0",
+    "xPadding": -0.5,
+    "yPadding": -0.5,
+    "xOffset": 1,
+    "yOffset": 1,
+    "boxPos": {
+      "x": "0.87",
+      "y": "0.87"
+    },
+    "suffix": "%"
+  },
+  "bg": {
+    "img": "boxclk.space.img"
+  }
+}

apps/boxclk/boxclk-2.json

@@ -0,0 +1,87 @@
+{
+  "time": {
+    "font": "6x8",
+    "fontSize": 5,
+    "outline": 3,
+    "color": "bgH",
+    "outlineColor": "fg",
+    "border": "#f0f",
+    "xPadding": -2,
+    "yPadding": -4.5,
+    "xOffset": 3,
+    "yOffset": 0,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.33"
+    }
+  },
+  "dow": {
+    "font": "6x8",
+    "fontSize": 3,
+    "outline": 1,
+    "color": "#5ccd73",
+    "outlineColor": "fg",
+    "border": "#f0f",
+    "xPadding": -1,
+    "yPadding": 0.5,
+    "xOffset": 2,
+    "yOffset": 0,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.57"
+    },
+    "short": false
+  },
+  "date": {
+    "font": "6x8",
+    "fontSize": 2,
+    "outline": 1,
+    "color": "#5ccd73",
+    "outlineColor": "fg",
+    "border": "#f0f",
+    "xPadding": -0.5,
+    "yPadding": 0.5,
+    "xOffset": 1,
+    "yOffset": 0,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.75"
+    },
+    "shortMonth": false,
+    "disableSuffix": true
+  },
+  "step": {
+    "font": "4x6",
+    "fontSize": 3,
+    "outline": 2,
+    "color": "bgH",
+    "outlineColor": "fg",
+    "border": "#f0f",
+    "xPadding": -1,
+    "yPadding": 0.5,
+    "xOffset": 2,
+    "yOffset": 1,
+    "boxPos": {
+      "x": "0.5",
+      "y": "0.92"
+    },
+    "prefix": "Steps: "
+  },
+  "batt": {
+    "font": "4x6",
+    "fontSize": 3,
+    "outline": 2,
+    "color": "bgH",
+    "outlineColor": "fg",
+    "border": "#f0f",
+    "xPadding": -1,
+    "yPadding": -1,
+    "xOffset": 2,
+    "yOffset": 2,
+    "boxPos": {
+      "x": "0.85",
+      "y": "0.08"
+    },
+    "suffix": "%"
+  }
+}

apps/boxclk/metadata.json

@@ -1,12 +1,13 @@
 {
   "id": "boxclk",
   "name": "Box Clock",
-  "version": "0.02",
+  "version": "0.03",
   "description": "A customizable clock with configurable text boxes that can be positioned to show your favorite background",
   "icon": "app.png",
   "screenshots": [
     {"url":"screenshot.png"},
-    {"url":"screenshot-1.png"}
+    {"url":"screenshot-1.png"},
+    {"url":"screenshot-2.png"}
   ],
   "type": "clock",
   "tags": "clock",