Add button maker. Support basic editing.

1 files changed, 79 insertions, 0 deletions

diff --git a/button-maker/scripts/lib.js b/button-maker/scripts/lib.js
new file mode 100644
index 0000000..372d9d7
--- /dev/null
+++ b/button-maker/scripts/lib.js
@@ -0,0 +1,79 @@
+// In Firefox (on Mac only?), for <input type="color">, setting value
+// to abbreviated hex form (e.g. #123) doesn’t work. So all colors
+// should be specified in full form.
+const DEFAULT_NETSCAPE_PARAMS = {
+    color_bg: "#c0c0c0",
+    logo_url: "https://upload.wikimedia.org/wikipedia/commons/0/08/Netscape_icon.svg",
+    text_top: {
+        content: "Netscape",
+        pos: [31, 11],
+        font_size: 10.5,
+        color: "#000000",
+    },
+    text_bottom: {
+        content: "Now!",
+        pos: [30, 28],
+        font_size: 17.5,
+        color: "#ff0000",
+    },
+    banner: {
+        style: "corner_bottom_right", // corner_bottom_right or right
+        color: "#008080",
+        text: {
+            content: "5.0",
+            pos: [65, 46],
+            font_size: 8,
+            color: "#ffffff",
+        },
+    },
+};
+
+const DEFAULT_APP_STATE = {
+    button_type: "netscape",
+    button_params: DEFAULT_NETSCAPE_PARAMS,
+}
+
+const SVG_ATTRIBUTES = {viewBox: "0 0 88 31", width: 88, height: 31};
+
+// Return three integers as an array.
+function parseHexColor(color_str)
+{
+    console.debug("Parsing", color_str);
+    m = color_str.match(/^#([0-9a-f]{3})$/i);
+    if(m)
+    {
+        // in three-character format, each value is multiplied by 0x11 to give an
+        // even scale from 0x00 to 0xff
+        return [
+            parseInt(m[1].charAt(0),16)*0x11,
+            parseInt(m[1].charAt(1),16)*0x11,
+            parseInt(m[1].charAt(2),16)*0x11
+        ];
+    }
+
+    m = color_str.match(/^#([0-9a-f]{6})$/i);
+    if(m)
+    {
+        return [
+            parseInt(m[1].substr(0,2),16),
+            parseInt(m[1].substr(2,2),16),
+            parseInt(m[1].substr(4,2),16)
+        ];
+    }
+    return null;
+}
+
+function lighten(rgb, delta)
+{
+    return [rgb[0] + delta, rgb[1] + delta, rgb[2] + delta];
+}
+
+function darken(rgb, delta)
+{
+    return [rgb[0] - delta, rgb[1] - delta, rgb[2] - delta];
+}
+
+function color2Str(color)
+{
+    return `rgb(${color[0]} ${color[1]} ${color[2]})`;
+}