From 00c9d700cbfd392c317cfce529edc6f343d89563 Mon Sep 17 00:00:00 2001 From: wanli Date: Mon, 26 Dec 2022 18:20:32 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend][=E7=9B=A3=E6=8E=A7=E7=B3=BB=E7=B5=B1?= =?UTF-8?q?][=E9=9B=BB=E9=8C=B6=E7=B3=BB=E7=B5=B1]=20=E6=A8=A1=E5=9E=8B?= =?UTF-8?q?=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