[Frontend] forge 熱圖測試

Frontend/forgetTest2.html

@@ -32,6 +32,8 @@
         <button id="12F1oor" onclick="move12Floor()">12 Floor</button>
         <button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>
         <button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>
+        <button type="button" class="btn btn-danger" onclick="changeColorHotspot()">變更熱點顏色</button>
+        <button type="button" class="btn btn-dark" onclick="loadHeatMap()">載入熱圖</button>
         <!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
         <!-- <input type="range">Main Axis</input> -->
     </div>
@@ -192,7 +194,7 @@
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');
 
             //測試單獨 7樓熱圖 DEMO
-            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw');
+            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw');
 
             //測試 方案2 7樓熱圖
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MEFSQyVFMyU4MCU5MTdGXzIwMjJfMTJfMjYubndj');
@@ -203,6 +205,13 @@
             //測試 方案4
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
 
+            //12.28 三菱單層樓 + 系統
+            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA');
+
+            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
+
+
+
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC
@@ -302,6 +311,13 @@
             }
         }
 
+        function changeColorHotspot() {
+            changeColorForHotspot(10);
+        }
+
+        function loadHeatMap() {
+            loadHeatmap();
+        }
         
 
 

Frontend/js/forge/modeltest.js

@@ -5,6 +5,10 @@ var elevatorSpeed;
 var allDbIdsStr;
 let bulbLight;//點燈
 let spotLight;//聚光燈
+var myDataList;
+var viewableData;
+var dataVizExtn;
+var spriteColorRed;
 
 function launchViewer(urn) {
     var av = Autodesk.Viewing;
@@ -20,9 +24,9 @@ function launchViewer(urn) {
         var documentId = 'urn:' + urn;
 
         //加入熱點
-        //viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
+        viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
-        //    once: true,
+            once: true,
-        //});
+        });
 
         Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
         
