From b4f2133cbd7c0aab9e77baf77b557635b261f11a Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 29 Sep 2015 00:29:20 -0700 Subject: [PATCH] minor things --- app/components/controls/music-control.js | 20 ++- app/components/mixins/music-control.js | 16 +++ app/components/mixins/visualizer.js | 5 + app/styles/app.scss | 136 +++++++++++++++++- .../components/controls/music-control.hbs | 29 ++-- 5 files changed, 183 insertions(+), 23 deletions(-) create mode 100644 app/components/mixins/visualizer.js diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js index b6fecfe..370f2c6 100644 --- a/app/components/controls/music-control.js +++ b/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); - }, - clickLight: function(light){ - var activeLights = this.get('activeLights'), - lightId = activeLights.indexOf(light); - - if(lightId !== -1){ - activeLights.removeObject(light); - } else { - activeLights.pushObject(light); - } + this.changePlayerControl('transitionTime', beatOptions.frequency.defaultValue, true); }, 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' }); diff --git a/app/components/mixins/music-control.js b/app/components/mixins/music-control.js index 68503f2..486954f 100644 --- a/app/components/mixins/music-control.js +++ b/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], diff --git a/app/components/mixins/visualizer.js b/app/components/mixins/visualizer.js new file mode 100644 index 0000000..ce023fe --- /dev/null +++ b/app/components/mixins/visualizer.js @@ -0,0 +1,5 @@ +import Em from 'ember'; + +export default Em.Mixin.create({ + +}); diff --git a/app/styles/app.scss b/app/styles/app.scss index a0147b2..fe56a5f 100644 --- a/app/styles/app.scss +++ b/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; +} diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index 5fd67a7..6d3af8d 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -71,23 +71,34 @@
- {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}} -
- - {{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} +
+
{{threshold}}
+ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} Max. Intensity - +
- + +
+
{{decay}} sec
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} Decay Rate - +
- +
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} Frequency Range - +
+ +
+
{{transitionTime}} sec
+ {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} + Transition Time +
+ +
+ {{switch-button}} +