diff --git a/web/app/pods/components/bridge-finder/component.js b/web/app/pods/components/bridge-finder/component.js index 2a8fa03..32940ca 100644 --- a/web/app/pods/components/bridge-finder/component.js +++ b/web/app/pods/components/bridge-finder/component.js @@ -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'); diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js index 35b0a61..cacc833 100644 --- a/web/app/pods/components/hue-controls/component.js +++ b/web/app/pods/components/hue-controls/component.js @@ -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')){ diff --git a/web/app/pods/components/hue-controls/template.hbs b/web/app/pods/components/hue-controls/template.hbs index a259d24..85884e6 100644 --- a/web/app/pods/components/hue-controls/template.hbs +++ b/web/app/pods/components/hue-controls/template.hbs @@ -2,13 +2,13 @@
{{#each tabData as |tab|}} - {{tab.name}} + {{tab.name}} {{/each}}
{{#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 @@
- {{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}} \ No newline at end of file diff --git a/web/app/pods/components/huegasm-app/component.js b/web/app/pods/components/huegasm-app/component.js index 4602087..7472972 100644 --- a/web/app/pods/components/huegasm-app/component.js +++ b/web/app/pods/components/huegasm-app/component.js @@ -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); diff --git a/web/app/pods/components/huegasm-app/template.hbs b/web/app/pods/components/huegasm-app/template.hbs index 3b46aae..6a34f36 100644 --- a/web/app/pods/components/huegasm-app/template.hbs +++ b/web/app/pods/components/huegasm-app/template.hbs @@ -32,7 +32,7 @@
© {{year}} - + Egor Philippov
diff --git a/web/app/pods/components/light-group/component.js b/web/app/pods/components/light-group/component.js index a3a43a0..c991ff5 100644 --- a/web/app/pods/components/light-group/component.js +++ b/web/app/pods/components/light-group/component.js @@ -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(); } } }); diff --git a/web/app/pods/components/light-group/template.hbs b/web/app/pods/components/light-group/template.hbs index dda1903..2b0361a 100644 --- a/web/app/pods/components/light-group/template.hbs +++ b/web/app/pods/components/light-group/template.hbs @@ -1,5 +1,5 @@ {{#each lightsList as |light|}} -
- +
+
{{/each}} \ No newline at end of file diff --git a/web/app/pods/components/lights-tab/component.js b/web/app/pods/components/lights-tab/component.js index 738c86b..29fcdab 100644 --- a/web/app/pods/components/lights-tab/component.js +++ b/web/app/pods/components/lights-tab/component.js @@ -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, diff --git a/web/app/pods/components/lights-tab/template.hbs b/web/app/pods/components/lights-tab/template.hbs index 9fe1907..17d689f 100644 --- a/web/app/pods/components/lights-tab/template.hbs +++ b/web/app/pods/components/lights-tab/template.hbs @@ -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}}

Power

diff --git a/web/app/pods/components/music-tab/component.js b/web/app/pods/components/music-tab/component.js index 9f5c326..d91d4cd 100644 --- a/web/app/pods/components/music-tab/component.js +++ b/web/app/pods/components/music-tab/component.js @@ -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 diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss index 6923725..0ce961e 100644 --- a/web/app/styles/app.scss +++ b/web/app/styles/app.scss @@ -63,7 +63,7 @@ body, button { text-align: right; } -.settings::before { +.settings:before { transition: 0.1s all ease-in-out; } diff --git a/web/app/styles/hue-controls.scss b/web/app/styles/hue-controls.scss index 18b0faa..7ca1925 100644 --- a/web/app/styles/hue-controls.scss +++ b/web/app/styles/hue-controls.scss @@ -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 { diff --git a/web/app/styles/light-group.scss b/web/app/styles/light-group.scss index 8d5fbe7..0f47272 100644 --- a/web/app/styles/light-group.scss +++ b/web/app/styles/light-group.scss @@ -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;