From 8a573316961b80755731f01b8209d60575f8746d Mon Sep 17 00:00:00 2001
From: wanli <wanli@DEV_V00005>
Date: Thu, 5 Jan 2023 16:48:35 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=20=E6=B8=AC=E8=A9=A6=E9=A0=81?=
 =?UTF-8?q?=E9=9D=A2(forgeTest2.html):=20=E5=8A=A0=E4=B8=8A=E7=86=B1?=
 =?UTF-8?q?=E5=9C=96=E7=9A=84=E5=9C=96=E7=A4=BA=E3=80=81=E7=86=B1=E5=9C=96?=
 =?UTF-8?q?=E9=A1=8F=E8=89=B2=E6=9B=B4=E6=94=B9=E6=88=90=E5=9B=9B=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/forgetTest2.html      | 53 +++++++++++++++++++---
 Frontend/js/forge/modeltest.js | 81 +++++++++++++++++++---------------
 2 files changed, 93 insertions(+), 41 deletions(-)

diff --git a/Frontend/forgetTest2.html b/Frontend/forgetTest2.html
index b3d8d5e..7eda69e 100644
--- a/Frontend/forgetTest2.html
+++ b/Frontend/forgetTest2.html
@@ -47,6 +47,10 @@
         <button type="button" class="btn btn-dark" onclick="cancelTransparentModel()">取消透明物件</button>
         <button type="button" class="btn btn-danger" onclick="proFile()">剖面</button>
         <button type="button" class="btn btn-dark" onclick="getLevels()">取得levels</button>
+        <div style="height: 50px">
+            <canvas id="iot-heatmap-legend" width="300" height="50"></canvas>
+        </div>
+        <button type="button" class="btn btn-info" onclick="showHeat()">顯示熱圖圖示</button>
         <!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
         <!-- <input type="range">Main Axis</input> -->
     </div>
@@ -191,7 +195,9 @@
 
     <script>
         var curLightIsOpen = true;
