diff --git a/apps.json b/apps.json index fc0e8bf96..2c3c77985 100644 --- a/apps.json +++ b/apps.json @@ -888,7 +888,7 @@ { "id": "berlinc", "name": "Berlin Clock", "icon": "berlin-clock.png", - "version":"0.02", + "version":"0.03", "description": "Berlin Clock (see https://en.wikipedia.org/wiki/Mengenlehreuhr)", "tags": "clock", "type":"clock", diff --git a/apps/berlinc/ChangeLog b/apps/berlinc/ChangeLog index 7819dbe2a..a33332bc4 100644 --- a/apps/berlinc/ChangeLog +++ b/apps/berlinc/ChangeLog @@ -1 +1,2 @@ 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. diff --git a/apps/berlinc/README.md b/apps/berlinc/README.md new file mode 100644 index 000000000..1f86ad73e --- /dev/null +++ b/apps/berlinc/README.md @@ -0,0 +1,10 @@ +# Berlin Clock Watch Face + +This is a clock-face analogous to the [Berlin Clock](https://en.wikipedia.org/wiki/Mengenlehreuhr). + +## Usage + +* BTN1: toggle displaying the time in decimal figures (24 hour format) in the minutes fields. The first two fields are used for the hour and the last two fields for the minute. This might be a help when you're still familarizig yourself with this new way to express the time. +* BTN2: start the launcher +* BTN3: toggle displaying the current date (in ISO 8601 format) below the actual clock-face. + diff --git a/apps/berlinc/berlin-clock.js b/apps/berlinc/berlin-clock.js index 93b584f66..3950147b8 100644 --- a/apps/berlinc/berlin-clock.js +++ b/apps/berlinc/berlin-clock.js @@ -1,58 +1,97 @@ -// place your const, vars, functions or classes here -fields = [ 4 , 4 , 11 , 4 ]; -width = g.getWidth(); -height = g.getHeight(); -rowHeight = height/4; +// 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 width = g.getWidth() - 2 * offset; +const height = g.getHeight() - 2 * offset; +const rowHeight = height / 4; + +var show_date = false; +var show_time = false; +var yy = 0; + rowlights = []; +time_digit = []; function drawBerlinClock() { - var now = new Date(); - rowlights[0] = Math.floor(now.getHours() / 5); - rowlights[1] = now.getHours() % 5; - rowlights[2] = Math.floor(now.getMinutes() / 5); - rowlights[3] = now.getMinutes() % 5; + g.clear(); + var now = new Date(); + + // show date below the clock + if (show_date) { + var yr = now.getFullYear(); + var month = now.getMonth() + 1; + 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.drawString(dateString, ( g.getWidth() - strWidth ) / 2, height + offset + 4); + } + + rowlights[0] = Math.floor(now.getHours() / 5); + rowlights[1] = now.getHours() % 5; + rowlights[2] = Math.floor(now.getMinutes() / 5); + rowlights[3] = now.getMinutes() % 5; - g.clear(); + time_digit[0] = Math.floor(now.getHours() / 10); + time_digit[1] = now.getHours() % 10; + time_digit[2] = Math.floor(now.getMinutes() / 10); + time_digit[3] = now.getMinutes() % 10; - g.drawRect(0,0,width,height); - for (row = 0 ; row < 4 ; row++) { - nfields = fields[row]; - boxWidth = width/nfields; + g.drawRect(offset, offset, width + offset, height + offset); + for (row = 0; row < 4; row++) { + nfields = fields[row]; + boxWidth = width / nfields; - for (col = 0 ; col < nfields ; col++) { - x1 = col*boxWidth; - y1 = row*rowHeight; - x2 = (col+1)*boxWidth; - y2 = (row+1)*rowHeight; + for (col = 0; col < nfields; col++) { + x1 = col * boxWidth + offset; + y1 = row * rowHeight + offset; + x2 = (col + 1) * boxWidth + offset; + y2 = (row + 1) * rowHeight + offset; - g.setColor(1,1,1); - g.drawRect(x1,y1,x2,y2); - if (col { g.clear(); if (on) { - Bangle.drawWidgets(); - // call your app function here - drawBerlinClock(); -}}); + Bangle.drawWidgets(); + // call your app function here + drawBerlinClock(); + } +}); // refesh every 15 sec setInterval(drawBerlinClock, 15E3); @@ -61,5 +100,9 @@ g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); drawBerlinClock(); +// 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 middle button pressed -setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"}); +setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });