Bottom area toggle
This commit is contained in:
parent
1874c79cbe
commit
d45ed0fd7b
6 changed files with 83 additions and 177 deletions
|
|
@ -14,6 +14,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}.observes('active'),
|
||||
|
||||
actions: {
|
||||
slideTogglePlayerBottom: function(){
|
||||
var playerBottomDisplayed = this.get('playerBottomDisplayed');
|
||||
this.changePlayerControl('playerBottomDisplayed', !playerBottomDisplayed);
|
||||
|
||||
if(!playerBottomDisplayed){
|
||||
Em.$('#playerBottom').slideDown();
|
||||
} else {
|
||||
Em.$('#playerBottom').slideUp();
|
||||
}
|
||||
},
|
||||
saveSongPreference: function() {
|
||||
},
|
||||
goToSong: function(index){
|
||||
|
|
@ -143,8 +153,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.changePlayerControl('threshold', value, true);
|
||||
},
|
||||
transitionTimeChanged: function(value) {
|
||||
this.changePlayerControl('transitionTime', value, true);
|
||||
this.changePlayerControl('transitionTime', value);
|
||||
},
|
||||
playerBottomDisplayedChanged: function(value) {},
|
||||
decayChanged: function(value){
|
||||
this.changePlayerControl('decay', value, true);
|
||||
},
|
||||
|
|
@ -255,6 +266,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
simulateKick: function(mag) {
|
||||
var activeLights = this.get('activeLights'),
|
||||
transitionTime = this.get('transitionTime') * 10,
|
||||
transitionBriOffFactor = 5,
|
||||
self = this,
|
||||
brightnessChange = function (light, brightness) {
|
||||
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
|
||||
|
|
@ -273,17 +285,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
light = activeLights[lastLightBopIndex];
|
||||
this.set('lastLightBopIndex', (lastLightBopIndex+1) % activeLights.length);
|
||||
} else {
|
||||
light = Math.floor(Math.random() * activeLights.length);
|
||||
light = Math.floor(Math.random() * activeLights.length) + 1;
|
||||
}
|
||||
|
||||
brightnessChange(light, 254);
|
||||
setTimeout(brightnessChange, 50, light, 1);
|
||||
setTimeout(brightnessChange, transitionTime + 50, light, 1);
|
||||
|
||||
this.set('paused', true);
|
||||
|
||||
setTimeout(function () {
|
||||
self.set('paused', false);
|
||||
}, 100);
|
||||
}, 150);
|
||||
}
|
||||
|
||||
//work the music beat area
|
||||
|
|
@ -330,10 +342,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
kick: kick
|
||||
});
|
||||
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'sequentialTransition'].forEach(function (item) {
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'sequentialTransition', 'playerBottomDisplayed'].forEach(function (item) {
|
||||
if (localStorage.getItem('huegasm.' + item)) {
|
||||
var itemVal = localStorage.getItem('huegasm.' + item);
|
||||
if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold') {
|
||||
if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime') {
|
||||
itemVal = Number(itemVal);
|
||||
} else if(item === 'frequency') {
|
||||
itemVal = itemVal.split(',').map(function(val){return Number(val);});
|
||||
|
|
@ -358,6 +370,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
if(!this.get('playerBottomDisplayed')){
|
||||
Em.$('#playerBottom').hide();
|
||||
}
|
||||
|
||||
// control the volume by scrolling up/down
|
||||
Em.$('#playerArea').on('mousewheel', function(event) {
|
||||
if(self.get('playQueueNotEmpty')) {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ export default Em.Mixin.create({
|
|||
timeTotal: 0,
|
||||
lastLightBopIndex: 0,
|
||||
|
||||
playerBottomDisplayed: false,
|
||||
dragging: false,
|
||||
draggingOverPlayListArea: false,
|
||||
dragLeaveTimeoutHandle: null,
|
||||
|
|
@ -280,6 +281,14 @@ export default Em.Mixin.create({
|
|||
}
|
||||
},
|
||||
|
||||
beatDetectionArrowIcon: function(){
|
||||
if(this.get('playerBottomDisplayed')){
|
||||
return 'arrow-drop-down';
|
||||
} else {
|
||||
return 'arrow-drop-up';
|
||||
}
|
||||
}.property('playerBottomDisplayed'),
|
||||
|
||||
timeElapsedTxt: function(){
|
||||
return this.formatTime(this.get('timeElapsed'));
|
||||
}.property('timeElapsed'),
|
||||
|
|
|
|||
|
|
@ -397,6 +397,13 @@ md-toolbar {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#slideToggle {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 45%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
md-switch.md-default-theme.md-checked .md-bar {
|
||||
background-color: rgba(241, 43, 36, 0.5);
|
||||
}
|
||||
|
|
@ -656,10 +663,11 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
}
|
||||
|
||||
#beatOptionGroup {
|
||||
margin-top: 10px;
|
||||
.beatOption {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
text-align: center;
|
||||
.optionDescription {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -725,13 +733,13 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
#playerButtonGroup {
|
||||
margin-top: 10px;
|
||||
button {
|
||||
box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 5px 0 15px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
#vertDivider {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
|
|
@ -759,135 +767,3 @@ 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,11 +34,11 @@
|
|||
{{#paper-button action="findBridgeByIp" primary=true}}Find{{/paper-button}}
|
||||
</span>
|
||||
|
||||
{{#liquid-if manualBridgeIpNotFound}}
|
||||
{{#if manualBridgeIpNotFound}}
|
||||
<p class="bg-danger">
|
||||
Could not find a bridge with that IP address.
|
||||
</p>
|
||||
{{/liquid-if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -68,47 +68,52 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="slideToggle" class="text-center cursorPointer" {{action "slideTogglePlayerBottom"}}>
|
||||
{{paper-icon icon=beatDetectionArrowIcon}} Beat Detection Settings {{paper-icon icon=beatDetectionArrowIcon}}
|
||||
</div>
|
||||
|
||||
<div id="playerBottom" class="row">
|
||||
<div id="beatArea" class="col-sm-8 col-xs-12">
|
||||
<div id="vertDivider" class="hidden-xs"></div>
|
||||
<div id="beatOptionGroup">
|
||||
<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
|
||||
</div>
|
||||
<div id="vertDivider" class="hidden-xs"></div>
|
||||
|
||||
<div class="row">
|
||||
Light Selection {{#paper-switch checked=sequentialTransition}} {{sequentialTransitionLabel}} {{/paper-switch}}
|
||||
</div>
|
||||
|
||||
<div class="beatOption hidden">
|
||||
<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
|
||||
</div>
|
||||
|
||||
<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
|
||||
</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">
|
||||
Transition type: {{#paper-switch checked=sequentialTransition}} {{sequentialTransitionLabel}} {{/paper-switch}}
|
||||
</div>
|
||||
<div id="beatOptionGroup" class="row">
|
||||
<div class="beatOption col-xs-3">
|
||||
<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}}
|
||||
<span class="optionDescription">Max. Intensity</span>
|
||||
</div>
|
||||
|
||||
<div id="playerButtonGroup">
|
||||
<div class="beatOption col-xs-3">
|
||||
<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}}
|
||||
<span class="optionDescription">Decay Rate</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}} ,{{/unless}}{{/each}}]</div>
|
||||
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
|
||||
<span class="optionDescription">Frequency Range</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<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}}
|
||||
<span class="optionDescription">Transition Time</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playerButtonGroup" class="row">
|
||||
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
|
||||
{{#paper-button raised=true action="saveSongPreference"}}Save Song Preference{{/paper-button}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beatContainer" class="col-sm-4 col-xs-12">
|
||||
{{#liquid-if speakerViewed}}
|
||||
{{#if speakerViewed}}
|
||||
<div id="beatSpeaker">
|
||||
<img src="assets/images/speaker-outer.png" />
|
||||
<div id="beatSpeakerCenter">
|
||||
|
|
@ -121,7 +126,7 @@
|
|||
<p>{{{item}}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/if}}
|
||||
|
||||
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
"ember-export-application-global": "^1.0.3",
|
||||
"ember-modal-dialog": "0.8.1",
|
||||
"ember-paper": "0.2.8",
|
||||
"ember-truth-helpers": "1.1.0",
|
||||
"liquid-fire": "0.21.2"
|
||||
"ember-truth-helpers": "1.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue