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:
Egor 2015-09-17 09:40:36 -07:00
parent f1a217d544
commit 74711ff0d3
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 ???
- 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

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

@ -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.[]')
});

17
app/styles/app.scss
View file

@ -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 {

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"}}
{{#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}}<!--
--><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}}<!--
--><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}}<!--
--><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"}}
<span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span>
<span class="pull-right">
<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>
</div>
@ -29,12 +29,12 @@
<div id="playListControls">
<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"
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>
</div>
@ -52,7 +52,7 @@
{{else}}
{{item.filename}}
{{/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}}
</div>
</div>

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

@ -1,5 +1,5 @@
{{#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">
</span>
{{/each}}

4
bower.json
View file

@ -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"
}
}