Color picker stuff

app/components/bridge-controls.js

@@ -43,24 +43,13 @@ export default Em.Component.extend({
     }
   },
 
-  // automatically close the group menu when the user clicks somewhere else
-  click: function() {
-    if(this.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls').length) {
-      this.toggleProperty('groupControlDisplayed');
-    }
-
-    if(this.get('appSettingsDisplayed') && !event.target.classList.contains('settings') && !Em.$(event.target).closest('#appSetting').length) {
-      this.toggleProperty('appSettingsDisplayed');
-    }
-  },
-
   apiURL: function(){
       return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
   }.property('bridgeIp', 'bridgeUsername'),
 
   didInsertElement: function(){
     // here's a weird way to automatically initialize bootstrap tooltips
-    var observer = new MutationObserver(function(mutations) {
+    var self = this, observer = new MutationObserver(function(mutations) {
       var haveTooltip = !mutations.every(function(mutation) {
         return Em.isEmpty(mutation.addedNodes) || Em.isNone(mutation.addedNodes[0].classList) || mutation.addedNodes[0].classList.contains('tooltip');
       });
@@ -71,7 +60,19 @@ export default Em.Component.extend({
         });
       }
     });
+
     observer.observe(Em.$('#bridgeControls')[0], {childList: true, subtree: true});
+
+    // automatically close the group menu when the user clicks somewhere else
+    Em.$(document).click(function() {
+      if(self.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls').length) {
+        self.toggleProperty('groupControlDisplayed');
+      }
+
+      if(self.get('appSettingsDisplayed') && !event.target.classList.contains('settings') && !Em.$(event.target).closest('#appSetting').length) {
+        self.toggleProperty('appSettingsDisplayed');
+      }
+    });
   },
 
   init: function() {

app/components/color-picker.js

@@ -3,17 +3,47 @@ import Em from 'ember';
 export default Em.Component.extend({
   classNames:['colorpicker'],
 
+  rgb: null,
+  xy: function() {
+    var rgb = this.get('rgb');
+
+    return this.rgbToXy(rgb[0], rgb[1], rgb[2]);
+  }.property('rgb'),
+
+  canvas: null,
+  canvasContext: null,
+
+  actions: {
+    colorSelect: function() {
+      var canvasOffset = Em.$(this.get('canvas')).offset();
+      var canvasX = Math.floor(event.pageX - canvasOffset.left), canvasY = Math.floor(event.pageY - canvasOffset.top);
+
+      // get current pixel
+      var imageData = this.get('canvasContext').getImageData(canvasX, canvasY, 1, 1);
+      var pixel = imageData.data;
+
+      if( pixel[0] !== 0 && pixel[1] !== 0 && pixel[2] !== 0 ) {
+        this.set('rgb', [pixel[0], pixel[1], pixel[2]]);
+      }
+    }
+  },
+
   // https://dzone.com/articles/creating-your-own-html5
   didInsertElement: function(){
     // handle color changes
-    var self = this,
+    var canvas = Em.$('#picker')[0],
-      canvas = Em.$('#picker')[0].getContext('2d'),
+      canvasContext = canvas.getContext('2d'),
       image = new Image();
 
     image.src ='assets/images/colorwheel.png';
     image.onload = function () {
-      canvas.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
+      canvasContext.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
     };
+
+    this.setProperties({
+      canvas: canvas,
+      canvasContext: canvasContext
+    });
   },
 
   // http://www.developers.meethue.com/documentation/color-conversions-rgb-xy
@@ -38,11 +68,12 @@ export default Em.Component.extend({
     x = X / (X + Y + Z);
     y = Y / (X + Y + Z);
 
+    console.log('[x,y]: ' + x + ', ' + y );
     return [x,y];
   },
 
   xyTorgb: function(x, y){
-    var r, g, b, X, Y, Z, activeLights = this.get('activeLights'), lightsData = this.get('lightsData');
+    var r, g, b, X, Y, Z, z, activeLights = this.get('activeLights'), lightsData = this.get('lightsData');
 
     z = 1 - x - y;
     Y = lightsData[activeLights[0]].state.bri;

app/components/controls/light-control.js

@@ -10,17 +10,33 @@ export default Em.Component.extend({
 
   lightsDataIntervalHandle: null,
 
-  isShowingColorPicker: false,
+  colorPickerDisplayed: false,
 
   actions: {
     clickLight: function(){
       console.log('clickLight');
     },
     toggleColorpicker: function() {
-      this.toggleProperty('isShowingColorPicker');
+      this.toggleProperty('colorPickerDisplayed');
     }
   },
 
+  didInsertElement: function() {
+    var self = this;
+
+    Em.$(document).click(function() {
+      if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker').length) {
+        self.toggleProperty('colorPickerDisplayed');
+      }
+    });
+  },
+
+  rgb: [255, 255, 255],
+  rgbPreview: function() {
+    var rgb = this.get('rgb');
+    Em.$('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
+  }.observes('rgb'),
+
   // determines whether the lights are on/off for the lights switch
   lightsOn: function(){
     var lightsData = this.get('lightsData');

app/styles/app.scss

@@ -183,10 +183,6 @@ md-list-item .md-no-style {
   text-decoration: underline;
 }
 
-#lightControl{
-  min-height: 500px;
-}
-
 .color {
   border: 1px solid rgba(0, 0, 0, 0.5);
 }

app/templates/components/color-picker.hbs

@@ -1 +1 @@
-<canvas id="picker" width="200" height="200"></canvas>
+<canvas id="picker" width="200" height="200" {{action "colorSelect"}}></canvas>

app/templates/components/controls/light-control.hbs

@@ -21,9 +21,9 @@
     {{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}}
   {{/paper-item}}
   <div class="relative">
-    {{#if isShowingColorPicker}}
+    {{#if colorPickerDisplayed}}
-    {{color-picker lightsData=lightsData activeLights=activeLights}}
+      {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb xy=xy}}
-  {{/if}}
+    {{/if}}
   </div>
 
   {{#paper-item class="item"}}