diff --git a/Frontend/forgetTest2.html b/Frontend/forgetTest2.html index d985a8c..f6f96ac 100644 --- a/Frontend/forgetTest2.html +++ b/Frontend/forgetTest2.html @@ -31,7 +31,8 @@ - 亮度 + + @@ -39,6 +40,115 @@
+ + @@ -64,12 +174,19 @@ } - + function openOrCloseLight() { + if (curLightIsOpen) { + curLightIsOpen = false; + setLightOpenOrClose(curLightIsOpen); + } + else { + curLightIsOpen = true; + setLightOpenOrClose(curLightIsOpen); + } + } + + + + - + diff --git a/Frontend/img/forge/hotspot.svg b/Frontend/img/forge/hotspot.svg new file mode 100644 index 0000000..690bb0e --- /dev/null +++ b/Frontend/img/forge/hotspot.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/Frontend/js/forge/modeltest.js b/Frontend/js/forge/modeltest.js index 91d6d2d..3e108e2 100644 --- a/Frontend/js/forge/modeltest.js +++ b/Frontend/js/forge/modeltest.js @@ -3,8 +3,11 @@ let fragProxy; var targetFloorZ; var elevatorSpeed; var allDbIdsStr; +let bulbLight;//點燈 +let spotLight;//聚光燈 function launchViewer(urn) { + var av = Autodesk.Viewing; var options = { env: 'AutodeskProduction', getAccessToken: getForgeToken @@ -15,8 +18,14 @@ function launchViewer(urn) { //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//沒有工具列 viewer.start(); var documentId = 'urn:' + urn; + + viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, { + once: true, + }); + Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); + }); } @@ -122,8 +131,9 @@ function onDocumentLoadSuccess(doc) { viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { var instanceTree = viewer.model.getData().instanceTree; - allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); - var domElem = document.getElementById('all_id'); + + var domElem = document.getElementById('all_id'); + allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); domElem.innerText = allDbIdsStr; //parseInt(allDbIdsStr[i] @@ -147,48 +157,191 @@ function onDocumentLoadSuccess(doc) { var tagId = 0; var _parentId = 0; var _childId = 0; - //var childIdArr = new Array(); + var itemName = ''; + var childIdArr = new Array(); let evelMap = new Map(); + let tree = viewer.model.getData().instanceTree; + const model = viewer.model; + const fragList = model.getFragmentList(); + + //allDbIdsStr.forEach((dbId) => { + // curDbId = parseInt(dbId); + // viewer.getProperties(curDbId, function (e) { + // e.properties.forEach(function (item) { + // if (item.displayName == "tag_id" && e.name == "【電梯】") { + + // //getFragmentWorldMatrixByNodeId(e.dbId, viewer); + // //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); + + // tree.enumNodeFragments(e.dbId, function (frag) { + + // let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); + // let matrix = new THREE.Matrix4(); + // console.log("proxy: " + fragProxy.position); + + // fragProxy.getWorldMatrix(matrix); + + // }); + + + + // tagId = e.dbId; + // viewer.getProperties(tagId, function (e2) { + // e2.properties.forEach(function (item2) { + // if (item2.displayName == "child") { + // _parentId = item2.displayValue; + + // viewer.getProperties(_parentId, function (e3) { + // let itemMap = new Map(); + // e3.properties.forEach(function (item3) { + // if (item3.displayName == "child") { + // _childId = item3.displayValue; + // childIdArr.push(_childId); + + // var n = 0; + // viewer.getProperties(childIdArr[n], function (e5) { + // e5.properties.forEach(function (item5) { + // if (item5.displayName == "Name") { + // itemName = item5.displayValue; + // itemMap.set(childIdArr[0], itemName) + // console.log("childIdArr[0] ", childIdArr[0]) + // console.log("item name: ", itemName); + // n += 3; + // } + // }); + // }) + + // n = 1; + // viewer.getProperties(childIdArr[n], function (e6) { + // e6.properties.forEach(function (item6) { + // if (item6.displayName == "Name") { + // itemName = item6.displayValue; + // itemMap.set(childIdArr[1], itemName) + // console.log("childIdArr[1] ", childIdArr[1]) + // console.log("item name: ", itemName); + // n += 3; + // } + // }); + // }) + + // n = 2; + // viewer.getProperties(childIdArr[n], function (e7) { + // e7.properties.forEach(function (item7) { + // if (item7.displayName == "Name") { + // itemName = item7.displayValue; + // itemMap.set(childIdArr[2], itemName) + // console.log("childIdArr[2] ", childIdArr[2]) + // console.log("item name: ", itemName); + // n += 3; + // } + // }); + // }) + + // } + // }); + // evelMap.set(item.displayValue, itemMap) + // }) + + // } + // }); + // }) + // } + // }); + + // }) + + //}) + allDbIdsStr.forEach((dbId) => { curDbId = parseInt(dbId); viewer.getProperties(curDbId, function (e) { e.properties.forEach(function (item) { - if (item.displayName == "tag_id" && e.name == "【電梯】") { - - tagId = e.dbId; - viewer.getProperties(tagId, function (e2) { - e2.properties.forEach(function (item2) { - if (item2.displayName == "child") { - _parentId = item2.displayValue; - - viewer.getProperties(_parentId, function (e3) { - var childIdArr = new Array(); - - e3.properties.forEach(function (item3) { - if (item3.displayName == "child") { - _childId = item3.displayValue; - childIdArr.push(_childId); - } - }); - evelMap.set(item.displayValue, childIdArr) - console.log("map: " + evelMap); - }) + if (item.displayName == "Tag_name") { // Tag_name tag_id 【tag_id】 + if (item.displayValue != "") { + console.log("Tag_name dbid: " + e.dbId); + console.log("value: " + item.displayValue); + //var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer); + //console.log("v: " + v); - } - }); - }) + + //tree.enumNodeFragments(e.dbId, function (frag) { + // fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); + // fragProxy.getAnimTransform(); + // console.log("postion: " + fragProxy.position + ", fragP: " + fragProxy.fragPosition); + //}); + + + + let bounds = new THREE.Box3(); + + instanceTree.enumNodeFragments(e.dbId, (fragId) => { + let box = new THREE.Box3(); + fragList.getWorldBounds(fragId, box); + bounds.union(box); + }, true); + var position = bounds.center(); + console.log("position: (" + position.x + ", " + position.y + ", " + position.z + ")"); + } + //getFragmentWorldMatrixByNodeId(e.dbId, viewer); + //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); + + } }); }) - + }) + //---------------------- end --------------------------------------------------- + + + //var curDbId = 0; + //var tagId = 0; + //var _parentId = 0; + //var _childId = 0; + ////var childIdArr = new Array(); + //let evelMap = new Map(); + + //allDbIdsStr.forEach((dbId) => { + // curDbId = parseInt(dbId); + // viewer.getProperties(curDbId, function (e) { + // e.properties.forEach(function (item) { + // if (item.displayName == "tag_id" && e.name == "【電梯】") { + + // tagId = e.dbId; + // viewer.getProperties(tagId, function (e2) { + // e2.properties.forEach(function (item2) { + // if (item2.displayName == "child") { + // _parentId = item2.displayValue; + + // viewer.getProperties(_parentId, function (e3) { + // var childIdArr = new Array(); + + // e3.properties.forEach(function (item3) { + // if (item3.displayName == "child") { + // _childId = item3.displayValue; + // childIdArr.push(_childId); + // } + // }); + // evelMap.set(item.displayValue, childIdArr) + // console.log("map: " + evelMap); + // }) + + // } + // }); + // }) + // } + // }); + + // }) + + //}) - let tree = viewer.model.getData().instanceTree; + //let tree = viewer.model.getData().instanceTree; let nodeId = 12112;//12104; //749; //10952; let nodeId2 = 12111;//12105; //750; let nodeId3 = 12110;//12104; //751; @@ -271,9 +424,164 @@ function onDocumentLoadSuccess(doc) { //}; - //NOP_VIEWER.getProperties(NOP_VIEWER.getSelection(), data => console.log(data)); + //加入點燈光 + //bulbLight = new THREE.PointLight(0xffffff, 1, 1, 2);//0xff0000 + //bulbLight.position.set(-17.33, 51.03, -2.52);//17.880840301513672 + //bulbLight.castShadow = true; + //bulbLight.intensity = 50; + //bulbLight.distance = 1; + //bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0); + //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); + } +//------------------- 加入熱點 ----------------- +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); + 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 + + const myDataList = [{ position: { x: -17.33, y: 51.03, z: -2.52 } }, { position: { x: -23.21, y: 51.03, z: -2.52 } }]; + + 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); + +} +//------------------- 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(); + } + + 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 onSelectionChange(event) { + if (event != undefined && event != null) { + const dbIds = event.dbIdArray; + + if (dbIds.length > 0) { + // 處理已選取元件的邏輯 + 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 -------------------------------- + +//-------------- 更改燈光範圍 -------------------------- +function setLightPower(value) { + //bulbLight.intensity = (value * 10); + //bulbLight.distance = value; + viewer.impl.sceneUpdated(true); +} + +function setLightOpenOrClose(value) { + if (value) + spotLight.visible = true; + else { + spotLight.visible = false; + } + viewer.impl.sceneUpdated(true); +} + +function setLightTransparency(value) { + bulbLight.intensity = (value * 10); + //bulbLight. + viewer.impl.sceneUpdated(true); +} +//------------- end ----------------------------------- + + +//function getPosition(nodeId) { +function getFragmentWorldMatrixByNodeId(nodeId, viewer) { + let tree = viewer.model.getData().instanceTree; + let result = { + fragId: [], + matrix: [], + }; + //let viewer = this.viewer; + tree.enumNodeFragments(nodeId, function (frag) { + + let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); + let matrix = new THREE.Matrix4(); + + fragProxy.getWorldMatrix(matrix); + + result.fragId.push(frag); + result.matrix.push(matrix); + }); + console.log("position: " + result); + return result; +} +//} + function setTransparentBuilding() { //allDbIdsStr.forEach((dbId) => { // setTransparency(dbId, 0.2); @@ -609,12 +917,22 @@ function onDocumentLoadFailure(viewerErrorCode) { } function getForgeToken(callback) { - fetch(baseApiUrl + '/api/forge/oauth/token').then(res => { + //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 => { res.json().then(data => { - callback(data.dictionary.access_token, data.dictionary.expires_in); + callback(data.access_token, data.expires_in); }); }); + //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599); + //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599); } async function loadHeatmaps(model) {