diff --git a/apps/boxclk/ChangeLog b/apps/boxclk/ChangeLog index ba46af04e0..f35b358197 100644 --- a/apps/boxclk/ChangeLog +++ b/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 diff --git a/apps/boxclk/README.md b/apps/boxclk/README.md index 1dc8ef98f3..c72d932a45 100644 --- a/apps/boxclk/README.md +++ b/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 - "short": false // Gets long format value of time, meridian, date, or DoW + "disableSuffix": true, // Use to remove DayOfMonth suffix only + "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:__ + +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:__ -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. +- **Config:** [boxclk-2.json](https://github.com/espruino/BangleApps/tree/master/apps/boxclk/boxclk-2.json) ## Compatibility diff --git a/apps/boxclk/app.js b/apps/boxclk/app.js index 41636e1ef8..0b0ca8e65c 100644 --- a/apps/boxclk/app.js +++ b/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))); @@ -395,4 +400,4 @@ widgets.swipeOn(); modSetColor(); setup(); -} +} \ No newline at end of file diff --git a/apps/boxclk/boxclk-1.json b/apps/boxclk/boxclk-1.json new file mode 100644 index 0000000000..99e225f04b --- /dev/null +++ b/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" + } +} diff --git a/apps/boxclk/boxclk-2.json b/apps/boxclk/boxclk-2.json new file mode 100644 index 0000000000..64b842f1cd --- /dev/null +++ b/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": "%" + } +} diff --git a/apps/boxclk/boxclk.space.img b/apps/boxclk/boxclk.space.img new file mode 100644 index 0000000000..1708b5c242 Binary files /dev/null and b/apps/boxclk/boxclk.space.img differ diff --git a/apps/boxclk/metadata.json b/apps/boxclk/metadata.json index 9b759def77..6717b79d8f 100644 --- a/apps/boxclk/metadata.json +++ b/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", diff --git a/apps/boxclk/screenshot-1.png b/apps/boxclk/screenshot-1.png index 18798bb308..c6e22d2629 100644 Binary files a/apps/boxclk/screenshot-1.png and b/apps/boxclk/screenshot-1.png differ diff --git a/apps/boxclk/screenshot-2.png b/apps/boxclk/screenshot-2.png new file mode 100644 index 0000000000..b7a73d66ab Binary files /dev/null and b/apps/boxclk/screenshot-2.png differ