fixing bugs, imroving code...hopefully
This commit is contained in:
parent
97cfa365a2
commit
e7b003fa13
13 changed files with 141 additions and 146 deletions
|
|
@ -52,7 +52,7 @@ export default Component.extend({
|
|||
|
||||
// find the bridge ip here
|
||||
init() {
|
||||
this._super();
|
||||
this._super(...arguments);
|
||||
|
||||
if(this.get('bridgeIp') === null) {
|
||||
$.ajax('https://www.meethue.com/api/nupnp', {
|
||||
|
|
@ -96,13 +96,15 @@ export default Component.extend({
|
|||
contentType: 'application/json',
|
||||
type: 'POST'
|
||||
}).done((result, status)=>{
|
||||
if (status === 'success' && !result[0].error) {
|
||||
this.clearBridgePingIntervalHandle();
|
||||
this.set('bridgeUsername', result[0].success.username);
|
||||
this.get('storage').set('huegasm.bridgeUsername', result[0].success.username);
|
||||
}
|
||||
if(!this.isDestroyed){
|
||||
this.set('bridgeAuthenticateReachedStatus', status);
|
||||
|
||||
this.set('bridgeAuthenticateReachedStatus', status);
|
||||
if (status === 'success' && !result[0].error) {
|
||||
this.clearBridgePingIntervalHandle();
|
||||
this.get('storage').set('huegasm.bridgeUsername', result[0].success.username);
|
||||
this.set('bridgeUsername', result[0].success.username);
|
||||
}
|
||||
}
|
||||
}).fail(()=>{
|
||||
this.clearBridgePingIntervalHandle();
|
||||
this.set('error', true);
|
||||
|
|
@ -122,7 +124,6 @@ export default Component.extend({
|
|||
retry(){
|
||||
this.onBridgeIpChange();
|
||||
},
|
||||
|
||||
findBridgeByIp() {
|
||||
let manualBridgeIp = this.get('manualBridgeIp');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
const {
|
||||
A,
|
||||
Component,
|
||||
computed,
|
||||
isEmpty,
|
||||
|
|
@ -12,11 +13,8 @@ const {
|
|||
export default Component.extend({
|
||||
classNames: ['container-fluid'],
|
||||
elementId: 'hue-controls',
|
||||
bridgeIp: null,
|
||||
manualBridgeIp: null,
|
||||
bridgeUsername: null,
|
||||
lightsData: null,
|
||||
activeLights: [],
|
||||
activeLights: A(),
|
||||
tabList: ["Lights", "Music"],
|
||||
selectedTab: 1,
|
||||
pauseLightUpdates: false,
|
||||
|
|
@ -60,7 +58,7 @@ export default Component.extend({
|
|||
});
|
||||
|
||||
if(haveTooltip) {
|
||||
run.once(this, function(){
|
||||
run.scheduleOnce('afterRender', function(){
|
||||
$('.bootstrap-tooltip').tooltip();
|
||||
});
|
||||
}
|
||||
|
|
@ -70,7 +68,7 @@ export default Component.extend({
|
|||
},
|
||||
|
||||
init() {
|
||||
this._super();
|
||||
this._super(...arguments);
|
||||
|
||||
if(!this.get('trial')) {
|
||||
this.updateLightData();
|
||||
|
|
@ -85,11 +83,7 @@ export default Component.extend({
|
|||
updateLightData(){
|
||||
let fail = ()=>{
|
||||
clearInterval(this.get('lightsDataIntervalHandle'));
|
||||
|
||||
this.get('storage').remove('huegasm.bridgeIp');
|
||||
this.get('storage').remove('huegasm.bridgeUsername');
|
||||
|
||||
location.reload();
|
||||
this.send('clearBridge');
|
||||
};
|
||||
|
||||
if(!this.get('pauseLightUpdates')){
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="row navigation">
|
||||
<div class="col-sm-6 col-sm-offset-3 col-xs-10">
|
||||
{{#each tabData as |tab|}}
|
||||
<span class="navigation-item pointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
<span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="settings" class="col-xs-2">
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#paper-button target=menu action="toggleMenu" icon-button=true}}
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon"}}
|
||||
{{/paper-button}}
|
||||
{{else}}
|
||||
{{#paper-menu-item action="clearBridge"}}
|
||||
|
|
@ -27,7 +27,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
|
||||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
|
||||
{{/if}}
|
||||
|
|
@ -40,7 +40,7 @@ export default Component.extend({
|
|||
}),
|
||||
|
||||
init(){
|
||||
this._super();
|
||||
this._super(...arguments);
|
||||
|
||||
let storage = new window.Locally.Store({compress: true});
|
||||
this.set('storage', storage);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div id="footer-text">
|
||||
© {{year}}
|
||||
|
||||
<a href="http://www.egorphilippov.me" div="" target="_blank" rel="noopener noreferrer">
|
||||
<a href="http://www.egorphilippov.me" target="_blank" rel="noopener noreferrer">
|
||||
Egor Philippov
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,111 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
const {
|
||||
A,
|
||||
Component,
|
||||
observer,
|
||||
computed,
|
||||
isEmpty,
|
||||
$,
|
||||
A
|
||||
$
|
||||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['light-group'],
|
||||
isHovering: false,
|
||||
lightsList: A(),
|
||||
activeLights: A(),
|
||||
|
||||
// list of all the lights in the hue system
|
||||
onLightsDataChange: observer('lightsData', 'activeLights.[]', 'dimmerOn', function(){
|
||||
if(!this.get('isHovering')){
|
||||
let lightsData = this.get('lightsData'),
|
||||
lightsList = A(),
|
||||
type;
|
||||
lightsList: computed('lightsData', 'activeLights.[]', 'dimmerOn', function(){
|
||||
let lightsData = this.get('lightsData'),
|
||||
activeLights = this.get('activeLights'),
|
||||
dimmerOn = this.get('dimmerOn'),
|
||||
lightsList = A(),
|
||||
type,
|
||||
activeClass;
|
||||
|
||||
for (let key in lightsData) {
|
||||
if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
|
||||
switch(lightsData[key].modelid){
|
||||
case 'LCT001':
|
||||
type = 'a19';
|
||||
break;
|
||||
case 'LCT002':
|
||||
type = 'br30';
|
||||
break;
|
||||
case 'LCT003':
|
||||
type = 'gu10';
|
||||
break;
|
||||
case 'LST001':
|
||||
type = 'lightstrip';
|
||||
break;
|
||||
case 'LLC010':
|
||||
type = 'lc_iris';
|
||||
break;
|
||||
case 'LLC011':
|
||||
type = 'lc_bloom';
|
||||
break;
|
||||
case 'LLC012':
|
||||
type = 'lc_bloom';
|
||||
break;
|
||||
case 'LLC006':
|
||||
type = 'lc_iris';
|
||||
break;
|
||||
case 'LLC007':
|
||||
type = 'lc_aura';
|
||||
break;
|
||||
case 'LLC013':
|
||||
type = 'storylight';
|
||||
break;
|
||||
case 'LWB004':
|
||||
type ='a19';
|
||||
break;
|
||||
case 'LLC020':
|
||||
type = 'huego';
|
||||
break;
|
||||
default:
|
||||
type = 'a19';
|
||||
}
|
||||
for (let key in lightsData) {
|
||||
activeClass = 'light-active';
|
||||
|
||||
let activeClass = 'light-active';
|
||||
|
||||
if(!this.get('activeLights').includes(key)){
|
||||
activeClass = 'light-inactive';
|
||||
}
|
||||
|
||||
lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass});
|
||||
if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
|
||||
switch(lightsData[key].modelid){
|
||||
case 'LCT001':
|
||||
type = 'a19';
|
||||
break;
|
||||
case 'LCT002':
|
||||
type = 'br30';
|
||||
break;
|
||||
case 'LCT003':
|
||||
type = 'gu10';
|
||||
break;
|
||||
case 'LST001':
|
||||
type = 'lightstrip';
|
||||
break;
|
||||
case 'LLC010':
|
||||
type = 'lc_iris';
|
||||
break;
|
||||
case 'LLC011':
|
||||
type = 'lc_bloom';
|
||||
break;
|
||||
case 'LLC012':
|
||||
type = 'lc_bloom';
|
||||
break;
|
||||
case 'LLC006':
|
||||
type = 'lc_iris';
|
||||
break;
|
||||
case 'LLC007':
|
||||
type = 'lc_aura';
|
||||
break;
|
||||
case 'LLC013':
|
||||
type = 'storylight';
|
||||
break;
|
||||
case 'LWB004':
|
||||
type ='a19';
|
||||
break;
|
||||
case 'LLC020':
|
||||
type = 'huego';
|
||||
break;
|
||||
default:
|
||||
type = 'a19';
|
||||
}
|
||||
}
|
||||
|
||||
this.set('lightsList', lightsList);
|
||||
if(dimmerOn){
|
||||
type += 'w';
|
||||
}
|
||||
|
||||
if(!activeLights.includes(key)){
|
||||
activeClass = 'light-inactive';
|
||||
}
|
||||
|
||||
lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass});
|
||||
}
|
||||
}
|
||||
|
||||
return lightsList;
|
||||
}),
|
||||
|
||||
didInsertElement() {
|
||||
if(this.get('lightsData')){
|
||||
this.onLightsDataChange();
|
||||
init(){
|
||||
this._super(...arguments);
|
||||
|
||||
let lightsData = this.get('lightsData'),
|
||||
activeLights = this.get('activeLights');
|
||||
|
||||
for (let key in lightsData) {
|
||||
if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
|
||||
activeLights.pushObject(key);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
clickLight(id, data){
|
||||
let light = $('.light'+id);
|
||||
clickLight(id){
|
||||
let activeLights = this.get('activeLights'),
|
||||
lightId = activeLights.indexOf(id);
|
||||
|
||||
if(!light.hasClass('bootstrap-tooltip')){
|
||||
light = light.parent();
|
||||
if(lightId !== -1){
|
||||
activeLights.removeObject(id);
|
||||
} else {
|
||||
activeLights.pushObject(id);
|
||||
this.set('syncLight', id);
|
||||
}
|
||||
|
||||
if(light.hasClass('light-inactive')){
|
||||
light.addClass('light-active').removeClass('light-inactive');
|
||||
} else if(light.hasClass('light-active')){
|
||||
light.addClass('light-inactive').removeClass('light-active');
|
||||
}
|
||||
|
||||
this.sendAction('action', id, data);
|
||||
},
|
||||
lightStartHover(id){
|
||||
let hoveredLight = this.get('lightsList').filter(function(light){
|
||||
|
|
@ -128,7 +136,6 @@ export default Component.extend({
|
|||
}
|
||||
|
||||
this.set('isHovering', false);
|
||||
this.onLightsDataChange();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#each lightsList as |light|}}
|
||||
<div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
|
||||
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg">
|
||||
<div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
|
||||
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
|
||||
</div>
|
||||
{{/each}}
|
||||
|
|
@ -12,11 +12,6 @@ export default Component.extend({
|
|||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'lights-tab',
|
||||
|
||||
activeLights: [],
|
||||
lightsData: null,
|
||||
|
||||
lightsDataIntervalHandle: null,
|
||||
|
||||
colorPickerDisplayed: false,
|
||||
|
||||
rgb: [255, 255, 255],
|
||||
|
|
@ -44,7 +39,9 @@ export default Component.extend({
|
|||
|
||||
// determines the average brightness of the hue system for the brightness slider
|
||||
lightsBrightness: computed('lightsData', function(){
|
||||
let lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsBrightness = 0;
|
||||
let lightsData = this.get('lightsData'),
|
||||
activeLights = this.get('activeLights'),
|
||||
lightsBrightness = 0;
|
||||
|
||||
activeLights.forEach(function(light){
|
||||
lightsBrightness += lightsData[light].state.bri;
|
||||
|
|
@ -153,9 +150,31 @@ export default Component.extend({
|
|||
}
|
||||
}),
|
||||
|
||||
// sync the current light settings to the newly added light
|
||||
onaActiveLightsChange: observer('syncLight', function(){
|
||||
let options = {
|
||||
on: this.get('lightsOn'),
|
||||
bri: this.get('lightsBrightness'),
|
||||
effect: this.get('colorLoopOn') ? 'colorloop' : 'none'
|
||||
}, rgb = this.get('rgb'),
|
||||
syncLight = this.get('syncLight');
|
||||
|
||||
if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
|
||||
options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
|
||||
options['transitiontime'] = 0;
|
||||
|
||||
$.ajax(this.get('apiURL') + '/lights/' + syncLight + '/state', {
|
||||
data: JSON.stringify(options),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
}),
|
||||
|
||||
didInsertElement() {
|
||||
$(document).click((event)=>{
|
||||
if(this.get('colorPickerDisplayed') && !event.target.classList.includes('color') && !$(event.target).closest('.color-picker, #color-row').length) {
|
||||
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.color-picker, #color-row').length) {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
});
|
||||
|
|
@ -166,39 +185,12 @@ export default Component.extend({
|
|||
},
|
||||
|
||||
actions: {
|
||||
clickLight(light){
|
||||
let activeLights = this.get('activeLights'),
|
||||
lightId = activeLights.indexOf(light);
|
||||
|
||||
if(lightId !== -1){
|
||||
activeLights.removeObject(light);
|
||||
} else {
|
||||
activeLights.pushObject(light);
|
||||
|
||||
// sync the current light settings to the newly added light
|
||||
let options = {on: this.get('lightsOn'), bri: this.get('lightsBrightness'), effect: this.get('colorLoopOn') ? 'colorloop' : 'none'},
|
||||
rgb = this.get('rgb');
|
||||
|
||||
if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
|
||||
options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
|
||||
options['transitiontime'] = 0;
|
||||
|
||||
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify(options),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
}
|
||||
},
|
||||
toggleColorPicker() {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
},
|
||||
|
||||
// **************** STROBE LIGHT START ****************
|
||||
|
||||
strobeOn: false,
|
||||
|
||||
strobeOnInervalHandle: null,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
{{#paper-list}}
|
||||
{{#paper-item class="item"}}
|
||||
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon "power-settings-new" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
init() {
|
||||
this._super();
|
||||
this._super(...arguments);
|
||||
|
||||
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
|
||||
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
|
||||
|
|
@ -361,8 +361,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
|
||||
let self = this;
|
||||
|
||||
// file input code
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ body, button {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.settings::before {
|
||||
.settings:before {
|
||||
transition: 0.1s all ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
#lights-tab {
|
||||
min-height: 400px;
|
||||
md-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lights-control-tooltip + .tooltip {
|
||||
|
|
@ -27,12 +30,13 @@
|
|||
|
||||
.navigation {
|
||||
text-align: center;
|
||||
padding: 30px 0 10px 0;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
font-size: 18px;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
.navigation-item.active {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.light-group {
|
||||
margin: 0 auto 0 auto;
|
||||
margin: 0 auto 10px auto;
|
||||
text-align: center;
|
||||
.tooltip.top {
|
||||
margin-top: 4px;
|
||||
margin-left: 0;
|
||||
|
|
|
|||
Reference in a new issue