Merge pull request #2211 from jukioo/master

Rinkulainen, Poikkipuinen and Henkinen!

apps/henkinen/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

apps/henkinen/README.md

@@ -0,0 +1,7 @@
+# Henkinen
+
+By Jukio Kallio
+
+A tiny app helping you to breath and relax.
+
+![](screenshot1.png) 

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"))

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");

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}
+  ]
+}

apps/palikkainen/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

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) 

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"))

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");

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}
+  ]
+}

apps/pisteinen/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

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) 

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=="))

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");

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}
+  ]
+}

apps/poikkipuinen/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

apps/poikkipuinen/README.md

@@ -0,0 +1,7 @@
+# Poikkipuinen
+
+By Jukio Kallio
+
+A Minimal digital watch face. Follows the theme colors.
+
+![](screenshot1.png) 

apps/poikkipuinen/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwkEogA0/4AKCpNPCxYAB+gtTGJQuOGBAWPGAwuQGAwXamQULkYXGBQUgn4WJ+cCMAwXNiQXV+MBC6swh4XU+cAn4XU+IUBC6kgj4XUIwKnV+EDC6sQl4XU+UBd6q8BC6q8BC6i8CC6i8CC6a8DC6a8DC6a8DC6S8EC6S8EC6S8EC6K8FC6K8FC6C8BIwwXOXgwXQXgwXQkIWHd6IXPp4GBmQWJAAMjAQP0C4wAPC7hgDABwWEGCIuFGCIWGGB4uHGJwVJAFY="))

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");

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}
+  ]
+}

apps/rinkulainen/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

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

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"))

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");

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}
+  ]
+}