lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better lightgroup formatting - WIP

Browse source
This commit is contained in:
lone-cloud 2015-09-17 09:40:36 -07:00
parent 3a0325fec2
commit ee82ce63b6
6 changed files with 94 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -17,6 +17,8 @@ Music awesomeness for hue lights.
- help, contact, about, youtube video ??? - help, contact, about, youtube video ???
- beat settings by interval - beat settings by interval
- integration with youtube, soundcloud, spotify ??? - integration with youtube, soundcloud, spotify ???
- auto beat detection mode
- lights on/off switch
## BUGS ## BUGS
- fuckery when listening to music and switching tabs - fuckery when listening to music and switching tabs

126
app/components/light-group.js
View file

@ -2,6 +2,12 @@ import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNames: ['lightGroup'],
isHovering: false,
lightsList: Em.A(),
actions: { actions: {
clickLight: function(id, data){ clickLight: function(id, data){
this.sendAction('action', id, data); this.sendAction('action', id, data);
@ -18,6 +24,8 @@ export default Em.Component.extend({
type: 'PUT' type: 'PUT'
}); });
} }
this.set('isHovering', true);
}, },
lightStopHover: function(id){ lightStopHover: function(id){
var hoveredLight = this.get('lightsList').filter(function(light){ var hoveredLight = this.get('lightsList').filter(function(light){
@ -31,69 +39,71 @@ export default Em.Component.extend({
type: 'PUT' type: 'PUT'
}); });
} }
this.set('isHovering', false);
} }
}, },
classNames: ['lightGroup'],
// list of all the lights in the hue system // list of all the lights in the hue system
lightsList: function(){ onLightsDataChange: function(){
var lightsData = this.get('lightsData'), lightsList = [], type; if(!this.get('isHovering')){
for (var key in lightsData) { var lightsData = this.get('lightsData'), lightsList = Em.A(), type;
if (lightsData.hasOwnProperty(key)) { for (var key in lightsData) {
switch(lightsData[key].modelid){ if (lightsData.hasOwnProperty(key)) {
case 'LCT001': switch(lightsData[key].modelid){
type = 'a19'; case 'LCT001':
break; type = 'a19';
case 'LCT002': break;
type = 'br30'; case 'LCT002':
break; type = 'br30';
case 'LCT003': break;
type = 'gu10'; case 'LCT003':
break; type = 'gu10';
case 'LST001': break;
type = 'lightstrip'; case 'LST001':
break; type = 'lightstrip';
case 'LLC010': break;
type = 'lc_iris'; case 'LLC010':
break; type = 'lc_iris';
case 'LLC011': break;
type = 'lc_bloom'; case 'LLC011':
break; type = 'lc_bloom';
case 'LLC012': break;
type = 'lc_bloom'; case 'LLC012':
break; type = 'lc_bloom';
case 'LLC006': break;
type = 'lc_iris'; case 'LLC006':
break; type = 'lc_iris';
case 'LLC007': break;
type = 'lc_aura'; case 'LLC007':
break; type = 'lc_aura';
case 'LLC013': break;
type = 'storylight'; case 'LLC013':
break; type = 'storylight';
case 'LWB004': break;
type ='a19'; case 'LWB004':
break; type ='a19';
case 'LLC020': break;
type = 'huego'; case 'LLC020':
break; type = 'huego';
default: break;
type = 'a19'; 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; this.set('lightsList', lightsList);
}.property('lightsData', 'activeLights.[]') }
}.observes('lightsData', 'activeLights.[]')
}); });

17
app/styles/app.scss
View file

@ -98,6 +98,7 @@ md-progress-circular {
// BRIDGE CONTROLS // BRIDGE CONTROLS
#bridgeControls { #bridgeControls {
position: relative;
max-width: 1000px; max-width: 1000px;
} }
@ -153,6 +154,9 @@ md-progress-circular {
.lightGroup { .lightGroup {
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
.tooltip.top {
margin-top: -10px;
}
} }
.hueLight { .hueLight {
@ -182,14 +186,15 @@ md-progress-circular {
background-color: rgba(255, 0, 0, 0.7); background-color: rgba(255, 0, 0, 0.7);
} }
.lightActive:hover { .lightActive img {
cursor: pointer; cursor: pointer;
-webkit-transition-duration: 0.5s; transition-duration: 0.3s;
transition-duration: 0.5s; transition-property: transform;
-webkit-transform: scale(1.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.lightActive img:hover {
transform: scale(1.2); 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 { .ember-modal-overlay.translucent {

18
app/templates/components/controls/music-control.hbs
View file

@ -5,20 +5,20 @@
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
{{#if playQueueMultiple}} {{#if playQueueMultiple}}
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!-- <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!-- --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
-->{{#if playQueueMultiple}}<!-- -->{{#if playQueueMultiple}}<!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" title="Next" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!-- --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Next" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip" title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!-- --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip" data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
-->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}} -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
<span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span> <span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span>
<span class="pull-right"> <span class="pull-right">
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}} data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span> </span>
</span> </span>
</div> </div>
@ -29,12 +29,12 @@
<div id="playListControls"> <div id="playListControls">
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span> data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span> data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom" title="Add new music" <span data-toggle="tooltip" data-placement="bottom" data-title="Add new music"
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span> class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
</div> </div>
@ -52,7 +52,7 @@
{{else}} {{else}}
{{item.filename}} {{item.filename}}
{{/if}} {{/if}}
<div data-toggle="tooltip" data-placement="bottom auto" title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div> <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
{{/each}} {{/each}}
</div> </div>
</div> </div>

2
app/templates/components/light-group.hbs
View file

@ -1,5 +1,5 @@
{{#each lightsList as |light|}} {{#each lightsList as |light|}}
<span class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" title="{{light.name}}" {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}> <span class="{{light.activeClass}} bootstrapTooltip" 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}}.svg"> <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
</span> </span>
{{/each}} {{/each}}

4
bower.json
View file

@ -20,6 +20,8 @@
}, },
"resolutions": { "resolutions": {
"ember": "~2.0.2", "ember": "~2.0.2",
"jquery": "~2.1.4" "jquery": "~2.1.4",
"ember-qunit": "0.4.9",
"qunit": "~1.18.0"
} }
} }