semi done the new "ambience" mode
This commit is contained in:
parent
789d3a352c
commit
8f65e0e7c1
5 changed files with 66 additions and 25 deletions
|
|
@ -67,8 +67,8 @@ export default Em.Component.extend({
|
|||
intro: 'These are the settings for the music tab:<br>' +
|
||||
'<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' +
|
||||
'<b>Flashing Transitions</b> - Quickly flash the lights on beat<br>' +
|
||||
'<b>Colorloop Mode</b> - Slowly cycle the lights through all the colors while the music is playing<br>' +
|
||||
'<b>Ambience Mode</b> - Periodically turn the lights on and off to create a cool looking ambience<br>' +
|
||||
'<b>Colorloop</b> - Slowly cycle the lights through all the colors while the music is playing<br>' +
|
||||
'<b>Ambience</b> - Periodically turn the lights on and off to create a cool looking ambience<br>' +
|
||||
'<i><b>TIP</b>: Your sensitivity settings are saved per song as indicated by the red star icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,19 +61,19 @@ export default Em.Component.extend({
|
|||
rgb: [255, 255, 255],
|
||||
rgbPreview: function() {
|
||||
var rgb = this.get('rgb'),
|
||||
self = this,
|
||||
xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
|
||||
|
||||
this.set('colorLoopOn', false);
|
||||
|
||||
this.get('activeLights').forEach(function (light) {
|
||||
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
|
||||
this.get('activeLights').forEach((light) => {
|
||||
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({"xy": xy}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
});
|
||||
|
||||
this.set('colorLoopOn', false);
|
||||
Em.$('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
|
||||
}.observes('rgb'),
|
||||
|
||||
|
|
@ -82,24 +82,12 @@ export default Em.Component.extend({
|
|||
return null;
|
||||
}
|
||||
|
||||
return "toggleColorpicker";
|
||||
return 'toggleColorpicker';
|
||||
}.property('trial'),
|
||||
|
||||
// COLOR LOOP related stuff
|
||||
colorLoopOn: false,
|
||||
colorLoopDependenciesChanged: function(){
|
||||
var lightsData = this.get('lightsData'), newValue;
|
||||
|
||||
if(this.get('strobeOn')){
|
||||
newValue = false;
|
||||
} else {
|
||||
newValue = this.get('activeLights').some(function(light) {
|
||||
return lightsData[light].state.effect === 'colorloop';
|
||||
});
|
||||
}
|
||||
|
||||
this.set('colorLoopOn', newValue);
|
||||
}.observes('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'),
|
||||
onColorLoopOnChange: function(){
|
||||
var lightsData = this.get('lightsData'),
|
||||
activeLights = this.get('activeLights'),
|
||||
|
|
@ -249,6 +237,7 @@ export default Em.Component.extend({
|
|||
}
|
||||
}
|
||||
|
||||
setTimeout(()=>{this.onColorLoopOnChange();}, 2000);
|
||||
clearInterval(this.get('strobeOnInervalHandle'));
|
||||
}
|
||||
}.observes('strobeOn'),
|
||||
|
|
@ -258,7 +247,7 @@ export default Em.Component.extend({
|
|||
turnOnOptions = {'on': true, 'transitiontime': 0, 'alert': 'select'};
|
||||
|
||||
// random light if in cololoop mode
|
||||
if(this.get('colorloopMode')) {
|
||||
if(this.get('colorLoopOn')) {
|
||||
turnOnOptions.hue = Math.floor(Math.random() * 65535);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -503,12 +503,64 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
onAmbienceModeChange: function() {
|
||||
var activeLights = this.get('activeLights'),
|
||||
workedLights = [],
|
||||
lightOff = (light)=>{
|
||||
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({'on': false, 'transitiontime': 20}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
};
|
||||
|
||||
if(this.get('ambienceMode') && this.get('playing')) {
|
||||
activeLights.forEach((light)=>{
|
||||
lightOff(light);
|
||||
});
|
||||
|
||||
this.set('ambienceModeHandle', setInterval(()=> {
|
||||
//TODO
|
||||
console.log('DOING AMBIENCE STUFF');
|
||||
var lights = [],
|
||||
transitionTime = Math.floor(Math.random()*30 + 4);
|
||||
|
||||
for(let i=0; i < activeLights.length/2; i++){
|
||||
let l = activeLights[Math.floor(Math.random()*activeLights.length)];
|
||||
if(!lights.contains(l) && !workedLights.contains(l)){
|
||||
lights.push(l);
|
||||
}
|
||||
}
|
||||
|
||||
lights.forEach((light)=>{
|
||||
workedLights.push(light);
|
||||
|
||||
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({'on': true, 'hue': Math.floor(Math.random()*65535), 'bri': Math.floor(Math.random()*200) + 1, 'transitiontime': transitionTime}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
|
||||
setTimeout(()=>{
|
||||
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({'hue': Math.floor(Math.random()*65535), 'bri': Math.floor(Math.random()*204) + 51, 'transitiontime': transitionTime}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
|
||||
setTimeout(()=>{
|
||||
lightOff(light);
|
||||
workedLights.removeObject(light);
|
||||
}, transitionTime * 100);
|
||||
}, transitionTime*100);
|
||||
});
|
||||
}, 2000));
|
||||
} else if(this.get('ambienceModeHandle')) {
|
||||
activeLights.forEach((light)=>{
|
||||
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({'on': true}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
});
|
||||
|
||||
clearInterval(this.get('ambienceModeHandle'));
|
||||
this.set('ambienceModeHandle', null);
|
||||
}
|
||||
|
|
@ -638,7 +690,7 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
timeToBriOff = 100;
|
||||
|
||||
if(activeLights.length > 0){
|
||||
if(activeLights.length > 0 && !this.get('ambienceMode')){
|
||||
var lastLightBopIndex = this.get('lastLightBopIndex'),
|
||||
lightBopIndex,
|
||||
brightnessOnBeat = 254,
|
||||
|
|
|
|||
|
|
@ -167,11 +167,11 @@
|
|||
</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors while the music is playing" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=colorloopMode}}Colorloop Mode{{/paper-checkbox}}
|
||||
{{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}}
|
||||
</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=ambienceMode}}Ambience Mode{{/paper-checkbox}}
|
||||
{{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1091,7 +1091,7 @@ div.ember-modal-dialog {
|
|||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 3px 15px;
|
||||
position: absolute;
|
||||
bottom: -37px;
|
||||
bottom: -39px;
|
||||
right: 17px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue