Merge pull request #176 from rigrig/barclock

Barclock fix and cleanup

apps.json

@@ -919,7 +919,7 @@
   { "id": "barclock",
     "name": "Bar Clock",
     "icon": "clock-bar.png",
-    "version":"0.02",
+    "version":"0.03",
     "description": "A simple digital clock showing seconds as a bar",
     "tags": "clock",
     "type":"clock",

apps/barclock/ChangeLog

@@ -1,2 +1,3 @@
 0.01: Created Bar Clock
 0.02: Apply locale, 12-hour setting
+0.03: Fix dates drawing over each other at midnight

apps/barclock/clock-bar.js

@@ -5,7 +5,7 @@
 {
   // Check settings for what type our clock should be
   const is12Hour = (require('Storage').readJSON('setting.json', 1) || {})['12hour']
-  const locale = require('locale')
+  let locale = require('locale')
   { // add some more info to locale
     let date = new Date()
     date.setFullYear(1111)
@@ -14,99 +14,131 @@
     locale.dayFirst = /3.*2/.test(localized)
     locale.hasMeridian = (locale.meridian(date) !== '')
   }
+  const screen = {
+    width: g.getWidth(),
+    height: g.getWidth(),
+    middle: g.getWidth() / 2,
+    center: g.getHeight() / 2,
+  }
 
-  const timeFont = '6x8'
-  const timeFontSize = (is12Hour && locale.hasMeridian) ? 6 : 8
-  const ampmFontSize = 2
-  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
+  // hardcoded "settings"
+  const settings = {
+    time: {
+      color: -1,
+      font: '6x8',
+      size: (is12Hour && locale.hasMeridian) ? 6 : 8,
+      middle: screen.middle,
+      center: screen.center,
+      ampm: {
+        color: -1,
+        font: '6x8',
+        size: 2,
+      },
+    },
+    date: {
+      color: -1,
+      font: 'Vector',
+      size: 20,
+      middle: screen.height - 20, // at bottom of screen
+      center: screen.center,
+    },
+    bar: {
+      color: -1,
+      top: 155, // just below time
+      thickness: 6, // matches 24h time "pixel" size
+    },
+  }
 
   const SECONDS_PER_MINUTE = 60
 
-
-  function timeText(date) {
+  const timeText = function (date) {
     if (!is12Hour) {
-      return {time: locale.time(date, true), ampm: ''}
+      return locale.time(date, true)
     }
-    const meridian = locale.meridian(date)
-    const hours = date.getHours()
+    const date12 = new Date(date.getTime())
+    const hours = date12.getHours()
     if (hours === 0) {
-      date.setHours(12)
+      date12.setHours(12)
     } else if (hours > 12) {
-      date.setHours(hours - 12)
+      date12.setHours(hours - 12)
     }
-    return {time: locale.time(date, true), ampm: meridian}
+    return locale.time(date12, true)
+  }
+  const ampmText = function (date) {
+    return is12Hour ? locale.meridian(date) : ''
   }
 
-  function dateText(date) {
+  const dateText = function (date) {
     const dayName = locale.dow(date, true),
       month = locale.month(date, true),
       day = date.getDate()
-    return `${dayName}  ` + (locale.dayFirst ? `${day} ${month}` : `${month} ${day}`)
+    const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}`
+    return `${dayName}  ${dayMonth}`
   }
 
-  function drawDateTime(date) {
-    const timeTexts = timeText(date)
+  const drawDateTime = function (date) {
+    const t = settings.time
+    g.setColor(t.color)
+    g.setFont(t.font, t.size)
     g.setFontAlign(0, 0) // centered
-    g.setFont(timeFont, timeFontSize)
-    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.drawString(timeText(date), t.center, t.middle, true)
+    if (is12Hour && locale.hasMeridian) {
+      const a = settings.time.ampm
+      g.setColor(a.color)
+      g.setFont(a.font, a.size)
+      g.setFontAlign(1, -1) // right top
+      // at right edge of screen, aligned with time bottom
+      const left = screen.width - a.size * 2,
+        top = t.middle + t.size - a.size
+      g.drawString(ampmText(date), left, top, true)
     }
 
+    const d = settings.date
+    g.setColor(d.color)
+    g.setFont(d.font, d.size)
     g.setFontAlign(0, 0) // centered
-    g.setFont(dateFont, dateFontSize)
-    g.drawString(dateText(date), screenCenter, dateY, true)
+    g.drawString(dateText(date), d.center, d.middle, true)
   }
 
-  function drawBar(date) {
+  const drawBar = function (date) {
+    const b = settings.bar
     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)
+    if (seconds === 0) return // zero-size rect stills draws one line of pixels
+    const fraction = seconds / SECONDS_PER_MINUTE,
+      width = fraction * screen.width
+    g.setColor(b.color)
+    g.fillRect(0, b.top, width, b.top + b.thickness)
   }
-  function eraseBar() {
-    const color = g.getColor()
-    g.setColor(g.getBgColor())
-    g.fillRect(0, barY, screenSize, barY + barThickness)
-    g.setColor(color)
+
+  const clearScreen = function () {
+    g.setColor(0)
+    const timeTop = settings.time.middle - (settings.time.size * 4)
+    g.fillRect(0, timeTop, screen.width, screen.height)
   }
 
   let lastSeconds
-  function tick() {
+  const tick = function () {
     g.reset()
     const date = new Date()
     const seconds = date.getSeconds()
     if (lastSeconds > seconds) {
       // new minute
-      eraseBar()
+      clearScreen()
       drawDateTime(date)
     }
+    // the bar only gets larger, so drawing on top of the previous one is fine
     drawBar(date)
 
     lastSeconds = seconds
   }
 
   let iTick
-  function start() {
+  const start = function () {
     lastSeconds = 99 // force redraw
     tick()
     iTick = setInterval(tick, 1000)
   }
-  function stop() {
+  const stop = function () {
     if (iTick) {
       clearInterval(iTick)
       iTick = undefined
@@ -121,7 +153,11 @@
   setWatch(Bangle.showLauncher, BTN2, {repeat: false, edge: 'falling'})
 
   Bangle.on('lcdPower', function (on) {
-    on ? start() : stop()
+    if (on) {
+      start()
+    } else {
+      stop()
+    }
   })
   start()
 }