diff --git a/apps.json b/apps.json index 69ad135f8..39f0ddb3b 100644 --- a/apps.json +++ b/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", diff --git a/apps/tinydraw/ChangeLog b/apps/tinydraw/ChangeLog new file mode 100644 index 000000000..af7f83942 --- /dev/null +++ b/apps/tinydraw/ChangeLog @@ -0,0 +1 @@ +0.01: Initial release diff --git a/apps/tinydraw/README.md b/apps/tinydraw/README.md new file mode 100644 index 000000000..a4acd9a72 --- /dev/null +++ b/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 diff --git a/apps/tinydraw/add_to_apps.json b/apps/tinydraw/add_to_apps.json new file mode 100644 index 000000000..21a90049e --- /dev/null +++ b/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} + ] +} diff --git a/apps/tinydraw/app-icon.js b/apps/tinydraw/app-icon.js new file mode 100644 index 000000000..1f0eaae27 --- /dev/null +++ b/apps/tinydraw/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwhC/ACEF7vd6oXTroXB7tQC6QWC7vQC6Xf//9C6n4xGPC4VM5nMoAXNxH/xH96EECwPM4gXNx///AXBhgXC5gXRqAXOt3u91gC4S/BC5sGCwPu8wXCuAXOhwXC9wXcR5oXJX5oXHxGIuF3DYQXRDIWHC5SPH/7yBAIN3u6/QC4JME+AXIg5WCC44CBJRN4KwQXHAgOAC5BWCC6gOCC6xUBC6cIUIQbCAAwXJvAMBQ4QXRg6fEC6SQBLQQXRJAYAJC5UIFpIXMMAQXUVIYXVGBQXLh4XKw4XKgCpCAA34F5apK/FwC5ZIJxAWLSJP4LxhhJxBGMMIeIJQX4xH3Cxz0CxAACu4WQAH4A/AAwA==")) diff --git a/apps/tinydraw/app.js b/apps/tinydraw/app.js new file mode 100644 index 000000000..e4c612219 --- /dev/null +++ b/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(); +})(); diff --git a/apps/tinydraw/app.png b/apps/tinydraw/app.png new file mode 100644 index 000000000..01eda0a60 Binary files /dev/null and b/apps/tinydraw/app.png differ diff --git a/apps/tinydraw/screenshot.png b/apps/tinydraw/screenshot.png new file mode 100644 index 000000000..27d5cc56c Binary files /dev/null and b/apps/tinydraw/screenshot.png differ