Bar clock code cleanup

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,78 +14,110 @@
     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'
+  // hardcoded "settings"
-  const timeFontSize = (is12Hour && locale.hasMeridian) ? 6 : 8
+  const settings = {
-  const ampmFontSize = 2
+    time: {
-  const dateFont = 'Vector'
+      color: -1,
-  const dateFontSize = 20
+      font: '6x8',
-
+      size: (is12Hour && locale.hasMeridian) ? 6 : 8,
-  const screenSize = g.getWidth()
+      middle: screen.middle,
-  const screenCenter = screenSize / 2
+      center: screen.center,
-
+      ampm: {
-  const timeY = screenCenter
+        color: -1,
-  const barY = 155 // just below time
+        font: '6x8',
-  const barThickness = 6 // matches time digit size
+        size: 2,
-  const dateY = screenSize - dateFontSize // at bottom of screen
+      },
+    },
+    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
 
-
+  const timeText = function (date) {
-  function timeText(date) {
     if (!is12Hour) {
-      return {time: locale.time(date, true), ampm: ''}
+      return locale.time(date, true)
     }
-    const meridian = locale.meridian(date)
+    const date12 = new Date(date.getTime())
-    const hours = date.getHours()
+    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 drawDateTime = function (date) {
-    const timeTexts = timeText(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(timeText(date), t.center, t.middle, true)
-    g.drawString(timeTexts.time, screenCenter, timeY, true)
+    if (is12Hour && locale.hasMeridian) {
-    if (timeTexts.ampm !== '') {
+      const a = settings.time.ampm
+      g.setColor(a.color)
+      g.setFont(a.font, a.size)
       g.setFontAlign(1, -1) // right top
-      g.setFont(timeFont, ampmFontSize)
+      // at right edge of screen, aligned with time bottom
-      g.drawString(timeTexts.ampm,
+      const left = screen.width - a.size * 2,
-        // at right edge of screen     , aligned with time bottom
+        top = t.middle + t.size - a.size
-        (screenSize - ampmFontSize * 2), (timeY + timeFontSize - ampmFontSize),
+      g.drawString(ampmText(date), left, top, true)
-        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), d.center, d.middle, true)
-    g.drawString(dateText(date), screenCenter, dateY, 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
+    if (seconds === 0) return // zero-size rect stills draws one line of pixels
-    const fraction = seconds / SECONDS_PER_MINUTE
+    const fraction = seconds / SECONDS_PER_MINUTE,
-    g.fillRect(0, barY, fraction * screenSize, barY + barThickness)
+      width = fraction * screen.width
+    g.setColor(b.color)
+    g.fillRect(0, b.top, width, b.top + b.thickness)
   }
-  function clearScreen() {
+
+  const clearScreen = function () {
     g.setColor(0)
-    g.fillRect(0, timeY - (timeFontSize * 4), screenSize, screenSize)
+    const timeTop = settings.time.middle - (settings.time.size * 4)
-    g.setColor(-1)
+    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()
@@ -94,18 +126,19 @@
       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
@@ -120,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()
 }