New app: coloursdemo

apps/coloursdemo/ChangeLog

@@ -0,0 +1 @@
+1.00: first release

apps/coloursdemo/README.md

@@ -0,0 +1,22 @@
+# Colours Demo
+
+This is a simple app to demonstrate colours on a Bangle 2.
+
+The colours are "optimised" for the Bangle 2's 3-bit display. They only include values which use either the full, half or no primary RGB colour, which should reduce the artifacts due to dithering (the exception are light and dark grey).
+
+![](screenshot.png)
+
+Use this app for choosing colours for your own project, and copy the colour definitions from the source code.
+
+
+## Use colours in other projects
+
+Copy-and-paste the colour constants to be used in your own app from `coloursdemo.app.js`. They are sandwiched between the "BEGIN" and "END" comments at the beginning of the file.
+
+With the constants available in your own code, you can for example set the foreground colour to yellow with:
+
+	g.setColor(COLOUR_YELLOW);
+
+This works for any graphics call requiring a colour value (like `g.setBgColor()`).
+
+

apps/coloursdemo/coloursdemo-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A/AC8sAAYqpmVdr2Irwvklkzq4qBx4ADxAvDM0EyxAABFwgABF4k5rsyGTksF5MzBwdjAAVdnIzCF69dF5FdEYUyF4YADGQSPVF5LwCRwIvHAAIvVllXF5DwCRwgAFNobwbxFeEISOIAAMzF6zwCsgqBDoMsmUzWQMzF5MyeC4lBEwM5nNAsgABGgMyX5JeWF4IsBFYYADnIvBHgJmBrouDBYIvZnIvHLwIABnBvCMwSOXeAQvImU4F4QADMwReXF5csFwwxDF7IlCYAqOEF44uYF5MzF5ReZR4LwBF4qOKnAvalgvBYAk6RxYvaeAs6EYK+lMAZOBlgtBAQS+jF4QoBSQQjBGRKOcF4YjCMgM4AAIyCBoaOcF4YwCAYIvCGQxeceAQvDGoIvFGQYveSAguJF8iOHAAYueF4iOqeAksRyz8CAAzwNR1RgDMQZeIADJ0JqwmCGQoFB0gAEq2A5wAG0ky54AFrowGFQVXAAIyGmVWF8VWF4QyGlmAF8QsDLYIyFFwovbGAIuDSoqOHF8CJCF4aOHF7q/CqyVEAoIuGF7hgEAAiOIF7xhDYgiOHF7oxDXwLyCRxAvfGAYAhF5QA/AH4AEA"))

apps/coloursdemo/coloursdemo.app.js

