From 2ed71df90ce986cc942923de0f201d1c4a669b3a Mon Sep 17 00:00:00 2001 From: Egor Date: Wed, 28 Oct 2015 05:40:02 -0700 Subject: [PATCH] Implementing into.js --- .jshintrc | 3 +- README.md | 7 +- .../components/add-group-modal/component.js | 8 +- app/pods/components/hue-controls/component.js | 114 +++++ app/pods/components/hue-controls/template.hbs | 6 +- app/pods/components/huegasm-app/template.hbs | 2 +- app/pods/components/lights-tab/component.js | 1 + app/pods/components/lights-tab/template.hbs | 10 +- app/pods/components/music-tab/component.js | 13 +- .../components/music-tab/mixins/helpers.js | 28 +- app/pods/components/music-tab/template.hbs | 61 +-- app/styles/app.scss | 20 +- app/styles/fancy-speaker.scss | 8 - config/environment.js | 2 +- .../favicons/android-chrome-144x144.png | Bin 6634 -> 6188 bytes .../favicons/android-chrome-192x192.png | Bin 9662 -> 9129 bytes .../images/favicons/android-chrome-36x36.png | Bin 1512 -> 1484 bytes .../images/favicons/android-chrome-48x48.png | Bin 1894 -> 1826 bytes .../images/favicons/android-chrome-72x72.png | Bin 2847 -> 2759 bytes .../images/favicons/android-chrome-96x96.png | Bin 3879 -> 3736 bytes .../favicons/apple-touch-icon-114x114.png | Bin 4891 -> 4325 bytes .../favicons/apple-touch-icon-120x120.png | Bin 5169 -> 4694 bytes .../favicons/apple-touch-icon-144x144.png | Bin 6634 -> 5984 bytes .../favicons/apple-touch-icon-152x152.png | Bin 7052 -> 6318 bytes .../favicons/apple-touch-icon-180x180.png | Bin 8845 -> 7929 bytes .../favicons/apple-touch-icon-57x57.png | Bin 2195 -> 2062 bytes .../favicons/apple-touch-icon-60x60.png | Bin 2318 -> 2154 bytes .../favicons/apple-touch-icon-72x72.png | Bin 2847 -> 2534 bytes .../favicons/apple-touch-icon-76x76.png | Bin 2960 -> 2751 bytes .../favicons/apple-touch-icon-precomposed.png | Bin 9044 -> 8262 bytes .../images/favicons/apple-touch-icon.png | Bin 8845 -> 7929 bytes .../assets/images/favicons/browserconfig.xml | 8 +- .../assets/images/favicons/favicon-16x16.png | Bin 750 -> 726 bytes .../images/favicons/favicon-194x194.png | Bin 9691 -> 9999 bytes .../assets/images/favicons/favicon-32x32.png | Bin 1436 -> 1425 bytes .../assets/images/favicons/favicon-96x96.png | Bin 4058 -> 4048 bytes public/assets/images/favicons/favicon.ico | Bin 7406 -> 7406 bytes public/assets/images/favicons/manifest.json | 12 +- .../assets/images/favicons/mstile-144x144.png | Bin 6801 -> 6771 bytes .../assets/images/favicons/mstile-150x150.png | Bin 5926 -> 6043 bytes .../assets/images/favicons/mstile-310x150.png | Bin 6368 -> 6497 bytes .../assets/images/favicons/mstile-310x310.png | Bin 15770 -> 16405 bytes .../assets/images/favicons/mstile-70x70.png | Bin 4101 -> 4229 bytes .../images/favicons/safari-pinned-tab.svg | 429 ++++++++++++++++-- 44 files changed, 621 insertions(+), 111 deletions(-) diff --git a/.jshintrc b/.jshintrc index 68bc51a..dae9b20 100644 --- a/.jshintrc +++ b/.jshintrc @@ -6,7 +6,8 @@ "Dancer", "ID3", "FileAPIReader", - "SC" + "SC", + "introJs" ], "browser": true, "boss": true, diff --git a/README.md b/README.md index cb1be8a..e43e0c9 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,16 @@ # Huegasm - Music awesomeness for hue lights. # TODO ## FEATURES -- app intro with intro.js - microphone mode -- about, help page, youtube video +- youtube video ## BUGS - BUGS BUGS BUGS -## POSSIBLE FEATURES +## POSSIBLE FUTURE FEATURES +- better visualizations - beat settings by interval - auto beat detection mode - display player time when hovering over seek bar diff --git a/app/pods/components/add-group-modal/component.js b/app/pods/components/add-group-modal/component.js index 86dc8d0..778a912 100644 --- a/app/pods/components/add-group-modal/component.js +++ b/app/pods/components/add-group-modal/component.js @@ -35,11 +35,9 @@ export default Em.Component.extend({ }, didInsertElement: function() { - var self = this; - - Em.$(document).keypress(function(event) { - if(!self.get('saveDisabled') && event.which === 13) { - self.send('save'); + Em.$(document).keypress((event) => { + if(!this.get('saveDisabled') && event.which === 13) { + this.send('save'); } }); }, diff --git a/app/pods/components/hue-controls/component.js b/app/pods/components/hue-controls/component.js index 1aff918..0355960 100644 --- a/app/pods/components/hue-controls/component.js +++ b/app/pods/components/hue-controls/component.js @@ -29,6 +29,120 @@ export default Em.Component.extend({ clearAllSettings() { this.get('storage').clear(); location.reload(); + }, + startIntro(){ + var intro = introJs(), + playerBottom = Em.$('#playerBottom'); + + intro.setOptions({ + steps: [ + { + 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.' + }, + { + 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.' + }, + { + element: '#playerArea', + intro: 'The audio playback may be controlled with the controls here. Basic music visualization effects may be shown here by selecting them from the menu ( eyeball in the bottom right ).' + }, + { + element: '#beatOptionRow', + intro: 'Beat detection settings:
' + + 'Beat Threshold - The minimum sound intensity for the beat to register
' + + '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.' + }, + { + element: '#beatOptionButtonGroup', + intro: 'Some additional options:
' + + '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.' + }, + { + 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.' + }, + { + element: '#lightsTab', + intro: 'This is the lights tab. Here you\'ll be able to change various light properties:
' + + 'Power - The selected lights to be on/off
' + + 'Brightness - The brightness level of the selected lights
' + + 'Color - The color of the selected lights
' + + 'Strobe - Selected lights will flash in sequential order
' + + 'Colorloop - Selected lights will slowly cycle through all the colors
' + }, + { + element: '#activeLights', + intro: 'These icons represent the hue lights in your system. Active lights will be controlled by the application while the inactive lights will have a red X over them and will not be controlled. You may toggle a light\'s active state by clicking on it' + }, + { + element: Em.$('.settingsItem')[0], + intro: 'Groups allow for saving and selecting sets of lights.', + position: 'left' + }, + { + 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.', + position: 'left' + }, + { + element: '#dimmerWrapper', + intro: 'Enjoy the application. ;)

' + + 'TIP: click on the lightbulb to turn off the lights.', + position: 'top' + } + ] + }); + + // it's not pretty but it works + intro.onchange((element) => { + this.set('dimmerOn', false); + + if(element.id === 'musicTab' || element.id === 'playlist' || element.id === 'playerArea' || element.id === 'beatOptionRow' || element.id === 'beatOptionButtonGroup' || element.id === 'beatContainer'){ + Em.$('#musicTab').removeClass('hidden'); + Em.$('#lightsTab').addClass('hidden'); + Em.$('.navigationItem').eq(0).removeClass('active'); + Em.$('.navigationItem').eq(1).addClass('active'); + } else { + Em.$('#lightsTab').removeClass('hidden'); + Em.$('#musicTab').addClass('hidden'); + Em.$('.navigationItem').eq(1).removeClass('active'); + Em.$('.navigationItem').eq(0).addClass('active'); + } + + if(element.id === 'musicTab' || element.id === 'playlist' || element.id === 'playerArea'){ + playerBottom.hide(); + } else if(element.id === 'beatOptionRow' || element.id === 'beatOptionButtonGroup' || element.id === 'beatContainer'){ + playerBottom.show(); + } else if(element.id === 'lightsTab'){ + Em.$('#musicTab').addClass('hidden'); + Em.$('#lightsTab').removeClass('hidden'); + } else if(element.id === 'dimmerWrapper'){ + Em.$(document).click(); + } + }); + + intro.onexit(()=>{ + 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.start(); } }, diff --git a/app/pods/components/hue-controls/template.hbs b/app/pods/components/hue-controls/template.hbs index 773b488..d860fa5 100644 --- a/app/pods/components/hue-controls/template.hbs +++ b/app/pods/components/hue-controls/template.hbs @@ -15,12 +15,13 @@
-
@@ -28,5 +29,6 @@ {{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}} + + {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage firstVisit=firstVisit 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 bf78af3..ce5f4d5 100644 --- a/app/pods/components/huegasm-app/template.hbs +++ b/app/pods/components/huegasm-app/template.hbs @@ -14,7 +14,7 @@ {{/if}}