-        var light;
+        //var light;
+        var cavas;
+        this.canvas = document.getElementById('iot-heatmap-legend');
 
         $(document).ready(function () {
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
@@ -351,16 +357,16 @@
         }
 
         function openOrCloseLight() {
-            if (light != null) {
+            //if (light != null) {
                 if (curLightIsOpen) {
                     curLightIsOpen = false;
-                    setLightOpenOrClose(curLightIsOpen, light);
+                    setLightOpenOrClose(curLightIsOpen);//, light
                 }
                 else {
                     curLightIsOpen = true;
-                    setLightOpenOrClose(curLightIsOpen, light);
+                    setLightOpenOrClose(curLightIsOpen);//, light
                 }
-            }
+            //}
         }
 
         function changeColorHotspot() {
@@ -395,7 +401,42 @@
         function proFile() {
             profile();
         }
-        
+
+        function showHeat() {
+            const labels = [
+                `${(10).toFixed(2) }${"°C"}`,
+                `${(40 / 2).toFixed(2)}${"°C"}`,
+                `${(30).toFixed(2) }${"°C"}`
+            ];
+            const colorStops = ['blue', 'green', 'yellow', 'red'];
+            createHeatmapRect(labels, colorStops);
+        }
+
+        function createHeatmapRect(labels, colorStops) {
+            if (!this.canvas) {
+                return;
+            }
+            const context = this.canvas.getContext('2d');
+            let i, len;
+            context.clearRect(0, 0, 300, 50);
+            context.fillStyle = 'back';//white
+            for (i = 0, len = labels.length; i < len; i++) {
+                let x = 10 + 280 * i / (len - 1);
+                if (i === len - 1) {
+                    x -= context.measureText(labels[i]).width;
+                }
+                else if (i > 0) {
+                    x -= 0.5 * context.measureText(labels[i]).width;
+                }
+                context.fillText(labels[i], x, 10);
+            }
+            const gradient = context.createLinearGradient(0, 0, 300, 0);
+            for (i = 0, len = colorStops.length; i < len; i++) {
+                gradient.addColorStop(i / (len - 1), colorStops[i]);
+            }
+            context.fillStyle = gradient;
+            context.fillRect(10, 20, 280, 20);
+        }
 
 
 
diff --git a/Frontend/js/forge/modeltest.js b/Frontend/js/forge/modeltest.js
index ef12a21..765fd66 100644
--- a/Frontend/js/forge/modeltest.js
+++ b/Frontend/js/forge/modeltest.js
@@ -4,12 +4,14 @@ var targetFloorZ;
 var elevatorSpeed;
 var allDbIdsStr;
 let bulbLight;//點燈
-let spotLight;//聚光燈
+var spotLight;//聚光燈
 var myDataList;//設備清單
 var viewableData;
 var dataVizExtn;
 var spriteColorRed;
 var levels;//剖面用
+var light;
+let pointLightHelper;
 
 function launchViewer(urn) {
     var av = Autodesk.Viewing;
@@ -71,7 +73,7 @@ function onDocumentLoadSuccess(doc) {
          var currSelection = viewer.getSelection();
          var domElem = document.getElementById('id_printer');
          domElem.innerText = currSelection[0];
-         var a = newLight();
+         /*var a = newLight();*/
 
 
          //var color = new THREE.Vector4(255 / 255, 0, 0, 1);
@@ -464,8 +466,8 @@ function onDocumentLoadSuccess(doc) {
     //spotLight.target = cube;
     //viewer.scene.add(spotLight);
 
-    //var light = newLight();
-    /*newLight();*/
+    //light = newLight();
+    newLight();
 
 }
 
@@ -480,7 +482,7 @@ async function addHotPoint(data) {
     const spriteIcon = "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg"; //"/img/forge/hotspot.svg";
 
     const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
-
+    var a = newLight();
     //function onSpriteClicked(event) {
     //    console.log(`Sprite clicked: ${event.dbId}`);
     //}
@@ -519,6 +521,7 @@ async function addHotPoint(data) {
         event.hasStopped = true;
         if (event != undefined && event != null) {
             if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
+                setLightValues(20, 0x00ff00)
                 console.log(`Sprite clicked: ${event.dbId}`);
                 openHotspotModal();
             }
@@ -1139,8 +1142,10 @@ async function loadHeatmaps(model) {
     // Setup surface shading
     await dataVizExtn.setupSurfaceShading(model, heatmapData);
 
-    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
-    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
+    const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];//0 ~ 1 藍綠黃紅
+
+    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]); 0~1
+    dataVizExtn.registerSurfaceShadingColors("temperature", sensorColors);//[0xff0000, 0x0000ff]
 
     function getSensorValue(device, sensorType) {
         return sensorVals[parseInt(device.id.slice(-1)) - 1]; // 值: 0~1之間
@@ -1382,33 +1387,31 @@ async function newLight() {
     //angle - 光從其上界為 Math.PI / 2 的方向散射的最大角度。
     //半影 - 由於半影而衰減的聚光燈錐體的百分比。取值介於 0 和 1 之間。默認值為零。
     //decay - 光沿光的距離變暗的量。
-    spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);//0xffffff 80, 10  //15, 20 , Math.PI / 12
-    spotLight.position.set(43.72, -15.65, -44.96); //set(-17.33, 51.03, -2.52); // -7.58, 18.20, -0.25 -44.96
-    spotLight.castShadow = false;
-    spotLight.visible = true;
-    //var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
-    //var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
-    //var cube = new THREE.Mesh(geom, material);
-    //cube.position.set(43.72, -15.65, -46); //set(-17.33, 51.03, -10);//-4.52 // -7.58, 18.20, -1
-    //cube.scale.set(0.5, 0.5, 0.5);
-    //viewer.scene.add(cube);
-    //spotLight.target = cube;
+    //spotLight = new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10);//0xffffff 80, 10  //15, 20 , Math.PI / 12
+    //spotLight.position.set(43.72, -15.65, -44.96); //set(-17.33, 51.03, -2.52); // -7.58, 18.20, -0.25 -44.96
+    //spotLight.castShadow = false;
+    //spotLight.visible = true;
 
-    spotLight.target.position.set(43.72, -15.65, -60);// -15.65 -48
-    viewer.scene.add(spotLight.target);
+    //spotLight.target.position.set(43.72, -15.65, -60);// -15.65 -48
+    //viewer.scene.add(spotLight.target);
 
-    viewer.scene.add(spotLight);
+    //viewer.scene.add(spotLight);
 
-    viewer.impl.sceneUpdated(true);
+    //viewer.impl.sceneUpdated(true);
 
     //return spotLight;
 
     //加入點燈光
-    //bulbLight = new THREE.PointLight(0xff0000, 50, 20, 2);//0xff0000
-    //bulbLight.position.set(43.72, -15.65, -44.96);//17.880840301513672
-    //bulbLight.castShadow = true;
-    //viewer.scene.add(bulbLight);
-    //viewer.impl.sceneUpdated(true);
+    bulbLight = new THREE.PointLight(0xff0000, 50, 20, 2);//0xff0000
+    bulbLight.position.set(43.72, -15.65, -44.96);//17.880840301513672
+    bulbLight.castShadow = true;
+    bulbLight.visible = true;
+    viewer.scene.add(bulbLight);
+
+    //pointLightHelper = new THREE.PointLightHelper(pointLight);
+    //viewer.scene.add(pointLightHelper);
+
+    viewer.impl.sceneUpdated(true);
 }
 
 //-------------- 更改燈光範圍 --------------------------
@@ -1418,23 +1421,31 @@ function setLightPower(value) {
     viewer.impl.sceneUpdated(true);
 }
 
-function setLightValues(intensity, distance, angle, penumbra, decay) {
+function setLightValues(intensity, color) {// distance, angle, penumbra, decay,
+    viewer.scene.remove(spotLight)
     spotLight.intensity = intensity;
-    spotLight.distance = distance;
-    spotLight.angle = angle;
-    spotLight.penumbra = penumbra;
-    spotLight.decay = decay;
+    //spotLight.distance = distance;
+    //spotLight.angle = angle;
+    //spotLight.penumbra = penumbra;
+    //spotLight.decay = decay;
+    var tempcolor = new THREE.Color().setHex(color);
+    spotLight.color = tempcolor;
+    viewer.impl.sceneUpdated(true);
+
+    viewer.scene.add(spotLight);
     viewer.impl.sceneUpdated(true);
 }
 
-function setLightOpenOrClose(value, light) {
+function setLightOpenOrClose(value) {//, light
     if (value) {
-        light.visible = true;
+        //light.visible = true;
         //spotLight.visible = true;
+        bulbLight.visible = true;
     }
     else {
-        light.visible = false;
+        //light.visible = false;
         //spotLight.visible = false;
+        bulbLight.visible = false;
     }
     viewer.impl.sceneUpdated(true);
 }