Skip to content

Commit

Permalink
Bar clock code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
rigrig committed Apr 1, 2020
1 parent fb20174 commit 14faa1a
Showing 1 changed file with 84 additions and 47 deletions.
131 changes: 84 additions & 47 deletions apps/barclock/clock-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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'
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.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
g.setFont(timeFont, ampmFontSize)
g.drawString(timeTexts.ampm,
// at right edge of screen , aligned with time bottom
(screenSize - ampmFontSize * 2), (timeY + timeFontSize - ampmFontSize),
true)
// 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 clearScreen() {

const clearScreen = function () {
g.setColor(0)
g.fillRect(0, timeY - (timeFontSize * 4), screenSize, screenSize)
g.setColor(-1)
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()
Expand All @@ -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
Expand All @@ -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()
}

0 comments on commit 14faa1a

Please sign in to comment.