diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js
index 04e607e..5c2023d 100644
--- a/app/components/bridge-controls.js
+++ b/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() {
diff --git a/app/components/color-picker.js b/app/components/color-picker.js
index 63c27b0..7513c3c 100644
--- a/app/components/color-picker.js
+++ b/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,
- canvas = Em.$('#picker')[0].getContext('2d'),
+ var canvas = Em.$('#picker')[0],
+ 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;
diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index f2f8c94..2903011 100644
--- a/app/components/controls/light-control.js
+++ b/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');
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 1c33f6b..efbcff3 100644
--- a/app/styles/app.scss
+++ b/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);
}
diff --git a/app/templates/components/color-picker.hbs b/app/templates/components/color-picker.hbs
index 48e41a2..dbb8746 100644
--- a/app/templates/components/color-picker.hbs
+++ b/app/templates/components/color-picker.hbs
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs
index a9ee892..e9481aa 100644
--- a/app/templates/components/controls/light-control.hbs
+++ b/app/templates/components/controls/light-control.hbs
@@ -21,9 +21,9 @@
{{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}}
{{/paper-item}}
- {{#if isShowingColorPicker}}
- {{color-picker lightsData=lightsData activeLights=activeLights}}
- {{/if}}
+ {{#if colorPickerDisplayed}}
+ {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb xy=xy}}
+ {{/if}}
{{#paper-item class="item"}}