update

Former-commit-id: 89df38104994886a4b160da3f71513832b8f2632

projects/IoTNode/DeviceServices/FBee/Controllers/ColorLightController.cs

@@ -44,15 +44,28 @@ namespace IoTNode.Controllers
         [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1031:不捕获常规异常类型", Justification = "<挂起>")]
         public ApiResponse SetColor([SwaggerParameter("设备编号")]string number, [SwaggerParameter("色调")][Range(0, 255)]int hue, [SwaggerParameter("饱和度")][Range(0, 255)]int saturation)
         {
-            if (number is null)
+            try
             {
-                throw new ArgumentNullException(nameof(number));
+                var values = number.Split('-');
+                this._deviceService.X84(values[0], values[1], (byte)hue, (byte)saturation);
+            }
+            catch (Exception ex)
+            {
+                ex.PrintStack();
+                return ApiResponse.Error(ex.Message);
             }
+            return ApiResponse.AsyncSuccess();
+        }
 
+        [HttpGet, Route("/[controller]/[action]"), SwaggerOperation("色度")]
+        [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1031:不捕获常规异常类型", Justification = "<挂起>")]
+        public ApiResponse Change([SwaggerParameter("设备编号")]string number, [SwaggerParameter("亮度")][Range(0, 255)]int brightness, [SwaggerParameter("色调")][Range(0, 255)]int hue, [SwaggerParameter("饱和度")][Range(0, 255)]int saturation)
+        {
             try
             {
                 var values = number.Split('-');
                 this._deviceService.X84(values[0], values[1], (byte)hue, (byte)saturation);
+                this._deviceService.X83(values[0], values[1], (byte)brightness);
             }
             catch (Exception ex)
             {

projects/WebApp/wwwroot/js/iot.js

@@ -83,6 +83,11 @@ Vue.component('iot-ir', function (resolve, reject) {
         resolve(parseModel(response));
     });
 });
+Vue.component('iot-color-light', function (resolve, reject) {
+    axios.get("/pages/iot/device/color-light.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
 Vue.component('iot-camera', function (resolve, reject) {
     axios.get("/pages/iot/device/camera.html").then(function (response) {
         resolve(parseModel(response));

projects/WebApp/wwwroot/pages/iot/device.html

@@ -14,7 +14,8 @@
             <iot-curtain v-else-if="device.name==='窗帘电机'" v-bind:device="device"></iot-curtain>
             <iot-switch3 v-else-if="device.name==='三路开关'" v-bind:device="device"></iot-switch3>
             <iot-socket v-else-if="device.name==='智能插座'" v-bind:device="device"></iot-socket>
-            <iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device"  v-bind:edit="true"></iot-ir>
+            <iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device" v-bind:edit="true"></iot-ir>
+            <iot-color-light v-else-if="device.name==='调色灯'" v-bind:device="device" v-bind:edit="true"></iot-color-light>
             <iot-camera v-else-if="device.name==='摄像头'" v-bind:device="device" v-bind:edit="true"></iot-camera>
         </div>
     </div>

projects/WebApp/wwwroot/pages/iot/device/color-light.html

@@ -0,0 +1,68 @@
+<template>
+    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
+        <div class="card-header">
+            {{device.displayName}}
+            <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
+            <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
+        </div>
+        <div class="card-body">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
+                <div class="col col-md-4 col-sm-4 align-self-center">
+                    <div class="mh-100" :style="'width:48px;height:48px;background:'+hsl"></div>
+                </div>
+                <div class="col col-md-8 col-sm-8 align-self-center">
+                    <div class="row" style="height:58px;">
+                        <input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:10px;-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%);" />
+                        <input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:10px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
+                        <input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:10px;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    ({
+        props: ['device'],
+        methods: {
+            changeHue: function (hue) {
+                execApi(this.device.number, '/ColorLight/Change', 'hue=' + hue + '&saturation=' + this.saturation + '&brightness=' + this.brightness);
+                getData(this.device, '色调').value = hue;
+            },
+            changeSaturation: function (saturation) {
+                execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + saturation + '&brightness=' + this.brightness);
+                getData(this.device, '饱和度').value = saturation;
+
+            },
+            changeBrightness: function (brightness) {
+                execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + this.saturation + '&brightness=' + brightness);
+                getData(this.device, '亮度').value = brightness;
+            }
+        },
+        computed: {
+            hue: function () {
+                return getDeviceDataValue(this.device, '色调');
+            },
+            saturation: function () {
+                return getDeviceDataValue(this.device, '饱和度');
+            },
+            brightness: function () {
+                return getDeviceDataValue(this.device, '亮度');
+            },
+            color: function () {
+                var h = Math.round(parseInt(this.hue || 128) * 360 / 255);
+                var result = 'hsl(' + h + ',100%,50%)';
+                console.log('color:'+result);
+                return result;
+            },
+            hsl: function () {
+                var h = Math.round(parseInt(this.hue || 128) * 360 / 255);
+                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);
+                return result;
+            }
+        }
+    });
+</script>

projects/WebApp/wwwroot/pages/iot/device/ir.html

@@ -2,7 +2,7 @@
     <div>
         <div class="card" style="box-sizing:border-box;height:550px;margin:10px;">
             <div class="card-header">
-                {{device.displayName}}{{this.code}}
+                {{device.displayName}}
                 <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
                 <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
             </div>

projects/WebApp/wwwroot/pages/iot/node.html

@@ -38,6 +38,10 @@
     <!--电器-->
     <div class="col col-md-12 my-2 px-3">用电</div>
     <div class="row">
+        <!--调色灯-->
+        <div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
+            <iot-color-light v-bind:device="device"></iot-color-light>
+        </div>
         <!--窗帘电机-->
         <div v-for="device in getDevices('窗帘电机')" class="col" style="min-width:320px;">
             <iot-curtain v-bind:device="device"></iot-curtain>