diff --git a/apps/palikkainen/app.js b/apps/palikkainen/app.js new file mode 100644 index 000000000..42013af69 --- /dev/null +++ b/apps/palikkainen/app.js @@ -0,0 +1,184 @@ +// Palikkainen +// +// Bangle.js 2 watch face +// by Jukio Kallio +// www.jukiokallio.com + +require("Font6x8").add(Graphics); + +// settings +const watch = { + x:0, y:0, w:0, h:0, + bgcolor:g.theme.bg, + fgcolor:g.theme.fg, + font: "6x8", fontsize: 1, + finland:true, // change if you want Finnish style date, or US style +}; + +// set some additional settings +watch.w = g.getWidth(); // size of the background +watch.h = g.getHeight(); +watch.x = watch.w * 0.5; // position of the circles +watch.y = watch.h * 0.45; + +const dateWeekday = { 0: "SUN", 1: "MON", 2: "TUE", 3: "WED", 4:"THU", 5:"FRI", 6:"SAT" }; // weekdays + +var wait = 60000; // wait time, normally a minute + + +// timeout used to update every minute +var drawTimeout; + +// schedule a draw for the next minute +function queueDraw() { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = setTimeout(function() { + drawTimeout = undefined; + draw(); + }, wait - (Date.now() % wait)); +} + + +// main function +function draw() { + // make date object + var date = new Date(); + + // work out the date string + var dateDay = date.getDate(); + var dateMonth = date.getMonth() + 1; + var dateYear = date.getFullYear(); + var dateStr = dateWeekday[date.getDay()] + " " + dateMonth + "." + dateDay + "." + dateYear; + if (watch.finland) dateStr = dateWeekday[date.getDay()] + " " + dateDay + "." + dateMonth + "." + dateYear; // the true way of showing date + + // Reset the state of the graphics library + g.reset(); + + // Clear the area where we want to draw the time + g.setColor(watch.bgcolor); + g.fillRect(0, 0, watch.w, watch.h); + + // setup watch face + const block = { + w: watch.w / 2 - 6, + h: 18, + pad: 4, + }; + + // get hours and minutes + var hour = date.getHours(); + var minute = date.getMinutes(); + + // calculate size of the block face + var facew = block.w * 2 + block.pad; + var faceh = (block.h + block.pad) * 6; + + + // loop through first 12 hours and draw blocks accordingly + g.setColor(watch.fgcolor); // set foreground color + + for (var i = 0; i < 12; i++) { + // where to draw + var x = watch.x - facew / 2; // starting position + var y = watch.y + faceh / 2 - block.h - block.pad / 2; // draw blocks from bottom up + if (i > 5) { + // second column + x += block.w + block.pad; + y -= (block.h + block.pad) * (i - 6); + } else { + // first column + x += 0; + y -= (block.h + block.pad) * i; + } + + if (i < hour) { + // draw full hour block + g.fillRect(x, y, x + block.w, y + block.h); + } else if (i == hour) { + // draw minutes + g.fillRect(x, y, x + block.w * (minute / 60), y + block.h); + + // minute reading help + for (var m = 1; m < 12; m++) { + // set color + if (m * 5 < minute) g.setColor(watch.bgcolor); else g.setColor(watch.fgcolor); + + var mlineh = 1; // minute line height + if (m == 3 || m == 6 || m == 9) mlineh = 3; // minute line height at 15, 30 and 45 minutes + + g.drawLine(x + (block.w / 12 * m), y + block.h / 2 - mlineh, x + (block.w / 12 * m), y + block.h / 2 + mlineh); + } + } + } + + + // loop through second 12 hours and draw blocks accordingly + if (hour >= 12) { + g.setColor(watch.bgcolor); // set foreground color + + for (var i2 = 0; i2 < 12; i2++) { + // where to draw + var x2 = watch.x - facew / 2; // starting position + var y2 = watch.y + faceh / 2 - block.h - block.pad / 2; // draw blocks from bottom up + if (i2 > 5) { + // second column + x2 += block.w + block.pad; + y2 -= (block.h + block.pad) * (i2 - 6); + } else { + // first column + x2 += 0; + y2 -= (block.h + block.pad) * i2; + } + + if (i2 < hour % 12) { + // draw full hour block + g.fillRect(x2, y2, x2 + block.w, y2 + block.h); + } else if (i2 == hour % 12) { + // draw minutes + g.fillRect(x2, y2, x2 + block.w * (minute / 60), y2 + block.h); + + // minute reading help + for (var m2 = 1; m2 < 12; m2++) { + // set color + if (m2 * 5 < minute) g.setColor(watch.fgcolor); else g.setColor(watch.bgcolor); + + var mlineh2 = 1; // minute line height + if (m2 == 3 || m2 == 6 || m2 == 9) mlineh2 = 3; // minute line height at 15, 30 and 45 minutes + + g.drawLine(x2 + (block.w / 12 * m2), y2 + block.h / 2 - mlineh2, x2 + (block.w / 12 * m2), y2 + block.h / 2 + mlineh2); + } + } + } + } + + + // draw date + var datey = 11; + g.setFontAlign(0,-1).setFont(watch.font, watch.fontsize).setColor(watch.fgcolor); + g.drawString(dateStr, watch.x, watch.y + faceh / 2 + datey); + + + // queue draw + queueDraw(); +} + + +// Clear the screen once, at startup +g.clear(); +// draw immediately at first +draw(); + + +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ + if (on) { + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + } +}); + + +// Show launcher when middle button pressed +Bangle.setUI("clock");