the suffering...xy to rgb? please

app/components/bridge-controls.js

@@ -65,7 +65,7 @@ export default Em.Component.extend({
 
     // 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) {
+      if(self.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls, #modal-overlays, .ember-modal-overlay').length) {
         self.toggleProperty('groupControlDisplayed');
       }
 

app/components/controls/group-control.js

@@ -1,7 +1,6 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNameBindings: ['groupControlDisplayed:on'],
   classNames: ['innerControlFrame'],
   elementId: 'groupControls',
 

app/components/controls/light-control.js

@@ -30,7 +30,7 @@ export default Em.Component.extend({
 
   didInsertElement: function() {
     var self = this;
-
+    this.xyToRgb(0.5,0.5)
     Em.$(document).click(function() {
       if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker, .colorRow').length) {
         self.toggleProperty('colorPickerDisplayed');
@@ -235,24 +235,62 @@ export default Em.Component.extend({
   },
 
   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 = 1.0, Z;
 
-    Y = lightsData[activeLights[1]].state.bri;
+    X = (Y / y) * x;
-    X = ((Y / y) * x)/100;
+    Z = (Y / y) * (1 - x - y);
-    Z = ((Y / y) * (1 - x - y))/100;
-    Y = Y/100;
 
-    r = X * 3.2406 + Y * -1.5372 + Z * -0.4986;
+    r = X * 1.656492 - Y * 0.354851 - Z * 0.255038;
-    g = X * -0.9689 + Y * 1.8758 + Z * 0.0415;
+    g = X * -0.707196 + Y * 1.655397 + Z * 0.036152;
-    b = X * 0.0557 + Y * -0.2040 + Z * 1.0570;
+    b = X * 0.051713 - Y * 0.121364 + Z * 1.011530;
+
+    if (r > b && r > g && r > 1.0) {
+      // red is too big
+      g = g / r;
+      b = b / r;
+      r = 1.0;
+    } else if (g > b && g > r && g > 1.0) {
+      // green is too big
+      r = r / g;
+      b = b / g;
+      g = 1.0;
+    } else if (b > r && b > g && b > 1.0) {
+      // blue is too big
+      r = r / b;
+      g = g / b;
+      b = 1.0;
+    }
 
     r = (r <= 0.0031308) ? 12.92 * r : 1.055 * Math.pow(r, (1.0 / 2.4)) - 0.055;
     g = (g <= 0.0031308) ? 12.92 * g : 1.055 * Math.pow(g, (1.0 / 2.4)) - 0.055;
     b = (b <= 0.0031308) ? 12.92 * b : 1.055 * Math.pow(b, (1.0 / 2.4)) - 0.055;
 
-    r = Math.floor(r * 255);
+    if (r > b && r > g) {
-    g = Math.floor(g * 255);
+      // red is biggest
-    b = Math.floor(b * 255);
+      if (r > 1.0) {
+        g = g / r;
+        b = b / r;
+        r = 1.0;
+      }
+    } else if (g > b && g > r) {
+      // green is biggest
+      if (g > 1.0) {
+        r = r / g;
+        b = b / g;
+        g = 1.0;
+      }
+    } else if (b > r && b > g) {
+      // blue is biggest
+      if (b > 1.0) {
+        r = r / b;
+        g = g / b;
+        b = 1.0;
+      }
+    }
+
+    r = r * 255;
+    g = g * 255;
+    b = b * 255;
 
     return [r, g, b];
   }

app/components/mixins/music-control.js

@@ -49,7 +49,7 @@ export default Em.Mixin.create({
 
   threshold: 0.3,
   decay: 0.02,
-  frequency: [0,5],
+  frequency: [0,10],
 
   playQueuePointer: -1,
   playQueue: Em.A(),

app/styles/app.scss

@@ -220,17 +220,12 @@ md-slider.md-default-theme .md-thumb:after {
 }
 
 #groupControls {
-  display: none;
   box-shadow: 5px 10px 15px 5px rgba(0,0,0,.3);
   border-radius: 0 0 5px 5px;
-}
-
-#groupControls.on {
   width: 300px;
   top: 20px;
-  right: 83px;
+  right: 0;
   position: absolute;
-  display: block;
   z-index: 2;
   background-color: white;
   max-height: 400px;

app/templates/components/bridge-controls.hbs

@@ -7,13 +7,16 @@
     </div>
 
     <div class="col-xs-3">
-      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl" bubbles=false}}>
+      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
-        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
+        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
-      </span>
-      {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
 
-      <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}"  {{action "toggleAppSettings"}}>
+        {{#if groupControlDisplayed}}
-        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
+          {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
+        {{/if}}
+      </span>
+
+      <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">
+        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>
 
         {{#if appSettingsDisplayed}}
           <div id="appSettings">