|
|
|
@ -13,7 +13,7 @@
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-4 align-self-center">
|
|
|
|
|
<div :style="'width:48px;height:48px;border-radius: 24px;background:'+hsl"></div>
|
|
|
|
|
<div :style="'width:48px;height:48px;border-radius: 24px;background:'+hsl+';'"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-8 align-self-center">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -30,9 +30,20 @@
|
|
|
|
|
<img style="height:32px;margin:0 auto;" v-else v-on:click="execApi(device.number,'/Socket/On')" src="/platform/images/off.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row text-center">
|
|
|
|
|
<label style="width:100%;">色调:<input @change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" /></label>
|
|
|
|
|
<label style="width:100%;">色度:<input @change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'" /></label>
|
|
|
|
|
<label style="width:100%;">亮度:<input @change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);" /></label>
|
|
|
|
|
<table style="margin:0 auto;">
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align:right;">色调:</td>
|
|
|
|
|
<td><input @change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="outline:none;height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align:right;">饱和度:</td>
|
|
|
|
|
<td><input @change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'outline:none;height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="text-align:right;">亮度:</td>
|
|
|
|
|
<td><input @change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="outline: none; height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #000 0%, #fff 100%);" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</div>
|
|
|
|
@ -47,7 +58,7 @@
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeHue: function (hue) {
|
|
|
|
|
execApi(this.device.number, '/ColorLight/Change', 'hue=' + hue + '&saturation=' + this.saturation + '&brightness=' + this.brightness);
|
|
|
|
|
execApi(this.device.number, '/ColorLight/Change', 'hue=' + hue + '&saturation=' + 254 + '&brightness=' + this.brightness);
|
|
|
|
|
},
|
|
|
|
|
changeSaturation: function (saturation) {
|
|
|
|
|
execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + saturation + '&brightness=' + this.brightness);
|
|
|
|
@ -76,12 +87,17 @@
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
hsl: function () {
|
|
|
|
|
var h = Math.round(parseInt(this.hue || 128) * 360 / 255);
|
|
|
|
|
var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
|
|
|
|
|
var s = Math.round(parseInt(this.saturation || 128) * 100 / 254);
|
|
|
|
|
var l = Math.round(parseInt(this.brightness || 128) * 100 / 254);
|
|
|
|
|
var result = 'hsl(' + h + ',' + s + '%,' + l + '%);';
|
|
|
|
|
console.log('hsl:' + result);
|
|
|
|
|
var result = 'hsl(' + h + ',' + s + '%,' + l + '%)';
|
|
|
|
|
console.warn('raw:'+this.hue+' '+this.saturation+' '+this.brightness);
|
|
|
|
|
console.warn('hsl:' + result);
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
color: function () {
|
|
|
|
|
var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
|
|
|
|
|
return 'hsl(' + h + ',100%,0%)';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|