jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from tomduijf/light_ct_color

Browse Source 
Add color_temp slider if supported by light platform
This commit is contained in:
Paulus Schoutsen 2015-11-01 23:43:11 -08:00
commit 0dcb659ffc
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/more-infos/more-info-light.html
View File

@ -5,7 +5,7 @@
<dom-module id='more-info-light'> <dom-module id='more-info-light'>
<style> <style>
.brightness { .brightness, .color_temp {
margin-bottom: 8px; margin-bottom: 8px;
max-height: 0px; max-height: 0px;
@ -27,6 +27,10 @@
max-height: 40px; max-height: 40px;
} }
.has-color_temp .color_temp {
max-height: 40px;
}
.has-xy_color ha-color-picker { .has-xy_color ha-color-picker {
max-height: 500px; max-height: 500px;
} }
@ -40,9 +44,17 @@
on-change='brightnessSliderChanged' class='flex'> on-change='brightnessSliderChanged' class='flex'>
</paper-slider> </paper-slider>
</div> </div>
<div class='color_temp center horizontal layout'>
<div>Color temperature</div>
<paper-slider min="154" max="500"
id='color_temp' value='{{ctSliderValue}}'
on-change='ctSliderChanged' class='flex'>
</paper-slider>
</div>
<ha-color-picker on-colorselected='colorPicked' width='350' height='200'> <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
</color-picker> </ha-color-picker>
</div> </div>
</template> </template>
</dom-module> </dom-module>

19
src/more-infos/more-info-light.js
View File

@ -5,7 +5,7 @@ import attributeClassNames from '../util/attribute-class-names';
require('../components/ha-color-picker'); require('../components/ha-color-picker');
const ATTRIBUTE_CLASSES = ['brightness', 'xy_color']; const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'color_temp'];
export default new Polymer({ export default new Polymer({
is: 'more-info-light', is: 'more-info-light',
@ -20,11 +20,17 @@ export default new Polymer({
type: Number, type: Number,
value: 0, value: 0,
}, },
ctSliderValue: {
type: Number,
value: 0,
},
}, },
stateObjChanged(newVal) { stateObjChanged(newVal) {
if (newVal && newVal.state === 'on') { if (newVal && newVal.state === 'on') {
this.brightnessSliderValue = newVal.attributes.brightness; this.brightnessSliderValue = newVal.attributes.brightness;
this.ctSliderValue = newVal.attributes.color_temp;
} }
this.async(() => this.fire('iron-resize'), 500); this.async(() => this.fire('iron-resize'), 500);
@ -49,6 +55,17 @@ export default new Polymer({
} }
}, },
ctSliderChanged(ev) {
const ct = parseInt(ev.target.value, 10);
if (isNaN(ct)) return;
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
color_temp: ct,
});
},
colorPicked(ev) { colorPicked(ev) {
const color = ev.detail.rgb; const color = ev.detail.rgb;