diff --git a/README.md b/README.md index e43e0c9..ed50549 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,6 @@ Music awesomeness for hue lights. - youtube video ## BUGS -- BUGS BUGS BUGS ## POSSIBLE FUTURE FEATURES - better visualizations diff --git a/app/pods/components/bridge-finder/component.js b/app/pods/components/bridge-finder/component.js index 8812119..6a9abe1 100644 --- a/app/pods/components/bridge-finder/component.js +++ b/app/pods/components/bridge-finder/component.js @@ -109,7 +109,8 @@ export default Em.Component.extend({ }.observes('bridgeIp').on('init'), pingBridgeUser() { - var bridgeIp = this.get('bridgeIp'), self = this, bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'), + var bridgeIp = this.get('bridgeIp'), + bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'), bridgeUsernamePingMaxTime = this.get('bridgeUsernamePingMaxTime'); if (bridgeIp !== null && bridgeUserNamePingIntervalProgress < 100) { @@ -117,24 +118,26 @@ export default Em.Component.extend({ data: JSON.stringify({"devicetype": "huegasm"}), contentType: 'application/json', type: 'POST' - }).done(function (result, status) { + }).done((result, status)=>{ if (status === 'success') { if (!result[0].error) { - self.set('bridgeUsername', result[0].success.username); + this.setProperties({ + bridgeUsername: result[0].success.username, + bridgePingIntervalHandle: null + }); + this.get('storage').set('huegasm.bridgeUsername', result[0].success.username); - clearInterval(self.get('bridgePingIntervalHandle')); - self.set('bridgePingIntervalHandle', null); + clearInterval(this.get('bridgePingIntervalHandle')); } - self.set('bridgeAuthenticateError', result[0].internalipaddress); + this.set('bridgeAuthenticateError', result[0].internalipaddress); } - self.set('bridgeAuthenticateReachedStatus', status); + this.set('bridgeAuthenticateReachedStatus', status); }); this.incrementProperty('bridgeUserNamePingIntervalProgress', this.get('bridgeUsernamePingIntervalTime')/bridgeUsernamePingMaxTime*100); } else { clearInterval(this.get('bridgePingIntervalHandle')); - this.set('bridgePingIntervalHandle', null); } }, diff --git a/app/pods/components/groups-list/component.js b/app/pods/components/groups-list/component.js index e8707c5..ba8c0b5 100644 --- a/app/pods/components/groups-list/component.js +++ b/app/pods/components/groups-list/component.js @@ -47,7 +47,7 @@ export default Em.Component.extend({ } return groupsArrData; - }.property('groupsData', 'lightsData', 'groupIdSelection'), + }.property('groupsData', 'groupIdSelection'), onGroupIdSelectionChanged: function(){ var groupIdSelection = this.get('groupIdSelection'), lights = []; diff --git a/app/pods/components/hue-controls/component.js b/app/pods/components/hue-controls/component.js index 0355960..e68a702 100644 --- a/app/pods/components/hue-controls/component.js +++ b/app/pods/components/hue-controls/component.js @@ -39,12 +39,12 @@ export default Em.Component.extend({ { element: '#musicTab', intro: 'This is the music tab. Here you\'ll be able to play music and synchronize it with your active lights.

' + - 'TIP: Control which lights are active through the Lights tab or through the Groups menu dropdown.' + 'TIP: Control which lights are active through the Lights tab or through the Groups menu dropdown.' }, { element: '#playlist', intro: 'You can add and select music to play from your playlist here. You may add local audio files, stream music from soundcloud or stream music into the application fromn your mic.

' + - 'TIP: Songs added through soundcloud will be saved for when you visit this page again.' + 'TIP: Songs added through soundcloud will be saved for when you visit this page again.' }, { element: '#playerArea', @@ -57,7 +57,8 @@ export default Em.Component.extend({ 'Beat Interval - The minimum amount of time between each registered beat
' + 'Frequency Range - The frequency range of the sound to listen on for the beat
' + 'Transition Time - The time it takes for a light to change color or brightness

' + - 'TIP: Beat settings are saved per song as indicated by the red start icon in the top left corner. These settings they will be restored if you ever listen to the same song again.' + 'TIP: Beat settings are saved per song as indicated by the red start icon in the top left corner. These settings they will be restored if you ever listen to the same song again.', + position: 'top' }, { element: '#beatOptionButtonGroup', @@ -65,12 +66,14 @@ export default Em.Component.extend({ 'Default - Revert to the default beat detection settings
' + 'Random/Sequential - The transition order of lights on beat
' + 'Brightness/Brightness & Color - The properties of the lights to change on beat

