update

Former-commit-id: 3956ab3edd344fdd184b93f317633a81f994252c

projects/IoTCenter/Views/Home/Node.cshtml

@@ -108,7 +108,12 @@
                     <div class="col-md-12">
                         <div class="box box-solid btns">
                             <div class="box-header with-border">
-                                <h3 class="box-title"><img src="/images/light2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
+                                <h3 class="box-title">
+                                    <img src="/images/light2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}<span :style="{
+                                                                                                                                                                      display:'inline-block',
+                                                                                                                                                                      color:'#eee',
+                                                                                                                                                                      backgroundColor:getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}">{{getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}}</span>
+                                </h3>
                                 <div class="box-tools pull-right">
                                     <img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/ColorLight/Off')" src="/images/on.png" />
                                     <img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/ColorLight/On')" src="/images/off.png" />
@@ -613,8 +618,9 @@
     </div>
 </div>
 @section scripts{
+    <script src="/js/node.js"></script>
     <script>
         var debug = true;
+        loadData();
     </script>
-    <script src="/js/node.js"></script>
 }

projects/IoTClient/Assets/StreamingAssets/wwwroot/js/node.js

@@ -457,9 +457,71 @@ function init() {
                 Vue.nextTick(function () {
                     ajax(url, null, 'get');
                 });
+            },
+            getLightColor(h, s, v) {
+                return hsvToRgb(parseInt(h * 360 / 255), parseInt(s * 100 / 255), parseInt(v * 100 / 255));
             }
         }
     });
 }
-/*exec*/
-loadData();
+function hsvToRgb(h, s, v) {
+    if (h == "") h = 0;
+    if (s == "") s = 0;
+    if (v == "") v = 0;
+    h = parseFloat(h);
+    s = parseFloat(s);
+    v = parseFloat(v);
+    if (h < 0) h = 0;
+    if (s < 0) s = 0;
+    if (v < 0) v = 0;
+    if (h >= 360) h = 359;
+    if (s > 100) s = 100;
+    if (v > 100) v = 100;
+    s /= 100.0;
+    v /= 100.0;
+    C = v * s;
+    hh = h / 60.0;
+    X = C * (1.0 - Math.abs((hh % 2) - 1.0));
+    r = g = b = 0;
+    if (hh >= 0 && hh < 1) {
+        r = C;
+        g = X;
+    }
+    else if (hh >= 1 && hh < 2) {
+        r = X;
+        g = C;
+    }
+    else if (hh >= 2 && hh < 3) {
+        g = C;
+        b = X;
+    }
+    else if (hh >= 3 && hh < 4) {
+        g = X;
+        b = C;
+    }
+    else if (hh >= 4 && hh < 5) {
+        r = X;
+        b = C;
+    }
+    else {
+        r = C;
+        b = X;
+    }
+    m = v - C;
+    r += m;
+    g += m;
+    b += m;
+    r *= 255.0;
+    g *= 255.0;
+    b *= 255.0;
+    r = Math.round(r);
+    g = Math.round(g);
+    b = Math.round(b);
+    hex = r * 65536 + g * 256 + b;
+    hex = hex.toString(16, 6);
+    len = hex.length;
+    if (len < 6)
+        for (i = 0; i < 6 - len; i++)
+            hex = '0' + hex;
+    return '#' + hex;
+}

projects/IoTClient/Assets/StreamingAssets/wwwroot/node.html

@@ -77,7 +77,12 @@
                                     <div class="col-md-12">
                                         <div class="box box-solid btns">
                                             <div class="box-header with-border">
-                                                <h3 class="box-title"><img :src="server+'/IoTCenter/images/light2.png'" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
+                                                <h3 class="box-title">
+                                                    <img :src="server+'/IoTCenter/images/light2.png'" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}<span :style="{
+                                                                                                                                                                      display:'inline-block',
+                                                                                                                                                                      color:'#eee',
+                                                                                                                                                                      backgroundColor:getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}">{{getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}}</span>
+                                                </h3>
                                                 <div class="box-tools pull-right">
                                                     <img v-if="GetDataValue(device.Number,'状态')=='开'" @click="CallApi(device.Number,'/WarmLight/Off')" :src="server+'/IoTCenter/images/on.png'" />
                                                     <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/WarmLight/On')" :src="server+'/IoTCenter/images/off.png'" />
@@ -131,9 +136,10 @@
     <script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
     <script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
     <script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
+    <script type="text/javascript" src="js/node.js"></script>
     <script>
         var debug = true;
+        loadData();
     </script>
-    <script type="text/javascript" src="js/node.js"></script>
 </body>
 </html>