Update more-info-light.html (#105)

* Update more-info-light.html

* Update more-info-light.html
This commit is contained in:
Marc Pabst 2016-10-03 01:14:01 +02:00 committed by Justin Weberg
parent 95cbc85b7f
commit 89d586ddf3

View File

@ -9,7 +9,7 @@
<template> <template>
<style is="custom-style" include="iron-flex"></style> <style is="custom-style" include="iron-flex"></style>
<style> <style>
.brightness, .color_temp { .brightness, .color_temp, .white_value {
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .5s ease-in; transition: max-height .5s ease-in;
@ -25,7 +25,8 @@
} }
.has-brightness .brightness, .has-brightness .brightness,
.has-color_temp .color_temp { .has-color_temp .color_temp,
.has-white_value .white_value {
max-height: 84px; max-height: 84px;
} }
@ -51,6 +52,13 @@
on-change='ctSliderChanged'></ha-labeled-slider> on-change='ctSliderChanged'></ha-labeled-slider>
</div> </div>
<div class='white_value'>
<ha-labeled-slider
caption='White Value' icon='mdi:file-word-box' max='255'
value='{{wvSliderValue}}'
on-change='wvSliderChanged'></ha-labeled-slider>
</div>
<ha-color-picker on-colorselected='colorPicked' height='200' width='250'> <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
</ha-color-picker> </ha-color-picker>
</div> </div>
@ -80,12 +88,18 @@ Polymer({
type: Number, type: Number,
value: 0, value: 0,
}, },
wvSliderValue: {
type: Number,
value: 0,
},
}, },
stateObjChanged: function (newVal) { stateObjChanged: function (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.ctSliderValue = newVal.attributes.color_temp;
this.wvSliderValue = newVal.attributes.white_value;
} }
this.async(function () { this.async(function () {
@ -95,7 +109,7 @@ Polymer({
computeClassNames: function (stateObj) { computeClassNames: function (stateObj) {
return window.hassUtil.attributeClassNames( return window.hassUtil.attributeClassNames(
stateObj, ['brightness', 'rgb_color', 'color_temp']); stateObj, ['brightness', 'rgb_color', 'color_temp', 'white_value']);
}, },
brightnessSliderChanged: function (ev) { brightnessSliderChanged: function (ev) {
@ -124,6 +138,17 @@ Polymer({
}); });
}, },
wvSliderChanged: function (ev) {
var wv = parseInt(ev.target.value, 10);
if (isNaN(wv)) return;
this.hass.serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
white_value: wv,
});
},
serviceChangeColor: function (hass, entityId, color) { serviceChangeColor: function (hass, entityId, color) {
hass.serviceActions.callService('light', 'turn_on', { hass.serviceActions.callService('light', 'turn_on', {
entity_id: entityId, entity_id: entityId,