' + - 'TIP: Turn the colorloop \'on\' in the Lights tab and set only the brightness to change on beat for a cool visual effect.' + 'TIP: Turn the colorloop \'on\' in the Lights tab and set only the brightness to change on beat for a cool visual effect.', + position: 'top' }, { element: '#beatContainer', intro: 'An interactive speaker that will bump on a registered beat. Switch over to the Debug View to see the intesity of all the registered and unregistered beats.

' + - 'TIP: Click on the center of the speaker to simulate a beat.' + 'TIP: Click on the center of the speaker to simulate a beat.', + position: 'top' }, { element: '#lightsTab', @@ -93,13 +96,13 @@ export default Em.Component.extend({ { element: Em.$('.settingsItem')[1], intro: 'A few miscellaneous settings can be found here.

' + - 'WARNING: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.', + 'WARNING: clearing application settings will resto re the application to its original state. This will even delete your playlist and any saved song beat preferences.', position: 'left' }, { element: '#dimmerWrapper', - intro: 'Enjoy the application. ;)

' + - 'TIP: click on the lightbulb to turn off the lights.', + intro: 'And that\'s it...Enjoy the application. ;)

' + + 'TIP: click on the lightbulb to turn off the lights.', position: 'top' } ] @@ -133,15 +136,17 @@ export default Em.Component.extend({ } }); - intro.onexit(()=>{ + var onFinish = ()=>{ this.set('activeTab', 1); Em.$('#musicTab').removeClass('hidden'); Em.$('#lightsTab').addClass('hidden'); Em.$('.navigationItem').eq(0).removeClass('active'); Em.$('.navigationItem').eq(1).addClass('active'); playerBottom.hide(); - }); + }; + intro.onexit(onFinish); + intro.oncomplete(onFinish); intro.start(); } }, @@ -223,20 +228,21 @@ export default Em.Component.extend({ pauseLightUpdates: false, updateLightData(){ - var self = this, fail = function() { + var fail = ()=>{ clearInterval(self.get('lightsDataIntervalHandle')); - self.setProperties({ - bridgeIp: null, - bridgeUsername: null - }); + + this.get('storage').remove('huegasm.bridgeIp'); + this.get('storage').remove('huegasm.bridgeUsername'); + + location.reload(); }; if(!this.get('pauseLightUpdates')){ - Em.$.get(this.get('apiURL') + '/lights', function (result, status) { + Em.$.get(this.get('apiURL') + '/lights', (result, status)=>{ if(!Em.isNone(result[0]) && !Em.isNone(result[0].error)){ fail(); - } else if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result)) { - self.set('lightsData', result); + } else if (status === 'success' && JSON.stringify(this.get('lightsData')) !== JSON.stringify(result)) { + this.set('lightsData', result); } }).fail(fail); } diff --git a/app/pods/components/hue-controls/template.hbs b/app/pods/components/hue-controls/template.hbs index d860fa5..2dfc236 100644 --- a/app/pods/components/hue-controls/template.hbs +++ b/app/pods/components/hue-controls/template.hbs @@ -30,5 +30,5 @@ {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected dimmerOn=dimmerOn}} - {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage firstVisit=firstVisit action="startIntro"}} + {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage action="startIntro"}} {{/if}} \ No newline at end of file diff --git a/app/pods/components/huegasm-app/template.hbs b/app/pods/components/huegasm-app/template.hbs index ce5f4d5..39fc004 100644 --- a/app/pods/components/huegasm-app/template.hbs +++ b/app/pods/components/huegasm-app/template.hbs @@ -8,7 +8,7 @@
Huegasm

Huegasm is a free web application for controlling your Philips Hue lights...oh and it's kind of awesome at syncing music with your lights.

- {{#paper-button raised=true primary=true action="isReady" class="goButton"}}Go!{{/paper-button}} + {{#paper-button raised=true primary=true action="isReady" class="goButton"}}Start!{{/paper-button}} {{/if}} {{/if}} diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index 4ebdf3c..a8bf7a2 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -769,16 +769,11 @@ export default Em.Component.extend(helperMixin, visualizerMixin, { if(this.get('firstVisit')){ this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/tracks'); this.get('storage').set('huegasm.firstVisit', false); + this.sendAction(); } if(!this.get('playerBottomDisplayed')) { Em.$('#playerBottom').hide(); } - - if(this.get('firstVisit')){ - - } - - this.sendAction(); } }); diff --git a/app/pods/components/music-tab/mixins/visualizer.js b/app/pods/components/music-tab/mixins/visualizer.js index ae687c0..60d7039 100644 --- a/app/pods/components/music-tab/mixins/visualizer.js +++ b/app/pods/components/music-tab/mixins/visualizer.js @@ -18,16 +18,31 @@ export default Em.Mixin.create({ this.get('storage').set('huegasm.currentVisName', currentVisName); }.observes('currentVisName'), - doDancerBind(){ + didInsertElement(){ var dancer = this.get('dancer'), - canvasEl = Em.$('#visualization')[0], - ctx = canvasEl.getContext('2d'), - spacing = 0, - h = canvasEl.height, - w = canvasEl.width; + canvas = Em.$('#visualization')[0], + playerArea = Em.$('#playerArea'), + ctx = canvas.getContext('2d'), + spacing = 2, + h = Em.$('#playerArea').height(), w; + + canvas.height = h; + + // must be done to preserver resolution so that things don't appear blurry + // note that the height is set to 400px via css so it doesn't need to be recalculated + var syncCanvasHeight = ()=>{ + w = playerArea.width(); + canvas.width = w; + }; + + syncCanvasHeight(); + + Em.$(window).on('resize', syncCanvasHeight); dancer.bind('update', () => { - var currentVisName = this.get('currentVisName'); + var currentVisName = this.get('currentVisName'), + gradient = ctx.createLinearGradient(0, 0, 0, h); + if(currentVisName === 'None'){ return; } @@ -35,12 +50,11 @@ export default Em.Mixin.create({ ctx.clearRect(0, 0, w, h); if (currentVisName === 'Wave') { - let width = 1, - count = 1024, - gradient = ctx.createLinearGradient(0, 0, 0, 300); + let width = 3, + count = 1024; + gradient.addColorStop(0.6, 'white'); gradient.addColorStop(0, '#0036FA'); - gradient.addColorStop(0.3, 'white'); ctx.lineWidth = 1; ctx.strokeStyle = gradient; @@ -55,24 +69,19 @@ export default Em.Mixin.create({ ctx.closePath(); } else if (currentVisName === 'Bars') { let width = 4, - count = 128, - gradient = ctx.createLinearGradient(0, 0, 0, 300); + count = 128; - gradient.addColorStop(0.5, '#0f0'); - gradient.addColorStop(0.4, '#ff0'); - gradient.addColorStop(0, '#F12B24'); + gradient.addColorStop(1, '#0f0'); + gradient.addColorStop(0.6, '#ff0'); + gradient.addColorStop(0.2, '#F12B24'); ctx.fillStyle = gradient; var spectrum = dancer.getSpectrum(); for (let i = 0, l = spectrum.length; i < l && i < count; i++) { - ctx.fillRect(i * ( spacing + width ), h, width, -spectrum[i] * h - 23); + ctx.fillRect(i * ( spacing + width ), h, width, -spectrum[i] * h - 60); } } }); - }, - - didInsertElement(){ - this.doDancerBind(); } }) ; diff --git a/app/styles/app.scss b/app/styles/app.scss index eaf28da..4a87b52 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -923,7 +923,7 @@ body.dimmerOn { #dimmerWrapper { position: absolute; left: -50px; - bottom: -16px; + bottom: -10px; cursor: pointer; svg { width: 40px; @@ -1005,8 +1005,6 @@ div.ember-modal-dialog { position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; } .check { @@ -1050,10 +1048,21 @@ div.ember-modal-dialog { height: 23px; } +#settings.introjs-fixParent{ + position: inherit !important; +} + .introjs-tooltip { color: black; } -#settings.introjs-fixParent{ - position: inherit !important; +.introjs-skipbutton{ + color: $secondaryThemeColor; +} + +.introjs-bullets ul li a.active { + position: relative; + height: 10px; + width: 10px; + top: -2px; } diff --git a/package.json b/package.json index e9ad855..0b9971c 100644 --- a/package.json +++ b/package.json @@ -31,17 +31,17 @@ "ember-cli-inject-live-reload": "^1.3.0", "ember-cli-nouislider": "0.7.0", "ember-cli-qunit": "1.0.3", - "ember-cli-release": "0.2.7", - "ember-cli-sass": "5.0.0", + "ember-cli-release": "0.2.8", + "ember-cli-sass": "5.0.1", "ember-cli-sri": "^1.0.1", "ember-cli-uglify": "^1.0.1", "ember-cli-windows-addon": "^1.2.2", "ember-data": "2.1.0", "ember-disable-proxy-controllers": "^1.0.0", "ember-export-application-global": "^1.0.3", - "ember-modal-dialog": "0.8.1", + "ember-modal-dialog": "0.8.2", "ember-notify": "^4.0.1", "ember-paper": "0.2.8", - "ember-truth-helpers": "1.1.0" + "ember-truth-helpers": "1.2.0" } }