starting on visualizations
This commit is contained in:
parent
c08eb87bda
commit
c6d9dd79d8
9 changed files with 272 additions and 18 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import Em from 'ember';
|
||||
import musicControlMixin from './mixins/music-tab';
|
||||
import helperMixin from './mixins/helpers';
|
||||
import visualizerMixin from './mixins/visualizer';
|
||||
|
||||
export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
||||
export default Em.Component.extend(helperMixin, visualizerMixin, {
|
||||
classNames: ['col-lg-10', 'col-lg-offset-1', 'col-xs-12'],
|
||||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'musicTab',
|
||||
|
|
@ -16,6 +16,12 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}.observes('active'),
|
||||
|
||||
actions: {
|
||||
setVisName(name){
|
||||
this.set('currentVisName', name);
|
||||
},
|
||||
hideTooltip(){
|
||||
Em.$(event.target).parent().parent().find('.tooltip').remove()
|
||||
},
|
||||
gotoURL(URL){
|
||||
Em.$('.tooltip').remove();
|
||||
window.open(URL, '_blank');
|
||||
|
|
@ -280,9 +286,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.send('goToSong', nextSong, true, true);
|
||||
}
|
||||
},
|
||||
toggleVisualizations() {
|
||||
this.toggleProperty('visualizationsDisplayed');
|
||||
},
|
||||
fullscreen() {},
|
||||
seekChanged(position) {
|
||||
var dancer = this.get('dancer');
|
||||
|
|
@ -663,7 +666,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.set('usingMicSupported', false);
|
||||
}
|
||||
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'songBeatPreferences', 'debugFiltered', 'firstVisit'].forEach(function (item) {
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'songBeatPreferences', 'debugFiltered', 'firstVisit', 'currentVisName'].forEach(function (item) {
|
||||
if (!Em.isNone(storage.get('huegasm.' + item))) {
|
||||
var itemVal = storage.get('huegasm.' + item);
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ export default Em.Mixin.create({
|
|||
dragging: false,
|
||||
draggingOverPlayListArea: false,
|
||||
dragLeaveTimeoutHandle: null,
|
||||
visualizationsDisplayed: false,
|
||||
audioStream: null,
|
||||
dimmerOn: false,
|
||||
isShowingAddSoundCloudModal: false,
|
||||
|
|
@ -1,5 +1,219 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Mixin.create({
|
||||
currentVisName: 'None',
|
||||
|
||||
currentVisSettings: function () {
|
||||
var name = this.get('currentVisName');
|
||||
|
||||
this.get('storage').set('huegasm.currentVisName', name);
|
||||
|
||||
if (Em.isNone(name)) {
|
||||
return null;
|
||||
} else {
|
||||
return this.get('visSettings').filter(function (vis) {
|
||||
return vis.name === name
|
||||
});
|
||||
}
|
||||
}.property('currentVisName'),
|
||||
|
||||
visNames: function () {
|
||||
return this.get('visSettings').map(function (vis) {
|
||||
return vis.name;
|
||||
});
|
||||
}.property('visSettings'),
|
||||
|
||||
visSettings: [{
|
||||
name: "None",
|
||||
set: null
|
||||
}, {
|
||||
name: "Borealis",
|
||||
set: {
|
||||
controls: {
|
||||
seuilAudible: 0.002942,
|
||||
radiusAmplitude: 0,
|
||||
radius: 116,
|
||||
radiusVar: 0.16,
|
||||
amplitudeOnMag: -1.02,
|
||||
colors: {r: 0.91, g: 0.6, b: 0.75},
|
||||
burningColors: {r: 8.7, g: 4.64, b: 3.29},
|
||||
burningColorsMax: {r: 0.898, g: 0.665, b: 0.258},
|
||||
spectralColors: {r: -1.24, g: -0.98, b: -1.6},
|
||||
bgColors: {r: 0, g: 0, b: 4},
|
||||
speed: -0.13,
|
||||
picture: "assets/images/flares/flare4.png",
|
||||
colorsDecr: {r: 0.04787, g: -0.00097, b: -0.00281},
|
||||
dots: 288,
|
||||
maxSize: 758,
|
||||
rotation: {x: 0, y: 0, z: 0},
|
||||
position: {x: 0, y: 0, z: 0},
|
||||
radiusIncr: -1.24,
|
||||
speedIncr: 4,
|
||||
opacityBase: 0.471,
|
||||
opacityAmp: 1.5,
|
||||
opacityDecr: 0.0048,
|
||||
centerAmp: 0,
|
||||
sizeAmp: 0.73,
|
||||
sizeDecr: -0.00289,
|
||||
freqSpeedIncr: 7.6313,
|
||||
magSpeedIncr: 0,
|
||||
baseRotate: -910.3086207435979,
|
||||
autoRotate: 0,
|
||||
rotateAmp: -0.029517,
|
||||
textureRotateDecr: 0.128881,
|
||||
textureRotateAmp: -0.7313,
|
||||
equalizer: 263,
|
||||
gravity: {x: -0.00558, y: 0.0068, z: 0.0121},
|
||||
showAmp: 0,
|
||||
blending: 2,
|
||||
autoTraveler: 1,
|
||||
camera: {
|
||||
positionIncr: {x: 0, y: 0, z: 0},
|
||||
traveler: {
|
||||
freq: {x: 0, y: 0.01, z: 0.01, x2: 0, y2: 0, z2: 0},
|
||||
phase: {x: 0, y: 0.01, z: 0.01, x2: 0, y2: 0, z2: 0},
|
||||
width: {x: 0, y: 0.1, z: 0.1, x2: 0, y2: 0, z2: 0},
|
||||
center: {x: 0, y: 0, z: 0, x2: 0, y2: 0, z2: 0}
|
||||
}
|
||||
}
|
||||
},
|
||||
camera: {
|
||||
position: {x: 40, y: 13.218400900933863, z: -9.516315737622158},
|
||||
rotation: {x: -2.194772871513226, y: 1.184106819993227, z: 2.2315573880289308}
|
||||
},
|
||||
particles: {
|
||||
position: {x: -198.4052190636108, y: -37.40200000000022, z: 15.228000000000227},
|
||||
rotation: {x: 4.733931634852215, y: 1.9666500000000078, z: -0.16421999999999976}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Lightwave",
|
||||
set: [{
|
||||
controls: {
|
||||
seuilAudible: 0.002088,
|
||||
radiusAmplitude: -7.852,
|
||||
radius: 120,
|
||||
radiusVar: 0.012,
|
||||
radiusVarAmp: 0,
|
||||
amplitudeOnMag: 0,
|
||||
colors: {r: 0.81, g: 0.81, b: 0.94},
|
||||
burningColors: {r: 7.24, g: 4.02, b: 9.42},
|
||||
burningColorsMax: {r: 0.206, g: 0.299, b: 0.9},
|
||||
spectralColors: {r: -0.28, g: 0, b: 0.19},
|
||||
bgColors: {r: 0, g: 0, b: -1},
|
||||
speed: -0.48,
|
||||
picture: "assets/images/flares/vor8.2.png",
|
||||
colorsDecr: {r: 0.00057, g: 0.00364, b: 0.02},
|
||||
dots: 482,
|
||||
maxSize: 464,
|
||||
rotation: {x: 0, y: 0, z: 0},
|
||||
position: {x: 0, y: 0, z: 0},
|
||||
radiusIncr: -1.89,
|
||||
radiusIncrAmp: 4.8,
|
||||
speedIncr: -37,
|
||||
opacityBase: 0.986,
|
||||
opacityAmp: 6.7,
|
||||
opacityDecr: 0.0086,
|
||||
centerAmp: 0,
|
||||
sizeAmp: 2.63,
|
||||
sizeDecr: 0,
|
||||
freqSpeedIncr: 0,
|
||||
magSpeedIncr: 0,
|
||||
baseRotate: -910.8242890837017,
|
||||
autoRotate: 0.0011,
|
||||
rotateAmp: -0.179517,
|
||||
textureRotateDecr: 0.02761,
|
||||
textureRotateAmp: 0,
|
||||
equalizer: -145,
|
||||
gravity: {x: -0.00011, y: -0.0116, z: 0.0154},
|
||||
gravityAmp: {x: 0, y: 0, z: 1.97},
|
||||
showAmp: 0,
|
||||
blending: 2,
|
||||
autoTraveler: 1,
|
||||
camera: {
|
||||
positionIncr: {x: 0, y: 0, z: 0},
|
||||
traveler: {
|
||||
freq: {x: 0.0191, y: 0.01, z: 0.01, x2: 0, y2: 0.008925, z2: 0.00265},
|
||||
phase: {x: 0.0154, y: 0.01, z: 0.01, x2: 0, y2: 0.0125, z2: 0.003525},
|
||||
width: {x: 0.84, y: -0.02, z: -0.02, x2: 0, y2: 0.005, z2: 0},
|
||||
center: {x: 0, y: 0, z: 0, x2: 0, y2: 0, z2: 0}
|
||||
}
|
||||
}
|
||||
},
|
||||
camera: {
|
||||
position: {x: 28.290507810306817, y: -79.05312595414983, z: 148.26913157117622},
|
||||
rotation: {x: 0.4898326329313103, y: 0.16680418921697668, z: -0.08829352787105102}
|
||||
},
|
||||
particles: {
|
||||
position: {x: 31, y: 35.789000000000456, z: 30.221000000000057},
|
||||
rotation: {x: 1.5, y: 3.813987739867519, z: 10.34557348383392}
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: "Neutrino",
|
||||
set: {
|
||||
controls: {
|
||||
seuilAudible: 0.001,
|
||||
radiusAmplitude: 0.422,
|
||||
radius: 207,
|
||||
radiusVar: 0.008,
|
||||
radiusVarAmp: -4510,
|
||||
amplitudeOnMag: 0,
|
||||
colors: {r: 0.38, g: 0.84, b: 0.87},
|
||||
burningColors: {r: 9.42, g: 8.17, b: 1.5},
|
||||
burningColorsMax: {r: 1, g: 0.583, b: 0.183},
|
||||
spectralColors: {r: -0.3, g: 0.23, b: -0.13},
|
||||
bgColors: {r: 0, g: 0, b: -1},
|
||||
speed: 8.49,
|
||||
picture: "assets/images/flares/colo.png",
|
||||
colorsDecr: {r: 0, g: 0, b: 0},
|
||||
dots: 478,
|
||||
maxSize: 392,
|
||||
rotation: {x: 0, y: 0, z: 0},
|
||||
position: {x: 0, y: 0, z: 0},
|
||||
radiusIncr: -1.13,
|
||||
radiusIncrAmp: -14.48,
|
||||
speedIncr: 0,
|
||||
opacityBase: 0.88,
|
||||
opacityAmp: 1.3,
|
||||
opacityDecr: 0.0152,
|
||||
centerAmp: 0,
|
||||
sizeAmp: 2.625,
|
||||
sizeDecr: 0,
|
||||
freqSpeedIncr: 2.6026,
|
||||
magSpeedIncr: 0.3834,
|
||||
baseRotate: -543.1624876256562,
|
||||
autoRotate: 0,
|
||||
rotateAmp: 0,
|
||||
textureRotateDecr: 0.02761,
|
||||
textureRotateAmp: 0,
|
||||
equalizer: 83,
|
||||
gravity: {x: -0.00281, y: 0.0136, z: 0.0196},
|
||||
gravityAmp: {x: -4.2, y: -0.15, z: 1.02},
|
||||
showAmp: 0,
|
||||
blending: 2,
|
||||
autoTraveler: 0,
|
||||
camera: {
|
||||
positionIncr: {x: 0, y: 0, z: 0},
|
||||
traveler: {
|
||||
freq: {x: 0, y: 0.01, z: 0.01, x2: 0, y2: 0.008925, z2: 0.00265},
|
||||
phase: {x: 0, y: 0.01, z: 0.01, x2: 0, y2: 0.0125, z2: 0.003525},
|
||||
width: {x: 0, y: -0.02, z: -0.02, x2: 0, y2: 0.005, z2: 0},
|
||||
center: {x: 0, y: 0, z: 0, x2: 0, y2: 0, z2: 0}
|
||||
}
|
||||
}
|
||||
},
|
||||
camera: {
|
||||
position: {x: 40, y: -305.0573302931556, z: -176.2810417210021},
|
||||
rotation: {x: 2.094778817564933, y: 0.11304655916704225, z: -2.9488045979781217}
|
||||
},
|
||||
particles: {
|
||||
position: {x: -20, y: 62.67200000000026, z: 77.36300000000016},
|
||||
rotation: {x: 1.5, y: 4.53220881574775, z: 12.23706348383359}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<div class="row">
|
||||
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
|
||||
<div id="playerArea" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "displayIcon"}}" {{action "playerAreaPlay"}}>
|
||||
<canvas id="visualization"></canvas>
|
||||
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
|
||||
|
||||
<div id="playerControls">
|
||||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
|
||||
|
|
@ -26,10 +27,25 @@
|
|||
<span class="pull-right">
|
||||
{{#if scUrl}}
|
||||
<a href="#" data-toggle="tooltip" data-placement="top" class="soundCloudLink bootstrapTooltip" data-title="Listen on SoundCloud" {{action "gotoURL" scUrl}}>
|
||||
<img src="assets/images/sc-white.png" />
|
||||
<img src="assets/images/sc-white.png" />
|
||||
</a>
|
||||
{{/if}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}</span>
|
||||
<span class="dropup">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
||||
{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<ul class="dropdown-menu visualizersMenu">
|
||||
{{#each visNames as |name|}}
|
||||
<li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li>
|
||||
{{/each}}
|
||||
|
||||
<li><a href="" class="credits" {{action "gotoURL" "http://do.adive.in/music/"}}>Music visualizations by Vor</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ $footerHeight: 40px;
|
|||
$playerBottomHeight: 340px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||
$dimmerOnButtonColor: #404040;
|
||||
|
||||
// BRIDGE FINDER
|
||||
html {
|
||||
|
|
@ -868,13 +869,13 @@ body.dimmerOn {
|
|||
}
|
||||
.playlistItem {
|
||||
color: #cdcdcd;
|
||||
background: #2D2D2D;
|
||||
background: $dimmerOnButtonColor;
|
||||
}
|
||||
.playlistItem.active {
|
||||
background: darken(#2D2D2D, 13%) !important;
|
||||
background: darken($dimmerOnButtonColor, 15%) !important;
|
||||
}
|
||||
.playlistItem:hover {
|
||||
background: darken(#2D2D2D, 10%);
|
||||
background: darken($dimmerOnButtonColor, 10%);
|
||||
}
|
||||
.playlistItem .close {
|
||||
color: #cdcdcd !important;
|
||||
|
|
@ -898,10 +899,10 @@ body.dimmerOn {
|
|||
}
|
||||
}
|
||||
.addNewMusic {
|
||||
background: #2D2D2D;
|
||||
background: $dimmerOnButtonColor
|
||||
}
|
||||
.addNewMusic:hover {
|
||||
background: darken(#2D2D2D, 5%);
|
||||
background: darken($dimmerOnButtonColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -959,9 +960,12 @@ button.md-warn {
|
|||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
.ember-modal-dialog {
|
||||
div.ember-modal-dialog {
|
||||
padding: 20px;
|
||||
color: black;
|
||||
md-input-container input {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.addMusicButton {
|
||||
|
|
@ -1000,3 +1004,21 @@ button.md-warn {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.credits {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.visualizersMenu {
|
||||
left: -165px;
|
||||
}
|
||||
|
||||
.displayIcon {
|
||||
background:url(assets/images/favicons/favicon-194x194.png) center center no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
|
|||
|
||||
module.exports = function(defaults) {
|
||||
var app = new EmberApp(defaults, {
|
||||
emberCliFontAwesome: {
|
||||
useScss: true
|
||||
fingerprint: {
|
||||
exclude: ['flare4.png', 'vor8.2.png', 'colo.png']
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
BIN
public/assets/images/flares/colo.png
Normal file
BIN
public/assets/images/flares/colo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/assets/images/flares/flare4.png
Normal file
BIN
public/assets/images/flares/flare4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
public/assets/images/flares/vor8.2.png
Normal file
BIN
public/assets/images/flares/vor8.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Reference in a new issue