From a6e2207b4acd189d5720e187ad607fc75c3e1ba9 Mon Sep 17 00:00:00 2001 From: Hugh Barney Date: Sat, 17 Dec 2022 11:23:28 +0000 Subject: [PATCH 1/4] Simplestpp, removed fast load so that we have the simplest clock with clock_info support --- apps/simplestpp/ChangeLog | 2 + apps/simplestpp/README.md | 4 +- apps/simplestpp/app.js | 185 ++++++++++++++++------------------ apps/simplestpp/metadata.json | 4 +- 4 files changed, 91 insertions(+), 104 deletions(-) create mode 100644 apps/simplestpp/ChangeLog diff --git a/apps/simplestpp/ChangeLog b/apps/simplestpp/ChangeLog new file mode 100644 index 000000000..4db8559c8 --- /dev/null +++ b/apps/simplestpp/ChangeLog @@ -0,0 +1,2 @@ +0.01: first release +0.02: removed fast load, minimalism is useful for narrowing down on issues diff --git a/apps/simplestpp/README.md b/apps/simplestpp/README.md index 4b459bda1..3cbf9abf1 100644 --- a/apps/simplestpp/README.md +++ b/apps/simplestpp/README.md @@ -1,6 +1,6 @@ # Simplest++ Clock -The simplest working clock, with fast load and clock_info +The simplest working clock, with clock_info ![](screenshot1.png) ![](screenshot2.png) @@ -36,8 +36,6 @@ This provides a working demo of how to use the clock_info modules. ## References -* [What is Fast Load and how does it work](http://www.espruino.com/Bangle.js+Fast+Load) - * [Clock Info Tutorial](http://www.espruino.com/Bangle.js+Clock+Info) * [How to load modules through the IDE](https://github.com/espruino/BangleApps/blob/master/modules/README.md) diff --git a/apps/simplestpp/app.js b/apps/simplestpp/app.js index c07fdbcbb..31a65452f 100644 --- a/apps/simplestpp/app.js +++ b/apps/simplestpp/app.js @@ -1,108 +1,95 @@ +// Simplestpp Clock, see comments 'clock_info_support' + +function draw() { + var date = new Date(); + var timeStr = require("locale").time(date,1); + var h = g.getHeight(); + var w = g.getWidth(); + + g.reset(); + g.setColor(g.theme.bg); + g.fillRect(Bangle.appRect); + + g.setFont('Vector', w/3); + g.setFontAlign(0, 0); + g.setColor(g.theme.fg); + g.drawString(timeStr, w/2, h/2); + + clockInfoMenu.redraw(); // clock_info_support + queueDraw(); // queue draw in one minute +}; + +// timeout used to update every minute +var drawTimeout; + +// schedule a draw for the next minute +function queueDraw() { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = setTimeout(function() { + drawTimeout = undefined; + draw(); + }, 60000 - (Date.now() % 60000)); +} + /** - * - * Simplestpp Clock - * - * The entire clock code is contained within the block below this - * supports 'fast load' - * - * To add support for clock_info_supprt we add the code marked at [1] and [2] + * clock_info_support + * this is the callback function that get invoked by clockInfoMenu.redraw(); + * + * We will display the image and text on the same line and centre the combined + * length of the image+text * */ - +function clockInfoDraw(itm, info, options) { - // must be inside our own scope here so that when we are unloaded everything disappears - // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global + g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); - let draw = function() { - var date = new Date(); - var timeStr = require("locale").time(date,1); - var h = g.getHeight(); - var w = g.getWidth(); - - g.reset(); - g.setColor(g.theme.bg); - g.fillRect(Bangle.appRect); + //use info.text.toString(), steps does not have length defined + var text_w = g.stringWidth(info.text.toString()); + // gap between image and text + var gap = 10; + // width of the image and text combined + var w = gap + (info.img ? 24 :0) + text_w; + // different fg color if we tapped on the menu + if (options.focus) g.setColor(options.hl); - g.setFont('Vector', w/3); - g.setFontAlign(0, 0); - g.setColor(g.theme.fg); - g.drawString(timeStr, w/2, h/2); - clockInfoMenu.redraw(); // clock_info_support - - // schedule a draw for the next minute - if (drawTimeout) clearTimeout(drawTimeout); - drawTimeout = setTimeout(function() { - drawTimeout = undefined; - draw(); - }, 60000 - (Date.now() % 60000)); - }; - - /** - * clock_info_support - * this is the callback function that get invoked by clockInfoMenu.redraw(); - * - * We will display the image and text on the same line and centre the combined - * length of the image+text - * - * - */ - let clockInfoDraw = (itm, info, options) => { - - g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); - - //use info.text.toString(), steps does not have length defined - var text_w = g.stringWidth(info.text.toString()); - // gap between image and text - var gap = 10; - // width of the image and text combined - var w = gap + (info.img ? 24 :0) + text_w; - // different fg color if we tapped on the menu - if (options.focus) g.setColor(options.hl); - - // clear the whole info line - g.clearRect(0, options.y -1, g.getWidth(), options.y+24); - - // draw the image if we have one - if (info.img) { - // image start - var x = (g.getWidth() / 2) - (w/2); - g.drawImage(info.img, x, options.y); - // draw the text to the side of the image (left/centre alignment) - g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12); - } else { - // text only option, not tested yet - g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12); - } - - }; - - // clock_info_support - // retrieve all the clock_info modules that are installed - let clockInfoItems = require("clock_info").load(); - - // clock_info_support - // setup the way we wish to interact with the menu - // the hl property defines the color the of the info when the menu is selected after tapping on it - let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} ); + // clear the whole info line + g.clearRect(0, options.y -1, g.getWidth(), options.y+24); - // timeout used to update every minute - var drawTimeout; - g.clear(); + // draw the image if we have one + if (info.img) { + // image start + var x = (g.getWidth() / 2) - (w/2); + g.drawImage(info.img, x, options.y); + // draw the text to the side of the image (left/centre alignment) + g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12); + } else { + // text only option, not tested yet + g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12); + } - // Show launcher when middle button pressed, add updown button handlers - Bangle.setUI({ - mode : "clock", - remove : function() { - if (drawTimeout) clearTimeout(drawTimeout); - drawTimeout = undefined; - // remove info menu - clockInfoMenu.remove(); - delete clockInfoMenu; - } - }); +}; - // Load widgets - Bangle.loadWidgets(); - draw(); - setTimeout(Bangle.drawWidgets,0); -} // end of clock +/** + * clock_info_support: retrieve all the clock_info modules that are + * installed + * + */ +let clockInfoItems = require("clock_info").load(); + +/** + * clock_info_support: setup the way we wish to interact with the menu + * the hl property defines the color the of the info when the menu is + * selected after tapping on it + * + */ +let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} ); + +// Clear the screen once, at startup +g.clear(); + +// Show launcher when middle button pressed +Bangle.setUI("clock"); +// Load widgets +Bangle.loadWidgets(); +Bangle.drawWidgets(); +draw(); diff --git a/apps/simplestpp/metadata.json b/apps/simplestpp/metadata.json index d808b132b..145bf7309 100644 --- a/apps/simplestpp/metadata.json +++ b/apps/simplestpp/metadata.json @@ -2,8 +2,8 @@ "id": "simplestpp", "name": "Simplest++ Clock", "shortName": "Simplest++", - "version": "0.01", - "description": "The simplest working clock, with fast load and clock_info, acts as a tutorial piece", + "version": "0.02", + "description": "The simplest working clock, with clock_info, acts as a tutorial piece", "readme": "README.md", "icon": "app.png", "screenshots": [{"url":"screenshot3.png"}], From d3f7226c97d98a22bce0f68e44c9cc80668a6af8 Mon Sep 17 00:00:00 2001 From: Hugh Barney Date: Fri, 23 Dec 2022 23:50:40 +0000 Subject: [PATCH 2/4] Settings, make system menu items shorter, eg clock instead of Select Clock --- apps/setting/ChangeLog | 1 + apps/setting/metadata.json | 2 +- apps/setting/settings.js | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/setting/ChangeLog b/apps/setting/ChangeLog index bf78c50b6..7cf362334 100644 --- a/apps/setting/ChangeLog +++ b/apps/setting/ChangeLog @@ -60,3 +60,4 @@ 0.53: Ensure that when clock is set, clockHasWidgets is set correctly too 0.54: If setting.json is corrupt, ensure it gets re-written 0.55: More strings tagged for automatic translation. +0.56: make System mene items shorter and more consistant, Eg 'Clock', intead of Select Clock' diff --git a/apps/setting/metadata.json b/apps/setting/metadata.json index 80db81f65..92fc75915 100644 --- a/apps/setting/metadata.json +++ b/apps/setting/metadata.json @@ -1,7 +1,7 @@ { "id": "setting", "name": "Settings", - "version": "0.55", + "version": "0.56", "description": "A menu for setting up Bangle.js", "icon": "settings.png", "tags": "tool,system", diff --git a/apps/setting/settings.js b/apps/setting/settings.js index b58615913..a877ec79c 100644 --- a/apps/setting/settings.js +++ b/apps/setting/settings.js @@ -89,8 +89,8 @@ function showSystemMenu() { /*LANG*/'Theme': ()=>showThemeMenu(), /*LANG*/'LCD': ()=>showLCDMenu(), /*LANG*/'Locale': ()=>showLocaleMenu(), - /*LANG*/'Select Clock': ()=>showClockMenu(), - /*LANG*/'Select Launcher': ()=>showLauncherMenu(), + /*LANG*/'Clock': ()=>showClockMenu(), + /*LANG*/'Launcher': ()=>showLauncherMenu(), /*LANG*/'Date & Time': ()=>showSetTimeMenu() }; From 91ca7cb906942f7e2892cc9375c21458816f4157 Mon Sep 17 00:00:00 2001 From: Hugh Barney Date: Sun, 1 Jan 2023 14:19:26 +0000 Subject: [PATCH 3/4] fixed typos --- apps/setting/ChangeLog | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/setting/ChangeLog b/apps/setting/ChangeLog index 7cf362334..85ccfa1a7 100644 --- a/apps/setting/ChangeLog +++ b/apps/setting/ChangeLog @@ -60,4 +60,5 @@ 0.53: Ensure that when clock is set, clockHasWidgets is set correctly too 0.54: If setting.json is corrupt, ensure it gets re-written 0.55: More strings tagged for automatic translation. -0.56: make System mene items shorter and more consistant, Eg 'Clock', intead of Select Clock' +0.56: make System menu items shorter and more consistant, Eg 'Clock', intead +of 'Select Clock' From fd0c455f29aa8a967bbbc3ed2ca9ac02a7371b67 Mon Sep 17 00:00:00 2001 From: Hugh Barney Date: Mon, 2 Jan 2023 22:35:08 +0000 Subject: [PATCH 4/4] fixed additionals semi-colons --- apps/simplestpp/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/simplestpp/app.js b/apps/simplestpp/app.js index 31a65452f..0dcb883d3 100644 --- a/apps/simplestpp/app.js +++ b/apps/simplestpp/app.js @@ -17,7 +17,7 @@ function draw() { clockInfoMenu.redraw(); // clock_info_support queueDraw(); // queue draw in one minute -}; +} // timeout used to update every minute var drawTimeout; @@ -39,8 +39,8 @@ function queueDraw() { * length of the image+text * */ -function clockInfoDraw(itm, info, options) -{ +function clockInfoDraw(itm, info, options) { + g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); //use info.text.toString(), steps does not have length defined @@ -67,7 +67,7 @@ function clockInfoDraw(itm, info, options) g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12); } -}; +} /** * clock_info_support: retrieve all the clock_info modules that are