minor things
This commit is contained in:
Egor
parent
5b3a4b123b
commit
b4f2133cbd
5 changed files with 183 additions and 23 deletions
|
|
@ -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'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
5
app/components/mixins/visualizer.js
Normal file
5
app/components/mixins/visualizer.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Mixin.create({
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
<div class="beatOption">
|
||||
<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">
|
||||
|
|
|
|||
Reference in a new issue