color chooser improvements
This commit is contained in:
Egor
parent
52e9e290cf
commit
4cc00639ca
5 changed files with 56 additions and 22 deletions
|
|
@ -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,
|
||||
canvasContext: canvasContext
|
||||
canvas,
|
||||
canvasContext
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -62,21 +62,26 @@ export default Component.extend({
|
|||
}
|
||||
}),
|
||||
|
||||
rgbPreview: observer('rgb', function() {
|
||||
let rgb = this.get('rgb'),
|
||||
xy = rgbToCie(rgb[0], rgb[1], rgb[2]);
|
||||
changeLightsColor() {
|
||||
let { activeLights, apiURL, xy } = this.getProperties('activeLights', 'apiURL', 'xy');
|
||||
|
||||
this.set('colorLoopOn', false);
|
||||
|
||||
this.get('activeLights').forEach(light => {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({ xy: xy }),
|
||||
activeLights.forEach(light => {
|
||||
$.ajax(`${apiURL}/lights/${light}/state`, {
|
||||
data: JSON.stringify({ 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] + ')');
|
||||
}),
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
|
||||
"@ember/test-helpers@^0.7.9":
|
||||
version "0.7.10"
|
||||
resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-0.7.10.tgz#6c083d25c6cbc9d7a1593e3336616cb47113185f"
|
||||
version "0.7.11"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.1.2.tgz#5756a92a526754878b32f3be4367cfe4bf2b5514"
|
||||
version "7.1.3"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-2.17.1.tgz#915a140732cd28d6c3d5b2e890731864ea55ad5b"
|
||||
version "2.17.2"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.0.tgz#a4acd1cf31f2768ec4d2e72adb739d7018de93aa"
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.2.tgz#2401df8be2a433314523753f28810793a40c5462"
|
||||
dependencies:
|
||||
commander "~2.12.1"
|
||||
source-map "~0.6.1"
|
||||
|
|
|
|||
Reference in a new issue