From 277132e2a497383863a8ac33aa49400f32bd57cf Mon Sep 17 00:00:00 2001 From: Richard de Boer Date: Mon, 30 Mar 2020 21:34:44 +0200 Subject: [PATCH 1/2] Create Bar Clock --- apps.json | 13 +++++ apps/barclock/ChangeLog | 1 + apps/barclock/clock-bar-icon.js | 1 + apps/barclock/clock-bar.js | 99 ++++++++++++++++++++++++++++++++ apps/barclock/clock-bar.png | Bin 0 -> 159 bytes 5 files changed, 114 insertions(+) create mode 100644 apps/barclock/ChangeLog create mode 100644 apps/barclock/clock-bar-icon.js create mode 100644 apps/barclock/clock-bar.js create mode 100644 apps/barclock/clock-bar.png diff --git a/apps.json b/apps.json index 2110078f6..d42bc2c11 100644 --- a/apps.json +++ b/apps.json @@ -875,5 +875,18 @@ "storage": [ {"name":"widver.wid.js","url":"widget.js"} ] + }, + { "id": "barclock", + "name": "Bar Clock", + "icon": "clock-bar.png", + "version":"0.01", + "description": "A simple 24h digital clock showing seconds as a bar", + "tags": "clock", + "type":"clock", + "allow_emulator":true, + "storage": [ + {"name":"barclock.app.js","url":"clock-bar.js"}, + {"name":"barclock.img","url":"clock-bar-icon.js","evaluate":true} + ] } ] diff --git a/apps/barclock/ChangeLog b/apps/barclock/ChangeLog new file mode 100644 index 000000000..83b3133da --- /dev/null +++ b/apps/barclock/ChangeLog @@ -0,0 +1 @@ +0.01: Created Bar Clock diff --git a/apps/barclock/clock-bar-icon.js b/apps/barclock/clock-bar-icon.js new file mode 100644 index 000000000..29bf0f481 --- /dev/null +++ b/apps/barclock/clock-bar-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwgJC/AD8Mgfwh/AhgFFngHBOIM8AovMDIXA5gFFDoUAmYjDAocMSoMz/4FF//P/g1CAopTLDAIABwAFGAH4AfA")) diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js new file mode 100644 index 000000000..100f66db1 --- /dev/null +++ b/apps/barclock/clock-bar.js @@ -0,0 +1,99 @@ +/* jshint esversion: 6 */ +/** + * A simple 24h digital clock showing seconds as a bar + **/ +{ + const timeFont = '6x8' + const timeFontSize = 8 // 'hh:mm' fits exactly + const dateFont = 'Vector' + const dateFontSize = 20 + + const screenSize = g.getWidth() + const screenCenter = screenSize / 2 + + const timeY = screenCenter + const barY = 155 // just below time + const barThickness = 6 // matches time digit size + const dateY = screenSize - dateFontSize // at bottom of screen + + const SECONDS_PER_MINUTE = 60 + + function timeText(date) { + const d = date.toString().split(' ') + const time = d[4].substr(0, 5) + const t = time.split(':') + const hours = t[0], + minutes = t[1] + return `${hours}:${minutes}` + } + + function dateText(date) { + const d = date.toString().split(' ') + const dayName = d[0], + month = d[1], + day = d[2] + return `${dayName} ${day} ${month}` + } + + function drawDateTime(date) { + g.setFontAlign(0, 0) // centered + + g.setFont(timeFont, timeFontSize) + g.drawString(timeText(date), screenCenter, timeY, true) + + g.setFont(dateFont, dateFontSize) + g.drawString(dateText(date), screenCenter, dateY, true) + } + + function drawBar(date) { + const seconds = date.getSeconds() + const fraction = seconds / SECONDS_PER_MINUTE + g.fillRect(0, barY, fraction * screenSize, barY + barThickness) + } + function eraseBar() { + const color = g.getColor() + g.setColor(g.getBgColor()) + g.fillRect(0, barY, screenSize, barY + barThickness) + g.setColor(color) + } + + let lastSeconds + function tick() { + g.reset() + const date = new Date() + const seconds = date.getSeconds() + if (lastSeconds > seconds) { + // new minute + eraseBar() + drawDateTime(date) + } + drawBar(date) + + lastSeconds = seconds + } + + let iTick + function start() { + lastSeconds = 99 // force redraw + tick() + iTick = setInterval(tick, 1000) + } + function stop() { + if (iTick) { + clearInterval(iTick) + iTick = undefined + } + } + + // clean app screen + g.clear() + Bangle.loadWidgets() + Bangle.drawWidgets() + // Show launcher when middle button pressed + setWatch(Bangle.showLauncher, BTN2, {repeat: false, edge: 'falling'}) + + Bangle.on('lcdPower', function (on) { + on ? start() : stop() + }) + start() +} diff --git a/apps/barclock/clock-bar.png b/apps/barclock/clock-bar.png new file mode 100644 index 0000000000000000000000000000000000000000..a580cae69c0b08824b0a0540a691bb636ace9045 GIT binary patch literal 159 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDH3?y^UWFG-iYymzYu0Z<#|Nl#G&c6#}aTa() z7BevDDT6R$#Zvn+prE~{i(`ny<>Z6~#t#zz9jI?$cf0xFgM`G511pRj9x|sVhy-vp z8}iS2lxSe^kALyM`TvAoWE-G$nj`63{3HPgg&ebxsLQ0OcVv A;{X5v literal 0 HcmV?d00001 From 54346977c4d5f5265084042b4a95fd4cef6cff10 Mon Sep 17 00:00:00 2001 From: Richard de Boer Date: Tue, 31 Mar 2020 00:05:00 +0200 Subject: [PATCH 2/2] Bar clock 0.02: Apply locale, 12-hour setting Plus minor bar drawing improvement --- apps.json | 4 +-- apps/barclock/ChangeLog | 1 + apps/barclock/clock-bar.js | 58 ++++++++++++++++++++++++++++---------- 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/apps.json b/apps.json index d42bc2c11..4958d039b 100644 --- a/apps.json +++ b/apps.json @@ -879,8 +879,8 @@ { "id": "barclock", "name": "Bar Clock", "icon": "clock-bar.png", - "version":"0.01", - "description": "A simple 24h digital clock showing seconds as a bar", + "version":"0.02", + "description": "A simple digital clock showing seconds as a bar", "tags": "clock", "type":"clock", "allow_emulator":true, diff --git a/apps/barclock/ChangeLog b/apps/barclock/ChangeLog index 83b3133da..a8d2f5485 100644 --- a/apps/barclock/ChangeLog +++ b/apps/barclock/ChangeLog @@ -1 +1,2 @@ 0.01: Created Bar Clock +0.02: Apply locale, 12-hour setting diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js index 100f66db1..5ab9c433e 100644 --- a/apps/barclock/clock-bar.js +++ b/apps/barclock/clock-bar.js @@ -1,10 +1,23 @@ /* jshint esversion: 6 */ /** - * A simple 24h digital clock showing seconds as a bar + * A simple digital clock showing seconds as a bar **/ { + // Check settings for what type our clock should be + const is12Hour = (require('Storage').readJSON('setting.json', 1) || {})['12hour'] + const locale = require('locale') + { // add some more info to locale + let date = new Date() + date.setFullYear(1111) + date.setMonth(1, 3) // februari: months are zero-indexed + const localized = locale.date(date, true) + locale.dayFirst = /3.*2/.test(localized) + locale.hasMeridian = (locale.meridian(date) !== '') + } + const timeFont = '6x8' - const timeFontSize = 8 // 'hh:mm' fits exactly + const timeFontSize = (is12Hour && locale.hasMeridian) ? 6 : 8 + const ampmFontSize = 2 const dateFont = 'Vector' const dateFontSize = 20 @@ -18,35 +31,50 @@ const SECONDS_PER_MINUTE = 60 + function timeText(date) { - const d = date.toString().split(' ') - const time = d[4].substr(0, 5) - const t = time.split(':') - const hours = t[0], - minutes = t[1] - return `${hours}:${minutes}` + if (!is12Hour) { + return {time: locale.time(date, true), ampm: ''} + } + const meridian = locale.meridian(date) + const hours = date.getHours() + if (hours === 0) { + date.setHours(12) + } else if (hours > 12) { + date.setHours(hours - 12) + } + return {time: locale.time(date, true), ampm: meridian} } function dateText(date) { - const d = date.toString().split(' ') - const dayName = d[0], - month = d[1], - day = d[2] - return `${dayName} ${day} ${month}` + const dayName = locale.dow(date, true), + month = locale.month(date, true), + day = date.getDate() + return `${dayName} ` + (locale.dayFirst ? `${day} ${month}` : `${month} ${day}`) } function drawDateTime(date) { + const timeTexts = timeText(date) g.setFontAlign(0, 0) // centered - g.setFont(timeFont, timeFontSize) - g.drawString(timeText(date), screenCenter, timeY, true) + g.drawString(timeTexts.time, screenCenter, timeY, true) + if (timeTexts.ampm !== '') { + g.setFontAlign(1, -1) + g.setFont(timeFont, ampmFontSize) + g.drawString(timeTexts.ampm, + // at right edge of screen , aligned with time bottom + (screenSize - ampmFontSize * 2), (timeY + timeFontSize - ampmFontSize), + true) + } + g.setFontAlign(0, 0) // centered g.setFont(dateFont, dateFontSize) g.drawString(dateText(date), screenCenter, dateY, true) } function drawBar(date) { const seconds = date.getSeconds() + if (seconds === 0) return; // zero-size rect stills draws one line of pixels const fraction = seconds / SECONDS_PER_MINUTE g.fillRect(0, barY, fraction * screenSize, barY + barThickness) }