lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better brightness bar sliding, averaging the lights for the light color

Browse source
This commit is contained in:
lone-cloud 2017-11-29 21:24:02 -08:00
parent 930d22ac61
commit 46b34015e6
4 changed files with 88 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/.eslintrc.js
View file

@ -13,5 +13,5 @@ module.exports = {
globals: { globals: {
chrome: false, chrome: false,
introJs: false introJs: false
}, }
}; };

107
web/app/pods/components/lights-tab/component.js
View file

@ -15,21 +15,21 @@ export default Component.extend({
// COLOR LOOP related stuff // COLOR LOOP related stuff
colorLoopOn: false, colorLoopOn: false,
lightsOnTxt: computed('lightsOn', function () { lightsOnTxt: computed('lightsOn', function() {
return this.get('lightsOn') ? 'On' : 'Off'; return this.get('lightsOn') ? 'On' : 'Off';
}), }),
colorloopOnTxt: computed('colorLoopOn', function () { colorloopOnTxt: computed('colorLoopOn', function() {
return this.get('colorLoopOn') ? 'On' : 'Off'; return this.get('colorLoopOn') ? 'On' : 'Off';
}), }),
// determines the average brightness of the hue system for the brightness slider // determines the average brightness of the hue system for the brightness slider
lightsBrightness: computed('lightsData', 'activeLights.[]', function () { lightsBrightness: computed('lightsData', 'activeLights.[]', function() {
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'), activeLights = this.get('activeLights'),
lightsBrightness = 0; lightsBrightness = 0;
activeLights.forEach(function (light) { activeLights.forEach(function(light) {
lightsBrightness += lightsData[light].state.bri; lightsBrightness += lightsData[light].state.bri;
}); });
@ -38,22 +38,22 @@ export default Component.extend({
brightnessControlDisabled: computed.not('lightsOn'), brightnessControlDisabled: computed.not('lightsOn'),
onColorLoopOnChange: observer('colorLoopOn', function () { onColorLoopOnChange: observer('colorLoopOn', function() {
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'), activeLights = this.get('activeLights'),
colorLoopsOn = this.get('colorLoopOn'), colorLoopsOn = this.get('colorLoopOn'),
effect = colorLoopsOn ? 'colorloop' : 'none'; effect = colorLoopsOn ? 'colorloop' : 'none';
let colorLoopsOnSystem = activeLights.some(function (light) { let colorLoopsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.effect === 'colorloop'; return lightsData[light].state.effect === 'colorloop';
}); });
// if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state // if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state
if (colorLoopsOn !== colorLoopsOnSystem) { if (colorLoopsOn !== colorLoopsOnSystem) {
activeLights.forEach((light) => { activeLights.forEach(light => {
if (this.get('lightsData')[light].state.effect !== effect) { if (this.get('lightsData')[light].state.effect !== effect) {
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({ 'effect': effect }), data: JSON.stringify({ effect: effect }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
}); });
@ -62,15 +62,15 @@ export default Component.extend({
} }
}), }),
rgbPreview: observer('rgb', function () { rgbPreview: observer('rgb', function() {
let rgb = this.get('rgb'), let rgb = this.get('rgb'),
xy = rgbToCie(rgb[0], rgb[1], rgb[2]); xy = rgbToCie(rgb[0], rgb[1], rgb[2]);
this.set('colorLoopOn', false); this.set('colorLoopOn', false);
this.get('activeLights').forEach((light) => { this.get('activeLights').forEach(light => {
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({ "xy": xy }), data: JSON.stringify({ xy: xy }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
}); });
@ -80,59 +80,61 @@ export default Component.extend({
$('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'); $('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
}), }),
onActiveLightsChange: on('init', observer('activeLights.[]', function () { onActiveLightsChange: observer('activeLights.[]', function() {
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
xy = null, activeLights = this.get('activeLights'),
setRGB = true; xy = null;
if (!isEmpty(lightsData)) { if (!isEmpty(lightsData)) {
this.get('activeLights').forEach((i) => { activeLights.forEach(i => {
let light = lightsData[i]; let light = lightsData[i];
if (light && light.state && light.state.xy) { if (light && light.state && light.state.xy) {
if (xy !== null && xy[0] !== light.state.xy[0] && xy[1] !== light.state.xy[1]) { if (xy === null) {
setRGB = false; xy = [0, 0];
} }
xy[0] += light.state.xy[0];
xy = light.state.xy; xy[1] += light.state.xy[1];
} }
}); });
if (setRGB && xy) { if (xy) {
let rgb = cieToRgb(xy[0], xy[1]); let rgb = cieToRgb(xy[0] / activeLights.length, xy[1] / activeLights.length);
$('.color').css('background', 'rgb(' + Math.abs(rgb[0]) + ',' + Math.abs(rgb[1]) + ',' + Math.abs(rgb[2]) + ')'); $('.color').css('background', 'rgb(' + Math.abs(rgb[0]) + ',' + Math.abs(rgb[1]) + ',' + Math.abs(rgb[2]) + ')');
} else {
$('.color').css('background', 'rgb(' + 255 + ',' + 255 + ',' + 255 + ')');
} }
} }
})), }),
// determines whether the lights are on/off for the lights switch // determines whether the lights are on/off for the lights switch
lightsOnChange: on('init', observer('lightsData.@each.state.on', 'activeLights.[]', function () { lightsOnChange: on(
'init',
observer('lightsData.@each.state.on', 'activeLights.[]', function() {
if (!this.get('strobeOn')) { if (!this.get('strobeOn')) {
let lightsData = this.get('lightsData'), lightsOn = this.get('activeLights').some(function (light) { let lightsData = this.get('lightsData'),
lightsOn = this.get('activeLights').some(function(light) {
return lightsData[light].state.on === true; return lightsData[light].state.on === true;
}); });
this.set('lightsOn', lightsOn); this.set('lightsOn', lightsOn);
} }
})), })
),
onLightsOnChange: observer('lightsOn', function () { onLightsOnChange: observer('lightsOn', function() {
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'), activeLights = this.get('activeLights'),
lightsOn = this.get('lightsOn'); lightsOn = this.get('lightsOn');
let lightsOnSystem = activeLights.some(function (light) { let lightsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.on === true; return lightsData[light].state.on === true;
}); });
// if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state // if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state
if (lightsOn !== lightsOnSystem) { if (lightsOn !== lightsOnSystem) {
activeLights.forEach((light) => { activeLights.forEach(light => {
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({ "on": lightsOn }), data: JSON.stringify({ on: lightsOn }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
}); });
@ -146,7 +148,7 @@ export default Component.extend({
lightsBrightness = this.get('lightsBrightness'), lightsBrightness = this.get('lightsBrightness'),
activeLights = this.get('activeLights'); activeLights = this.get('activeLights');
activeLights.forEach(function (light) { activeLights.forEach(function(light) {
lightsBrightnessSystem += lightsData[light].state.bri; lightsBrightnessSystem += lightsData[light].state.bri;
}); });
@ -154,9 +156,9 @@ export default Component.extend({
// if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state // if the internal lights state is different than the one from lightsData (user manually toggled the switch), send the request to change the bulbs state
if (lightsBrightness !== lightsBrightnessSystem) { if (lightsBrightness !== lightsBrightnessSystem) {
activeLights.forEach((light) => { activeLights.forEach(light => {
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({ "bri": lightsBrightness }), data: JSON.stringify({ bri: lightsBrightness }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
}); });
@ -164,19 +166,20 @@ export default Component.extend({
} }
}, },
onBrightnessChanged: observer('lightsBrightness', function () { onBrightnessChanged: observer('lightsBrightness', function() {
let activeLights = this.get('activeLights').length; let activeLights = this.get('activeLights').length;
throttle(this, this.changeLightsBrightness, activeLights * 69); throttle(this, this.changeLightsBrightness, activeLights * 69, false);
}), }),
// sync the current light settings to the newly added light // sync the current light settings to the newly added light
onaActiveLightsChange: observer('syncLight', function () { onaActiveLightsChange: observer('syncLight', function() {
let options = { let options = {
on: this.get('lightsOn'), on: this.get('lightsOn'),
bri: this.get('lightsBrightness'), bri: this.get('lightsBrightness'),
effect: this.get('colorLoopOn') ? 'colorloop' : 'none' effect: this.get('colorLoopOn') ? 'colorloop' : 'none'
}, rgb = this.get('rgb'), },
rgb = this.get('rgb'),
syncLight = this.get('syncLight'); syncLight = this.get('syncLight');
if (rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) { if (rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
@ -192,6 +195,10 @@ export default Component.extend({
}); });
}), }),
didInsertElement() {
this.onActiveLightsChange();
},
// **************** STROBE LIGHT START **************** // **************** STROBE LIGHT START ****************
strobeOn: false, strobeOn: false,
@ -199,7 +206,7 @@ export default Component.extend({
preStrobeOnLightsDataCache: null, preStrobeOnLightsDataCache: null,
nextLightIdx: 0, nextLightIdx: 0,
onStrobeOnChange: observer('strobeOn', function () { onStrobeOnChange: observer('strobeOn', function() {
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
strobeOn = this.get('strobeOn'); strobeOn = this.get('strobeOn');
@ -222,8 +229,10 @@ export default Component.extend({
} }
this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 500)); this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 500));
} else { // revert the light system to pre-strobe } else {
let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = (lightIndex) => { // revert the light system to pre-strobe
let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'),
updateLight = lightIndex => {
$.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', { $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', {
data: JSON.stringify({ data: JSON.stringify({
on: preStrobeOnLightsDataCache[lightIndex].state.on, on: preStrobeOnLightsDataCache[lightIndex].state.on,
@ -263,7 +272,7 @@ export default Component.extend({
type: 'PUT' type: 'PUT'
}); });
$.ajax(this.get('apiURL') + '/lights/' + nextStrobeLight + '/state', { $.ajax(this.get('apiURL') + '/lights/' + nextStrobeLight + '/state', {
data: JSON.stringify({ 'on': false, 'transitiontime': 0 }), data: JSON.stringify({ on: false, transitiontime: 0 }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
}); });
@ -271,11 +280,11 @@ export default Component.extend({
this.set('nextLightIdx', ++nextLightIdx); this.set('nextLightIdx', ++nextLightIdx);
}, },
strobeOnTxt: computed('strobeOn', function () { strobeOnTxt: computed('strobeOn', function() {
return this.get('strobeOn') ? 'On' : 'Off'; return this.get('strobeOn') ? 'On' : 'Off';
}), }),
dimmerOnClass: computed('dimmerOn', function () { dimmerOnClass: computed('dimmerOn', function() {
return this.get('dimmerOn') ? 'dimmerOn' : null; return this.get('dimmerOn') ? 'dimmerOn' : null;
}), }),
@ -285,9 +294,11 @@ export default Component.extend({
}, },
randomizeHues() { randomizeHues() {
$('.dice').velocity({ scale: 1.10 }, 100).velocity({ scale: 1 }, 100); $('.dice')
.velocity({ scale: 1.1 }, 100)
.velocity({ scale: 1 }, 100);
this.get('activeLights').forEach((light) => { this.get('activeLights').forEach(light => {
let options = { hue: Math.floor(Math.random() * 65535) }; let options = { hue: Math.floor(Math.random() * 65535) };
if (this.get('lightsData')[light].state.on === false) { if (this.get('lightsData')[light].state.on === false) {
@ -300,6 +311,10 @@ export default Component.extend({
type: 'PUT' type: 'PUT'
}); });
}); });
later(() => {
this.onActiveLightsChange();
}, 1000);
} }
} }
}); });

2
web/app/pods/components/music-tab/mixins/helpers.js
View file

@ -349,7 +349,9 @@ export default Mixin.create({
this.set('blackoutMode', false); this.set('blackoutMode', false);
} }
if (!isNone(value)) {
this.get('storage').set('huegasm.' + option, value); this.get('storage').set('huegasm.' + option, value);
}
}), }),
onRepeatChange: on( onRepeatChange: on(

12
web/yarn.lock
View file

@ -3,8 +3,8 @@
"@ember/test-helpers@^0.7.1": "@ember/test-helpers@^0.7.1":
version "0.7.1" version "0.7.2"
resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-0.7.1.tgz#14ba828ebc5b7b0e6eb7889352cb40af0c995349" resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-0.7.2.tgz#ca33170a5ce82bc921d7e84e4132aee425b7e67a"
dependencies: dependencies:
broccoli-funnel "^2.0.1" broccoli-funnel "^2.0.1"
ember-cli-babel "^6.8.1" ember-cli-babel "^6.8.1"
@ -2251,8 +2251,8 @@ ember-basic-dropdown@^0.34.0:
ember-wormhole "^0.5.2" ember-wormhole "^0.5.2"
ember-cli-app-version@^3.0.0: ember-cli-app-version@^3.0.0:
version "3.1.1" version "3.1.3"
resolved "https://registry.yarnpkg.com/ember-cli-app-version/-/ember-cli-app-version-3.1.1.tgz#6be6a998b4887f79c7280729b7c77dc7821f18a7" resolved "https://registry.yarnpkg.com/ember-cli-app-version/-/ember-cli-app-version-3.1.3.tgz#26d25f5e653ff0106f0b39da6d75518ba8ed282d"
dependencies: dependencies:
ember-cli-babel "^6.8.0" ember-cli-babel "^6.8.0"
git-repo-version "^1.0.0" git-repo-version "^1.0.0"
@ -5120,8 +5120,8 @@ micromatch@^2.1.5, micromatch@^2.3.7:
regex-cache "^0.4.2" regex-cache "^0.4.2"
"mime-db@>= 1.30.0 < 2": "mime-db@>= 1.30.0 < 2":
version "1.31.0" version "1.32.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.31.0.tgz#a49cd8f3ebf3ed1a482b60561d9105ad40ca74cb" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.32.0.tgz#485b3848b01a3cda5f968b4882c0771e58e09414"
mime-db@~1.30.0: mime-db@~1.30.0:
version "1.30.0" version "1.30.0"