From 00c9d700cbfd392c317cfce529edc6f343d89563 Mon Sep 17 00:00:00 2001 From: wanli Date: Mon, 26 Dec 2022 18:20:32 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Frontend][=E7=9B=A3=E6=8E=A7=E7=B3=BB?= =?UTF-8?q?=E7=B5=B1][=E9=9B=BB=E9=8C=B6=E7=B3=BB=E7=B5=B1]=20=E6=A8=A1?= =?UTF-8?q?=E5=9E=8B=E4=B8=AD=E5=8A=A0=E5=85=A5=E7=86=B1=E9=BB=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_sysMonAll.html | 36 ++++++- Frontend/js/forge/forgemodel.js | 170 +++++++++++++++++++++++--------- 2 files changed, 158 insertions(+), 48 deletions(-) diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index fee24f1..59518a1 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -12,6 +12,7 @@ \ No newline at end of file diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index dd52a24..c953cb4 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -1,56 +1,12 @@ var viewer; -// const devices = [ -// { -// id: "Sensor 1", -// position: { -// x: -22.779729106182415, -// y: 5.431043023608719, -// z: 4.553068469137088, -// }, -// type: "combo", -// sensorTypes: ["temperature", "co2"], -// dbId: 1, -// }, -// { -// id: "Sensor 2", -// position: { -// x: 0.20752051811882666, -// y: 5.431043023608719, -// z: 4.553068469137088, -// }, -// type: "combo", -// sensorTypes: ["temperature", "co2"], -// dbId: 2, -// }, -// ]; - -// var sensorStyleDefinitions = { -// co2: { -// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/co2.svg", -// color: 0xffffff, -// }, -// temperature: { -// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/thermometer.svg", -// color: 0xffffff, -// }, -// default: { -// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg", -// color: 0xffffff, -// }, -// }; - -// Initialize sensor values -//let sensorVals = []; let fragProxy; var targetFloorZ; var elevatorSpeed; var selector = "#forgeViewer"; -// for (let i = 0; i < devices.length; i++) { -// sensorVals[i] = Math.random(); -// } +let myDataList; -function launchViewer(urn, callback,selector = "#forgeViewer") { +function launchViewer(urn, callback, selector = "#forgeViewer") { var options = { env: 'AutodeskProduction', getAccessToken: getForgeToken @@ -96,6 +52,30 @@ function launchViewer(urn, callback,selector = "#forgeViewer") { }); } +function launchViewerForHotspot(urn, callback, selector = "#forgeViewer") { + var av = Autodesk.Viewing; + var options = { + env: 'AutodeskProduction', + getAccessToken: getForgeToken + }; + + Autodesk.Viewing.Initializer(options, () => { + viewer = new Autodesk.Viewing.GuiViewer3D($(selector)[0]); + viewer.start(); + var documentId = 'urn:' + urn; + + viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, { + once: true, + }); + + Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); + + $(selector).on("autodesk:loaded", function (e, nodeIds) { + callback ? callback(viewer, nodeIds) : ""; + }) + }); +} + function launchViewerNoTools(urn, callback) { var options = { env: 'AutodeskProduction', @@ -593,4 +573,100 @@ function hideColor(nodeId) {//顏色改成透明 viewer.setThemingColor(chiNodeId, color); },true) -} \ No newline at end of file +} + +//------------------ 紀錄熱點座標 --------------- +function getHopspotPoint(data) { + //var av = Autodesk.Viewing; + myDataList = data; + //viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, { + // once: true, + //}); +} +//-------------------- end ---------------------- + +//------------------- 加入熱點 ----------------- +async function addHotPoint(data) { + var viewer = data.target; + const 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 spriteIcon = "/img/forge/hotspot.svg"; + + const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon); + + //熱點 點擊事件註冊 + viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED + + viewer.addEventListener( + Autodesk.Viewing.SELECTION_CHANGED_EVENT, + onSelectionChange + ); + + const viewableData = new DataVizCore.ViewableData(); + viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels + + myDataList.forEach((myData, index) => { + const dbId = 10 + index; + const myPosition = myData.position; + const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId); + + viewableData.addViewable(viewable); + }); + + await viewableData.finish(); + dataVizExtn.addViewables(viewableData); + + //---------------- 熱點點擊事件 -------------------- + function onSpriteClicked(event) { + if (event != undefined && event != null) { + if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19 + console.log(`Sprite clicked: ${event.dbId}`); + openHotspotModal(); + } + + if (event.clickInfo != null) { + //document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); + //document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId; + //document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")"; + console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`); + } + } + } + + function onSelectionChange(event) { + if (event != undefined && event != null) { + const dbIds = event.dbIdArray; + + if (dbIds.length > 0) { + // 處理已選取元件的邏輯 + + //openHotspotModal(); + console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z} + } else { + // 處理沒有選取元件的邏輯 + console.log("no item"); + } + } + } + +} +//------------------- end -------------- + +//----------------- 開關熱點小視窗 ---------------------- +function openHotspotModal() { + //var modal = document.getElementById("hotspotModal"); + //modal.style.display = "block"; + //$("#pills-register-tab").removeClass("active"); + //$("#pills-alarm-tab").removeClass("active"); + //$("#pills-operation-tab").removeClass("active"); + //$("#pills-login-tab").tab("show"); +} + +function closeHotspotModal() { + //var modal = document.getElementById("hotspotModal"); + //modal.style.display = "none"; + +} +//------------------ end -------------------------------- \ No newline at end of file From 6da73ceec631d32e2191b196e7997c3fe04191d6 Mon Sep 17 00:00:00 2001 From: wanli Date: Mon, 26 Dec 2022 18:21:08 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Frontend]=20=E6=B8=AC=E8=A9=A6=E7=86=B1?= =?UTF-8?q?=E9=BB=9E=E3=80=81=E7=86=B1=E5=9C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/forgetTest2.html | 12 +- Frontend/js/forge/modeltest.js | 299 +++++++++++++++++++++++++-------- 2 files changed, 237 insertions(+), 74 deletions(-) diff --git a/Frontend/forgetTest2.html b/Frontend/forgetTest2.html index f6f96ac..7555315 100644 --- a/Frontend/forgetTest2.html +++ b/Frontend/forgetTest2.html @@ -182,7 +182,12 @@ //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); - launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp + //launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp + //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjEubndk'); + + //測試熱圖 + launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q'); + //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP @@ -285,6 +290,11 @@ + + + + + diff --git a/Frontend/js/forge/modeltest.js b/Frontend/js/forge/modeltest.js index 3e108e2..f9a8b49 100644 --- a/Frontend/js/forge/modeltest.js +++ b/Frontend/js/forge/modeltest.js @@ -19,6 +19,7 @@ function launchViewer(urn) { viewer.start(); var documentId = 'urn:' + urn; + //加入熱點 viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, { once: true, }); @@ -161,9 +162,14 @@ function onDocumentLoadSuccess(doc) { var childIdArr = new Array(); let evelMap = new Map(); - let tree = viewer.model.getData().instanceTree; - const model = viewer.model; - const fragList = model.getFragmentList(); + let tree = viewer.model.getData().instanceTree; + const model = viewer.model; + const fragList = model.getFragmentList(); + + + loadHeatmaps(model); + + //allDbIdsStr.forEach((dbId) => { // curDbId = parseInt(dbId); @@ -257,10 +263,12 @@ function onDocumentLoadSuccess(doc) { curDbId = parseInt(dbId); viewer.getProperties(curDbId, function (e) { e.properties.forEach(function (item) { - if (item.displayName == "Tag_name") { // Tag_name tag_id 【tag_id】 + if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】 if (item.displayValue != "") { - console.log("Tag_name dbid: " + e.dbId); - console.log("value: " + item.displayValue); + //if ((item.displayValue).indexOf('TPE_B1_EE_E4') > -1) { + //console.log("Tag_name dbid: " + e.dbId); + //console.log("value: " + item.displayValue); + //} //var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer); //console.log("v: " + v); @@ -281,7 +289,9 @@ function onDocumentLoadSuccess(doc) { bounds.union(box); }, true); var position = bounds.center(); - console.log("position: (" + position.x + ", " + position.y + ", " + position.z + ")"); + //if ((item.displayValue).indexOf('TPE_B1_EE_E4') > -1) { + //console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")"); + //} } //getFragmentWorldMatrixByNodeId(e.dbId, viewer); //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); @@ -434,17 +444,17 @@ function onDocumentLoadSuccess(doc) { //viewer.scene.add(bulbLight); //聚光燈 - spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff - spotLight.position.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 cube = new THREE.Mesh(geom, material); - cube.position.set(-17.33, 51.03, -10);//-4.52 - viewer.scene.add(cube); - spotLight.target = cube; - viewer.scene.add(spotLight); + //spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff + //spotLight.position.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 cube = new THREE.Mesh(geom, material); + //cube.position.set(-17.33, 51.03, -10);//-4.52 + //viewer.scene.add(cube); + //spotLight.target = cube; + //viewer.scene.add(spotLight); } @@ -459,8 +469,17 @@ async function addHotPoint(data) { const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon); + + //function onSpriteClicked(event) { + // console.log(`Sprite clicked: ${event.dbId}`); + //} + //熱點 點擊事件註冊 - viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked); + viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);//MOUSE_CLICK SPRITE_SELECTED + //viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut); + //viewer.addEventListener(DataVizCore.MOUSE_DOWN, onSpriteClicked); + //viewer.addEventListener(DataVizCore.MOUSE_HOVERING, onSpriteHovering); + viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectionChange @@ -469,7 +488,12 @@ async function addHotPoint(data) { const viewableData = new DataVizCore.ViewableData(); viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels - const myDataList = [{ position: { x: -17.33, y: 51.03, z: -2.52 } }, { position: { x: -23.21, y: 51.03, z: -2.52 } }]; + //熱圖 打點 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 + { 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 + ];// x: -17.33, y: 51.03, z: -2.52 ; x: -23.21, y: 51.03, z: -2.52 myDataList.forEach((myData, index) => { const dbId = 10 + index; @@ -482,27 +506,91 @@ async function addHotPoint(data) { await viewableData.finish(); dataVizExtn.addViewables(viewableData); + //---------------- 熱點點擊事件 -------------------- + function onSpriteClicked(event) { + //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}`); + openHotspotModal(); + } + + if (event.clickInfo != null) { + //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2); + document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); + document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId; + document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")"; + console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`); + } + } + } + + //function onSpriteClickedOut(event) { + // //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); + // event.hasStopped = true; + + // const viewablesToUpdate = [event.dbId]; + // dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => { + // return { + // scale: 1.0, // Restore the viewable size + // url: "https://.../circle.svg", + // }; + // }); + //} + + //function onSpriteHovering(event) { + // const targetDbId = event.dbId; + + // if (event != undefined && event != null && event.hovering) { + + // if (targetDbId >= 10 && targetDbId <= 13) {//event.dbId > 0 && event.dbId < 19 + // console.log(`Sprite clicked: ${event.dbId}`); + // openHotspotModal(); + // } + + // console.log(`The mouse hovers over ${targetDbId}`); + // } else { + // console.log(`The mouse hovers off ${targetDbId}`); + // } + //} } //------------------- end -------------- -//---------------- 熱點點擊事件 -------------------- -function onSpriteClicked(event) { - if (event != undefined && event != null) { - if (event.dbId == 10 || event.dbId == 11) {//event.dbId > 0 && event.dbId < 19 - console.log(`Sprite clicked: ${event.dbId}`); - //alert("I am an alert box! " + event.dbId); - openHotspotModal(); - } +////---------------- 熱點點擊事件 -------------------- +//function onSpriteClicked(event) { +// //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}`); +// //alert("I am an alert box! " + event.dbId); +// openHotspotModal(); +// } - if (event.clickInfo != null) { - //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2); - document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); - document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId; - document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")"; - console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`); - } - } -} +// if (event.clickInfo != null) { +// //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2); +// document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); +// document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId; +// document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")"; +// console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`); +// } +// } +//} + +//function onSpriteClickedOut(event) { +// //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); +// event.hasStopped = true; + +// const viewablesToUpdate = [event.dbId]; +// dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => { +// return { +// scale: 1.0, // Restore the viewable size +// url: "https://.../circle.svg", +// }; +// }); + +// // Continue with application logic that reacts to the deselection +// // event (e.g., update UI to a state where no selection is made). +//} function onSelectionChange(event) { if (event != undefined && event != null) { @@ -510,6 +598,8 @@ function onSelectionChange(event) { if (dbIds.length > 0) { // 處理已選取元件的邏輯 + + //openHotspotModal(); console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z} } else { // 處理沒有選取元件的邏輯 @@ -532,6 +622,8 @@ function openHotspotModal() { function closeHotspotModal() { var modal = document.getElementById("hotspotModal"); modal.style.display = "none"; + //dataVizExtn.removeAllViewables(); + } //------------------ end -------------------------------- @@ -917,21 +1009,21 @@ function onDocumentLoadFailure(viewerErrorCode) { } function getForgeToken(callback) { - //fetch(baseApiUrl + '/api/forge/oauth/token').then(res => { - // res.json().then(data => { - // callback(data.dictionary.access_token, data.dictionary.expires_in); - // }); - //}); - - //for wsp get token - var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com"; - fetch(wspApiUrl + '/api/forge/getToken').then(res => { + // for 三菱 + fetch(baseApiUrl + '/api/forge/oauth/token').then(res => { res.json().then(data => { - callback(data.access_token, data.expires_in); + callback(data.dictionary.access_token, data.dictionary.expires_in); }); }); - //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599); + //for wsp get token + //var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com"; + //fetch(wspApiUrl + '/api/forge/getToken').then(res => { + // res.json().then(data => { + // callback(data.access_token, data.expires_in); + // }); + //}); + //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599); } @@ -942,56 +1034,117 @@ async function loadHeatmaps(model) { // Given a model loaded from Forge const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model); + //x: -17.33, y: 51.03, z: -2.52 const devices = [ { id: "Oficina 6", - name: "Oficina-", - position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 }, + //name: "Oficina-", + position: { x: 0, y: 25, z: -2.5 }, // x: 0, y: 25.03, z: -2.52 sensorTypes: ["temperature", "humidity"] } ]; - var offset = Autodesk.viewer.model.getGlobalOffset(); - removeOffset(devices[0], offset) + // Initialize sensor values + let sensorVals = []; + for (let i = 0; i < devices.length; i++) { + sensorVals[i] = Math.random(); + } + + //var offset = Autodesk.viewer.model.getGlobalOffset(); + //removeOffset(devices[0], offset) + + //---------------- test node --------------- + + // Retrive all dbIds that compose the stadium roof. + const it = viewer.model.getInstanceTree(); + const roofDbIds = []; + + //it.enumNodeChildren( + // 5027,//4239 + // (id) => { + // if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板 + // roofDbIds.push(id); + // } + // }, + // true + //); + roofDbIds.push(5113); + + const { + SurfaceShadingData, + SurfaceShadingPoint, + SurfaceShadingNode, + } = Autodesk.DataVisualization.Core; + + const shadingNode = new SurfaceShadingNode("Roof Panel", roofDbIds); + + devices.forEach((device) => { + const shadingPoint = new SurfaceShadingPoint( + device.id, + device.position, + device.sensorTypes + ); + shadingNode.addPoint(shadingPoint); + }); // Generates `SurfaceShadingData` after assigning each device to a room. + //const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices); + //const shadingData = await structureInfo.generateSurfaceShadingData(devices); + //shadingData.initialize(model); + const heatmapData = new SurfaceShadingData(); + heatmapData.addChild(shadingNode); + heatmapData.initialize(model); - const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices); + // Setup surface shading + await dataVizExtn.setupSurfaceShading(model, heatmapData); + + //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]); + dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]); + + function getSensorValue(device, sensorType) { + return sensorVals[parseInt(device.id.slice(-1)) - 1]; + } + + dataVizExtn.renderSurfaceShading("Roof Panel", "temperature", getSensorValue); + + //viewer.hide(5108);//五樓底下的六樓物件 + //------------------------------------------------------------------------------- + // Use the resulting shading data to generate heatmap from. - await dataVizExtn.setupSurfaceShading(model, shadingData); + //await dataVizExtn.setupSurfaceShading(model, shadingData); // Register color stops for the heatmap. Along with the normalized sensor value // in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final // heatmap color based on these specified colors. - const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]; + //const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]; // Set heatmap colors for temperature - const sensorType = "temperature"; - dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors); + //const sensorType = "temperature"; + //dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors); // Function that provides sensor value in the range of [0.0, 1.0] - function getSensorValue(surfaceShadingPoint, sensorType) { - // The `SurfaceShadingPoint.id` property matches one of the identifiers passed - // to `generateSurfaceShadingData` function. In our case above, this will either - // be "cafeteria-entrace-01" or "cafeteria-exit-01". - const deviceId = surfaceShadingPoint.id; + //function getSensorValue(surfaceShadingPoint, sensorType) { + // // The `SurfaceShadingPoint.id` property matches one of the identifiers passed + // // to `generateSurfaceShadingData` function. In our case above, this will either + // // be "cafeteria-entrace-01" or "cafeteria-exit-01". + // const deviceId = surfaceShadingPoint.id; - // Read the sensor data, along with its possible value range - let sensorValue = readSensorValue(deviceId, sensorType); - const maxSensorValue = getMaxSensorValue(sensorType); - const minSensorValue = getMinSensorValue(sensorType); + // // Read the sensor data, along with its possible value range + // let sensorValue = readSensorValue(deviceId, sensorType); + // const maxSensorValue = getMaxSensorValue(sensorType); + // const minSensorValue = getMinSensorValue(sensorType); - // Normalize sensor value to [0, 1.0] - sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue); - return clamp(sensorValue, 0.0, 1.0); - } + // // Normalize sensor value to [0, 1.0] + // sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue); + // return clamp(sensorValue, 0.0, 1.0); + //} // This value can also be a room instead of a floor - const floorName = "01 - Entry Level"; - dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); - + //const floorName = "01 - Entry Level"; + //dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); + //dataVizExtn.updateSurfaceShading(getSensorValue); } \ No newline at end of file