diff --git a/apps/henkinen/ChangeLog b/apps/henkinen/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/henkinen/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/henkinen/README.md b/apps/henkinen/README.md new file mode 100644 index 000000000..e17e86121 --- /dev/null +++ b/apps/henkinen/README.md @@ -0,0 +1,7 @@ +# Henkinen + +By Jukio Kallio + +A tiny app helping you to breath and relax. + +![](screenshot1.png) diff --git a/apps/henkinen/app-icon.js b/apps/henkinen/app-icon.js new file mode 100644 index 000000000..7c82a375d --- /dev/null +++ b/apps/henkinen/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkEogA0/4AKCpNPCxYAB+gtTGJQuOGBAWPGAwuQGAwXH+cykc/C6UhgMSkMQiQXKBQsgiYFDmMCMBIIEmAWEDAUDC5nzBwogDMYgXHBoohJC4wuJEQwXG+ALDmUQgMjEYcPC5MhAYXxgAACj4ICVYYXGIwXzCwYABHAUwC5HyEwXwC4pEC+MvC4/xEoUQC4sBHIQlCC4vwIxBIEGYQXFmJKCC45ECfQQXIRoiRGC5EiOxB4EBwQXdI653XU67XX+QJCPAwrC+JKCC4v/gZIIHIUwCAQXGkIDCSIg4C/8SC5PwEwX/mUQgMjAwXzJQQXH+ZICAA8wEYYXGBgoAEEQoXHGBIhFC44OBcgQADmIgFC5H/kAYEmMCBooXDp4KFkMBiUhiCjDAAX0C5RjBmUjPo4XMABQXEMAwALCwgwRFwowRCwwwPFw4xOCpIArA")) diff --git a/apps/henkinen/app.js b/apps/henkinen/app.js new file mode 100644 index 000000000..d7c7bd5ed --- /dev/null +++ b/apps/henkinen/app.js @@ -0,0 +1,127 @@ +// Henkinen +// +// Bangle.js 2 breathing helper +// by Jukio Kallio +// www.jukiokallio.com + +require("FontHaxorNarrow7x17").add(Graphics); + +// settings +const breath = { + theme: "default", + x:0, y:0, w:0, h:0, + size: 60, + + bgcolor: g.theme.bg, + incolor: g.theme.fg, + keepcolor: g.theme.fg, + outcolor: g.theme.fg, + + font: "HaxorNarrow7x17", fontsize: 1, + textcolor: g.theme.fg, + texty: 18, + + in: 4000, + keep: 7000, + out: 8000 +}; + +// set some additional settings +breath.w = g.getWidth(); // size of the background +breath.h = g.getHeight(); +breath.x = breath.w * 0.5; // position of the circles +breath.y = breath.h * 0.45; +breath.texty = breath.y + breath.size + breath.texty; // text position + +var wait = 100; // wait time, normally a minute +var time = 0; // for time keeping + + +// 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(); + + // update current time + time += wait - (Date.now() % wait); + if (time > breath.in + breath.keep + breath.out) time = 0; // reset time + + // Reset the state of the graphics library + g.reset(); + + // Clear the area where we want to draw the time + g.setColor(breath.bgcolor); + g.fillRect(0, 0, breath.w, breath.h); + + // calculate circle size + var circle = 0; + if (time < breath.in) { + // breath in + circle = time / breath.in; + g.setColor(breath.incolor); + + } else if (time < breath.in + breath.keep) { + // keep breath + circle = 1; + g.setColor(breath.keepcolor); + + } else if (time < breath.in + breath.keep + breath.out) { + // breath out + circle = ((breath.in + breath.keep + breath.out) - time) / breath.out; + g.setColor(breath.outcolor); + + } + + // draw breath circle + g.fillCircle(breath.x, breath.y, breath.size * circle); + + // breath area + g.setColor(breath.textcolor); + g.drawCircle(breath.x, breath.y, breath.size); + + // draw text + g.setFontAlign(0,0).setFont(breath.font, breath.fontsize).setColor(breath.textcolor); + + if (time < breath.in) { + // breath in + g.drawString("Breath in", breath.x, breath.texty); + + } else if (time < breath.in + breath.keep) { + // keep breath + g.drawString("Keep it in", breath.x, breath.texty); + + } else if (time < breath.in + breath.keep + breath.out) { + // breath out + g.drawString("Breath out", breath.x, breath.texty); + + } + + // queue draw + queueDraw(); +} + + +// Clear the screen once, at startup +g.clear(); +// draw immediately at first +draw(); + + +// keep LCD on +Bangle.setLCDPower(1); + +// Show launcher when middle button pressed +Bangle.setUI("clock"); diff --git a/apps/henkinen/app.png b/apps/henkinen/app.png new file mode 100644 index 000000000..575ecbcd4 Binary files /dev/null and b/apps/henkinen/app.png differ diff --git a/apps/henkinen/metadata.json b/apps/henkinen/metadata.json new file mode 100644 index 000000000..1f1bb77fc --- /dev/null +++ b/apps/henkinen/metadata.json @@ -0,0 +1,15 @@ +{ "id": "henkinen", + "name": "Henkinen - Tiny Breathing Helper", + "shortName":"Henkinen", + "version":"0.01", + "description": "A tiny app helping you to breath and relax.", + "icon": "app.png", + "screenshots": [{"url":"screenshot1.png"}], + "tags": "outdoors", + "supports" : ["BANGLEJS","BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"henkinen.app.js","url":"app.js"}, + {"name":"henkinen.img","url":"app-icon.js","evaluate":true} + ] +} diff --git a/apps/henkinen/screenshot1.png b/apps/henkinen/screenshot1.png new file mode 100644 index 000000000..751fc30ad Binary files /dev/null and b/apps/henkinen/screenshot1.png differ diff --git a/apps/palikkainen/ChangeLog b/apps/palikkainen/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/palikkainen/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/palikkainen/README.md b/apps/palikkainen/README.md new file mode 100644 index 000000000..81d857209 --- /dev/null +++ b/apps/palikkainen/README.md @@ -0,0 +1,7 @@ +# Palikkainen + +By Jukio Kallio + +A minimal watch face consisting of blocks. Minutes fills the blocks, and after 12 hours it starts to empty them. + +![](screenshot1.png) diff --git a/apps/palikkainen/app-icon.js b/apps/palikkainen/app-icon.js new file mode 100644 index 000000000..a99602121 --- /dev/null +++ b/apps/palikkainen/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkBiIA0/4AKCpMfCxYAB+ItTGJQuOGBAWPGAwuQGAwXvCyJgFC+PwgAAEh4X/C/6//A4gX/C/6//A4QX/C/6/vC6sfCyPxC+ZgSCwgwRFwowRCwwwPFw4xOCpIArA")) 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"); diff --git a/apps/palikkainen/app.png b/apps/palikkainen/app.png new file mode 100644 index 000000000..142d429e9 Binary files /dev/null and b/apps/palikkainen/app.png differ diff --git a/apps/palikkainen/metadata.json b/apps/palikkainen/metadata.json new file mode 100644 index 000000000..4ed8be817 --- /dev/null +++ b/apps/palikkainen/metadata.json @@ -0,0 +1,16 @@ +{ "id": "palikkainen", + "name": "Palikkainen - A blocky watch face", + "shortName":"Palikkainen", + "version":"0.01", + "description": "A minimal watch face consisting of blocks.", + "icon": "app.png", + "screenshots": [{"url":"screenshot1.png"}], + "type": "clock", + "tags": "clock", + "supports" : ["BANGLEJS","BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"palikkainen.app.js","url":"app.js"}, + {"name":"palikkainen.img","url":"app-icon.js","evaluate":true} + ] +} diff --git a/apps/palikkainen/screenshot1.png b/apps/palikkainen/screenshot1.png new file mode 100644 index 000000000..7abbf6730 Binary files /dev/null and b/apps/palikkainen/screenshot1.png differ diff --git a/apps/pisteinen/ChangeLog b/apps/pisteinen/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/pisteinen/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/pisteinen/README.md b/apps/pisteinen/README.md new file mode 100644 index 000000000..20e8bf9a1 --- /dev/null +++ b/apps/pisteinen/README.md @@ -0,0 +1,7 @@ +# Pisteinen + +By Jukio Kallio + +A Minimal digital watch face consisting of dots. Big dots for hours, small dots for minutes. + +![](screenshot1.png) diff --git a/apps/pisteinen/app-icon.js b/apps/pisteinen/app-icon.js new file mode 100644 index 000000000..d8ad05c50 --- /dev/null +++ b/apps/pisteinen/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkDmYA0/4AKCpM/CxYAB+YtTGJQuOGBAWPGAwuQGAwXvCyJgFC+UhiQDNC43ygEAl4DLC4/xBYMfAZYXfI653XX/6//X/6//O5gBKU5gGBAZAXfI66//C7s/CyPzC+ZgSCwgwRFwowRCwwwPFw4xOCpIArA==")) diff --git a/apps/pisteinen/app.js b/apps/pisteinen/app.js new file mode 100644 index 000000000..a455875ec --- /dev/null +++ b/apps/pisteinen/app.js @@ -0,0 +1,121 @@ +// Pisteinen +// +// Bangle.js 2 watch face +// by Jukio Kallio +// www.jukiokallio.com + + +// settings +const watch = { + x:0, y:0, w:0, h:0, + bgcolor:g.theme.bg, + fgcolor:g.theme.fg, +}; + +// 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.5; + +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(); + + // 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 hball = { + size: 9, + pad: 9, + }; + const mball = { + size: 3, + pad: 4, + pad2: 2, + }; + + // get hours and minutes + var hour = date.getHours(); + var minute = date.getMinutes(); + + // calculate size of the hour face + var hfacew = (hball.size * 2 + hball.pad) * 6 - hball.pad; + var hfaceh = (hball.size * 2 + hball.pad) * 4 - hball.pad; + var mfacew = (mball.size * 2 + mball.pad) * 15 - mball.pad + mball.pad2 * 2; + var mfaceh = (mball.size * 2 + mball.pad) * 4 - mball.pad; + var faceh = hfaceh + mfaceh + hball.pad + mball.pad; + + g.setColor(watch.fgcolor); // set foreground color + + // draw hour balls + for (var i = 0; i < 24; i++) { + var x = ((hball.size * 2 + hball.pad) * (i % 6)) + (watch.x - hfacew / 2) + hball.size; + var y = watch.y - faceh / 2 + hball.size; + if (i >= 6) y += hball.size * 2 + hball.pad; + if (i >= 12) y += hball.size * 2 + hball.pad; + if (i >= 18) y += hball.size * 2 + hball.pad; + + if (i < hour) g.fillCircle(x, y, hball.size); else g.drawCircle(x, y, hball.size); + } + + // draw minute balls + for (var j = 0; j < 60; j++) { + var x2 = ((mball.size * 2 + mball.pad) * (j % 15)) + (watch.x - mfacew / 2) + mball.size; + if (j % 15 >= 5) x2 += mball.pad2; + if (j % 15 >= 10) x2 += mball.pad2; + var y2 = watch.y - faceh / 2 + hfaceh + mball.size + hball.pad + mball.pad; + if (j >= 15) y2 += mball.size * 2 + mball.pad; + if (j >= 30) y2 += mball.size * 2 + mball.pad; + if (j >= 45) y2 += mball.size * 2 + mball.pad; + + if (j < minute) g.fillCircle(x2, y2, mball.size); else g.drawCircle(x2, y2, mball.size); + } + + + // 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"); diff --git a/apps/pisteinen/app.png b/apps/pisteinen/app.png new file mode 100644 index 000000000..a6c441423 Binary files /dev/null and b/apps/pisteinen/app.png differ diff --git a/apps/pisteinen/metadata.json b/apps/pisteinen/metadata.json new file mode 100644 index 000000000..f1137e589 --- /dev/null +++ b/apps/pisteinen/metadata.json @@ -0,0 +1,16 @@ +{ "id": "pisteinen", + "name": "Pisteinen - Dotted watch face", + "shortName":"Pisteinen", + "version":"0.01", + "description": "A minimal digital watch face made with dots.", + "icon": "app.png", + "screenshots": [{"url":"screenshot1.png"}], + "type": "clock", + "tags": "clock", + "supports" : ["BANGLEJS","BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"pisteinen.app.js","url":"app.js"}, + {"name":"pisteinen.img","url":"app-icon.js","evaluate":true} + ] +} diff --git a/apps/pisteinen/screenshot1.png b/apps/pisteinen/screenshot1.png new file mode 100644 index 000000000..556c004c0 Binary files /dev/null and b/apps/pisteinen/screenshot1.png differ diff --git a/apps/poikkipuinen/ChangeLog b/apps/poikkipuinen/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/poikkipuinen/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/poikkipuinen/README.md b/apps/poikkipuinen/README.md new file mode 100644 index 000000000..12f8d5d7e --- /dev/null +++ b/apps/poikkipuinen/README.md @@ -0,0 +1,7 @@ +# Poikkipuinen + +By Jukio Kallio + +A Minimal digital watch face. Follows the theme colors. + +![](screenshot1.png) diff --git a/apps/poikkipuinen/app-icon.js b/apps/poikkipuinen/app-icon.js new file mode 100644 index 000000000..d7ddba399 --- /dev/null +++ b/apps/poikkipuinen/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkEogA0/4AKCpNPCxYAB+gtTGJQuOGBAWPGAwuQGAwXamQULkYXGBQUgn4WJ+cCMAwXNiQXV+MBC6swh4XU+cAn4XU+IUBC6kgj4XUIwKnV+EDC6sQl4XU+UBd6q8BC6q8BC6i8CC6i8CC6a8DC6a8DC6a8DC6S8EC6S8EC6S8EC6K8FC6K8FC6C8BIwwXOXgwXQXgwXQkIWHd6IXPp4GBmQWJAAMjAQP0C4wAPC7hgDABwWEGCIuFGCIWGGB4uHGJwVJAFY=")) diff --git a/apps/poikkipuinen/app.js b/apps/poikkipuinen/app.js new file mode 100644 index 000000000..0bf09c5e5 --- /dev/null +++ b/apps/poikkipuinen/app.js @@ -0,0 +1,158 @@ +// Poikkipuinen +// +// Bangle.js 2 watch face +// by Jukio Kallio +// www.jukiokallio.com + +require("Font5x9Numeric7Seg").add(Graphics); +require("FontSinclair").add(Graphics); + +// settings +const watch = { + x:0, y:0, w:0, h:0, + bgcolor:g.theme.bg, + fgcolor:g.theme.fg, + font: "5x9Numeric7Seg", fontsize: 1, + font2: "Sinclair", font2size: 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.41; + +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 = dateMonth + "." + dateDay + "." + dateYear; + if (watch.finland) dateStr = dateDay + "." + dateMonth + "." + dateYear; // the true way of showing date + var dateStr2 = dateWeekday[date.getDay()]; + + // 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); + + // set foreground color + g.setColor(watch.fgcolor); + g.setFontAlign(1,-1).setFont(watch.font, watch.fontsize); + + // watch face size + var facew, faceh; // halves of the size for easier calculation + facew = 50; + faceh = 59; + + // save hour and minute y positions + var houry, minutey; + + // draw hour meter + g.drawLine(watch.x - facew, watch.y - faceh, watch.x - facew, watch.y + faceh); + var lines = 13; + var lineh = faceh * 2 / (lines - 2); + for (var i = 1; i < lines; i++) { + var w = 3; + var y = faceh - lineh * (i - 1); + + if (i % 3 == 0) { + // longer line and numbers every 3 + w = 5; + g.drawString(i, watch.x - facew - 2, y + watch.y); + } + + g.drawLine(watch.x - facew, y + watch.y, watch.x - facew + w, y + watch.y); + + // get hour y position + var hour = date.getHours() % 12; // modulate away the 24h + if (hour == 0) hour = 12; // fix a problem with 0-23 hours + //var hourMin = date.getMinutes() / 60; // move hour line by minutes + var hourMin = Math.floor(date.getMinutes() / 15) / 4; // move hour line by 15-minutes + if (hour == 12) hourMin = 0; // don't do minute moving if 12 (line ends there) + if (i == hour) houry = y - (lineh * hourMin); + } + + // draw minute meter + g.drawLine(watch.x + facew, watch.y - faceh, watch.x + facew, watch.y + faceh); + g.setFontAlign(-1,-1); + lines = 60; + lineh = faceh * 2 / (lines - 1); + for (i = 0; i < lines; i++) { + var mw = 3; + var my = faceh - lineh * i; + + if (i % 15 == 0 && i != 0) { + // longer line and numbers every 3 + mw = 5; + g.drawString(i, watch.x + facew + 4, my + watch.y); + } + + //if (i % 2 == 0 || i == 15 || i == 45) + g.drawLine(watch.x + facew, my + watch.y, watch.x + facew - mw, my + watch.y); + + // get minute y position + if (i == date.getMinutes()) minutey = my; + } + + // draw the time + var timexpad = 8; + g.drawLine(watch.x - facew + timexpad, watch.y + houry, watch.x + facew - timexpad, watch.y + minutey); + + // draw date + var datey = 14; + g.setFontAlign(0,-1); + g.drawString(dateStr, watch.x, watch.y + faceh + datey); + g.setFontAlign(0,-1).setFont(watch.font2, watch.font2size); + g.drawString(dateStr2, watch.x, watch.y + faceh + datey*2); + + // 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"); diff --git a/apps/poikkipuinen/app.png b/apps/poikkipuinen/app.png new file mode 100644 index 000000000..fa506c886 Binary files /dev/null and b/apps/poikkipuinen/app.png differ diff --git a/apps/poikkipuinen/metadata.json b/apps/poikkipuinen/metadata.json new file mode 100644 index 000000000..ec95ab7ce --- /dev/null +++ b/apps/poikkipuinen/metadata.json @@ -0,0 +1,16 @@ +{ "id": "poikkipuinen", + "name": "Poikkipuinen - Minimal watch face", + "shortName":"Poikkipuinen", + "version":"0.01", + "description": "A minimal digital watch face.", + "icon": "app.png", + "screenshots": [{"url":"screenshot1.png"}], + "type": "clock", + "tags": "clock", + "supports" : ["BANGLEJS","BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"poikkipuinen.app.js","url":"app.js"}, + {"name":"poikkipuinen.img","url":"app-icon.js","evaluate":true} + ] +} diff --git a/apps/poikkipuinen/screenshot1.png b/apps/poikkipuinen/screenshot1.png new file mode 100644 index 000000000..23fcc348c Binary files /dev/null and b/apps/poikkipuinen/screenshot1.png differ diff --git a/apps/rinkulainen/ChangeLog b/apps/rinkulainen/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/rinkulainen/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/rinkulainen/README.md b/apps/rinkulainen/README.md new file mode 100644 index 000000000..4b32ada0a --- /dev/null +++ b/apps/rinkulainen/README.md @@ -0,0 +1,14 @@ +# Rinkulainen + +By Jukio Kallio + +A Minimal & stylish watch face, with rings or disks for hours and minutes. Date underneath. With easy to mod source code for making your own themes. Some example themes included. + +![](screenshot2.png) +Default Colorful theme + +![](screenshot1.png) +Grayscale theme + +![](screenshot3.png) +Maze theme diff --git a/apps/rinkulainen/app-icon.js b/apps/rinkulainen/app-icon.js new file mode 100644 index 000000000..0618f7891 --- /dev/null +++ b/apps/rinkulainen/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkEogA0/4AKCpNPCxYAB+gtTGJQuOGBAWPGAwuQGAwXG+chiMRiU/C6HyiDpDgMvC5ItFCoYADGIoXIFoIqDGgUBC5nxB4IoE+YYBj4XLBwJxGJ4IwEC4wuBiYEBmUhiUjAoMxGAgXGmAuCDYIACCYIwBgYXJBYSQGD4IjBC5HyE4QOBgU/+cgEAQ3BTAQXFBQImBN4p/BHARgCC4swCYIaBT4gGDiBgCC4syQ4JVENIsggTvKBgYHG+BRCC5KdDWIYXOiEPC4oUCC8hHUmTJBO44XMCgSnH+SnLa5IABfILXJCgINBgA9CAAnzEIYXF+QKCJAMCn/zkQXCEgJtBR479CEwIADCQRpEC4wLBJAInBAAQ3BD4KxDC4wTBiatCkMSkYFBmKAEa48QGAR1GP4gXHGAMBDAnzEAKvEC44wCgJzC+QGCBwgXIRwoACJ4oXDp4JEFQQACGgYAC+gXJGIMhiMRiR9GC5YALC4hgFABgWEGCIuFGCIWGGB4uHGJwVJAFY")) diff --git a/apps/rinkulainen/app.js b/apps/rinkulainen/app.js new file mode 100644 index 000000000..b487c9a0d --- /dev/null +++ b/apps/rinkulainen/app.js @@ -0,0 +1,146 @@ +// Rinkulainen +// +// Bangle.js 2 watch face +// by Jukio Kallio +// www.jukiokallio.com + +// settings +const watch = { + theme: "default", + x:0, y:0, w:0, h:0, + color:"#000000", // change background color + finland:true, // change if you want Finnish style date, or US style + + // default theme "colorful" + hour: { size:60, weight:8, color:"#00FFFF", cursor:10 }, + minute: { size:40, weight:16, color:"#FFFF00", cursor:6 }, + second: { on: false, cursor:2 }, // if on, uses a lot more battery + date: { font:"6x8", size:1, y:15, color:"#FFFF00" } +}; + +// more themes +if (watch.theme == "grayscale") { + watch.hour = { size:60, weight:20, color:"#999999", cursor:8 }; + watch.minute = { size:40, weight:20, color:"#dddddd", cursor:8 }; + watch.second = { on: false, cursor:2 }; // if on, uses a lot more battery + watch.date = { font:"6x8", size:1, y:15, color:"#ffffff" }; +} else if (watch.theme == "maze") { + watch.hour = { size:50, weight:7, color:"#ffffff", cursor:6 }; + watch.minute = { size:30, weight:7, color:"#ffffff", cursor:6 }; + watch.second = { on: false, cursor:2 }; // if on, uses a lot more battery + watch.date = { font:"6x8", size:1, y:15, color:"#ffffff" }; +} else if (watch.theme == "disks") { + watch.hour = { size:72, weight:30, color:"#00ff66", cursor:4 }; + watch.minute = { size:36, weight:32, color:"#0066ff", cursor:4 }; + watch.second = { on: false, cursor:2 }; // if on, uses a lot more battery + watch.date = { font:"6x8", size:1, y:10, color:"#ffffff" }; +} + +// 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.46; +watch.date.y = watch.date.y + watch.y + watch.hour.size; // final position of the date + +const dateWeekday = { 0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4:"Thursday", 5:"Friday", 6:"Saturday" }; // weekdays + +var wait = 60000; // wait time, normally a minute +if (watch.second.on) wait = 1000; // a second if seconds are used + + +// 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.color); + g.fillRect(0, 0, watch.w, watch.h); + + // variables for vertex transformation + var tver, tobj, tran; + + // draw hour circle + g.setColor(watch.hour.color).fillCircle(watch.x, watch.y, watch.hour.size); + g.setColor(watch.color).fillCircle(watch.x, watch.y, watch.hour.size - watch.hour.weight); + // draw hour line + g.setColor(watch.color); + var thour = (date.getHours() / 12) * (Math.PI * 2); + tver = [-watch.hour.cursor, 0, watch.hour.cursor, 0, watch.hour.cursor, -watch.hour.size*1.05, -watch.hour.cursor, -watch.hour.size*1.05]; + tobj = { x:watch.x, y:watch.y, scale:1, rotate:thour }; + tran = g.transformVertices(tver, tobj); + g.fillPoly(tran); + + // draw minute circle + g.setColor(watch.minute.color).fillCircle(watch.x, watch.y, watch.minute.size); + g.setColor(watch.color).fillCircle(watch.x, watch.y, watch.minute.size - watch.minute.weight); + // draw minute line + g.setColor(watch.color); + var tmin = (date.getMinutes() / 60) * (Math.PI * 2); + tver = [-watch.minute.cursor, 0, watch.minute.cursor, 0, watch.minute.cursor, -watch.minute.size*1.05, -watch.minute.cursor, -watch.minute.size*1.05]; + tobj = { x:watch.x, y:watch.y, scale:1, rotate:tmin }; + tran = g.transformVertices(tver, tobj); + g.fillPoly(tran); + + // draw seconds line, if the feature is on + if (watch.second.on) { + g.setColor(watch.color); + var tsec = (date.getSeconds() / 60) * (Math.PI * 2); + tver = [-watch.second.cursor, 0, watch.second.cursor, 0, watch.second.cursor, -watch.second.size*1.045, -watch.second.cursor, -watch.second.size*1.045]; + tobj = { x:watch.x, y:watch.y, scale:1, rotate:tsec }; + tran = g.transformVertices(tver, tobj); + g.fillPoly(tran); + } + + // draw date + g.setFontAlign(0,0).setFont(watch.date.font, 1).setColor(watch.date.color); + g.drawString(dateStr, watch.x, watch.date.y + watch.date.size + 2); + + // 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"); diff --git a/apps/rinkulainen/app.png b/apps/rinkulainen/app.png new file mode 100644 index 000000000..50782c48d Binary files /dev/null and b/apps/rinkulainen/app.png differ diff --git a/apps/rinkulainen/metadata.json b/apps/rinkulainen/metadata.json new file mode 100644 index 000000000..f0a51af87 --- /dev/null +++ b/apps/rinkulainen/metadata.json @@ -0,0 +1,16 @@ +{ "id": "rinkulainen", + "name": "Rinkulainen - Minimal & Stylish watch face", + "shortName":"Rinkulainen", + "version":"0.01", + "description": "A minimal watch face, with rings/disks for hours and minutes. Date underneath. With easy to mod source code for making your own themes. Some example themes included.", + "icon": "app.png", + "screenshots": [{"url":"screenshot2.png"}, {"url":"screenshot1.png"}, {"url":"screenshot3.png"}], + "type": "clock", + "tags": "clock", + "supports" : ["BANGLEJS","BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"rinkulainen.app.js","url":"app.js"}, + {"name":"rinkulainen.img","url":"app-icon.js","evaluate":true} + ] +} diff --git a/apps/rinkulainen/screenshot1.png b/apps/rinkulainen/screenshot1.png new file mode 100644 index 000000000..f897c5a4e Binary files /dev/null and b/apps/rinkulainen/screenshot1.png differ diff --git a/apps/rinkulainen/screenshot2.png b/apps/rinkulainen/screenshot2.png new file mode 100644 index 000000000..354618167 Binary files /dev/null and b/apps/rinkulainen/screenshot2.png differ diff --git a/apps/rinkulainen/screenshot3.png b/apps/rinkulainen/screenshot3.png new file mode 100644 index 000000000..ef1385288 Binary files /dev/null and b/apps/rinkulainen/screenshot3.png differ