Some nice animations

apps/linuxclock/app.js

@@ -2,7 +2,7 @@
  * Includes
  */
 const locale = require('locale');
-
+const ts = 200;
 
 /************************************************
  * Assets
@@ -28,17 +28,49 @@ function draw() {
 
   g.clear();
   Bangle.drawWidgets();
-  g.setFontUbuntuMono();
 
+  g.setFontUbuntuMono();
   drawMainScreen();
 }
 
 
-function drawCmdLine(str, line, isCmd){
-  var c = 0;
+function drawText(str, line, timeout){
+  timeout = timeout ? timeout : 0;
+
+  setTimeout(()=>{
+    g.setFontUbuntuMono();
     var x = 10;
     var y = line * 27 + 28;
-  if(isCmd){
+    g.setColor(g.theme.fg);
+    g.drawString(str, x, y);
+  }, timeout);
+}
+
+
+function drawLetters(str, line, offset){
+  offset= offset ? offset : 0;
+  var x = 10 + offset;
+  var y = line * 27 + 28;
+
+  var pos = 0;
+  for(var i=0; i < str.length; i++){
+    var c = str.charAt(i);
+    pos += g.stringWidth(c);
+    setTimeout((c, pos)=>{
+      g.setFontUbuntuMono();
+      g.setColor(g.theme.fg);
+      g.drawString(c, x+pos, y);
+    }, ts*(1+i), c, pos);
+  }
+
+}
+
+
+function drawCmd(){
+  var c = 0;
+  var x = 10;
+  var y = 28;
+
   g.setColor("#0f0");
   g.drawString("bjs", x+c, y);
   c += g.stringWidth("bjs");
@@ -56,9 +88,7 @@ function drawCmdLine(str, line, isCmd){
   c += g.stringWidth("$~");
 }
 
-  g.setColor(g.theme.fg);
-  g.drawString(str, x+c, y);
-}
+
 
 function drawMainScreen(){
   var date = new Date();
@@ -67,11 +97,15 @@ function drawMainScreen(){
     g.setFontAlign(-1, -1);
     var timeStr = ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
     var dateStr = locale.month(date, 1) + ("0" + date.getDate()).slice(-2);
-    drawCmdLine("time", 0, true);
-    drawCmdLine(" [t] " + timeStr, 1);
-    drawCmdLine(" [d] " + dateStr, 2);
-    drawCmdLine(" [b] " + E.getBattery() + "%", 3);
-    drawCmdLine(" [s] " + Bangle.getHealthStatus("day").steps, 4);
+    drawCmd();
+
+    var cmd = "time";
+    var cmdT = ts * cmd.length + 50;
+    drawLetters("time", 0, 80);
+    drawText(" [t] " + timeStr, 1, cmdT);
+    drawText(" [d] " + dateStr, 2, cmdT);
+    drawText(" [" + (Bangle.isCharging() ? "c" : "b") + "] " + E.getBattery() + "%", 3, cmdT);
+    drawText(" [s] " + Bangle.getHealthStatus("day").steps, 4, cmdT);
 }
 
 
@@ -101,6 +135,23 @@ Bangle.on('lcdPower',on=>{
   }
 });
 
+
+Bangle.on('lock', function(isLocked) {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = undefined;
+
+  draw();
+});
+
+
+Bangle.on('charging',function(charging) {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = undefined;
+
+  draw();
+});
+
+
 /************************************************
  * Startup Clock
  */