bug fixes, better visualizations
This commit is contained in:
parent
2ed71df90c
commit
e46a82e433
10 changed files with 87 additions and 66 deletions
|
|
@ -7,7 +7,6 @@ Music awesomeness for hue lights.
|
|||
- youtube video
|
||||
|
||||
## BUGS
|
||||
- BUGS BUGS BUGS
|
||||
|
||||
## POSSIBLE FUTURE FEATURES
|
||||
- better visualizations
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ export default Em.Component.extend({
|
|||
}.observes('bridgeIp').on('init'),
|
||||
|
||||
pingBridgeUser() {
|
||||
var bridgeIp = this.get('bridgeIp'), self = this, bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'),
|
||||
var bridgeIp = this.get('bridgeIp'),
|
||||
bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'),
|
||||
bridgeUsernamePingMaxTime = this.get('bridgeUsernamePingMaxTime');
|
||||
|
||||
if (bridgeIp !== null && bridgeUserNamePingIntervalProgress < 100) {
|
||||
|
|
@ -117,24 +118,26 @@ export default Em.Component.extend({
|
|||
data: JSON.stringify({"devicetype": "huegasm"}),
|
||||
contentType: 'application/json',
|
||||
type: 'POST'
|
||||
}).done(function (result, status) {
|
||||
}).done((result, status)=>{
|
||||
if (status === 'success') {
|
||||
if (!result[0].error) {
|
||||
self.set('bridgeUsername', result[0].success.username);
|
||||
this.setProperties({
|
||||
bridgeUsername: result[0].success.username,
|
||||
bridgePingIntervalHandle: null
|
||||
});
|
||||
|
||||
this.get('storage').set('huegasm.bridgeUsername', result[0].success.username);
|
||||
clearInterval(self.get('bridgePingIntervalHandle'));
|
||||
self.set('bridgePingIntervalHandle', null);
|
||||
clearInterval(this.get('bridgePingIntervalHandle'));
|
||||
}
|
||||
self.set('bridgeAuthenticateError', result[0].internalipaddress);
|
||||
this.set('bridgeAuthenticateError', result[0].internalipaddress);
|
||||
}
|
||||
|
||||
self.set('bridgeAuthenticateReachedStatus', status);
|
||||
this.set('bridgeAuthenticateReachedStatus', status);
|
||||
});
|
||||
|
||||
this.incrementProperty('bridgeUserNamePingIntervalProgress', this.get('bridgeUsernamePingIntervalTime')/bridgeUsernamePingMaxTime*100);
|
||||
} else {
|
||||
clearInterval(this.get('bridgePingIntervalHandle'));
|
||||
this.set('bridgePingIntervalHandle', null);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default Em.Component.extend({
|
|||
}
|
||||
|
||||
return groupsArrData;
|
||||
}.property('groupsData', 'lightsData', 'groupIdSelection'),
|
||||
}.property('groupsData', 'groupIdSelection'),
|
||||
|
||||
onGroupIdSelectionChanged: function(){
|
||||
var groupIdSelection = this.get('groupIdSelection'), lights = [];
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@ export default Em.Component.extend({
|
|||
{
|
||||
element: '#musicTab',
|
||||
intro: 'This is the music tab. Here you\'ll be able to play music and synchronize it with your active lights.<br><br>' +
|
||||
'<i>TIP: Control which lights are active through the <b>Lights</b> tab or through the <b>Groups</b> menu dropdown.</i>'
|
||||
'<i><b>TIP</b>: Control which lights are active through the <b>Lights</b> tab or through the <b>Groups</b> menu dropdown.</i>'
|
||||
},
|
||||
{
|
||||
element: '#playlist',
|
||||
intro: 'You can add and select music to play from your playlist here. You may add local audio files, stream music from soundcloud or stream music into the application fromn your mic.<br><br>' +
|
||||
'<i>TIP: Songs added through soundcloud will be saved for when you visit this page again.</i>'
|
||||
'<i><b>TIP</b>: Songs added through soundcloud will be saved for when you visit this page again.</i>'
|
||||
},
|
||||
{
|
||||
element: '#playerArea',
|
||||
|
|
@ -57,7 +57,8 @@ export default Em.Component.extend({
|
|||
'<b>Beat Interval</b> - The minimum amount of time between each registered beat <br>' +
|
||||
'<b>Frequency Range</b> - The frequency range of the sound to listen on for the beat<br>' +
|
||||
'<b>Transition Time</b> - The time it takes for a light to change color or brightness<br><br>' +
|
||||
'<i>TIP: Beat settings are saved per song as indicated by the red start icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>'
|
||||
'<i><b>TIP</b>: Beat settings are saved per song as indicated by the red start icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#beatOptionButtonGroup',
|
||||
|
|
@ -65,12 +66,14 @@ export default Em.Component.extend({
|
|||
'<b>Default</b> - Revert to the default beat detection settings<br>' +
|
||||
'<b>Random/Sequential</b> - The transition order of lights on beat<br>' +
|
||||
'<b>Brightness/Brightness & Color</b> - The properties of the lights to change on beat<br><br>' +
|
||||
'<i>TIP: Turn the colorloop \'on\' in the <b>Lights</b> tab and set only the brightness to change on beat for a cool visual effect.</i>'
|
||||
'<i><b>TIP</b>: Turn the colorloop \'on\' in the <b>Lights</b> tab and set only the brightness to change on beat for a cool visual effect.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#beatContainer',
|
||||
intro: 'An interactive speaker that will bump on a registered beat. Switch over to the <b>Debug View</b> to see the intesity of all the registered and unregistered beats.<br><br>' +
|
||||
'<i>TIP: Click on the center of the speaker to simulate a beat.</i>'
|
||||
'<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#lightsTab',
|
||||
|
|
@ -93,13 +96,13 @@ export default Em.Component.extend({
|
|||
{
|
||||
element: Em.$('.settingsItem')[1],
|
||||
intro: 'A few miscellaneous settings can be found here.<br><br>' +
|
||||
'<b>WARNING:</b> clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.',
|
||||
'<b>WARNING</b>: clearing application settings will resto re the application to its original state. This will even delete your playlist and any saved song beat preferences.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#dimmerWrapper',
|
||||
intro: 'Enjoy the application. ;) <br><br>' +
|
||||
'<i>TIP: click on the lightbulb to turn off the lights.</i>',
|
||||
intro: 'And that\'s it...Enjoy the application. ;) <br><br>' +
|
||||
'<i><b>TIP</b>: click on the lightbulb to turn off the lights.</i>',
|
||||
position: 'top'
|
||||
}
|
||||
]
|
||||
|
|
@ -133,15 +136,17 @@ export default Em.Component.extend({
|
|||
}
|
||||
});
|
||||
|
||||
intro.onexit(()=>{
|
||||
var onFinish = ()=>{
|
||||
this.set('activeTab', 1);
|
||||
Em.$('#musicTab').removeClass('hidden');
|
||||
Em.$('#lightsTab').addClass('hidden');
|
||||
Em.$('.navigationItem').eq(0).removeClass('active');
|
||||
Em.$('.navigationItem').eq(1).addClass('active');
|
||||
playerBottom.hide();
|
||||
});
|
||||
};
|
||||
|
||||
intro.onexit(onFinish);
|
||||
intro.oncomplete(onFinish);
|
||||
intro.start();
|
||||
}
|
||||
},
|
||||
|
|
@ -223,20 +228,21 @@ export default Em.Component.extend({
|
|||
pauseLightUpdates: false,
|
||||
|
||||
updateLightData(){
|
||||
var self = this, fail = function() {
|
||||
var fail = ()=>{
|
||||
clearInterval(self.get('lightsDataIntervalHandle'));
|
||||
self.setProperties({
|
||||
bridgeIp: null,
|
||||
bridgeUsername: null
|
||||
});
|
||||
|
||||
this.get('storage').remove('huegasm.bridgeIp');
|
||||
this.get('storage').remove('huegasm.bridgeUsername');
|
||||
|
||||
location.reload();
|
||||
};
|
||||
|
||||
if(!this.get('pauseLightUpdates')){
|
||||
Em.$.get(this.get('apiURL') + '/lights', function (result, status) {
|
||||
Em.$.get(this.get('apiURL') + '/lights', (result, status)=>{
|
||||
if(!Em.isNone(result[0]) && !Em.isNone(result[0].error)){
|
||||
fail();
|
||||
} else if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result)) {
|
||||
self.set('lightsData', result);
|
||||
} else if (status === 'success' && JSON.stringify(this.get('lightsData')) !== JSON.stringify(result)) {
|
||||
this.set('lightsData', result);
|
||||
}
|
||||
}).fail(fail);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,5 +30,5 @@
|
|||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected dimmerOn=dimmerOn}}
|
||||
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage firstVisit=firstVisit action="startIntro"}}
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage action="startIntro"}}
|
||||
{{/if}}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="title">Huegasm</div>
|
||||
<p>Huegasm is a free web application for controlling your Philips Hue lights...oh and it's kind of awesome at syncing music with your lights.</p>
|
||||
|
||||
{{#paper-button raised=true primary=true action="isReady" class="goButton"}}Go!{{/paper-button}}
|
||||
{{#paper-button raised=true primary=true action="isReady" class="goButton"}}Start!{{/paper-button}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -769,16 +769,11 @@ export default Em.Component.extend(helperMixin, visualizerMixin, {
|
|||
if(this.get('firstVisit')){
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/tracks');
|
||||
this.get('storage').set('huegasm.firstVisit', false);
|
||||
this.sendAction();
|
||||
}
|
||||
|
||||
if(!this.get('playerBottomDisplayed')) {
|
||||
Em.$('#playerBottom').hide();
|
||||
}
|
||||
|
||||
if(this.get('firstVisit')){
|
||||
|
||||
}
|
||||
|
||||
this.sendAction();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,16 +18,31 @@ export default Em.Mixin.create({
|
|||
this.get('storage').set('huegasm.currentVisName', currentVisName);
|
||||
}.observes('currentVisName'),
|
||||
|
||||
doDancerBind(){
|
||||
didInsertElement(){
|
||||
var dancer = this.get('dancer'),
|
||||
canvasEl = Em.$('#visualization')[0],
|
||||
ctx = canvasEl.getContext('2d'),
|
||||
spacing = 0,
|
||||
h = canvasEl.height,
|
||||
w = canvasEl.width;
|
||||
canvas = Em.$('#visualization')[0],
|
||||
playerArea = Em.$('#playerArea'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
spacing = 2,
|
||||
h = Em.$('#playerArea').height(), w;
|
||||
|
||||
canvas.height = h;
|
||||
|
||||
// must be done to preserver resolution so that things don't appear blurry
|
||||
// note that the height is set to 400px via css so it doesn't need to be recalculated
|
||||
var syncCanvasHeight = ()=>{
|
||||
w = playerArea.width();
|
||||
canvas.width = w;
|
||||
};
|
||||
|
||||
syncCanvasHeight();
|
||||
|
||||
Em.$(window).on('resize', syncCanvasHeight);
|
||||
|
||||
dancer.bind('update', () => {
|
||||
var currentVisName = this.get('currentVisName');
|
||||
var currentVisName = this.get('currentVisName'),
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, h);
|
||||
|
||||
if(currentVisName === 'None'){
|
||||
return;
|
||||
}
|
||||
|
|
@ -35,12 +50,11 @@ export default Em.Mixin.create({
|
|||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
if (currentVisName === 'Wave') {
|
||||
let width = 1,
|
||||
count = 1024,
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
let width = 3,
|
||||
count = 1024;
|
||||
|
||||
gradient.addColorStop(0.6, 'white');
|
||||
gradient.addColorStop(0, '#0036FA');
|
||||
gradient.addColorStop(0.3, 'white');
|
||||
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = gradient;
|
||||
|
|
@ -55,24 +69,19 @@ export default Em.Mixin.create({
|
|||
ctx.closePath();
|
||||
} else if (currentVisName === 'Bars') {
|
||||
let width = 4,
|
||||
count = 128,
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
count = 128;
|
||||
|
||||
gradient.addColorStop(0.5, '#0f0');
|
||||
gradient.addColorStop(0.4, '#ff0');
|
||||
gradient.addColorStop(0, '#F12B24');
|
||||
gradient.addColorStop(1, '#0f0');
|
||||
gradient.addColorStop(0.6, '#ff0');
|
||||
gradient.addColorStop(0.2, '#F12B24');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
var spectrum = dancer.getSpectrum();
|
||||
for (let i = 0, l = spectrum.length; i < l && i < count; i++) {
|
||||
ctx.fillRect(i * ( spacing + width ), h, width, -spectrum[i] * h - 23);
|
||||
ctx.fillRect(i * ( spacing + width ), h, width, -spectrum[i] * h - 60);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
didInsertElement(){
|
||||
this.doDancerBind();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
|
|
|||
|
|
@ -923,7 +923,7 @@ body.dimmerOn {
|
|||
#dimmerWrapper {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
bottom: -16px;
|
||||
bottom: -10px;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 40px;
|
||||
|
|
@ -1005,8 +1005,6 @@ div.ember-modal-dialog {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.check {
|
||||
|
|
@ -1050,10 +1048,21 @@ div.ember-modal-dialog {
|
|||
height: 23px;
|
||||
}
|
||||
|
||||
#settings.introjs-fixParent{
|
||||
position: inherit !important;
|
||||
}
|
||||
|
||||
.introjs-tooltip {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#settings.introjs-fixParent{
|
||||
position: inherit !important;
|
||||
.introjs-skipbutton{
|
||||
color: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
.introjs-bullets ul li a.active {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: -2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,17 +31,17 @@
|
|||
"ember-cli-inject-live-reload": "^1.3.0",
|
||||
"ember-cli-nouislider": "0.7.0",
|
||||
"ember-cli-qunit": "1.0.3",
|
||||
"ember-cli-release": "0.2.7",
|
||||
"ember-cli-sass": "5.0.0",
|
||||
"ember-cli-release": "0.2.8",
|
||||
"ember-cli-sass": "5.0.1",
|
||||
"ember-cli-sri": "^1.0.1",
|
||||
"ember-cli-uglify": "^1.0.1",
|
||||
"ember-cli-windows-addon": "^1.2.2",
|
||||
"ember-data": "2.1.0",
|
||||
"ember-disable-proxy-controllers": "^1.0.0",
|
||||
"ember-export-application-global": "^1.0.3",
|
||||
"ember-modal-dialog": "0.8.1",
|
||||
"ember-modal-dialog": "0.8.2",
|
||||
"ember-notify": "^4.0.1",
|
||||
"ember-paper": "0.2.8",
|
||||
"ember-truth-helpers": "1.1.0"
|
||||
"ember-truth-helpers": "1.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue