From 74711ff0d3cbedbd3ae8aa864ad7da304d9f9911 Mon Sep 17 00:00:00 2001 From: Egor Date: Thu, 17 Sep 2015 09:40:36 -0700 Subject: [PATCH] better lightgroup formatting - WIP --- README.md | 2 + app/components/light-group.js | 126 ++++++++++-------- app/styles/app.scss | 17 ++- .../components/controls/music-control.hbs | 18 +-- app/templates/components/light-group.hbs | 2 +- bower.json | 4 +- 6 files changed, 94 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index d4cefcc..b5c2946 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,8 @@ Music awesomeness for hue lights. - help, contact, about, youtube video ??? - beat settings by interval - integration with youtube, soundcloud, spotify ??? +- auto beat detection mode +- lights on/off switch ## BUGS - fuckery when listening to music and switching tabs diff --git a/app/components/light-group.js b/app/components/light-group.js index b35b74b..caebac4 100644 --- a/app/components/light-group.js +++ b/app/components/light-group.js @@ -2,6 +2,12 @@ import Em from 'ember'; export default Em.Component.extend({ + classNames: ['lightGroup'], + + isHovering: false, + + lightsList: Em.A(), + actions: { clickLight: function(id, data){ this.sendAction('action', id, data); @@ -18,6 +24,8 @@ export default Em.Component.extend({ type: 'PUT' }); } + + this.set('isHovering', true); }, lightStopHover: function(id){ var hoveredLight = this.get('lightsList').filter(function(light){ @@ -31,69 +39,71 @@ export default Em.Component.extend({ type: 'PUT' }); } + + this.set('isHovering', false); } }, - classNames: ['lightGroup'], - // list of all the lights in the hue system - lightsList: function(){ - var lightsData = this.get('lightsData'), lightsList = [], type; - for (var key in lightsData) { - if (lightsData.hasOwnProperty(key)) { - 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'; + onLightsDataChange: function(){ + if(!this.get('isHovering')){ + var lightsData = this.get('lightsData'), lightsList = Em.A(), type; + for (var key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + 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'; + } + + var activeClass = 'lightActive'; + + if(!this.get('activeLights').contains(key)){ + activeClass = 'lightInactive'; + } else if(!lightsData[key].state.reachable){ + activeClass = 'lightUnreachable'; + } + + lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass}); } - - var activeClass = 'lightActive'; - - if(!this.get('activeLights').contains(key)){ - activeClass = 'lightInactive'; - } else if(!lightsData[key].state.reachable){ - activeClass = 'lightUnreachable'; - } - - lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass}); } - } - return lightsList; - }.property('lightsData', 'activeLights.[]') + this.set('lightsList', lightsList); + } + }.observes('lightsData', 'activeLights.[]') }); diff --git a/app/styles/app.scss b/app/styles/app.scss index 4998e14..5c05f91 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -98,6 +98,7 @@ md-progress-circular { // BRIDGE CONTROLS #bridgeControls { + position: relative; max-width: 1000px; } @@ -153,6 +154,9 @@ md-progress-circular { .lightGroup { margin: 0 auto 0 auto; + .tooltip.top { + margin-top: -10px; + } } .hueLight { @@ -182,14 +186,15 @@ md-progress-circular { background-color: rgba(255, 0, 0, 0.7); } -.lightActive:hover { +.lightActive img { cursor: pointer; - -webkit-transition-duration: 0.5s; - transition-duration: 0.5s; - -webkit-transform: scale(1.2); + transition-duration: 0.3s; + transition-property: transform; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.lightActive img:hover { transform: scale(1.2); - -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); - transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .ember-modal-overlay.translucent { diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index c29d83e..44914ae 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -5,20 +5,20 @@ {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} {{#if playQueueMultiple}} - {{paper-icon icon="skip-previous" class="playerControllIcon"}}{{/if}}{{paper-icon icon=playingIcon class="playerControllIcon"}}{{paper-icon icon=playingIcon class="playerControllIcon"}}{{#if playQueueMultiple}}{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}{{/if}}{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}} {{timeElapsedTxt}} / {{timeTotalTxt}} {{paper-icon icon="fullscreen" class="playerControllIcon"}} + data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}} @@ -29,12 +29,12 @@
{{paper-icon icon="shuffle" class=shuffleClass}} + data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}} {{paper-icon icon=repeatIcon class=repeatClass}} + data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}} - {{paper-icon icon="add" class="playerControllIcon" }}
@@ -52,7 +52,7 @@ {{else}} {{item.filename}} {{/if}} -
{{paper-icon icon="close"}}
+
{{paper-icon icon="close"}}
{{/each}} diff --git a/app/templates/components/light-group.hbs b/app/templates/components/light-group.hbs index b5b6aa5..9fd39a0 100644 --- a/app/templates/components/light-group.hbs +++ b/app/templates/components/light-group.hbs @@ -1,5 +1,5 @@ {{#each lightsList as |light|}} - + {{/each}} \ No newline at end of file diff --git a/bower.json b/bower.json index 604b2e2..e0ecec9 100644 --- a/bower.json +++ b/bower.json @@ -20,6 +20,8 @@ }, "resolutions": { "ember": "~2.0.2", - "jquery": "~2.1.4" + "jquery": "~2.1.4", + "ember-qunit": "0.4.9", + "qunit": "~1.18.0" } }