@@ -0,0 +1,128 @@
+/*
+ * Demonstrate colours
+ */
+
+
+// BEGIN colour constants
+const COLOUR_BLACK         = 0x0000;   // same as: g.setColor(0, 0, 0)
+const COLOUR_DARK_GREY     = 0x4208;   // same as: g.setColor(0.25, 0.25, 0.25)
+const COLOUR_GREY          = 0x8410;   // same as: g.setColor(0.5, 0.5, 0.5)
+const COLOUR_LIGHT_GREY    = 0xc618;   // same as: g.setColor(0.75, 0.75, 0.75)
+const COLOUR_WHITE         = 0xffff;   // same as: g.setColor(1, 1, 1)
+
+const COLOUR_RED           = 0xf800;   // same as: g.setColor(1, 0, 0)
+const COLOUR_GREEN         = 0x07e0;   // same as: g.setColor(0, 1, 0)
+const COLOUR_BLUE          = 0x001f;   // same as: g.setColor(0, 0, 1)
+const COLOUR_YELLOW        = 0xffe0;   // same as: g.setColor(1, 1, 0)
+const COLOUR_MAGENTA       = 0xf81f;   // same as: g.setColor(1, 0, 1)
+const COLOUR_CYAN          = 0x07ff;   // same as: g.setColor(0, 1, 1)
+
+const COLOUR_LIGHT_RED     = 0xfc10;   // same as: g.setColor(1, 0.5, 0.5)
+const COLOUR_LIGHT_GREEN   = 0x87f0;   // same as: g.setColor(0.5, 1, 0.5)
+const COLOUR_LIGHT_BLUE    = 0x841f;   // same as: g.setColor(0.5, 0.5, 1)
+const COLOUR_LIGHT_YELLOW  = 0xfff0;   // same as: g.setColor(1, 1, 0.5)
+const COLOUR_LIGHT_MAGENTA = 0xfc1f;   // same as: g.setColor(1, 0.5, 1)
+const COLOUR_LIGHT_CYAN    = 0x87ff;   // same as: g.setColor(0.5, 1, 1)
+
+const COLOUR_DARK_RED      = 0x8000;   // same as: g.setColor(0.5, 0, 0)
+const COLOUR_DARK_GREEN    = 0x0400;   // same as: g.setColor(0, 0.5, 0)
+const COLOUR_DARK_BLUE     = 0x0010;   // same as: g.setColor(0, 0, 0.5)
+const COLOUR_DARK_YELLOW   = 0x8400;   // same as: g.setColor(0.5, 0.5, 0)
+const COLOUR_DARK_MAGENTA  = 0x8010;   // same as: g.setColor(0.5, 0, 0.5)
+const COLOUR_DARK_CYAN     = 0x0410;   // same as: g.setColor(0, 0.5, 0.5)
+
+const COLOUR_PINK          = 0xf810;   // same as: g.setColor(1, 0, 0.5)
+const COLOUR_LIMEGREEN     = 0x87e0;   // same as: g.setColor(0.5, 1, 0)
+const COLOUR_ROYALBLUE     = 0x041f;   // same as: g.setColor(0, 0.5, 1)
+const COLOUR_ORANGE        = 0xfc00;   // same as: g.setColor(1, 0.5, 0)
+const COLOUR_INDIGO        = 0x801f;   // same as: g.setColor(0.5, 0, 1)
+const COLOUR_TURQUOISE     = 0x07f0;   // same as: g.setColor(0, 1, 0.5)
+// END colour constants
+
+
+// array of colours to be demoed:
+//  [ colour value, label colour, label ]
+const demo = [
+  [ COLOUR_LIGHT_RED,      COLOUR_BLACK, 'LIGHT RED' ],
+  [ COLOUR_RED,            COLOUR_WHITE, 'RED' ],
+  [ COLOUR_DARK_RED,       COLOUR_WHITE, 'DARK RED' ],
+
+  [ COLOUR_LIGHT_YELLOW,   COLOUR_BLACK, 'LIGHT YELLOW' ],
+  [ COLOUR_YELLOW,         COLOUR_BLACK, 'YELLOW' ],
+  [ COLOUR_DARK_YELLOW,    COLOUR_WHITE, 'DARK YELLOW' ],
+
+  [ COLOUR_LIGHT_GREEN,    COLOUR_BLACK, 'LIGHT GREEN' ],
+  [ COLOUR_GREEN,          COLOUR_BLACK, 'GREEN' ],
+  [ COLOUR_DARK_GREEN,     COLOUR_WHITE, 'DARK GREEN' ],
+
+  [ COLOUR_LIGHT_CYAN,     COLOUR_BLACK, 'LIGHT CYAN' ],
+  [ COLOUR_CYAN,           COLOUR_BLACK, 'CYAN' ],
+  [ COLOUR_DARK_CYAN,      COLOUR_WHITE, 'DARK CYAN' ],
+
+  [ COLOUR_LIGHT_BLUE,     COLOUR_BLACK, 'LIGHT BLUE' ],
+  [ COLOUR_BLUE,           COLOUR_WHITE, 'BLUE' ],
+  [ COLOUR_DARK_BLUE,      COLOUR_WHITE, 'DARK BLUE' ],
+
+  [ COLOUR_LIGHT_MAGENTA,  COLOUR_BLACK, 'LIGHT MAGENTA' ],
+  [ COLOUR_MAGENTA,        COLOUR_WHITE, 'MAGENTA' ],
+  [ COLOUR_DARK_MAGENTA,   COLOUR_WHITE, 'DARK MAGENTA' ],
+
+  [ COLOUR_LIMEGREEN,      COLOUR_BLACK, 'LIMEGREEN' ],
+  [ COLOUR_TURQUOISE,      COLOUR_BLACK, 'TURQUOISE' ],
+  [ COLOUR_ROYALBLUE,      COLOUR_WHITE, 'ROYALBLUE' ],
+
+  [ COLOUR_ORANGE,         COLOUR_BLACK, 'ORANGE' ],
+  [ COLOUR_PINK,           COLOUR_WHITE, 'PINK' ],
+  [ COLOUR_INDIGO,         COLOUR_WHITE, 'INDIGO' ],
+
+  [ COLOUR_LIGHT_GREY,     COLOUR_BLACK, 'LIGHT GREY' ],
+  [ COLOUR_GREY,           COLOUR_BLACK, 'GREY' ],
+  [ COLOUR_DARK_GREY,      COLOUR_WHITE, 'DARK GREY' ],
+
+  [ COLOUR_WHITE,          COLOUR_BLACK, 'WHITE' ],
+  [ COLOUR_BLACK,          COLOUR_WHITE, 'BLACK' ],
+];
+
+const columns = 3;
+const rows = 10;
+
+
+// initialise
+g.clear(reset);
+g.setFont('6x8').setFontAlign(-1, -1);
+
+// calc some values required to draw the grid
+const colWidth = Math.floor(g.getWidth() / columns);
+const rowHeight = Math.floor(g.getHeight() / rows);
+const xStart = Math.floor((g.getWidth() - (columns * colWidth)) / 2);
+var x = xStart;
+var y = Math.floor((g.getHeight() - (rows * rowHeight)) / 2);
+
+// loop through the colours to be demoed
+for (var idx in demo) {
+  var colour = demo[idx][0];
+  var labelColour = demo[idx][1];
+  var label = demo[idx][2];
+
+  // draw coloured box
+  g.setColor(colour).fillRect(x, y, x + colWidth - 1, y + rowHeight - 1);
+
+  // label it
+  g.setColor(labelColour).drawString(g.wrapString(label, colWidth).join("\n"), x, y);
+
+  x += colWidth;
+  if ((x + colWidth) >= g.getWidth()) {
+    x = xStart;
+    y += rowHeight;
+  }
+}
+
+// there's an "unused" box left - cross it out
+g.setColor(COLOUR_RED);
+g.drawLine(x, y, x + colWidth - 1, y + rowHeight - 1);
+g.drawLine(x, y + rowHeight - 1, x + colWidth - 1, y);
+
+
+// exit on button press
+setWatch(e => { Bangle.showClock(); }, BTN1);
+

apps/coloursdemo/metadata.json

@@ -0,0 +1,17 @@
+{
+  "id": "coloursdemo",
+  "name": "Colours Demo",
+  "shortName":"Colours Demo",
+  "version":"1.00",
+  "description": "Simple app to demonstrate colours",
+  "icon": "coloursdemo.png",
+  "screenshots": [{ "url": "screenshot.png" }],
+  "type": "app",
+  "tags": "tool",
+  "supports": ["BANGLEJS2"],
+  "readme": "README.md",
+  "storage": [
+    { "name":"coloursdemo.app.js", "url":"coloursdemo.app.js" },
+    { "name":"coloursdemo.img",    "url":"coloursdemo-icon.js", "evaluate":true }
+  ]
+}