color chooser improvements

web/app/pods/components/lights-tab/color-picker/component.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-const { Component, $ } = Ember;
+const { Component, $, run: { next } } = Ember;
 
 export default Component.extend({
   elementId: 'color-picker',
@@ -31,7 +31,19 @@ export default Component.extend({
     this.set('pressingDown', true);
 
     if (!(pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0)) {
-      this.set('rgb', [pixel[0], pixel[1], pixel[2]]);
+      this.setProperties({
+        rgb: [pixel[0], pixel[1], pixel[2]],
+        showPointer: true
+      });
+
+      next(() => {
+        $('#picker-pointer').css({
+          opacity: 1,
+          top: canvasY,
+          left: canvasX,
+          background: 'rgb(' + pixel[0] + ',' + pixel[1] + ',' + pixel[2] + ')'
+        });
+      });
     }
   },
 
@@ -48,8 +60,8 @@ export default Component.extend({
     };
 
     this.setProperties({
-      canvas: canvas,
+      canvas,
-      canvasContext: canvasContext
+      canvasContext
     });
   }
 });

web/app/pods/components/lights-tab/color-picker/template.hbs

@@ -1 +1,6 @@
-<canvas id="picker" width="256" height="256"></canvas>
+<canvas id="picker" width="256" height="256">
+</canvas>
+
+{{#if showPointer}}
+  <div id="picker-pointer" />
+{{/if}}

web/app/pods/components/lights-tab/component.js

@@ -62,21 +62,26 @@ export default Component.extend({
     }
   }),
 
-  rgbPreview: observer('rgb', function() {
+  changeLightsColor() {
-    let rgb = this.get('rgb'),
+    let { activeLights, apiURL, xy } = this.getProperties('activeLights', 'apiURL', 'xy');
-      xy = rgbToCie(rgb[0], rgb[1], rgb[2]);
 
-    this.set('colorLoopOn', false);
+    activeLights.forEach(light => {
-
+      $.ajax(`${apiURL}/lights/${light}/state`, {
-    this.get('activeLights').forEach(light => {
+        data: JSON.stringify({ xy }),
-      $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
-        data: JSON.stringify({ xy: xy }),
         contentType: 'application/json',
         type: 'PUT'
       });
     });
+  },
+
+  rgbPreview: observer('rgb', function() {
+    let { rgb, activeLights } = this.getProperties('rgb', 'activeLights');
 
     this.set('colorLoopOn', false);
+
+    throttle(this, this.changeLightsColor, activeLights.length * 69, false);
+
+    this.setProperties({ colorLoopOn: false, xy: rgbToCie(rgb[0], rgb[1], rgb[2]) });
     $('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
   }),
 

web/app/styles/hue-controls.scss

@@ -102,6 +102,19 @@
 
 #picker {
   cursor: crosshair;
+  border-radius: 50%;
+}
+
+#picker-pointer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border: 2px solid white;
+  border-radius: 50%;
+  opacity: 0;
+  cursor: pointer;
 }
 
 #loop-addition {

web/yarn.lock

@@ -3,8 +3,8 @@
 
 
 "@ember/test-helpers@^0.7.9":
-  version "0.7.10"
+  version "0.7.11"
-  resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-0.7.10.tgz#6c083d25c6cbc9d7a1593e3336616cb47113185f"
+  resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-0.7.11.tgz#6435746ea6045a5d52a4294d095e5bf296faecc8"
   dependencies:
     broccoli-funnel "^2.0.1"
     ember-cli-babel "^6.10.0"
@@ -2506,13 +2506,12 @@ ember-cli-release@^1.0.0-beta.2:
     silent-error "^1.0.0"
 
 ember-cli-sass@^7.0.0:
-  version "7.1.2"
+  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.1.2.tgz#5756a92a526754878b32f3be4367cfe4bf2b5514"
+  resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.1.3.tgz#d4a418d68bb513c40270b88576bd2cf07301fdf2"
   dependencies:
     broccoli-funnel "^1.0.0"
     broccoli-merge-trees "^1.1.0"
     broccoli-sass-source-maps "^2.1.0"
-    ember-cli-babel "^6.6.0"
     ember-cli-version-checker "^1.0.2"
 
 ember-cli-shims@^1.0.2:
@@ -2574,8 +2573,8 @@ ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0:
     semver "^5.3.0"
 
 ember-cli@^2.14.0:
-  version "2.17.1"
+  version "2.17.2"
-  resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-2.17.1.tgz#915a140732cd28d6c3d5b2e890731864ea55ad5b"
+  resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-2.17.2.tgz#101483d48dd295d297203160afcf3c44bcd47b75"
   dependencies:
     amd-name-resolver "1.0.0"
     babel-plugin-transform-es2015-modules-amd "^6.24.0"
@@ -7206,8 +7205,8 @@ uc.micro@^1.0.1, uc.micro@^1.0.3:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
 
 uglify-es@^3.1.3:
-  version "3.3.0"
+  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.0.tgz#a4acd1cf31f2768ec4d2e72adb739d7018de93aa"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.2.tgz#2401df8be2a433314523753f28810793a40c5462"
   dependencies:
     commander "~2.12.1"
     source-map "~0.6.1"