Styling stuff, new favicon, better color selection

app/components/color-picker.js

@@ -30,7 +30,7 @@ export default Em.Component.extend({
       canvasContext = canvas.getContext('2d'),
       image = new Image();
 
-    image.src ='assets/images/colorwheel.png';
+    image.src ='assets/images/colormap.png';
     image.onload = function () {
       canvasContext.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
     };

app/components/controls/light-control.js

@@ -22,7 +22,7 @@ export default Em.Component.extend({
       } else {
         activeLights.pushObject(light);
       }
-  },
+    },
     toggleColorpicker: function() {
       this.toggleProperty('colorPickerDisplayed');
     }
@@ -32,7 +32,7 @@ export default Em.Component.extend({
     var self = this;
 
     Em.$(document).click(function() {
-      if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker').length) {
+      if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker, .colorRow').length) {
         self.toggleProperty('colorPickerDisplayed');
       }
     });
@@ -55,6 +55,14 @@ export default Em.Component.extend({
     Em.$('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
   }.observes('rgb'),
 
+  colorRowAction: function() {
+    if (this.get('trial')) {
+      return null;
+    }
+
+    return "toggleColorpicker";
+  }.property('trial'),
+
   // determines whether the lights are on/off for the lights switch
   lightsOn: function(){
     var lightsData = this.get('lightsData');

app/components/controls/music-control.js

@@ -152,8 +152,7 @@ export default Em.Component.extend(musicControlMixin, {
       this.set('speakerViewed', value);
     },
     clickSpeaker: function(){
-      // simulate the speaker vibration by running a CSS animation on it
-      Em.$('#beatSpeakerCenter').removeClass('pop').prop('offsetWidth', Em.$('#beatSpeakerCenter').prop('offsetWidth')).addClass('pop');
+      this.simulateKick(1);
     },
     dropFiles: function(){
       this.setProperties({
@@ -241,6 +240,52 @@ export default Em.Component.extend(musicControlMixin, {
     this.set('dragLeaveTimeoutHandle', setTimeout(function(){ self.set('dragging', false); }, 500));
   },
 
+  simulateKick: function(mag) {
+    var activeLights = this.get('activeLights'),
+      self = this,
+      briOff = function (i) {
+        Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
+          data: JSON.stringify({'bri': 1, 'transitiontime': 0}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      };
+
+    if(activeLights.length > 0){
+      var lastLightBopIndex = this.get('lastLightBopIndex'), light = this.get('activeLights')[lastLightBopIndex];
+      Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
+        data: JSON.stringify({'bri': 254, 'transitiontime': 0}),
+        contentType: 'application/json',
+        type: 'PUT'
+      });
+
+      setTimeout(briOff, 50, light);
+      lastLightBopIndex = (lastLightBopIndex+1)%activeLights.length;
+
+      this.setProperties({
+        paused: true,
+        lastLightBopIndex: lastLightBopIndex
+      });
+
+      setTimeout(function () {
+        self.set('paused', false);
+      }, 150);
+    }
+
+    //work the music beat area
+    if(this.get('speakerViewed')){
+      // simulate the speaker vibration by running a CSS animation on it
+      Em.$('#beatSpeakerCenter').removeClass('pop').prop('offsetWidth', Em.$('#beatSpeakerCenter').prop('offsetWidth')).addClass('pop');
+    } else {
+      var beatHistory = self.get('beatHistory'),
+        maxSize = self.get('maxBeatHistorySize');
+      beatHistory.unshiftObjects('Beat intesity of <b>' + mag.toFixed(3) + '</b> at <b>' + self.get('timeElapsedTxt') + '</b>');
+      if(beatHistory.length > maxSize){
+        beatHistory.popObject();
+      }
+    }
+  },
+
   init: function () {
     this._super();
 
@@ -249,55 +294,14 @@ export default Em.Component.extend(musicControlMixin, {
       threshold = this.get('threshold'),
       decay = this.get('decay'),
       frequency = this.get('frequency'),
-      briOff = function (i) {
-        Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
-          data: JSON.stringify({'bri': 1, 'transitiontime': 0}),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      },
       kick = dancer.createKick({
         threshold: threshold,
         decay: decay,
         frequency: frequency,
         onKick: function (mag) {
-          var activeLights = self.get('activeLights');
           if (self.get('paused') === false) {
-            //work the lights
-            if(activeLights.length > 0){
-              var lastLightBopIndex = self.get('lastLightBopIndex'), light = self.get('activeLights')[lastLightBopIndex];
-              Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
-                data: JSON.stringify({'bri': 254, 'transitiontime': 0}),
-                contentType: 'application/json',
-                type: 'PUT'
-              });
-
-              setTimeout(briOff, 50, light);
-              lastLightBopIndex = (lastLightBopIndex+1)%activeLights.length;
-
-              self.setProperties({
-                paused: true,
-                lastLightBopIndex: lastLightBopIndex
-              });
-
-              setTimeout(function () {
-                self.set('paused', false);
-              }, 150);
-            }
-
-            //work the music beat area
-            if(self.get('speakerViewed')){
-              self.send('clickSpeaker');
-            } else {
-              var beatHistory = self.get('beatHistory'),
-                maxSize = self.get('maxBeatHistorySize');
-              beatHistory.unshiftObjects('Beat intesity of <b>' + mag.toFixed(3) + '</b> at <b>' + self.get('timeElapsedTxt') + '</b>');
-              if(beatHistory.length > maxSize){
-                beatHistory.popObject();
-              }
-            }
+            self.simulateKick(mag);
           }
-
         }
       });
 

app/styles/app.scss

@@ -30,6 +30,10 @@ body {
   position: relative;
 }
 
+md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-slider[disabled=disabled] {
+  cursor: not-allowed;
+}
+
 .settingsItem .settings::before, .settingsItem .group::before {
   font-size: 28px;
   transition: 0.1s all ease-in-out;
@@ -179,18 +183,22 @@ md-list-item .md-no-style {
 
 .color {
   border: 1px solid rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: -53px;
+  right: 0;
 }
 
 .colorpicker {
   padding: 10px;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.7);
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
   color: #FFFFFF;
   z-index: 2;
   position: absolute;
-  width: 220px;
+  width: 275px;
+  height: 275px;
   right: 6px;
-  top: -6px;
+  top: -9px;
 }
 
 #picker {
@@ -220,7 +228,7 @@ md-slider.md-default-theme .md-thumb:after {
 #groupControls.on {
   width: 300px;
   top: 20px;
-  right: 0;
+  right: 83px;
   position: absolute;
   display: block;
   z-index: 2;
@@ -643,9 +651,6 @@ md-switch.md-default-theme.md-checked .md-thumb{
 }
 
 #playerBottom {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   color: white;
   background-color: #5D5D5D;
 }
@@ -655,19 +660,28 @@ md-switch.md-default-theme.md-checked .md-thumb{
 }
 
 #beatContainer md-switch {
-  bottom: 0;
+  bottom: -35px;
   position: absolute;
   margin-left: 0;
   z-index: 3;
 }
 
 #beatSpeaker {
-  margin: 10px auto 0 auto;
-  width: 100%;
+  padding: 0 5%;
+  img {
+    width: 100%;
+  }
 }
 
 #beatSpeakerCenter {
-
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 16%;
+  padding: 0 20%;
+  img {
+    width: 100%;
+  }
 }
 
 .pop {

app/templates/components/bridge-controls.hbs

@@ -1,12 +1,12 @@
 {{#if ready}}
   <div class="row navigation">
-    <div class="col-sm-6 col-sm-offset-3 col-xs-9">
+    <div class="col-xs-6 col-xs-offset-3">
       {{#each tabData as |tab|}}
           <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
       {{/each}}
     </div>
 
-    <div class="col-sm-3 col-xs-3">
+    <div class="col-xs-3">
       <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl" bubbles=false}}>
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
       </span>

app/templates/components/color-picker.hbs

@@ -1 +1 @@
-<canvas id="picker" width="200" height="200" {{action "colorSelect"}}></canvas>
+<canvas id="picker" width="256" height="256" {{action "colorSelect"}}></canvas>

app/templates/components/controls/light-control.hbs

@@ -15,12 +15,14 @@
     {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
   {{/paper-item}}
 
-  {{#paper-item}}
+  {{#paper-item action=colorRowAction class="colorRow"}}
     {{paper-icon icon="color-lens"}}
     <p>Color</p>
-    {{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}}
   {{/paper-item}}
+
   <div class="relative">
+    {{#paper-button raised=true class="color" action="toggleColorpicker" disabled=trial}}{{/paper-button}}
+
     {{#if colorPickerDisplayed}}
       {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
     {{/if}}
@@ -29,6 +31,6 @@
   {{#paper-item}}
     {{paper-icon icon="flare"}}
     <p>Strobe</p>
-    {{#paper-switch checked=strobeOn disabled=trial}} {{strobeOnTxt}} {{/paper-switch}}
+    {{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 {{/paper-list}}

app/templates/components/controls/music-control.hbs

@@ -60,7 +60,7 @@
 
 <div id="playerBottom" class="row">
   <div id="beatArea" class="col-sm-8 col-xs-12">
-      <div id="vertDivider"></div>
+      <div id="vertDivider" class="hidden-xs"></div>
         {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}
 
       <div id="beatOptionGroup">
@@ -86,11 +86,15 @@
     </div>
 
     <div id="beatContainer" class="col-sm-4 col-xs-12">
-      {{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}}
-      {{#liquid-if speakerViewed}}
+      {{#if speakerViewed}}
         <div id="beatSpeakerContainer">
-          <img src="assets/images/speaker-outer.png" id="beatSpeaker" />
-          <img src="assets/images/speaker-inner.png" id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}} />
+          <div id="beatSpeaker">
+            <img src="assets/images/speaker-outer.png" />
+          </div>
+
+          <div id="beatSpeakerCenter">
+            <img src="assets/images/speaker-inner.png" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}} />
+          </div>
         </div>
       {{else}}
         <div id ="beatHistory">
@@ -98,6 +102,8 @@
             <p>{{{item}}}</p>
           {{/each}}
         </div>
-      {{/liquid-if}}
+      {{/if}}
+
+      {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
     </div>
 </div>