From a6e2207b4acd189d5720e187ad607fc75c3e1ba9 Mon Sep 17 00:00:00 2001 From: Hugh Barney Date: Sat, 17 Dec 2022 11:23:28 +0000 Subject: [PATCH] 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"}],