@@ -167,7 +171,7 @@ function onDocumentLoadSuccess(doc) {
     const fragList = model.getFragmentList();
 
 
-    loadHeatmaps(model);
+     /*loadHeatmaps(model);*/
 
 
 
@@ -446,14 +450,14 @@ function onDocumentLoadSuccess(doc) {
     //viewer.scene.add(bulbLight);
 
     //聚光燈
-    //spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff
+    //spotLight = new THREE.SpotLight(0xffff00, 80, 10);//0xffffff
-    //spotLight.position.set(-17.33, 51.03, -2.52);
+    //spotLight.position.set(-7.58, 18.20, -0.25); //set(-17.33, 51.03, -2.52);
     //spotLight.castShadow = true;
     //spotLight.visible = true;
     //var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
-    //var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
+    //var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
     //var cube = new THREE.Mesh(geom, material);
-    //cube.position.set(-17.33, 51.03, -10);//-4.52
+    //cube.position.set(-7.58, 18.20, -1); //set(-17.33, 51.03, -10);//-4.52
     //viewer.scene.add(cube);
     //spotLight.target = cube;
     //viewer.scene.add(spotLight);
@@ -463,11 +467,12 @@ function onDocumentLoadSuccess(doc) {
 //------------------- 加入熱點 -----------------
 async function addHotPoint(data) {
     var viewer = data.target;
-    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+    dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     const DataVizCore = Autodesk.DataVisualization.Core;
     const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
-    const spriteColor = new THREE.Color(0xffffff);
+    const spriteColor = new THREE.Color(0xffff00); //0xffffff
-    const spriteIcon = "/img/forge/hotspot.svg";
+    spriteColorRed = new THREE.Color(0xff0000);
+    const spriteIcon = "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg"; //"/img/forge/hotspot.svg";
 
     const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
 
@@ -487,11 +492,11 @@ async function addHotPoint(data) {
         onSelectionChange
     );
 
-    const viewableData = new DataVizCore.ViewableData();
+    viewableData = new DataVizCore.ViewableData();
     viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
 
     //熱圖 打點  x: 0, y: 25.03, z: -2.52  三菱
-    const myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27
+    myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27
                         { position: { x: -21.95, y: 7.61, z: 63.27 } },//-21.95, 7.61, 63.27
                         { position: { x: -21.95, y: 6.43, z: 63.27 } },//-21.95, 6.43, 63.27
                         { position: { x: -21.95, y: 5.31, z: 63.27 } }//-21.95, 5.31, 63.27
@@ -510,7 +515,7 @@ async function addHotPoint(data) {
 
     //---------------- 熱點點擊事件 --------------------
     function onSpriteClicked(event) {
-        //event.hasStopped = true;
+        event.hasStopped = true;
         if (event != undefined && event != null) {
             if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
                 console.log(`Sprite clicked: ${event.dbId}`);
@@ -518,6 +523,16 @@ async function addHotPoint(data) {
             }
 
             if (event.clickInfo != null) {
+                //if (event.clickInfo.dbId == 12449) {
+                    //const viewablesToUpdate = [event.dbId];
+                    //dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+                    //    return {
+                    //        color: spriteColorRed,
+                    //    };
+                    //});
+                //}
+
+
                 //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
                 document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
                 document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
@@ -558,6 +573,18 @@ async function addHotPoint(data) {
 }
 //------------------- end --------------
 
+// 熱點 更換顏色
+function changeColorForHotspot(dbId) {
+    //const viewablesToUpdate = [event.dbId];
+    const viewablesToUpdate = dbId;
+    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        return {
+            color: spriteColorRed,
+        };
+    });
+}
+
+
 ////---------------- 熱點點擊事件 --------------------
 //function onSpriteClicked(event) {
 //    //event.hasStopped = true;
@@ -1039,12 +1066,44 @@ async function loadHeatmaps(model) {
     //x: -17.33, y: 51.03, z: -2.52
     const devices = [
         {
-            id: "Oficina 6",
+            id: "Oficina 5",
             //name: "Oficina-",
-            position: { x: 0, y: 25, z: -2.5 }, // x: 0, y: 25.03, z: -2.52
+            position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 4",
+            //name: "Oficina-",
+            position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (37.03, -4.81, 12.88)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 3",
+            //name: "Oficina-",
+            position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (2.83, -22.60, 12.88)
             sensorTypes: ["temperature", "humidity"]
         }
+
+        //{
+        //    id: "Oficina 5",
+        //    //name: "Oficina-",
+        //    position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+        //    sensorTypes: ["temperature", "humidity"]
+        //},
+        //{
+        //    id: "Oficina 4",
+        //    //name: "Oficina-",
+        //    position: { x: 37.03, y: -4.81, z: 12.88 }, // x: 0, y: 25.03, z: -2.52  (37.03, -4.81, 12.88)
+        //    sensorTypes: ["temperature", "humidity"]
+        //},
+        //{
+        //    id: "Oficina 3",
+        //    //name: "Oficina-",
+        //    position: { x: 2.83, y: -22.60, z: 12.88 }, // x: 0, y: 25.03, z: -2.52   (2.83, -22.60, 12.88)
+        //    sensorTypes: ["temperature", "humidity"]
+        //}
     ];
+    //冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
 
     // Initialize sensor values
     let sensorVals = [];
@@ -1070,7 +1129,9 @@ async function loadHeatmaps(model) {
     //    },
     //    true
     //);
-    roofDbIds.push(834);//5113 834 838 8106 8177
+    roofDbIds.push(792);//5113 834 838 8106 8177 792 8181
+    //roofDbIds.push(8183);
+    //roofDbIds.push(8185);
 
     const {
         SurfaceShadingData,
@@ -1109,6 +1170,14 @@ async function loadHeatmaps(model) {
 
     dataVizExtn.renderSurfaceShading("Roof Panel", "temperature", getSensorValue);
 
+    setInterval(() => {
+        // Modify sensor values.
+        for (let i = 0; i < devices.length; i++) {
+            sensorVals[i] = Math.random();
+        }
+        dataVizExtn.updateSurfaceShading(getSensorValue);
+    }, 2000);
+
     //viewer.hide(5108);//五樓底下的六樓物件
     //-------------------------------------------------------------------------------
     
@@ -1150,3 +1219,8 @@ async function loadHeatmaps(model) {
     //dataVizExtn.updateSurfaceShading(getSensorValue);
     
 } 
+
+async function loadHeatmap() {
+    const model = viewer.model;
+    loadHeatmaps(model);
+}