diff --git a/apps/rgb/ChangeLog b/apps/rgb/ChangeLog new file mode 100644 index 000000000..a08433b7c --- /dev/null +++ b/apps/rgb/ChangeLog @@ -0,0 +1 @@ +0.01: initial release diff --git a/apps/rgb/README.md b/apps/rgb/README.md new file mode 100644 index 000000000..5723f99c6 --- /dev/null +++ b/apps/rgb/README.md @@ -0,0 +1,16 @@ +rgb +=== + +A simple RGB color selector utility for the BangleJS2 smartwatch. + +Features a vector toggle widget and swipe interactivity. + +Author +------ + +Written by pancake in 2022 + +Screenshots +----------- +![rgb app](screenshot.jpg) + diff --git a/apps/rgb/app.js b/apps/rgb/app.js new file mode 100644 index 000000000..aa18d93ae --- /dev/null +++ b/apps/rgb/app.js @@ -0,0 +1,133 @@ +const rgb = [0, 0, 0]; +const w = g.getWidth(); +const h = g.getHeight(); +function drawToggle (value, x, y, options) { + if (!options) options = {}; + if (!options.scale) options.scale = 1; + const h = (options.scale * 16); + const h2 = h / 2; + const w = (options.scale) * 32; + + g.setColor(0.3, 0, 0.3); + g.fillCircle(x + h2, y + h2, h2 - 1); + g.fillCircle(x + w - h2, y + h2, h2 - 1); + g.fillRect(x + h2, y, x + w - h2, y + h); + + y += 4; + g.setColor(0.6, 0.6, 0.6); + g.fillCircle(x + h2, y + h2 + 2, h2 - 1); + g.fillCircle(x + w - h2, y + h2 + 2, h2 - 1); + g.fillRect(x + h2, y + 2, x + w - h2, y + h + 1); + + if (value) { + x += w - h; + } + g.setColor(0, 0.5, 0); + g.fillCircle(x + h2, y + h2 + 2, h2 - 1); + y -= 4; + if (colorMode) { + g.setColor(0, 1, 0); + } else { + g.setColor(0.5, 0.5, 0.5); + } + g.fillCircle(x + h2, y + h2 + 2, h2 - 1); + + g.setColor(0, 0.8, 0); + g.fillCircle(x + h2 - 2, y + h2, h2 - 8); + if (colorMode) { + g.setColor(0, 1, 0); + } else { + g.setColor(0.5, 0.5, 0.5); + } g.fillCircle(x + h2 + 4, y + h2 + 4, h2 - 9); +} + +function refresh () { + g.setBgColor(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255); + g.clear(); + g.setColor(1, 1, 1); + g.setFont12x20(1); + g.setColor(0, 0, 0); + let s = '#' + hex[(rgb[0] >> 4) & 0xf] + hex[rgb[0] & 0xf]; + s += hex[(rgb[1] >> 4) & 0xf] + hex[rgb[1] & 0xf]; + s += hex[(rgb[2] >> 4) & 0xf] + hex[rgb[2] & 0xf]; + g.setColor(1, 0, 1); + g.fillRect(0, 0, w, 32); + g.setColor(0.2, 0, 1); + g.fillRect(0, 32, w, 33); + g.setColor(1, 1, 1); + g.drawString(s, 8, 8); + // drawToggle (colorMode, w - 8 - 32*(rgb[0]/50), 8 + 255- rgb[2], {scale:1 * rgb[0] / 50}); + drawToggle(colorMode, w - 40, 4, { scale: 1.2 }); + + if (colorMode) { + g.setColor(1, 0, 0); + g.fillRect(0, h, w / 3, h - 32); + g.setColor(0, 1, 0); + g.fillRect(w / 3, h, w - (w / 3), h - 32); + g.setColor(0, 0, 1); + g.fillRect(w - (w / 3), h, w, h - 32); + + g.setColor(0.5, 0, 0); + g.fillRect(0, h - 33, w / 3, h - 34); + g.setColor(0, 0.5, 0); + g.fillRect(w / 3, h - 33, w - (w / 3), h - 34); + g.setColor(0, 0, 0.5); + g.fillRect(w - (w / 3), h - 33, w, h - 34); + } else { + g.setColor(0.5, 0.5, 0.5); + g.fillRect(0, h, w, h - 32); + g.setColor(0.2, 0.2, 0.2); + g.fillRect(0, h - 33, w, h - 34); + } + // column lines + function f (x) { + const s = '' + (rgb[x] / 255); + return s.substring(0, 4); + } + g.setColor(1, 1, 1); + g.drawLine(w / 3, h, w / 3, h / 2); + g.drawLine(w - (w / 3), h, w - (w / 3), h / 2); + g.setFont6x15(2); + g.drawString(f(0), 8, h - 28); + g.drawString(f(1), 8 + (w / 3), h - 28); + g.drawString(f(2), 8 + (2 * w / 3), h - 28); +} +let k = -1; +var colorMode = true; +Bangle.on('touch', function (wat, tap) { + if (tap.x > w / 2 && tap.y < 32) { + colorMode = !colorMode; + refresh(); + } +}); + +function deltaComponent (k, dy) { + rgb[k] -= dy; + if (rgb[k] > 255) { + rgb[k] = 255; + } else if (rgb[k] < 0) { + rgb[k] = 0; + } +} +Bangle.on("button", function() { + rgb[0] = rgb[1] = rgb[2] = 127; +}); +Bangle.on('drag', function (tap, top) { + if (colorMode) { + if (tap.x < w / 3) { + k = 0; + } else if (tap.x > (w - (w / 3))) { + k = 2; + } else { + k = 1; + } + deltaComponent(k, tap.dy); + } else { + deltaComponent(0, tap.dy); + deltaComponent(1, tap.dy); + deltaComponent(2, tap.dy); + } + refresh(); +}); +refresh(); + diff --git a/apps/rgb/app.png b/apps/rgb/app.png new file mode 100644 index 000000000..e9210d2b6 Binary files /dev/null and b/apps/rgb/app.png differ diff --git a/apps/rgb/metadata.json b/apps/rgb/metadata.json new file mode 100644 index 000000000..7b10658b3 --- /dev/null +++ b/apps/rgb/metadata.json @@ -0,0 +1,31 @@ +{ + "id": "rgb", + "name": "rgb", + "shortName": "rgb", + "version": "0.01", + "type": "app", + "description": "RGB utility", + "icon": "app.png", + "allow_emulator": true, + "tags": "tools", + "supports": [ + "BANGLEJS2" + ], + "readme": "README.md", + "storage": [ + { + "name": "tabanglotchi.app.js", + "url": "app.js" + }, + { + "name": "tabanglotchi.img", + "url": "app-icon.js", + "evaluate": true + } + ], + "screenshots": [ + { + "url": "screenshot.png" + } + ] +} diff --git a/apps/rgb/screenshot.png b/apps/rgb/screenshot.png new file mode 100644 index 000000000..1815cd492 Binary files /dev/null and b/apps/rgb/screenshot.png differ