Add preferences to HexaSpinner

diff --git a/hacks/HexaSpinner/HexaSpinner.js b/hacks/HexaSpinner/HexaSpinner.js
index 4fc1c30..b585c6a 100644 (file)
--- a/hacks/HexaSpinner/HexaSpinner.js
+++ b/hacks/HexaSpinner/HexaSpinner.js
@@ -73,6 +73,14 @@ enyo.kind({
        name: "HexaSpinnerHack",
        kind: "Hack",
        style: "background-color: white",
+       preferences: [
+               {name: "chaos", label: "Chaos", kind: "Slider", minimum: 1.0, maximum: 10.0, snap: 0.1},
+               {name: "color1", label: "Primary Color", kind: "ListSelector", items: colorList},
+               {name: "color2", label: "Secondary Color", kind: "ListSelector", items: colorList},
+       ],
+       chaos: 1.0,
+       color1: 'white',
+       color2: 'black',
        components: [
                {name: "canvas", nodeTag: "canvas"}
        ],
@@ -81,33 +89,36 @@ enyo.kind({
                this.ctx = this.canvas.getContext('2d');
                this.resize(window.innerWidth, window.innerHeight);
 
+               this.initSpinners();
+
+               this.engine();
+       },
+       initSpinners: function() {
                this.spinners = [];
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-0.5, -0.5, 1.0, 1.0),
-                       18.0, 'black', -Math.PI / 150));
+                       new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
+                       18.0, this.color2, -Math.PI / 150));
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-0.8, -0.8, 1.6, 1.6),
-                       12.0, 'white', Math.PI / 120));
+                       new RandomPoint(-0.8 * this.chaos, -0.8 * this.chaos, 1.6 * this.chaos, 1.6 * this.chaos),
+                       12.0, this.color1, Math.PI / 120));
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-0.9, -0.9, 1.8, 1.8),
-                       9.0, 'black', -Math.PI / 140));
+                       new RandomPoint(-0.9 * this.chaos, -0.9 * this.chaos, 1.8 * this.chaos, 1.8 * this.chaos),
+                       9.0, this.color2, -Math.PI / 140));
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-0.5, -0.5, 1.0, 1.0),
-                       4.0, 'white', -Math.PI / 100));
+                       new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
+                       4.0, this.color1, -Math.PI / 100));
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-1.2, -1.2, 2.4, 2.4),
-                       3.0, 'black'));
+                       new RandomPoint(-1.2 * this.chaos, -1.2 * this.chaos, 2.4 * this.chaos, 2.4 * this.chaos),
+                       3.0, this.color2));
                this.spinners.push(new HexaSpinner(
                        new RandomPoint(0, 0, this.w, this.h),
-                       new RandomPoint(-1.8, -1.8, 3.2, 3.2),
-                       1.8, 'white', -Math.PI / 30));
-
-               this.engine();
+                       new RandomPoint(-1.8 * this.chaos, -1.8 * this.chaos, 3.2 * this.chaos, 3.2 * this.chaos),
+                       1.8, this.color1, -Math.PI / 30));
        },
        start: function() {
                if (!this.timer)
@@ -127,8 +138,11 @@ enyo.kind({
                        bottom: h - 50
                };
        },
+       preferencesChanged: function() {
+               this.initSpinners();
+       },
        engine: function() {
-               this.ctx.fillStyle = 'white';
+               this.ctx.fillStyle = this.color1;
                this.ctx.fillRect(0, 0, this.w, this.h);
                for (i in this.spinners) {
                        this.spinners[i].update(this.bb);