diff --git a/mobile/app/pods/components/hue-controls/component.js b/mobile/app/pods/components/hue-controls/component.js index ced93f2..38fc013 100644 --- a/mobile/app/pods/components/hue-controls/component.js +++ b/mobile/app/pods/components/hue-controls/component.js @@ -189,6 +189,7 @@ export default Component.extend({ intro: 'These are the settings for the music tab:
' + 'Sensitivity - The sensitivity of the beat detector ( more sensitivity results in more registered beats )
' + 'Hue Range - The hue range that the lights may change to on beat.
' + + 'Brightness Range - The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights.
' + 'Flashing Transitions - Quickly flash the lights on beat
' + 'Colorloop - Slowly cycle the lights through all the colors while the music is playing
' + 'TIP: 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.', diff --git a/mobile/app/pods/components/music-tab/component.js b/mobile/app/pods/components/music-tab/component.js index 91b8953..8de110c 100644 --- a/mobile/app/pods/components/music-tab/component.js +++ b/mobile/app/pods/components/music-tab/component.js @@ -106,6 +106,7 @@ export default Component.extend(helperMixin, visualizerMixin, { lightsData = this.get('lightsData'), color = null, transitiontime = this.get('flashingTransitions'), + brightnessRange = this.get('brightnessRange'), stimulateLight = (light, brightness, hue) => { let options = {'bri': brightness}; @@ -134,7 +135,6 @@ export default Component.extend(helperMixin, visualizerMixin, { if(activeLights.length > 0){ let lastLightBopIndex = this.get('lastLightBopIndex'), lightBopIndex, - brightnessOnBeat = 254, light; lightBopIndex = Math.floor(Math.random() * activeLights.length); @@ -159,8 +159,8 @@ export default Component.extend(helperMixin, visualizerMixin, { timeToBriOff = 80; } - stimulateLight(light, brightnessOnBeat, color); - later(this, stimulateLight, light, 1, timeToBriOff); + stimulateLight(light, brightnessRange[1], color); + later(this, stimulateLight, light, brightnessRange[0], timeToBriOff); } this.set('paused', true); @@ -198,7 +198,7 @@ export default Component.extend(helperMixin, visualizerMixin, { kick: kick }); - ['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange'].forEach((item)=>{ + ['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item)=>{ if (!isNone(storage.get('huegasm.' + item))) { let itemVal = storage.get('huegasm.' + item); @@ -444,12 +444,32 @@ export default Component.extend(helperMixin, visualizerMixin, { play(replayPause) { let dancer = this.get('dancer'), playQueuePointer = this.get('playQueuePointer'), - playing = this.get('playing'); + playing = this.get('playing'), + lightsData = this.get('lightsData'); if(playQueuePointer !== -1 ) { if (playing) { dancer.pause(); + let preMusicLightsDataCache = this.get('preMusicLightsDataCache'), + updateLight = (lightIndex)=> { + $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', { + data: JSON.stringify({ + 'on': preMusicLightsDataCache[lightIndex].state.on, + 'hue': preMusicLightsDataCache[lightIndex].state.hue, + 'bri': preMusicLightsDataCache[lightIndex].state.bri + }), + contentType: 'application/json', + type: 'PUT' + }); + }; + + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + later(this, updateLight, key, 1000); + } + } + if(!replayPause){ this.set('timeElapsed', Math.floor(dancer.getTime())); } @@ -464,6 +484,7 @@ export default Component.extend(helperMixin, visualizerMixin, { $(window).trigger('resize'); // workaround to redraw the canvas for the vitualizer + this.set('preMusicLightsDataCache', lightsData); dancer.play(); } @@ -574,6 +595,9 @@ export default Component.extend(helperMixin, visualizerMixin, { thresholdChanged(value) { this.changePlayerControl('threshold', value, true); }, + brightnessRangeChanged(value) { + this.changePlayerControl('brightnessRange', value); + }, hueRangeChanged(value) { this.changePlayerControl('hueRange', value); }, diff --git a/mobile/app/pods/components/music-tab/mixins/helpers.js b/mobile/app/pods/components/music-tab/mixins/helpers.js index d6edf69..c7bd75e 100644 --- a/mobile/app/pods/components/music-tab/mixins/helpers.js +++ b/mobile/app/pods/components/music-tab/mixins/helpers.js @@ -68,11 +68,26 @@ export default Mixin.create({ from: function ( value ) { return value; } } } + }, + brightnessRange: { + range: {min: 1, max: 254}, + step: 1, + defaultValue: 0, + pips: { + mode: 'values', + values: [1, 50, 100, 150, 200, 254], + density: 10, + format: { + to: function ( value ) { return value; }, + from: function ( value ) { return value; } + } + } } }, threshold: 0.3, hueRange: [0, 65535], + brightnessRange: [1, 254], oldThreshold: null, playQueuePointer: -1, @@ -278,7 +293,7 @@ export default Mixin.create({ this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode')); }), - onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', 'ambienceMode', function(self, option){ + onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){ option = option.replace('.[]', ''); let value = this.get(option); diff --git a/mobile/app/pods/components/music-tab/template.hbs b/mobile/app/pods/components/music-tab/template.hbs index 2221c37..e5f199d 100644 --- a/mobile/app/pods/components/music-tab/template.hbs +++ b/mobile/app/pods/components/music-tab/template.hbs @@ -127,7 +127,7 @@ {{/if}}
-
+
Hue Range @@ -135,13 +135,21 @@ {{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
-
+
+ + Brightness Range + + + {{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}} +
+ +
Sensitivity - {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}} -
+ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}} +
{{#if usingMicAudio}}
diff --git a/mobile/app/styles/fancy-speaker.scss b/mobile/app/styles/fancy-speaker.scss index 879fa8b..9809c43 100644 --- a/mobile/app/styles/fancy-speaker.scss +++ b/mobile/app/styles/fancy-speaker.scss @@ -55,8 +55,6 @@ $bezelsize: 240px; position: relative; background-color: #A8A8A8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8); - top: 50%; - transform: translateY(-50%); } .rivet1 { @extend %rivet; diff --git a/mobile/app/styles/huegasm-variables.scss b/mobile/app/styles/huegasm-variables.scss index 879a1ae..914abb3 100644 --- a/mobile/app/styles/huegasm-variables.scss +++ b/mobile/app/styles/huegasm-variables.scss @@ -1,6 +1,5 @@ $playerHeight: 400px; $playerDefaultIconColor: #BBBBBB; -$playerBottomHeight: 255px; $secondaryThemeColor: #F12B24; $glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF; $dimmerOnButtonColor: #404040; diff --git a/mobile/app/styles/music-tab.scss b/mobile/app/styles/music-tab.scss index dc50a9f..935cc36 100644 --- a/mobile/app/styles/music-tab.scss +++ b/mobile/app/styles/music-tab.scss @@ -8,12 +8,12 @@ } #slide-toggle { - font-size: 26px; + font-size: 22px; color: $playerDefaultIconColor; background: #730B07; div .paper-icon { color: inherit !important; - font-size: 26px; + font-size: 24px; font-weight: bold; } } @@ -230,7 +230,7 @@ #beat-area { position: relative; padding: 0; - margin-bottom: 10px; + margin-bottom: 20px; } #beat-option-button-group { @@ -245,6 +245,9 @@ } .option-description { font-size: 18px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } button { margin-top: 0; @@ -264,9 +267,8 @@ } #beat-container { - padding: 0; - height: $playerBottomHeight; - margin: 0; + display: flex; + margin-bottom: 10px; } #add-music-choices { @@ -352,3 +354,10 @@ #soundcloud-tutorial { width: 100%; } + +@media(max-width: 500px) { + #sensitivity-settings .noUi-value-vertical { + display: none; +} +} + diff --git a/mobile/ember-cordova/cordova/config.xml b/mobile/ember-cordova/cordova/config.xml index 343739b..9b7f6cb 100644 --- a/mobile/ember-cordova/cordova/config.xml +++ b/mobile/ember-cordova/cordova/config.xml @@ -1,5 +1,5 @@ - + Huegasm diff --git a/mobile/package.json b/mobile/package.json index b2b9bb9..b587a28 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -22,7 +22,7 @@ "devDependencies": { "broccoli-asset-rev": "^2.2.0", "ember-ajax": "^2.0.1", - "ember-cli": "^2.8.0", + "ember-cli": "^2.11.0", "ember-cli-app-version": "^2.0.0", "ember-cli-babel": "^5.1.5", "ember-cli-dependency-checker": "^1.2.0", diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js index e19041e..ed5b68a 100644 --- a/web/app/pods/components/hue-controls/component.js +++ b/web/app/pods/components/hue-controls/component.js @@ -168,6 +168,7 @@ export default Component.extend({ intro: 'These are the settings for the music tab:
' + 'Sensitivity - The sensitivity of the beat detector ( more sensitivity results in more registered beats )
' + 'Hue Range - The hue range that the lights may change to on beat.
' + + 'Brightness Range - The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights.
' + 'Flashing Transitions - Quickly flash the lights on beat
' + 'Colorloop - Slowly cycle the lights through all the colors while the music is playing
' + 'TIP: 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.', diff --git a/web/app/pods/components/music-tab/component.js b/web/app/pods/components/music-tab/component.js index 2ecc914..715bfec 100644 --- a/web/app/pods/components/music-tab/component.js +++ b/web/app/pods/components/music-tab/component.js @@ -119,6 +119,7 @@ export default Component.extend(helperMixin, visualizerMixin, { let activeLights = this.get('activeLights'), lightsData = this.get('lightsData'), color = null, + transitiontime = this.get('flashingTransitions'), stimulateLight = (light, brightness, hue) => { let options = {'bri': brightness}; @@ -145,10 +146,10 @@ export default Component.extend(helperMixin, visualizerMixin, { }, timeToBriOff = 100; - if(activeLights.length > 0 && !this.get('ambienceMode')){ + if(activeLights.length > 0){ let lastLightBopIndex = this.get('lastLightBopIndex'), lightBopIndex, - brightnessOnBeat = 254, + brightnessRange = this.get('brightnessRange'), light; lightBopIndex = Math.floor(Math.random() * activeLights.length); @@ -173,8 +174,8 @@ export default Component.extend(helperMixin, visualizerMixin, { timeToBriOff = 80; } - stimulateLight(light, brightnessOnBeat, color); - later(this, stimulateLight, light, 1, timeToBriOff); + stimulateLight(light, brightnessRange[1], color); + later(this, stimulateLight, light, brightnessRange[0], timeToBriOff); } this.set('paused', true); @@ -212,7 +213,7 @@ export default Component.extend(helperMixin, visualizerMixin, { kick: kick }); - ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'ambienceMode', 'hueRange'].forEach((item)=>{ + ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item)=>{ if (!isNone(storage.get('huegasm.' + item))) { let itemVal = storage.get('huegasm.' + item); @@ -477,12 +478,32 @@ export default Component.extend(helperMixin, visualizerMixin, { play(replayPause) { let dancer = this.get('dancer'), playQueuePointer = this.get('playQueuePointer'), - playing = this.get('playing'); + playing = this.get('playing'), + lightsData = this.get('lightsData'); if(playQueuePointer !== -1 ) { if (playing) { dancer.pause(); + let preMusicLightsDataCache = this.get('preMusicLightsDataCache'), + updateLight = (lightIndex)=> { + $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', { + data: JSON.stringify({ + 'on': preMusicLightsDataCache[lightIndex].state.on, + 'hue': preMusicLightsDataCache[lightIndex].state.hue, + 'bri': preMusicLightsDataCache[lightIndex].state.bri + }), + contentType: 'application/json', + type: 'PUT' + }); + }; + + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + later(this, updateLight, key, 1000); + } + } + if(!replayPause){ this.set('timeElapsed', Math.floor(dancer.getTime())); } @@ -503,6 +524,7 @@ export default Component.extend(helperMixin, visualizerMixin, { $(window).trigger('resize'); // workaround to redraw the canvas for the vitualizer + this.set('preMusicLightsDataCache', lightsData); dancer.play(); } @@ -637,6 +659,9 @@ export default Component.extend(helperMixin, visualizerMixin, { thresholdChanged(value) { this.changePlayerControl('threshold', value, true); }, + brightnessRangeChanged(value) { + this.changePlayerControl('brightnessRange', value); + }, hueRangeChanged(value) { this.changePlayerControl('hueRange', value); }, diff --git a/web/app/pods/components/music-tab/mixins/helpers.js b/web/app/pods/components/music-tab/mixins/helpers.js index 279454b..2d3d395 100644 --- a/web/app/pods/components/music-tab/mixins/helpers.js +++ b/web/app/pods/components/music-tab/mixins/helpers.js @@ -69,11 +69,26 @@ export default Mixin.create({ from: function ( value ) { return value; } } } + }, + brightnessRange: { + range: {min: 1, max: 254}, + step: 1, + defaultValue: 0, + pips: { + mode: 'values', + values: [1, 50, 100, 150, 200, 254], + density: 10, + format: { + to: function ( value ) { return value; }, + from: function ( value ) { return value; } + } + } } }, threshold: 0.3, hueRange: [0, 65535], + brightnessRange: [1, 254], oldThreshold: null, playQueuePointer: -1, @@ -298,7 +313,7 @@ export default Mixin.create({ this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode')); }), - onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', 'ambienceMode', function(self, option){ + onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){ option = option.replace('.[]', ''); let value = this.get(option); diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs index 059dad4..1531601 100644 --- a/web/app/pods/components/music-tab/template.hbs +++ b/web/app/pods/components/music-tab/template.hbs @@ -128,7 +128,7 @@
-
+
{{#if usingBeatPreferences}} @@ -137,7 +137,7 @@ {{/if}}
-
+
Hue Range @@ -145,7 +145,15 @@ {{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
-
+
+ + Brightness Range + + + {{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}} +
+ +
Sensitivity @@ -153,7 +161,7 @@ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}}
-
+
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}} diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss index 8f536b3..5a02f09 100644 --- a/web/app/styles/app.scss +++ b/web/app/styles/app.scss @@ -84,18 +84,8 @@ div.ember-modal-dialog { } } -#github-ribbon { - position: absolute; - top: 0; - right: 0; - border: 0; -} - -@media(max-width:500px) { - #github-ribbon { - top: -20px; - right: -20px; - } +.display-flex { + display: flex !important; } // fancy webkit scrollbars diff --git a/web/app/styles/fancy-speaker.scss b/web/app/styles/fancy-speaker.scss index 203bae7..b9e1ac7 100644 --- a/web/app/styles/fancy-speaker.scss +++ b/web/app/styles/fancy-speaker.scss @@ -57,8 +57,6 @@ $bezelsize: 240px; position: relative; background-color: #A8A8A8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8); - top: 50%; - transform: translateY(-50%); } .rivet1 { diff --git a/web/app/styles/huegasm-variables.scss b/web/app/styles/huegasm-variables.scss index 879a1ae..914abb3 100644 --- a/web/app/styles/huegasm-variables.scss +++ b/web/app/styles/huegasm-variables.scss @@ -1,6 +1,5 @@ $playerHeight: 400px; $playerDefaultIconColor: #BBBBBB; -$playerBottomHeight: 255px; $secondaryThemeColor: #F12B24; $glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF; $dimmerOnButtonColor: #404040; diff --git a/web/app/styles/music-tab.scss b/web/app/styles/music-tab.scss index 20cc5d3..3089802 100644 --- a/web/app/styles/music-tab.scss +++ b/web/app/styles/music-tab.scss @@ -9,12 +9,12 @@ } #slide-toggle { - font-size: 28px; + font-size: 22px; color: $playerDefaultIconColor; background: #730B07; div .paper-icon { color: inherit !important; - font-size: 28px; + font-size: 24px; font-weight: bold; } } @@ -265,10 +265,8 @@ } #beat-area { - height: $playerBottomHeight; position: relative; padding: 0; - margin-bottom: 10px; } .star { @@ -280,8 +278,12 @@ } #light-option { - margin-top: 67px; - transform: translateY(25%); + margin-top: 20px; + display: flex; + justify-content: space-around; + .md-label { + width: auto; + } } .beat-option { @@ -295,6 +297,9 @@ } .option-description { font-size: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } button { margin-top: 0; @@ -310,14 +315,15 @@ width: 100%; background: white; border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px + border-bottom-right-radius: 5px; + display: flex; + align-items: center; } #beat-container { - padding: 0; - height: $playerBottomHeight; - margin: 0; -} + display: flex; + margin-bottom: 10px; +} #beat-area .light-group { margin: 10px 20px 0 40px; @@ -450,11 +456,8 @@ // mobile overrides @media(max-width:767px) { - #light-option { - margin-top: 0; - .md-label { - width: auto; - } + div#player-bottom { + display: block !important; } #beat-area { height: initial; @@ -468,9 +471,6 @@ #seek-slider { margin-bottom: 15px; } - .beat-option { - text-align: center !important; - } .close { display: block; }