Merge pull request #158 from arillo/feature/default-color-via-config

allow for custom color swatches via config/default.json

README.md

@@ -45,6 +45,43 @@ To install all node dependencies, run (do this once):
 
 See [config/default.json](config/default.json). Set `storage_local_path` for a local sqlite database or `storage_region`, `storage_bucket`, `storage_cdn` and `storage_endpoint` for AWS S3. `mail_provider` may be one of `console` or `smtp`. Also, omit a trailing `/` for the `endpoint`.
 
+## Configure color swatches
+
+Add a custom array of swatches to your config/default.json.
+
+**You should include the swatch transparent (rgba(0,0,0,0)) so users can remove the color applied.**
+
+## Configure default colors
+You can define text, stroke and fill color in your config/default.json. 
+
+**You also should include the default colors in your custom swatches palette.**
+
+```json
+...
+"spacedeck": {
+  "default_text_color": "#E11F26",
+  "default_stroke_color": "#9E0F13",
+  "default_fill_color": "#64BCCA",
+  "swatches": [
+    {"id":8, "hex":"#000000"},
+    {"id":30, "hex":"rgba(0,0,0,0)"},
+    {"id":31, "hex": "#E11F26"},
+    {"id":32, "hex": "#9E0F13"},
+    {"id":33, "hex": "#64BCCA"},
+    {"id":34, "hex": "#40808A"},
+    {"id":35, "hex": "#036492"},
+    {"id":36, "hex": "#005179"},
+    {"id":37, "hex": "#84427E"},
+    {"id":38, "hex": "#6C3468"},
+    {"id":39, "hex": "#F79B84"},
+    {"id":40, "hex": "#B57362"},
+    {"id":41, "hex": "#E7D45A"},
+    {"id":42, "hex": "#ACA044"}
+  ]
+}
+...
+```
+
 # Run (web server)
 
     node spacedeck.js

config/default.json

@@ -33,5 +33,6 @@
   "mail_smtp_secure": true,
   "mail_smtp_require_tls": true,
   "mail_smtp_user": "your.smtp.user",
-  "mail_smtp_pass": "your.secret.smtp.password"
+  "mail_smtp_pass": "your.secret.smtp.password",
+  "spacedeck": {}
 }

public/javascripts/spacedeck_sections.js

@@ -68,9 +68,9 @@ var SpacedeckSections = {
       line_height: 1.5,
       letter_spacing: 0,
 
-      stroke_color: "#000000",
-      fill_color: "#00000000",
-      text_color: "#000000",
+      stroke_color: ENV.options.default_stroke_color ? ENV.options.default_stroke_color : "#000000",
+      fill_color: ENV.options.default_fill_color ? ENV.options.default_fill_color : "#000000",
+      text_color: ENV.options.default_text_color ? ENV.options.default_text_color : "#000000",
       background_color: "#ffffff",
 
       padding: 0,
@@ -109,7 +109,7 @@ var SpacedeckSections = {
     color_picker_hue: 127,
     color_picker_opacity: 255,
 
-    swatches: [
+    swatches: ENV.options.swatches ? ENV.options.swatches : [
       {id:1, hex:"#ff00ff"},
       {id:2, hex:"#ffff00"},
       {id:3, hex:"#00ffff"},
@@ -133,18 +133,7 @@ var SpacedeckSections = {
       {id:26, hex:"#d55c4b"},
       {id:27, hex:"#6f4021"},
       {id:29, hex:"#95a5a6"},
-      {id:30, hex:"rgba(0,0,0,0)"},
-    ],
-
-    swatches_text: [
-      {id:1, hex:"#9b59b6"},
-      {id:2, hex:"#3498db"},
-      {id:3, hex:"#2ecc71"},
-      {id:4, hex:"#f1c40f"},
-      {id:5, hex:"#e67e22"},
-      {id:6, hex:"#d55c4b"},
-      {id:8, hex:"#ffffff"},
-      {id:10, hex:"#252525"},
+      {id:30, hex:"rgba(0,0,0,0)"}
     ],
 
     fonts: [

views/spacedeck.ejs

@@ -17,7 +17,8 @@
         webHost: location.host,
         webEndpoint: location.origin,
         apiEndpoint: location.origin,
-        websocketsEndpoint: location.origin.replace("https:","wss:").replace("http:","ws:")
+        websocketsEndpoint: location.origin.replace("https:","wss:").replace("http:","ws:"),
+        options: <%- config.spacedeck ? JSON.stringify(config.spacedeck) : "{}" %>
       };
     </script>