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

polish for the new controls

Browse source
This commit is contained in:
lone-cloud 2015-11-03 13:22:41 -08:00
parent 3892a1b110
commit bb046134a1
9 changed files with 102 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/pods/components/hue-controls/component.js
View file

@ -31,10 +31,13 @@ export default Em.Component.extend({
location.reload(); location.reload();
}, },
startIntro(){ startIntro(){
var intro = introJs(), var introJs = introJs,
intro = introJs(),
playerBottom = Em.$('#playerBottom'), playerBottom = Em.$('#playerBottom'),
beatDetectionAreaArrowIcon = Em.$('#beatDetectionAreaArrowIcon'); beatDetectionAreaArrowIcon = Em.$('#beatDetectionAreaArrowIcon');
this.set('dimmerOn', false);
intro.setOptions({ intro.setOptions({
steps: [ steps: [
{ {
@ -49,7 +52,7 @@ export default Em.Component.extend({
}, },
{ {
element: '#usingMicAudioTooltip', element: '#usingMicAudioTooltip',
intro: 'This icon will toggle microphone mode - a mode in which the application will listen to sound through your mic.<br>' + intro: 'This icon will toggle microphone mode in which the application will listen to sound through your mic.<br>' +
'Note that this is a highly experimental feature that will require your authorization to be able to listen to the microphone. Also note that the beat detection will not be nearly as accurate in this mode.' 'Note that this is a highly experimental feature that will require your authorization to be able to listen to the microphone. Also note that the beat detection will not be nearly as accurate in this mode.'
}, },
{ {
@ -58,17 +61,16 @@ export default Em.Component.extend({
}, },
{ {
element: '#beatOptionRow', element: '#beatOptionRow',
intro: 'These are the beat detection settings:<br>' + intro: 'These are the settings for the music tab:<br>' +
'<b>Beat Threshold</b> - The minimum sound intensity for the beat to register<br>' + '<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' +
'<b>Beat Interval</b> - The minimum amount of time between each registered beat <br>' + '<b>Flashing Transitions</b> - Quickly flash the lights on beat<br>' +
'<b>Frequency Range</b> - The frequency range of the sound to listen on for the beat<br>' + '<b>Colorloop Mode</b> - Slowly cycle the lights through all the colors while the music is playing<br>' +
'<b>Transition Time</b> - The time it takes for a light to change color or brightness<br><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>',
'<i><b>TIP</b>: Beat detection 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' position: 'top'
}, },
{ {
element: '#beatContainer', element: '#beatContainer',
intro: 'An interactive speaker that will bump when a beat is registered. Switch over to the <b>Debug View</b> to see the intesity of all the registered and unregistered beats.<br><br>' + intro: 'An interactive speaker that will bump when a beat is registered. <br><br>' +
'<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>', '<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>',
position: 'top' position: 'top'
}, },

4
app/pods/components/hue-controls/template.hbs
View file

@ -28,7 +28,7 @@
</div> </div>
</div> </div>
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected dimmerOn=dimmerOn}} {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage action="startIntro"}} {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
{{/if}} {{/if}}

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

@ -101,7 +101,10 @@ export default Em.Component.extend({
this.set('colorLoopOn', newValue); this.set('colorLoopOn', newValue);
}.observes('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'), }.observes('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'),
onColorLoopOnChange: function(){ onColorLoopOnChange: function(){
var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), colorLoopsOn = this.get('colorLoopOn'), self = this; var lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'),
colorLoopsOn = this.get('colorLoopOn'),
effect = colorLoopsOn ? 'colorloop' : 'none';
var colorLoopsOnSystem = activeLights.some(function(light) { var colorLoopsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.effect === 'colorloop'; return lightsData[light].state.effect === 'colorloop';
@ -109,12 +112,14 @@ export default Em.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(colorLoopsOn !== colorLoopsOnSystem){ if(colorLoopsOn !== colorLoopsOnSystem){
activeLights.forEach(function (light) { activeLights.forEach((light)=>{
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', { if(this.get('lightsData')[light].state.effect !== effect) {
data: JSON.stringify({"effect": colorLoopsOn ? 'colorloop' : 'none'}), Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
contentType: 'application/json', data: JSON.stringify({'effect': effect }),
type: 'PUT' contentType: 'application/json',
}); type: 'PUT'
});
}
}); });
} }
}.observes('colorLoopOn'), }.observes('colorLoopOn'),

43
app/pods/components/music-tab/component.js
View file

@ -96,7 +96,9 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
if(!Em.isNone(audioStream)){ if(!Em.isNone(audioStream)){
var tracks = audioStream.getVideoTracks(); var tracks = audioStream.getVideoTracks();
if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop(); if (tracks && tracks[0] && tracks[0].stop) {
tracks[0].stop();
}
if (audioStream.stop) { if (audioStream.stop) {
// deprecated, may be removed in future // deprecated, may be removed in future
@ -459,14 +461,16 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
}, },
saveSongBeatPreferences() { saveSongBeatPreferences() {
var song = this.get('playQueue')[this.get('playQueuePointer')], var song = this.get('playQueue')[this.get('playQueuePointer')];
title = Em.isEmpty(song.artist) ? song.fileName : song.artist + '-' + song.title, if(song) {
songBeatPreferences = this.get('songBeatPreferences'); var title = Em.isEmpty(song.artist) ? song.fileName : song.artist + '-' + song.title,
songBeatPreferences = this.get('songBeatPreferences');
songBeatPreferences[title] = {threshold: this.get('threshold')}; songBeatPreferences[title] = {threshold: this.get('threshold')};
this.set('usingBeatPreferences', true); this.set('usingBeatPreferences', true);
this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences); this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences);
}
}, },
loadSongBeatPreferences() { loadSongBeatPreferences() {
@ -584,17 +588,16 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
this.set('dragLeaveTimeoutHandle', setTimeout(function(){ self.set('dragging', false); }, 500)); this.set('dragLeaveTimeoutHandle', setTimeout(function(){ self.set('dragging', false); }, 500));
}, },
simulateKick(mag, ratioKick) { simulateKick(mag, ratioKickMag) {
console.log(mag + ',' + ratioKick); console.log(mag + ',' + ratioKickMag);
var activeLights = this.get('activeLights'), var activeLights = this.get('activeLights'),
lightsData = this.get('lightsData'), lightsData = this.get('lightsData'),
color = null, color = null,
beatInterval = 1,
stimulateLight = (light, brightness, hue) => { stimulateLight = (light, brightness, hue) => {
var options = {'bri': brightness}; var options = {'bri': brightness};
if(this.get('blinkingTransitions')) { if(this.get('flashingTransitions')) {
options['transitiontime'] = 0; options['transitiontime'] = 0;
} else { } else {
options['transitiontime'] = 1; options['transitiontime'] = 1;
@ -618,6 +621,7 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
if(activeLights.length > 0){ if(activeLights.length > 0){
var lastLightBopIndex = this.get('lastLightBopIndex'), var lastLightBopIndex = this.get('lastLightBopIndex'),
lightBopIndex, lightBopIndex,
brightnessOnBeat = 254,
light; light;
lightBopIndex = Math.floor(Math.random() * activeLights.length); lightBopIndex = Math.floor(Math.random() * activeLights.length);
@ -636,17 +640,20 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
color = Math.floor(Math.random() * 65535); color = Math.floor(Math.random() * 65535);
} }
stimulateLight(light, 254, color); if(ratioKickMag) {
brightnessOnBeat /= 2;
}
stimulateLight(light, brightnessOnBeat, color);
setTimeout(stimulateLight, 100, light, 1); setTimeout(stimulateLight, 100, light, 1);
} }
this.set('paused', true); this.set('paused', true);
setTimeout(() => { setTimeout(() => {
this.set('paused', false); this.set('paused', false);
}, beatInterval * 100); }, 100);
//work the music beat area //work the music beat area - simulate the speaker vibration by running a CSS animation on it
// simulate the speaker vibration by running a CSS animation on it
Em.$('#beatSpeakerCenterOuter').removeClass('vibrateOuter').prop('offsetWidth', Em.$('#beatSpeakerCenterOuter').prop('offsetWidth')).addClass('vibrateOuter'); Em.$('#beatSpeakerCenterOuter').removeClass('vibrateOuter').prop('offsetWidth', Em.$('#beatSpeakerCenterOuter').prop('offsetWidth')).addClass('vibrateOuter');
Em.$('#beatSpeakerCenterInner').removeClass('vibrateInner').prop('offsetWidth', Em.$('#beatSpeakerCenterInner').prop('offsetWidth')).addClass('vibrateInner'); Em.$('#beatSpeakerCenterInner').removeClass('vibrateInner').prop('offsetWidth', Em.$('#beatSpeakerCenterInner').prop('offsetWidth')).addClass('vibrateInner');
}, },
@ -662,9 +669,9 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
storage = this.get('storage'), storage = this.get('storage'),
kick = dancer.createKick({ kick = dancer.createKick({
threshold: this.get('threshold'), threshold: this.get('threshold'),
onKick: (mag, ratioKick) => { onKick: (mag, ratioKickMag) => {
if (this.get('paused') === false) { if (this.get('paused') === false) {
this.simulateKick(mag, ratioKick); this.simulateKick(mag, ratioKickMag);
} }
} }
}); });
@ -680,7 +687,7 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
this.set('usingMicSupported', false); this.set('usingMicSupported', false);
} }
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'micBoost', 'blinkingTransitions'].forEach((item)=>{ ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'micBoost', 'flashingTransitions'].forEach((item)=>{
if (!Em.isNone(storage.get('huegasm.' + item))) { if (!Em.isNone(storage.get('huegasm.' + item))) {
var itemVal = storage.get('huegasm.' + item); var itemVal = storage.get('huegasm.' + item);

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

@ -11,15 +11,25 @@ export default Em.Mixin.create({
beatOptions: { beatOptions: {
threshold: { threshold: {
range: {min: 0, max: 0.6}, range: {min: 0, max: 0.5},
step: 0.01, step: 0.01,
defaultValue: 0.3, defaultValue: 0.3,
pips: { pips: {
mode: 'positions', mode: 'values',
values: [0,20,40,60,80,100], values: [0, 0.25, 0.5],
density: 3, density: 10,
format: { format: {
to: function ( value ) {return value;}, to: function ( value ) {
if(value === 0) {
value = 'More';
} else if(value === 0.25) {
value = 'Neutral';
} else {
value = 'Less';
}
return value;
},
from: function ( value ) { return value; } from: function ( value ) { return value; }
} }
} }
@ -43,7 +53,7 @@ export default Em.Mixin.create({
threshold: 0.3, threshold: 0.3,
micBoost: 5, micBoost: 5,
oldThreshold: null, oldThreshold: null,
blinkingTransitions: false, flashingTransitions: false,
playQueuePointer: -1, playQueuePointer: -1,
playQueue: Em.A(), playQueue: Em.A(),
@ -221,14 +231,10 @@ export default Em.Mixin.create({
}.property('volumeMuted', 'volume'), }.property('volumeMuted', 'volume'),
onColorloopModeChange: function(){ onColorloopModeChange: function(){
this.get('activeLights').forEach((light) => { var colorLoop = ((this.get('playing') || this.get('usingMicAudio')) && this.get('colorloopMode')) ? true : false;
Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({'effect': (this.get('playing') && this.get('colorloopMode')) ? 'colorloop' : 'none'}), this.set('colorLoopOn', colorLoop);
contentType: 'application/json', }.observes('colorloopMode', 'usingMicAudio', 'playing'),
type: 'PUT'
});
});
}.observes('colorloopMode'),
onOptionChange: function(self, option){ onOptionChange: function(self, option){
option = option.replace('.[]', ''); option = option.replace('.[]', '');

15
app/pods/components/music-tab/template.hbs
View file

@ -142,14 +142,14 @@
<div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}"> <div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}">
<div id="beatArea" class="col-sm-7 col-xs-12"> <div id="beatArea" class="col-sm-7 col-xs-12">
{{#if usingBeatPreferences}} {{#if usingBeatPreferences}}
<span data-toggle="tooltip" data-placement="bottom" data-title="Using your saved beat preferences from the last time you listened to this song" class="bootstrapTooltip savedStarTooltip"> <span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrapTooltip savedStarTooltip">
{{paper-icon id="saveBeatPreferencesStar" icon="star"}} {{paper-icon id="saveBeatPreferencesStar" icon="star"}}
</span> </span>
{{/if}} {{/if}}
<div class="row" id="beatOptionRow"> <div class="row" id="beatOptionRow">
<div class="beatOption {{if usingMicAudio "col-xs-4" "col-xs-8"}}"> <div class="beatOption {{if usingMicAudio "col-xs-4" "col-xs-8"}}">
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The minimum sound intensity for the beat to register" class="optionDescription bootstrapTooltip">Sensitivity</span> <span data-toggle="tooltip" data-placement="bottom auto" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrapTooltip">Sensitivity</span>
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
</div> </div>
@ -160,9 +160,14 @@
</div> </div>
{{/if}} {{/if}}
<div class="beatOption col-xs-4 text-left"> <div id="lightOption" class="beatOption col-xs-4">
{{#paper-checkbox checked=blinkingTransitions}}Blinking transitions{{/paper-checkbox}} <span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrapTooltip">
{{#paper-checkbox checked=colorloopMode}}Colorloop Mode{{/paper-checkbox}} {{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
</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">
{{#paper-checkbox checked=colorloopMode}}Colorloop Mode{{/paper-checkbox}}
</span>
</div> </div>
</div> </div>

30
app/styles/app.scss
View file

@ -56,7 +56,6 @@ md-checkbox.md-default-theme .md-icon {
md-checkbox.md-default-theme.md-checked .md-icon { md-checkbox.md-default-theme.md-checked .md-icon {
background: $secondaryThemeColor; background: $secondaryThemeColor;
} }
.text-left { .text-left {
@ -67,10 +66,6 @@ md-checkbox.md-default-theme.md-checked .md-icon {
background: darken(#3f51b5, 10%) !important; background: darken(#3f51b5, 10%) !important;
} }
// Ember paper hax for FF
md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
transform: none !important;
}
.md-button { .md-button {
flex-direction: unset; flex-direction: unset;
span { span {
@ -489,9 +484,20 @@ md-toolbar {
margin: 0; margin: 0;
} }
#beatOptionRow {
height: 250px;
}
#lightOption {
text-align: left !important;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#musicTab{ #musicTab{
padding: 0; padding: 0;
margin-bottom: $footerHeight + 50px; margin-bottom: $footerHeight + 30px;
} }
#slideToggle { #slideToggle {
@ -661,6 +667,9 @@ md-switch.md-default-theme.md-checked .md-thumb {
#seekSlider { #seekSlider {
margin-bottom: 15px; margin-bottom: 15px;
} }
.beatOption {
text-align: center !important;
}
} }
#seekSlider:hover { #seekSlider:hover {
@ -804,7 +813,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
border: 1px solid #797979; border: 1px solid #797979;
} }
.noUi-vertical { .noUi-vertical {
height: 170px; height: 200px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -831,11 +840,14 @@ md-switch.md-default-theme.md-checked .md-thumb {
margin: 0; margin: 0;
} }
.optionDescription { .optionDescription {
font-size: 13px; font-size: 16px;
} }
button { button {
margin-top: 0; margin-top: 0;
} }
.tooltip {
margin: 0;
}
} }
#playerBottom { #playerBottom {
@ -925,7 +937,7 @@ body.dimmerOn {
background: darken($dimmerOnButtonColor, 5%); background: darken($dimmerOnButtonColor, 5%);
} }
#extraOptionsMenu { #extraOptionsMenu {
opacity: 0.7; opacity: 0.8;
} }
#extraOptionsMenu:hover { #extraOptionsMenu:hover {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);

2
package.json
View file

@ -41,7 +41,7 @@
"ember-export-application-global": "^1.0.3", "ember-export-application-global": "^1.0.3",
"ember-modal-dialog": "0.8.2", "ember-modal-dialog": "0.8.2",
"ember-notify": "^4.0.1", "ember-notify": "^4.0.1",
"ember-paper": "0.2.8", "ember-paper": "https://github.com/miguelcobain/ember-paper.git",
"ember-truth-helpers": "1.2.0" "ember-truth-helpers": "1.2.0"
} }
} }

BIN
public/assets/images/intro.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 103 KiB