A small intro screen

app/pods/components/hue-controls/template.hbs

@@ -28,5 +28,5 @@
   </div>
 
   {{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}}
+  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage}}
 {{/if}}

app/pods/components/huegasm-app/component.js

@@ -4,6 +4,9 @@ export default Em.Component.extend({
   actions: {
     toggleDimmer(){
       this.toggleProperty('dimmerOn');
+    },
+    isReady(){
+      this.set('ready', true);
     }
   },
   bridgeIp: null,
@@ -12,9 +15,15 @@ export default Em.Component.extend({
 
   trial: false,
 
+  storage: null,
+
   dimmerOn: false,
+
+  ready: false,
+
   dimmerOnClass: function(){
     var dimmerOn = this.get('dimmerOn'),
+      storage = this.get('storage'),
       className = null;
 
     if(dimmerOn){
@@ -28,18 +37,23 @@ export default Em.Component.extend({
       Em.$('md-icon').removeClass('dimmerOn');
     }
 
+    storage.set('huegasm.dimmerOn', dimmerOn);
+
     return className;
   }.property('dimmerOn'),
 
   init(){
     this._super();
 
-    if(localStorage.getItem('huegasm.bridgeIp')){
+    var storage = new window.Locally.Store();
-      this.set('bridgeIp', localStorage.getItem('huegasm.bridgeIp'));
+    this.set('storage', storage);
-    }
 
-    if(localStorage.getItem('huegasm.bridgeUsername')){
+    ['bridgeIp', 'bridgeUsername', 'dimmerOn'].forEach((item) => {
-      this.set('bridgeUsername', localStorage.getItem('huegasm.bridgeUsername'));
+      var storedValue = storage.get('huegasm.' + item);
-    }
+
+      if(storedValue) {
+        this.set(item, storage.get('huegasm.' + item));
+      }
+    });
   }
 });

app/pods/components/huegasm-app/template.hbs

@@ -1,7 +1,16 @@
 {{#if bridgeUsername}}
-  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn}}
+  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage}}
 {{else}}
-  {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
+  {{#if ready}}
+    {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
+  {{else}}
+    <div class="readyBlock">
+      <div class="title">Huegasm</div>
+      <p>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.</p>
+
+      {{#paper-button raised=true primary=true action="isReady" class="goButton"}}Go!{{/paper-button}}
+    </div>
+  {{/if}}
 {{/if}}
 
 <footer id="footer">

app/pods/components/music-tab/component.js

@@ -624,8 +624,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     this._super();
 
     var dancer = new Dancer(),
-      storage = new window.Locally.Store(),
       self = this,
+      storage = this.get('storage'),
       frequency = this.get('frequency'),
       kick = dancer.createKick({
         threshold: this.beatOptions.threshold.range.min,
@@ -637,8 +637,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         }
       });
 
-    this.set('storage', storage);
-
     kick.on();
 
     //dancer.bind('update', function(){

app/styles/app.scss

@@ -23,6 +23,21 @@ body {
   position: static;
 }
 
+.goButton {
+  margin-top: 60px;
+  border-radius: 100% !important;
+  width: 100px;
+  height: 100px;
+  span {
+    font-size: 20px;
+    margin-top: 30px;
+  }
+}
+
+.goButton:hover {
+  background: darken(#3f51b5, 10%) !important;
+}
+
 // temporary HAX...not working in FF
 md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
   transform: none !important;
@@ -90,12 +105,12 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
   cursor: pointer;
 }
 
-.bridgeFinder {
+.bridgeFinder, .readyBlock {
   text-align: center;
   padding-top: 20px;
 }
 
-.bridgeFinder .title {
+.title {
   font-size: 30px;
   margin-bottom: 30px;
 }
@@ -864,6 +879,17 @@ body.dimmerOn {
     -webkit-filter: drop-shadow(0 0 5px #228DFF);
     filter: drop-shadow(0 0 5px #228DFF);
   }
+  md-input-container {
+    label {
+      color: white;
+    }
+    input {
+      border-bottom-color: white !important;
+    }
+    input {
+      color: white !important;
+    }
+  }
 }
 
 .power-settings-new.dimmerOn,