diff --git a/apps.json b/apps.json index e098d466d..d0fe261e4 100644 --- a/apps.json +++ b/apps.json @@ -1026,7 +1026,7 @@ { "id": "sclock", "name": "Simple Clock", - "version": "0.06", + "version": "0.07", "description": "A Simple Digital Clock", "icon": "clock-simple.png", "type": "clock", @@ -1071,12 +1071,12 @@ { "id": "svclock", "name": "Simple V-Clock", - "version": "0.03", + "version": "0.04", "description": "Modification of Simple Clock 0.04 to use Vectorfont", "icon": "vclock-simple.png", "type": "clock", "tags": "clock", - "supports": ["BANGLEJS"], + "supports": ["BANGLEJS","BANGLEJS2"], "allow_emulator": true, "storage": [ {"name":"svclock.app.js","url":"vclock-simple.js"}, @@ -1376,12 +1376,12 @@ { "id": "berlinc", "name": "Berlin Clock", - "version": "0.04", + "version": "0.05", "description": "Berlin Clock (see https://en.wikipedia.org/wiki/Mengenlehreuhr)", "icon": "berlin-clock.png", "type": "clock", "tags": "clock", - "supports": ["BANGLEJS"], + "supports": ["BANGLEJS","BANGLEJS2"], "allow_emulator": true, "storage": [ {"name":"berlinc.app.js","url":"berlin-clock.js"}, @@ -2804,12 +2804,12 @@ "id": "worldclock", "name": "World Clock - 4 time zones", "shortName": "World Clock", - "version": "0.04", + "version": "0.05", "description": "Current time zone plus up to four others", "icon": "app.png", "type": "clock", "tags": "clock", - "supports": ["BANGLEJS"], + "supports": ["BANGLEJS","BANGLEJS2"], "readme": "README.md", "custom": "custom.html", "storage": [ diff --git a/apps/berlinc/ChangeLog b/apps/berlinc/ChangeLog index 65ed0505f..9e9c1a6aa 100644 --- a/apps/berlinc/ChangeLog +++ b/apps/berlinc/ChangeLog @@ -1,3 +1,6 @@ 0.02: Modified for use with new bootloader and firmware 0.03: Shrinked size to avoid cut-off edges on the physical device. BTN3: show date. BTN1: show time in decimal. 0.04: Update to use Bangle.setUI instead of setWatch +0.05: Update *on* the minute rather than every 15 secs + Now show widgets + Make compatible with themes, and Bangle.js 2 diff --git a/apps/berlinc/berlin-clock.js b/apps/berlinc/berlin-clock.js index 144fa5ba7..0dd8ff8ee 100644 --- a/apps/berlinc/berlin-clock.js +++ b/apps/berlinc/berlin-clock.js @@ -1,7 +1,7 @@ // Berlin Clock see https://en.wikipedia.org/wiki/Mengenlehreuhr // https://github.com/eska-muc/BangleApps const fields = [4, 4, 11, 4]; -const offset = 20; +const offset = 24; const width = g.getWidth() - 2 * offset; const height = g.getHeight() - 2 * offset; const rowHeight = height / 4; @@ -10,11 +10,23 @@ var show_date = false; var show_time = false; var yy = 0; -rowlights = []; -time_digit = []; +var rowlights = []; +var time_digit = []; -function drawBerlinClock() { - g.clear(); +// 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)); +} + +function draw() { + g.reset().clearRect(0,24,g.getWidth(),g.getHeight()); var now = new Date(); // show date below the clock @@ -24,8 +36,7 @@ function drawBerlinClock() { var day = now.getDate(); var dateString = `${yr}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; var strWidth = g.stringWidth(dateString); - g.setColor(1, 1, 1); - g.setFontAlign(-1,-1); + g.setColor(g.theme.fg).setFontAlign(-1,-1); g.drawString(dateString, ( g.getWidth() - strWidth ) / 2, height + offset + 4); } @@ -50,8 +61,7 @@ function drawBerlinClock() { x2 = (col + 1) * boxWidth + offset; y2 = (row + 1) * rowHeight + offset; - g.setColor(1, 1, 1); - g.drawRect(x1, y1, x2, y2); + g.setColor(g.theme.fg).drawRect(x1, y1, x2, y2); if (col < rowlights[row]) { if (row === 2) { if (((col + 1) % 3) === 0) { @@ -65,46 +75,42 @@ function drawBerlinClock() { g.fillRect(x1 + 2, y1 + 2, x2 - 2, y2 - 2); } if (row == 3 && show_time) { - g.setColor(1,1,1); - g.setFontAlign(0,0); + g.setColor(g.theme.fg).setFontAlign(0,0); g.drawString(time_digit[col],(x1+x2)/2,(y1+y2)/2); } } } + + queueDraw(); } function toggleDate() { show_date = ! show_date; - drawBerlinClock(); + draw(); } function toggleTime() { show_time = ! show_time; - drawBerlinClock(); + draw(); } -// special function to handle display switch on -Bangle.on('lcdPower', (on) => { - g.clear(); +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ if (on) { - Bangle.drawWidgets(); - // call your app function here - drawBerlinClock(); + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; } }); -// refesh every 15 sec -setInterval(drawBerlinClock, 15E3); +// Show launcher when button pressed, handle up/down +Bangle.setUI("clockupdown", dir=> { + if (dir<0) toggleTime(); + if (dir>0) toggleDate(); +}); g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); -drawBerlinClock(); -if (BTN3) { - // Toggle date display, when BTN3 is pressed - setWatch(toggleTime,BTN1, { repeat : true, edge: "falling"}); - // Toggle date display, when BTN3 is pressed - setWatch(toggleDate,BTN3, { repeat : true, edge: "falling"}); -} -// Show launcher when button pressed -Bangle.setUI("clock"); +draw(); diff --git a/apps/sclock/ChangeLog b/apps/sclock/ChangeLog index 44a0ec504..dc76b8299 100644 --- a/apps/sclock/ChangeLog +++ b/apps/sclock/ChangeLog @@ -3,3 +3,4 @@ 0.04: Make this clock do 12h and 24h 0.05: setUI, screen size changes 0.06: Use Bangle.setUI for button/launcher handling +0.07: Update *on* the minute rather than every 15 secs diff --git a/apps/sclock/clock-simple.js b/apps/sclock/clock-simple.js index 8fb204d22..a399b05a7 100644 --- a/apps/sclock/clock-simple.js +++ b/apps/sclock/clock-simple.js @@ -1,4 +1,3 @@ -/* jshint esversion: 6 */ const big = g.getWidth()>200; const timeFontSize = big?6:5; const dateFontSize = big?3:2; @@ -14,7 +13,19 @@ const yposGMT = xyCenter*1.9; // Check settings for what type our clock should be var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]; -function drawSimpleClock() { +// 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)); +} + +function draw() { // get date var d = new Date(); var da = d.toString().split(" "); @@ -60,11 +71,18 @@ function drawSimpleClock() { var gmt = da[5]; g.setFont(font, gmtFontSize); g.drawString(gmt, xyCenter, yposGMT, true); + + queueDraw(); } -// handle switch display on by pressing BTN1 -Bangle.on('lcdPower', function(on) { - if (on) drawSimpleClock(); +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ + if (on) { + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + } }); // clean app screen @@ -74,8 +92,5 @@ Bangle.setUI("clock"); Bangle.loadWidgets(); Bangle.drawWidgets(); -// refesh every 15 sec -setInterval(drawSimpleClock, 15E3); - // draw now -drawSimpleClock(); +draw(); diff --git a/apps/svclock/ChangeLog b/apps/svclock/ChangeLog index 4db60ecd5..fb71fbeb8 100644 --- a/apps/svclock/ChangeLog +++ b/apps/svclock/ChangeLog @@ -1,3 +1,4 @@ 0.01: Modification of SimpleClock 0.04 to use Vectorfont 0.02: Use Bangle.setUI for button/launcher handling -0.03: Scale to BangleJS 2 and add locale \ No newline at end of file +0.03: Scale to BangleJS 2 and add locale +0.04: Fix rendering issue on real hardware, now update *on* the minute rather than every 15 secs diff --git a/apps/svclock/vclock-simple.js b/apps/svclock/vclock-simple.js index 637701a3f..e08c6fa2c 100644 --- a/apps/svclock/vclock-simple.js +++ b/apps/svclock/vclock-simple.js @@ -1,4 +1,3 @@ -/* jshint esversion: 6 */ const locale = require("locale"); var timeFontSize; @@ -12,8 +11,7 @@ var yposDate; var yposYear; var yposGMT; -switch (process.env.BOARD) { - case "EMSCRIPTEN": +if (g.getWidth() > 200) { timeFontSize = 65; dateFontSize = 20; gmtFontSize = 10; @@ -22,8 +20,7 @@ switch (process.env.BOARD) { yposDate = 130; yposYear = 175; yposGMT = 220; - break; - case "EMSCRIPTEN2": +} else { timeFontSize = 48; dateFontSize = 15; gmtFontSize = 10; @@ -32,12 +29,23 @@ switch (process.env.BOARD) { yposDate = 95; yposYear = 128; yposGMT = 161; - break; } // Check settings for what type our clock should be var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]; -function drawSimpleClock() { +// 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)); +} + +function draw() { g.clear(); Bangle.drawWidgets(); @@ -76,23 +84,26 @@ function drawSimpleClock() { // draw gmt g.setFont(font, gmtFontSize); g.drawString(d.toString().match(/GMT[+-]\d+/), xyCenter, yposGMT, true); + + queueDraw(); } -// handle switch display on by pressing BTN1 -Bangle.on('lcdPower', function(on) { - if (on) drawSimpleClock(); +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ + if (on) { + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + } }); +// Show launcher when button pressed +Bangle.setUI("clock"); // clean app screen g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); -// refesh every 15 sec -setInterval(drawSimpleClock, 15E3); - // draw now -drawSimpleClock(); - -// Show launcher when button pressed -Bangle.setUI("clock"); +draw(); diff --git a/apps/worldclock/ChangeLog b/apps/worldclock/ChangeLog index e922ef2a4..831dd3b5c 100644 --- a/apps/worldclock/ChangeLog +++ b/apps/worldclock/ChangeLog @@ -2,3 +2,5 @@ 0.02: Update custom.html for refactor; add README 0.03: Update for larger secondary timezone display (#610) 0.04: setUI, different screen sizes +0.05: Now update *on* the minute rather than every 15 secs + Fix rendering of single extra timezone on Bangle.js 2 diff --git a/apps/worldclock/app.js b/apps/worldclock/app.js index 84cb29874..2627e056c 100644 --- a/apps/worldclock/app.js +++ b/apps/worldclock/app.js @@ -1,5 +1,3 @@ -/* jshint esversion: 6 */ - const big = g.getWidth()>200; // Font for primary time and date const primaryTimeFontSize = big?6:5; @@ -16,8 +14,13 @@ const xcol2 = g.getWidth() - xcol1; const font = "6x8"; +/* TODO: we could totally use 'Layout' here and +avoid a whole bunch of hard-coded offsets */ + + const xyCenter = g.getWidth() / 2; const yposTime = big ? 75 : 60; +const yposTime2 = yposTime + (big ? 100 : 60); const yposDate = big ? 130 : 90; const yposWorld = big ? 170 : 120; @@ -29,41 +32,52 @@ var offsets = require("Storage").readJSON("worldclock.settings.json") || []; // TESTING CODE // Used to test offset array values during development. // Uncomment to override secondary offsets value - -// const mockOffsets = { -// zeroOffsets: [], -// oneOffset: [["UTC", 0]], -// twoOffsets: [ -// ["Tokyo", 9], -// ["UTC", 0], -// ], -// fourOffsets: [ -// ["Tokyo", 9], -// ["UTC", 0], -// ["Denver", -7], -// ["Miami", -5], -// ], -// fiveOffsets: [ -// ["Tokyo", 9], -// ["UTC", 0], -// ["Denver", -7], -// ["Chicago", -6], -// ["Miami", -5], -// ], -// }; +/* +const mockOffsets = { + zeroOffsets: [], + oneOffset: [["UTC", 0]], + twoOffsets: [ + ["Tokyo", 9], + ["UTC", 0], + ], + fourOffsets: [ + ["Tokyo", 9], + ["UTC", 0], + ["Denver", -7], + ["Miami", -5], + ], + fiveOffsets: [ + ["Tokyo", 9], + ["UTC", 0], + ["Denver", -7], + ["Chicago", -6], + ["Miami", -5], + ], +};*/ // Uncomment one at a time to test various offsets array scenarios -// offsets = mockOffsets.zeroOffsets; // should render nothing below primary time -// offsets = mockOffsets.oneOffset; // should render larger in two rows -// offsets = mockOffsets.twoOffsets; // should render two in columns -// offsets = mockOffsets.fourOffsets; // should render in columns -// offsets = mockOffsets.fiveOffsets; // should render first four in columns +//offsets = mockOffsets.zeroOffsets; // should render nothing below primary time +//offsets = mockOffsets.oneOffset; // should render larger in two rows +//offsets = mockOffsets.twoOffsets; // should render two in columns +//offsets = mockOffsets.fourOffsets; // should render in columns +//offsets = mockOffsets.fiveOffsets; // should render first four in columns // END TESTING CODE // Check settings for what type our clock should be //var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]; -var secondInterval; + +// 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)); +} function doublenum(x) { return x < 10 ? "0" + x : "" + x; @@ -73,7 +87,7 @@ function getCurrentTimeFromOffset(dt, offset) { return new Date(dt.getTime() + offset * 60 * 60 * 1000); } -function drawSimpleClock() { +function draw() { // get date var d = new Date(); var da = d.toString().split(" "); @@ -111,9 +125,9 @@ function drawSimpleClock() { // For a single secondary timezone, draw it bigger and drop time zone to second line const xOffset = 30; g.setFont(font, secondaryTimeFontSize); - g.drawString(`${hours}:${minutes}`, xyCenter, yposTime + 100, true); + g.drawString(`${hours}:${minutes}`, xyCenter, yposTime2, true); g.setFont(font, secondaryTimeZoneFontSize); - g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime + 130, true); + g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime2 + 30, true); // draw Day, name of month, Date g.setFont(font, secondaryTimeZoneFontSize); @@ -132,6 +146,8 @@ function drawSimpleClock() { g.drawString(`${hours}:${minutes}`, xcol2, yposWorld + index * 15, true); } }); + + queueDraw(); } // clean app screen @@ -141,18 +157,15 @@ Bangle.setUI("clock"); Bangle.loadWidgets(); Bangle.drawWidgets(); -// refesh every 15 sec when screen is on -Bangle.on("lcdPower", (on) => { - if (secondInterval) clearInterval(secondInterval); - secondInterval = undefined; +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ if (on) { - secondInterval = setInterval(drawSimpleClock, 15e3); - drawSimpleClock(); // draw immediately + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; } }); -// draw now and every 15 sec until display goes off -drawSimpleClock(); -if (Bangle.isLCDOn()) { - secondInterval = setInterval(drawSimpleClock, 15e3); -} +// draw now +draw();