minor things

app/components/controls/music-control.js

@@ -1,7 +1,8 @@
 import Em from 'ember';
 import musicControlMixin from '../mixins/music-control';
+import visualizerMixin from '../mixins/visualizer';
 
-export default Em.Component.extend(musicControlMixin, {
+export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   classNames: ['col-lg-6', 'col-lg-offset-3', 'col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
   classNameBindings: ['active::hidden'],
 
@@ -42,16 +43,7 @@ export default Em.Component.extend(musicControlMixin, {
       this.changePlayerControl('threshold', beatOptions.threshold.defaultValue, true);
       this.changePlayerControl('decay', beatOptions.decay.defaultValue, true);
       this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true);
-    },
+      this.changePlayerControl('transitionTime', beatOptions.frequency.defaultValue, true);
-    clickLight: function(light){
-      var activeLights = this.get('activeLights'),
-        lightId = activeLights.indexOf(light);
-
-      if(lightId !== -1){
-        activeLights.removeObject(light);
-      } else {
-        activeLights.pushObject(light);
-      }
     },
     playerAreaPlay: function(){
       if(Em.isEmpty(Em.$('#playerControls:hover'))){
@@ -148,6 +140,9 @@ export default Em.Component.extend(musicControlMixin, {
     thresholdChanged: function(value) {
       this.changePlayerControl('threshold', value, true);
     },
+    transitionTimeChanged: function(value) {
+      this.changePlayerControl('transitionTime', value, true);
+    },
     decayChanged: function(value){
       this.changePlayerControl('decay', value, true);
     },
@@ -254,10 +249,11 @@ export default Em.Component.extend(musicControlMixin, {
 
   simulateKick: function(mag) {
     var activeLights = this.get('activeLights'),
+      transitionTime = this.get('transitionTime') * 10,
       self = this,
       briOff = function (i) {
         Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
-          data: JSON.stringify({'bri': 1, 'transitiontime': 0}),
+          data: JSON.stringify({'bri': 1, 'transitiontime': transitionTime}),
           contentType: 'application/json',
           type: 'PUT'
         });

app/components/mixins/music-control.js

@@ -6,6 +6,7 @@ export default Em.Mixin.create({
   beatOptions: {
     threshold: {
       range: {min: 0.1, max: 0.9},
+      step: 0.01,
       defaultValue: 0.3,
       pips: {
         mode: 'positions',
@@ -44,9 +45,24 @@ export default Em.Mixin.create({
           from: function ( value ) { return value; }
         }
       }
+    },
+    transitionTime: {
+      range:  {min: 0, max: 0.5},
+      step: 0.1,
+      defaultValue: 0,
+      pips: {
+        mode: 'positions',
+        values: [0,20,40,60,80,100],
+        density: 10,
+        format: {
+          to: function ( value ) {return value;},
+          from: function ( value ) { return value; }
+        }
+      }
     }
   },
 
+  transitionTime: 0,
   threshold: 0.3,
   decay: 0.02,
   frequency: [0,4],

app/components/mixins/visualizer.js

@@ -0,0 +1,5 @@
+import Em from 'ember';
+
+export default Em.Mixin.create({
+
+});

app/styles/app.scss

@@ -652,12 +652,12 @@ md-switch.md-default-theme.md-checked .md-thumb {
 
 #beatArea * .noUi-vertical {
   height: 170px;
-  margin-top: 20px;
+  margin-top: 15px;
   margin-bottom: 15px;
 }
 
 #beatOptionGroup {
-  margin-top: 20px;
+  margin-top: 10px;
   .beatOption {
     display: inline-block;
     margin-right: 1em;
@@ -757,3 +757,135 @@ md-switch.md-default-theme.md-checked .md-thumb {
     display: table-cell;
   }
 }
+
+// FANCY BUTTON
+.button {
+  position: absolute;
+  top: calc(50% - 115px);
+  left: calc(50% - 90px);
+  display: block;
+  width: 180px;
+  height: 230px;
+  background-image: -webkit-linear-gradient(top, #464a54 0%, #2c2225 100%);
+  background-image: linear-gradient(to bottom, #464a54 0%, #2c2225 100%);
+  border-radius: 6px;
+  cursor: pointer;
+  box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696e inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset;
+}
+
+.button .hole {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: block;
+  width: 140px;
+  height: 186px;
+  overflow: hidden;
+  background-color: #090909;
+  border-radius: 8px;
+  box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset;
+}
+
+.button .switch {
+  position: absolute;
+  top: 6px;
+  left: 4px;
+  display: block;
+  width: 132px;
+  height: 174px;
+  background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(top, #882626 0%, #290606 100%);
+  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%);
+  background-size: 100% 80px, 100% 80px, 10px 10px, 100%;
+  background-position: top left, bottom left, bottom left, center;
+  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
+  border-radius: 8px;
+  box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);
+  -webkit-transform-style: preserve3d;
+  transform-style: preserve3d;
+  -webkit-transform-origin: center center;
+  -ms-transform-origin: center center;
+  transform-origin: center center;
+  -webkit-transform: perspective(1500px) rotateX(-30deg) translateY(16px);
+  transform: perspective(1500px) rotateX(-30deg) translateY(16px);
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+}
+
+.button .switch:before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 5px;
+  width: 122px;
+  height: 5px;
+  background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
+  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
+}
+
+.button .switch .one {
+  position: absolute;
+  top: 24px;
+  left: calc(47%);
+  display: block;
+  width: 6px;
+  height: 40px;
+  background-image: -webkit-linear-gradient(top, #cccccc 0%, #999999 100%);
+  background-image: linear-gradient(to bottom, #cccccc 0%, #999999 100%);
+  box-shadow: 0 2px 1px white inset;
+  border-radius: 4px;
+}
+
+.button .switch .zero {
+  position: absolute;
+  bottom: 24px;
+  left: calc(36%);
+  display: block;
+  width: 32px;
+  height: 40px;
+  box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666666 inset;
+  border-radius: 50%;
+}
+
+.button input {
+  display: none;
+}
+
+.button input:checked ~ .hole .switch {
+  background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), -webkit-linear-gradient(top, #b43222 0%, #a51810 100%);
+  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), linear-gradient(to bottom, #b43222 0%, #a51810 100%);
+  background-size: 100% 80px, 100% 80px, 100% 180px, 10px 10px, 100%;
+  background-position: top left, bottom left, 0 30px, bottom left, center;
+  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
+  border-radius: 8px;
+  box-shadow: 4px 0 1px rgba(255, 255, 255, 0.15) inset, -4px 0 1px rgba(255, 255, 255, 0.15) inset, 0 4px 1px rgba(255, 255, 255, 0.15) inset, 0 -12px 8px rgba(0, 0, 0, 0.25) inset, 0 30px 8px rgba(128, 17, 5, 0.5), 0 25px 8px rgba(128, 17, 5, 0.3), 0 20px 8px rgba(128, 17, 5, 0.4), 0 15px 8px rgba(128, 17, 5, 0.5), 0 10px 8px rgba(128, 17, 5, 0.6), 0 5px 8px rgba(128, 17, 5, 0.9);
+  -webkit-transform: perspective(1500px) rotateX(30deg) translateY(-16px);
+  transform: perspective(1500px) rotateX(30deg) translateY(-16px);
+}
+
+.button input:checked ~ .hole .switch:before {
+  top: auto;
+  bottom: -2px;
+}
+
+.button input:checked ~ .hole .switch:after {
+  content: "";
+  position: absolute;
+  bottom: -24px;
+  left: calc(14%);
+  width: 96px;
+  height: 16px;
+  border-radius: 50%;
+  background-image: -webkit-radial-gradient(center, ellipse, #fef400 0%, rgba(254, 244, 0, 0.3) 60%, transparent 100%);
+  background-image: radial-gradient(ellipse at center, #fef400 0%, rgba(254, 244, 0, 0.3) 60%, transparent 100%);
+  -webkit-filter: blur(8px);
+  filter: blur(8px);
+}
+
+.button input:checked ~ .hole .switch .one {
+  background-image: -webkit-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 0%, #aaaaaa 100%);
+}
+
+.button input:checked ~ .hole .switch .zero {
+  box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #aaaaaa inset;
+}

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

@@ -71,23 +71,34 @@
 <div id="playerBottom" class="row">
   <div id="beatArea" class="col-sm-8 col-xs-12">
       <div id="vertDivider" class="hidden-xs"></div>
-        {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}
-
       <div id="beatOptionGroup">
-        <span class="beatOption">
+        <div class="beatOption">
-          {{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
+          <div class="text-center">{{threshold}}</div>
+          {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
           Max. Intensity
-        </span>
+        </div>
 
-        <span class="beatOption">
+
+        <div class="beatOption">
+          <div class="text-center">{{decay}} sec</div>
           {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
           Decay Rate
-        </span>
+        </div>
 
-        <span class="beatOption">
+        <div class="beatOption">
           {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
           Frequency Range
-        </span>
+        </div>
+
+        <div class="beatOption">
+          <div class="text-center">{{transitionTime}} sec</div>
+            {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
+              Transition Time
+        </div>
+
+        <div class="beatOption">
+          {{switch-button}}
+        </div>
       </div>
 
       <div id="playerButtonGroup">