Merge pull request #1196 from trufae/add-tinydraw-0.1

Initial import of the tinydraw application

apps.json

@@ -4840,6 +4840,25 @@
       {"name": "flow.img", "url": "app-icon.js","evaluate": true }
     ]
   },
+  { "id": "tinydraw",
+    "name": "TinyDraw",
+    "shortName":"TinyDraw",
+    "version":"0.01",
+    "type": "app",
+    "description": "Draw stuff in your wrist",
+    "icon": "app.png",
+    "allow_emulator": true,
+    "tags": "tools, keyboard, text, scribble",
+    "supports" : ["BANGLEJS2"],
+    "readme": "README.md",
+    "storage": [
+      {"name":"tinydraw.app.js","url":"app.js"},
+      {"name":"tinydraw.img","url":"app-icon.js","evaluate":true}
+    ],
+    "screenshots":[
+      { "url":"screenshot.png" }
+    ]
+  },
   { "id": "scribble",
     "name": "Scribble",
     "shortName":"Scribble",

apps/tinydraw/ChangeLog

@@ -0,0 +1 @@
+0.01: Initial release

apps/tinydraw/README.md

@@ -0,0 +1,14 @@
+TinyDraw
+========
+
+This is a simple drawing application to make sketches
+using different brushes and colors for your BangleJS2 watch!
+
+* Brush types: dot, brush, circle, square
+
+It is my first BangleJS application, I plan
+to continue improving this app over time, but
+if you want to contribute or provide feedback
+don't hesitate to contact me!
+
+--pancake

apps/tinydraw/add_to_apps.json

@@ -0,0 +1,14 @@
+{ "id": "tinydraw",
+  "name": "TinyDraw",
+  "shortName":"TinyDraw",
+  "version":"0.01",
+  "description": "Draw stuff in your wrist!",
+  "icon": "app.png",
+  "tags": "keyboard, text, scribble",
+  "supports" : ["BANGLEJS2"],  
+  "readme": "README.md",
+  "storage": [
+    {"name":"tinydraw.app.js","url":"app.js"},
+    {"name":"tinydraw.img","url":"app-icon.js","evaluate":true}
+  ]
+}

apps/tinydraw/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwhC/ACEF7vd6oXTroXB7tQC6QWC7vQC6Xf//9C6n4xGPC4VM5nMoAXNxH/xH96EECwPM4gXNx///AXBhgXC5gXRqAXOt3u91gC4S/BC5sGCwPu8wXCuAXOhwXC9wXcR5oXJX5oXHxGIuF3DYQXRDIWHC5SPH/7yBAIN3u6/QC4JME+AXIg5WCC44CBJRN4KwQXHAgOAC5BWCC6gOCC6xUBC6cIUIQbCAAwXJvAMBQ4QXRg6fEC6SQBLQQXRJAYAJC5UIFpIXMMAQXUVIYXVGBQXLh4XKw4XKgCpCAA34F5apK/FwC5ZIJxAWLSJP4LxhhJxBGMMIeIJQX4xH3Cxz0CxAACu4WQAH4A/AAwA=="))

apps/tinydraw/app.js

@@ -0,0 +1,159 @@
+(function () {
+  var pen = 'circle';
+  var discard = null;
+  var kule = [255, 255, 255];
+  var oldLock = false;
+
+  setInterval(() => {
+    if (Bangle.isLocked()) {
+      if (oldLock) {
+        return;
+      }
+      g.setColor('#fff');
+      g.fillRect(0, 0, g.getWidth(), 20);
+      g.setFont('6x8', 2);
+      g.setColor('#000');
+      g.drawString('PLEASE UNLOCK', 10, 2);
+      oldLock = true;
+    } else {
+      oldLock = false;
+      drawUtil();
+    }
+  }, 1000);
+
+  function nextColor () {
+    kule[0] = Math.random();
+    kule[1] = Math.random();
+    kule[2] = Math.random();
+  }
+
+  function nextPen () {
+    switch (pen) {
+      case 'circle': pen = 'pixel'; break;
+      case 'pixel': pen = 'crayon'; break;
+      case 'crayon': pen = 'square'; break;
+      case 'square': pen = 'circle'; break;
+      default: pen = 'pixel'; break;
+    }
+    console.log('set time');
+    drawUtil();
+
+    discard = setTimeout(function () { console.log('timeout'); discard = null; }, 500);
+  }
+
+  function drawUtil () {
+    if (Bangle.isLocked()) {
+    // do something to tell the user to unlock the screen
+    }
+    // titlebar
+    g.setColor(kule[0], kule[1], kule[2]);
+    g.fillRect(0, 0, g.getWidth(), 20);
+    // clear button
+    g.setColor('#000'); // black
+    g.fillCircle(10, 10, 8, 8);
+    g.setColor('#fff');
+    g.drawLine(8, 8, 13, 13);
+    g.drawLine(13, 8, 8, 13);
+    // tool button
+    g.setColor('#fff');
+    g.fillCircle(g.getWidth() - 10, 10, 8);
+    g.setColor('#000');
+
+    var w = g.getWidth();
+    switch (pen) {
+      case 'circle':
+        g.fillCircle(w - 10, 10, 5);
+        break;
+      case 'square':
+        g.fillRect(w - 5, 5, w - 15, 15);
+        break;
+      case 'pixel':
+        g.setPixel(10, 10);
+        g.fillCircle(w - 10, 10, 2);
+        break;
+      case 'crayon':
+        var tap = { x: 10, y: 15, dy: -5, dx: 5 };
+        g.drawLine(w - tap.x, tap.y, w - tap.x + tap.dx, tap.y + tap.dy);
+        g.drawLine(w - tap.x + 1, tap.y + 2, w - tap.x + tap.dx, tap.y + tap.dy - 2);
+        g.drawLine(w - tap.x + 2, tap.y + 2, w - tap.x + tap.dx, tap.y + tap.dy + 2);
+        break;
+    }
+  }
+  var tapTimer = null;
+  Bangle.on('drag', function (tap) {
+    if (tap.b === 0) {
+      if (tapTimer !== null) {
+        clearTimeout(tapTimer);
+        tapTimer = null;
+      }
+    }
+    // tap and hold the clear button
+    if (tap.x < 32 && tap.y < 32) {
+      if (tap.b === 1) {
+        if (tapTimer === null) {
+          tapTimer = setTimeout(function () {
+            g.clear();
+            drawUtil();
+            tapTimer = null;
+          }, 800);
+        }
+        if (discard) {
+          clearTimeout(discard); discard = null;
+          return;
+        }
+      }
+      return;
+    }
+    if (tap.x > g.getWidth() - 32 && tap.y < 32) {
+      if (tap.b === 1) {
+        if (tapTimer === null) {
+          tapTimer = setTimeout(function () {
+            g.clear();
+            drawUtil();
+            tapTimer = null;
+          }, 800);
+        }
+        if (discard) {
+          clearTimeout(discard);
+          discard = null;
+          return;
+        }
+        nextPen();
+      }
+      drawUtil();
+      return;
+    } else if (tap.y < 32) {
+      nextColor();
+      drawUtil();
+      return;
+    }
+
+    g.setColor(kule[0], kule[1], kule[2]);
+
+    switch (pen) {
+      case 'pixel':
+        g.setPixel(tap.x, tap.y);
+        g.drawLine(tap.x, tap.y, tap.x + tap.dx, tap.y + tap.dy);
+        break;
+      case 'crayon':
+        g.drawLine(tap.x, tap.y, tap.x + tap.dx, tap.y + tap.dy);
+        g.drawLine(tap.x + 1, tap.y + 2, tap.x + tap.dx, tap.y + tap.dy - 2);
+        g.drawLine(tap.x + 2, tap.y + 2, tap.x + tap.dx, tap.y + tap.dy + 2);
+        break;
+      case 'circle':
+        var XS = tap.dx / 10;
+        var YS = tap.dy / 10;
+        for (i = 0; i < 10; i++) {
+          g.fillCircle(tap.x + (i * XS), tap.y + (i * YS), 4, 4);
+        }
+        break;
+      case 'square':
+        g.fillRect(tap.x - 10, tap.y - 10, tap.x + 10, tap.y + 10);
+        break;
+    }
+    drawUtil();
+  });
+
+  g.clear();
+  drawUtil();
+})();