jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b146283d13
ibms-dome/Backend/wwwroot/js/forge/ForgeDemo.js

1279 lines
46 KiB
JavaScript
Raw Normal View History

[Backend] 增加forge上傳檢視頁面、測試頁面
2023-01-02 18:42:55 +08:00
var viewer;
let fragProxy;
var targetFloorZ;
var elevatorSpeed;
var allDbIdsStr;
let bulbLight;//點燈
let spotLight;//聚光燈
var myDataList;
var viewableData;
var dataVizExtn;
var spriteColorRed;
var levels;//剖面用
var baseApiUrl = "http://localhost:3604";
var instanceTree;
//var objSendData = { Data: null };
[Backend] 取得房間資訊 ， 更新至forge_room資料表
2023-01-07 22:17:08 +08:00
var tagIdDevList = [];//模型設備List: device_number、device_coordinate_3d、forge_dbid
var roomDataList = [];//模型房間List: room_id、room_name
[Backend] 增加forge上傳檢視頁面、測試頁面
2023-01-02 18:42:55 +08:00
function launchViewer(urn) {
var av = Autodesk.Viewing;
var options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken
};
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
//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);
});
}
function getAllLeafComponents(viewer, callback) {
var cbCount = 0;
var tree;
var jsData = []
function getLeafComponentsRec(current, parent) {
cbCount++;
if (tree.getChildCount(current) != 0) {
tree.enumNodeChildren(current, function (children) {
getLeafComponentsRec(children, current);
}, false);
}
var nodeName = viewer.model.getInstanceTree().getNodeName(current)
jsData.push({ id: current, parent: parent, text: nodeName })
if (--cbCount == 0) callback(jsData);
}
viewer.getObjectTree(function (objectTree) {
tree = objectTree;
var rootId = tree.getRootId()
var nodeName = viewer.model.getInstanceTree().getNodeName(rootId)
jsData.push({ id: rootId, parent: '#', text: nodeName })
var allLeafComponents = getLeafComponentsRec(rootId, '#');
});
}
function onDocumentLoadSuccess(doc) {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables).then(i => {
// documented loaded, any action?
});
viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
var currSelection = viewer.getSelection();
var domElem = document.getElementById('id_printer');
domElem.innerText = currSelection[0];
//var color = new THREE.Vector4(255 / 255, 0, 0, 1);
//viewer.setThemingColor(751, color);
//var color = new THREE.Vector4(0, 1, 0, 1);
//viewer.setThemingColor(751, color);
//var dbid = currSelection[0]; //750;
//var it = NOP_VIEWER.model.getData().instanceTree;
//var indexinNames = it.nodeAccess.dbIdToIndex[dbid];
//var indexinStrings = it.nodeAccess.names[indexinNames];
//var nodeMainString = it.nodeAccess.strings[indexinStrings];
//var nodeSuffixString = it.nodeAccess.nameSuffixes[indexinStrings];
//var nodeFinalName = it.getNodeName(dbid);
//console.log("names: " + indexinNames + ", inStrings: " + indexinStrings + ", nodeMainString: " + nodeMainString + ", nodeSuffix: " + nodeSuffixString);
//console.log("nodeFinalName: " + nodeFinalName);
//var vp = viewer.impl.clientToViewport(event.canvasX, event.canvasY);
//var renderer = viewer.impl.renderer();
//var dbId = renderer.idAtPixel(vp.x, vp.y);
//if (dbId) {
// console.debug("Selected Id: " + dbId);
// //viewer.select(dbId);
// //viewer.impl.invalidate(true);
// viewer.model.getExternalIdMapping(data => console.log(data));
//}
//set color
//let nodeIdObj = 750;
//this.viewer.setThemingColor(nodeIdObj, red, this.model);
//const color = new THREE.Vector4(1.0, 0.0, 0.0, 0.5);
//viewer.setThemingColor(751, color, null, true);
var myDbid = currSelection;
//viewer.getProperties(myDbid, function (e) {
// //console.log('Entire object response ', e);
// //console.log('Properties ', e.properties);
// //foreach(item in e.properties) {
// // if (item.displayName == "【tag_id】") {
// // console.log(">> " + item.displayValue);
// // }
// //}
// e.properties.forEach(function (item) {
// //if (item.displayName == "【tag_id】") {
// // console.log(">> " + item.displayValue);
// //}
// if (item.displayName == "tag_id") {
// console.log(">> " + item.displayValue);
// }
// });
//});
});
//viewer.loadExtension('ToolbarExtension');
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
instanceTree = viewer.model.getData().instanceTree;
var domElem = document.getElementById('all_id');
allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
domElem.innerText = allDbIdsStr;
//parseInt(allDbIdsStr[i]
//for (var i = 0; i < allDbIdsStr.length; i++) {
// //setTransparency(parseInt(allDbIdsStr[i]), 0.2);
// viewer.getProperties(parseInt(allDbIdsStr[i], function (e) {
// e.properties.forEach(function (item) {
// //if (item.displayName == "【tag_id】") {
// // console.log(">> " + item.displayValue);
// //}
// if (item.displayName == "tag_id") {
// console.log(">> " + item.displayValue);
// }
// });
// })
//}
// ------------------ 取得tag_id底下的nodeId --------------------------------------
var curDbId = 0;
var tagId = 0;
var _parentId = 0;
var _childId = 0;
var itemName = '';
var childIdArr = new Array();
let evelMap = new Map();
let tree = viewer.model.getData().instanceTree;
const model = viewer.model;
const fragList = model.getFragmentList();
loadHeatmaps(model);
//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)
// })
// }
// });
// })
// }
// });
// })
//})
更新 device 資料表 room_dbid, room_name
2023-01-16 11:03:53 +08:00
allDbIdsStr.forEach((dbId) => {
curDbId = parseInt(dbId);
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
viewer.getProperties(curDbId, function (e) {
更新 device 資料表 room_dbid, room_name
2023-01-16 11:03:53 +08:00
e.properties.forEach(function (item) {
if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】
if (item.displayValue != "") {
////if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {// TPE_B1_ME_M10
//console.log("--------------------------------------------------");
//console.log("Tag_name dbid: " + e.dbId);
//console.log("value: " + item.displayValue);
////}
var str = item.displayValue.split('_');
if (str.length == 2) { //兩段為房間 ex: U7F_01
roomDataList.push({ room_id: e.dbId, room_name: item.displayValue });
}
else if (str.length == 8) { //八段為設備 ex: TPE_B1_ME_M10_U7F_NA_FCU_N1
//取得座標
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();
////if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {
//console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")");
//console.log("--------------------------------------------------");
////}
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
tagIdDevList.push(
{
device_number: item.displayValue,
device_coordinate_3d: '{ "x": ' + (position.x).toFixed(2) + ', "y": ' + (position.y).toFixed(2) + ', "z": ' + (position.z).toFixed(2) + ' }',
wsp forge 取得 db_id update 到 device_node
2023-03-03 18:35:58 +08:00
forge_dbid: e.dbId, room_name: "",
node: null
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
});
更新 device 資料表 room_dbid, room_name
2023-01-16 11:03:53 +08:00
}
}
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
}
if (item.displayName == "【room_id】") {
tagIdDevList = tagIdDevList.map(tagItem => {
if (tagItem.forge_dbid === e.dbId) {
tagItem = { ...tagItem, room_name: item.displayValue }
}
return tagItem
})
}
if (item.displayName == "Group_id" && item.displayValue !== '') {
//取得座標
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();
tagIdDevList.push({
device_number: item.displayValue,
//device_coordinate_3d: '{ "x": ' + (position.x).toFixed(2) + ', "y": ' + (position.y).toFixed(2) + ', "z": ' + (position.z).toFixed(2) + ' }',
forge_dbid: e.dbId,
room_name: ""
})
}
if (item.displayName == "Tag_name" && item.displayValue !== '') {
//取得座標
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();
if (tagIdDevList.some(item => item.forge_dbid === e.dbId)) {
tagIdDevList.find(item => item.forge_dbid === e.dbId).node = {
device_number: item.displayValue,
device_coordinate_3d: '{ "x": ' + (position.x).toFixed(2) + ', "y": ' + (position.y).toFixed(2) + ', "z": ' + (position.z).toFixed(2) + ' }',
forge_dbid: e.dbId,
room_name: ""
}
} else {
tagIdDevList.push({
device_number: item.displayValue,
device_coordinate_3d: '{ "x": ' + (position.x).toFixed(2) + ', "y": ' + (position.y).toFixed(2) + ', "z": ' + (position.z).toFixed(2) + ' }',
forge_dbid: e.dbId,
wsp forge 取得 db_id update 到 device_node
2023-03-03 18:35:58 +08:00
room_name: "",
node: null
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
})
}
}
更新 device 資料表 room_dbid, room_name
2023-01-16 11:03:53 +08:00
});
[前台] 首頁 工單進度圖表 | 告警系統 預設全選 | 運維管理 bug 修正 | 系統監控 部分小類小卡片大小設定 | [後台] WSP 新增模型匯入參數 [前台API] 新增工單 Api
2023-02-24 16:03:17 +08:00
})
更新 device 資料表 room_dbid, room_name
2023-01-16 11:03:53 +08:00
})
[Backend] 增加forge上傳檢視頁面、測試頁面
2023-01-02 18:42:55 +08:00
//---------------------- 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 nodeId = 12112;//12104; //749; //10952;
let nodeId2 = 12111;//12105; //750;
let nodeId3 = 12110;//12104; //751;
tree.enumNodeFragments(nodeId, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
fragProxy.position = fragPosition
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
//------------ add -------------
tree.enumNodeFragments(nodeId2, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
fragProxy.position = fragPosition
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
tree.enumNodeFragments(nodeId3, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
fragProxy.position = fragPosition
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
});
//add toolbar fail
//function ToolbarExtension(viewer, options) {
// Autodesk.Viewing.Extension.call(this, viewer, options);
//}
//ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
//ToolbarExtension.prototype.constructor = ToolbarExtension;
//ToolbarExtension.prototype.load = function () {
// this.viewer.setLightPreset(6);
// this.viewer.setEnvMapBackground(true);
// this.viewer.fitToView();
// return true;
//};
//ToolbarExtension.prototype.unload = function () {
//};
//Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);
//ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
// //alert('TODO: customize Viewer toolbar');
// var viewer = this.viewer;
// var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button');
// button1.onClick = function (e) {
// viewer.setEnvMapBackground(true);
// };
// button1.addClass('show-env-bg-button');
// button1.setToolTip('Show Environment');
// //SubToolbar
// this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar');
// this.subToolbar.addControl(button1);
// toolbar.addControl(this.subToolbar);
//};
//加入點燈光
//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(0xffff00, 80, 10);//0xffffff
//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: 0xffff00 });//0xff0000
//var cube = new THREE.Mesh(geom, material);
//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);
}
//------------------- 加入熱點 -----------------
async function addHotPoint(data) {
var viewer = data.target;
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(0xffff00); //0xffffff
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);
//function onSpriteClicked(event) {
// console.log(`Sprite clicked: ${event.dbId}`);
//}
//熱點 點擊事件註冊
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
);
viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
//熱圖 打點 x: 0, y: 25.03, z: -2.52 三菱
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;
const myPosition = myData.position;
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
viewableData.addViewable(viewable);
});
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) {
//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;
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 changeColorForHotspot(dbId) {
//const viewablesToUpdate = [event.dbId];
const viewablesToUpdate = dbId;
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: spriteColorRed,
};
});
}
////---------------- 熱點點擊事件 --------------------
//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)}`);
// }
// }
//}
//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) {
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";
//dataVizExtn.removeAllViewables();
}
//------------------ 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);
//})
for (var i = 0; i < allDbIdsStr.length; i++) {
setTransparency(parseInt(allDbIdsStr[i]), 0);
}
}
function recoverTransparentBuilding() {
//allDbIdsStr.forEach((dbId) => {
// setTransparency(dbId, 1);
//})
for (var i = 0; i < allDbIdsStr.length; i++) {
setTransparency(parseInt(allDbIdsStr[i]), 1);
}
}
//設定模型 透明度
function setTransparency(nodeId, opacity) {
var model = viewer.model;
//var nodeId = 1633;
var fragList = viewer.model.getFragmentList();
var fragIds = []
model.getData().instanceTree.enumNodeFragments(
nodeId, (fragId) => {
fragIds.push(fragId)
});
fragIds.forEach((fragId) => {
//获取材质
var material = fragList.getMaterial(fragId);
if (material) {
//设置透明度
material.opacity = opacity;//0.5;
material.transparent = true;
//标记更新
material.needsUpdate = true;
}
})
//更新viewer
viewer.impl.invalidate(true, true, true);
}
function setElevatorFloor(floor) {
if (floor == 0)
targetFloorZ = 0;
else if (floor == 1)
targetFloorZ = 14.6;// 15;
else if (floor == 2)
targetFloorZ = 24.6;// 26;
else if (floor == 3)
targetFloorZ = 34.6;
else if (floor == 4)
targetFloorZ = 44.6;
else if (floor == 5)
targetFloorZ = 54.6;
else if (floor == 6)
targetFloorZ = 64.6;
else if (floor == 7)
targetFloorZ = 74.6;
else if (floor == 8)
targetFloorZ = 84.6;
else if (floor == 9)
targetFloorZ = 94.6;
else if (floor == 10)
targetFloorZ = 104.6;
else if (floor == 11)
targetFloorZ = 114.6;
else if (floor == 12)
targetFloorZ = 124.6;
else if (floor == -1)
targetFloorZ = -13;
}
function setElevatorSpeed(speed) { //0.01 ~ 1
elevatorSpeed = speed;
}
function movElevator() {
let tree = viewer.model.getData().instanceTree;//三組:(749,750,751),(755,756,757),(761,762,763)
let nodeId = 12112;//12104; //749; //10952;
let nodeId2 = 12111;//12105; //750;
let nodeId3 = 12110;//12104; //751;
let fragProxyZ = 0;
var movStatus = 0; // 0=no 1=up 2=down
changeColor(nodeId3);
//setTransparency(0.2);
setTransparentBuilding();
if (fragProxy.position.z > targetFloorZ) {
movStatus = 2
}
else if (fragProxy.position.z < targetFloorZ) {
movStatus = 1
}
if (movStatus == 0) {
return;
}
tree.enumNodeFragments(nodeId, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
//let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
if (movStatus == 2) {
fragProxy.position.z -= elevatorSpeed;
}
else if (movStatus == 1) {
fragProxy.position.z += elevatorSpeed;
}
fragProxyZ = fragProxy.position.z;
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
tree.enumNodeFragments(nodeId2, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
//let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
if (movStatus == 2) {
fragProxy.position.z -= elevatorSpeed;
}
else if (movStatus == 1) {
fragProxy.position.z += elevatorSpeed;
}
fragProxyZ = fragProxy.position.z;
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
tree.enumNodeFragments(nodeId3, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
//let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
if (movStatus == 2) {
fragProxy.position.z -= elevatorSpeed;
}
else if (movStatus == 1) {
fragProxy.position.z += elevatorSpeed;
}
fragProxyZ = fragProxy.position.z;
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
if (movStatus == 2) {
if (fragProxyZ >= targetFloorZ) {
requestAnimationFrame(movElevator);
}
else {
hideColor(nodeId3);
//setTransparency(1);
recoverTransparentBuilding();
}
}
else if (movStatus == 1) {
if (fragProxyZ <= targetFloorZ) {
requestAnimationFrame(movElevator);
}
else {
hideColor(nodeId3);
//setTransparency(1);
recoverTransparentBuilding();
}
}
//let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
//fragProxy.position = fragPosition;
//fragProxy.updateAnimTransform();
//viewer.impl.sceneUpdated(true);
}
function changeColor(nodeId) {//電梯變綠色
var color = new THREE.Vector4(0, 1, 0, 1);
viewer.setThemingColor(nodeId, color);
}
function hideColor(nodeId) {//顏色改成透明
var color = new THREE.Vector4(0, 1, 0, 0);
viewer.setThemingColor(nodeId, color);
}
function getAllDbIds(viewer) {
var instanceTree = viewer.model.getData().instanceTree;
var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
return allDbIdsStr.map(function (id) { return parseInt(id) });
}
//釋放viewer
function ReleaseViewer() {
viewer.finish();
viewer = null;
Autodesk.Viewing.shutdown();
}
//擴展類 刪除添加的所有DOM元素和事件
//ToolbarExtension.prototype.unload = function () {
// if (this.subToolbar) {
// this.viewer.toolbar.removeControl(this.subToolbar);
// this.subToolbar = null;
// }
//};
// ---- 模型剖面 ----
function getCutPlaneParam(idx, n) {
if (idx < 0 || !n) return;
const level = this.levels[idx];
if (!level) return;
//const precision = Autodesk.Viewing.Private.calculatePrecision( level.elevation );
const model = this.viewer.model;
const globalOffset = model.getData().globalOffset;
const units = model.getUnitString();
const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation);
let d = elevRaw - globalOffset.z - 0.5;
if (n == 1)
d = -1 * d;
return new THREE.Vector4(0, 0, n, d);
}
function onButtonClicked() {
const upperSelector = document.getElementById('adn-upper-lvl-selector');
const lowerSelector = document.getElementById('adn-lower-lvl-selector');
if (!upperSelector || !lowerSelector)
return;
const upperIdx = upperSelector.selectedIndex;
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
const lowerIdx = lowerSelector.selectedIndex;
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
}
/**
* Autodesk.Viewing.Document.load() failuire callback.
*/
function onDocumentLoadFailure(viewerErrorCode) {
console.error("onDocumentLoadFailure() - errorCode:" + viewerErrorCode);
}
function getForgeToken(callback) {
// for 三菱
fetch('/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.access_token, data.expires_in);
// });
//});
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599);
}
async function loadHeatmaps(model) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
// 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 3",
//name: "Oficina-",
position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5 (-4.93, -20.61, 16.86)
sensorTypes: ["temperature", "humidity"]
},
{
id: "Oficina 2",
//name: "Oficina-",
position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (23.94, -3.85, 16.86)
sensorTypes: ["temperature", "humidity"]
},
{
id: "Oficina 1",
//name: "Oficina-",
position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (-4.93, -3.85, 16.86)
sensorTypes: ["temperature", "humidity"]
}
];
// 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 roomDbIds = [];
//it.enumNodeChildren(
// 5027,//4239
// (id) => {
// if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板
// roomDbIds.push(id);
// }
// },
// true
//);
roomDbIds.push(11449);//5113 834 838 8106 8177 792 8181 7567
//roomDbIds.push(8183);
//roomDbIds.push(8185);
const {
SurfaceShadingData,
SurfaceShadingPoint,
SurfaceShadingNode,
} = Autodesk.DataVisualization.Core;
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
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);
// 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]; // 值: 0~1之間
//return 0;
}
dataVizExtn.renderSurfaceShading("Room 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);//五樓底下的六樓物件
//-------------------------------------------------------------------------------
// Use the resulting shading data to generate heatmap from.
//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];
// Set heatmap colors for temperature
//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;
// // 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);
//}
// This value can also be a room instead of a floor
//const floorName = "01 - Entry Level";
//dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
//dataVizExtn.updateSurfaceShading(getSensorValue);
}
async function loadHeatmap() {
const model = viewer.model;
loadHeatmaps(model);
}
function hideObject() {
//viewer.hide(4);
for (var i = 0; i < allDbIdsStr.length; i++) {
viewer.hide(parseInt(allDbIdsStr[i]));
}
}
function openObject() {
//viewer.show(4);
for (var i = 0; i < allDbIdsStr.length; i++) {
viewer.show(parseInt(allDbIdsStr[i]));
}
}
async function setObjectTransparent() {
//setTransparency(4, 0);
setTransparentBuilding();
}
async function cancelObjectTransparent() {
//setTransparency(4, 1);
recoverTransparentBuilding();
}
async function test() {
var model = viewer.model;
var nodeId = 560;
var fragList = viewer.model.getFragmentList();
var fragIds = []
model.getData().instanceTree.enumNodeFragments(
nodeId, (fragId) => {
fragIds.push(fragId)
});
fragIds.forEach((fragId) => {
//获取材质
var material = fragList.getMaterial(fragId);
if (material) {
//设置透明度
material.opacity = 0;
material.transparent = true;
//标记更新
material.needsUpdate = true
}
})
//更新viewer
viewer.impl.invalidate(true, true, true)
}
//------------ 剖面 ----------------------
async function getRemoteLevels() {
const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
if (!aecData.levels) return null;
const levels = aecData.levels;
levels.sort((a, b) => b.elevation - a.elevation);
return levels;
}
async function getLevelsData() {
const data = await this.getRemoteLevels();
this.levels = data;
}
function profile() {
const upperIdx = 6;
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
const lowerIdx = 7;
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
}
//----------------- end -----------------------------------------------
Reference in New Issue Copy Permalink