jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][系統監控] 合併衝突

Browse Source
This commit is contained in:
dev01 2022-12-26 18:34:09 +08:00
commit 799d3ddd6c
4 changed files with 397 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Frontend/_sysMonAll.html
View File

@ -36,7 +36,8 @@
<script> <script>
var allDevList = []; //全設備清單 var allDevList = []; //全設備清單
let devicePointList = [];
$(function () { $(function () {
getBuildMenu((arr, data) => { getBuildMenu((arr, data) => {
if (arr.indexOf(4) != -1) { if (arr.indexOf(4) != -1) {
@ -44,7 +45,10 @@
setLightColor(); setLightColor();
} }
if (arr.indexOf(5) != -1) { if (arr.indexOf(5) != -1) {
setHotspotPoint();
show3DModel(data.urn_3D); show3DModel(data.urn_3D);
console.log("start ---------");
} }
}); });
}) })
@ -242,17 +246,39 @@
}, null, "POST").send(); }, null, "POST").send();
} }
// Card 即時狀態 function show3DModel(urn) {
function drawStateTabBlo() { launchViewerForHotspot(urn, (viewer, nodeIds) => {
let strHtml = `<div style="height:15rem">
<iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
</div>`
return strHtml;
}
function show3DModel() {
launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => {
}); });
} }
function getHotspotPoint() {
let url = baseApiUrl + "/api/GetDevForCor";
let sendData = {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
"name_tag": pageAct.sysSubTag,
};
objSendData.Data = sendData;
$.post(url, sendData, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
devicePointList.push(rel.data.device_coordinate_3d);
}, 'json');
}
function setHotspotPoint() {
//先假設有抓到點位的座標 之後api改input後再接
const mydatalist = [{ position: { x: -21.95, y: 8.92, z: 63.27 } },
{ position: { x: -21.95, y: 7.61, z: 63.27 } },
{ position: { x: -21.95, y: 6.43, z: 63.27 } },
{ position: { x: -21.95, y: 5.31, z: 63.27 } }
];
getHopspotPoint(mydatalist);
}
</script> </script>

12
Frontend/forgetTest2.html
View File

@ -182,7 +182,12 @@
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp //launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjEubndk');
//測試熱圖
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
@ -285,6 +290,11 @@
</script> </script>

170
Frontend/js/forge/forgemodel.js
View File

@ -1,56 +1,12 @@
var viewer; 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; let fragProxy;
var targetFloorZ; var targetFloorZ;
var elevatorSpeed; var elevatorSpeed;
var selector = "#forgeViewer"; var selector = "#forgeViewer";
// for (let i = 0; i < devices.length; i++) { let myDataList;
// sensorVals[i] = Math.random();
// }
function launchViewer(urn, callback,selector = "#forgeViewer") { function launchViewer(urn, callback, selector = "#forgeViewer") {
var options = { var options = {
env: 'AutodeskProduction', env: 'AutodeskProduction',
getAccessToken: getForgeToken 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) { function launchViewerNoTools(urn, callback) {
var options = { var options = {
env: 'AutodeskProduction', env: 'AutodeskProduction',
@ -593,4 +573,100 @@ function hideColor(nodeId) {//顏色改成透明
viewer.setThemingColor(chiNodeId, color); viewer.setThemingColor(chiNodeId, color);
},true) },true)
} }
//------------------ 紀錄熱點座標 ---------------
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 --------------------------------

299
Frontend/js/forge/modeltest.js
View File

@ -19,6 +19,7 @@ function launchViewer(urn) {
viewer.start(); viewer.start();
var documentId = 'urn:' + urn; var documentId = 'urn:' + urn;
//加入熱點
viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, { viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
once: true, once: true,
}); });
@ -161,9 +162,14 @@ function onDocumentLoadSuccess(doc) {
var childIdArr = new Array(); var childIdArr = new Array();
let evelMap = new Map(); let evelMap = new Map();
let tree = viewer.model.getData().instanceTree; let tree = viewer.model.getData().instanceTree;
const model = viewer.model; const model = viewer.model;
const fragList = model.getFragmentList(); const fragList = model.getFragmentList();
loadHeatmaps(model);
//allDbIdsStr.forEach((dbId) => { //allDbIdsStr.forEach((dbId) => {
// curDbId = parseInt(dbId); // curDbId = parseInt(dbId);
@ -257,10 +263,12 @@ function onDocumentLoadSuccess(doc) {
curDbId = parseInt(dbId); curDbId = parseInt(dbId);
viewer.getProperties(curDbId, function (e) { viewer.getProperties(curDbId, function (e) {
e.properties.forEach(function (item) { 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 != "") { if (item.displayValue != "") {
console.log("Tag_name dbid: " + e.dbId); //if ((item.displayValue).indexOf('TPE_B1_EE_E4') > -1) {
console.log("value: " + item.displayValue); //console.log("Tag_name dbid: " + e.dbId);
//console.log("value: " + item.displayValue);
//}
//var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer); //var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer);
//console.log("v: " + v); //console.log("v: " + v);
@ -281,7 +289,9 @@ function onDocumentLoadSuccess(doc) {
bounds.union(box); bounds.union(box);
}, true); }, true);
var position = bounds.center(); 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); //getFragmentWorldMatrixByNodeId(e.dbId, viewer);
//let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
@ -434,17 +444,17 @@ function onDocumentLoadSuccess(doc) {
//viewer.scene.add(bulbLight); //viewer.scene.add(bulbLight);
//聚光燈 //聚光燈
spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff //spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff
spotLight.position.set(-17.33, 51.03, -2.52); //spotLight.position.set(-17.33, 51.03, -2.52);
spotLight.castShadow = true; //spotLight.castShadow = true;
spotLight.visible = true; //spotLight.visible = true;
var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52 //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: 0xff0000 });
var cube = new THREE.Mesh(geom, material); //var cube = new THREE.Mesh(geom, material);
cube.position.set(-17.33, 51.03, -10);//-4.52 //cube.position.set(-17.33, 51.03, -10);//-4.52
viewer.scene.add(cube); //viewer.scene.add(cube);
spotLight.target = cube; //spotLight.target = cube;
viewer.scene.add(spotLight); //viewer.scene.add(spotLight);
} }
@ -459,8 +469,17 @@ async function addHotPoint(data) {
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon); 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( viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT, Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onSelectionChange onSelectionChange
@ -469,7 +488,12 @@ async function addHotPoint(data) {
const viewableData = new DataVizCore.ViewableData(); const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels 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) => { myDataList.forEach((myData, index) => {
const dbId = 10 + index; const dbId = 10 + index;
@ -482,27 +506,91 @@ async function addHotPoint(data) {
await viewableData.finish(); await viewableData.finish();
dataVizExtn.addViewables(viewableData); 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 -------------- //------------------- end --------------
//---------------- 熱點點擊事件 -------------------- ////---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) { //function onSpriteClicked(event) {
if (event != undefined && event != null) { // //event.hasStopped = true;
if (event.dbId == 10 || event.dbId == 11) {//event.dbId > 0 && event.dbId < 19 // if (event != undefined && event != null) {
console.log(`Sprite clicked: ${event.dbId}`); // if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
//alert("I am an alert box! " + event.dbId); // console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal(); // //alert("I am an alert box! " + event.dbId);
} // openHotspotModal();
// }
if (event.clickInfo != null) { // if (event.clickInfo != null) {
//document.getElementById('lbltipAddedComment').innerHTML .toFixed(2); // //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); // document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
document.getElementById('deviceDbid').innerHTML = 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) + ")"; // 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)}`); // 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) { function onSelectionChange(event) {
if (event != undefined && event != null) { if (event != undefined && event != null) {
@ -510,6 +598,8 @@ function onSelectionChange(event) {
if (dbIds.length > 0) { 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} 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 { } else {
// 處理沒有選取元件的邏輯 // 處理沒有選取元件的邏輯
@ -532,6 +622,8 @@ function openHotspotModal() {
function closeHotspotModal() { function closeHotspotModal() {
var modal = document.getElementById("hotspotModal"); var modal = document.getElementById("hotspotModal");
modal.style.display = "none"; modal.style.display = "none";
//dataVizExtn.removeAllViewables();
} }
//------------------ end -------------------------------- //------------------ end --------------------------------
@ -917,21 +1009,21 @@ function onDocumentLoadFailure(viewerErrorCode) {
} }
function getForgeToken(callback) { function getForgeToken(callback) {
//fetch(baseApiUrl + '/api/forge/oauth/token').then(res => { // for 三菱
// res.json().then(data => { fetch(baseApiUrl + '/api/forge/oauth/token').then(res => {
// 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 => { 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); //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 // Given a model loaded from Forge
const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model); const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
//x: -17.33, y: 51.03, z: -2.52
const devices = [ const devices = [
{ {
id: "Oficina 6", id: "Oficina 6",
name: "Oficina-", //name: "Oficina-",
position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 }, position: { x: 0, y: 25, z: -2.5 }, // x: 0, y: 25.03, z: -2.52
sensorTypes: ["temperature", "humidity"] sensorTypes: ["temperature", "humidity"]
} }
]; ];
var offset = Autodesk.viewer.model.getGlobalOffset(); // Initialize sensor values
removeOffset(devices[0], offset) 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. // 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. // 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 // 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 // in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
// heatmap color based on these specified colors. // heatmap color based on these specified colors.
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]; //const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
// Set heatmap colors for temperature // Set heatmap colors for temperature
const sensorType = "temperature"; //const sensorType = "temperature";
dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors); //dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
// Function that provides sensor value in the range of [0.0, 1.0] // Function that provides sensor value in the range of [0.0, 1.0]
function getSensorValue(surfaceShadingPoint, sensorType) { //function getSensorValue(surfaceShadingPoint, sensorType) {
// The `SurfaceShadingPoint.id` property matches one of the identifiers passed // // The `SurfaceShadingPoint.id` property matches one of the identifiers passed
// to `generateSurfaceShadingData` function. In our case above, this will either // // to `generateSurfaceShadingData` function. In our case above, this will either
// be "cafeteria-entrace-01" or "cafeteria-exit-01". // // be "cafeteria-entrace-01" or "cafeteria-exit-01".
const deviceId = surfaceShadingPoint.id; // const deviceId = surfaceShadingPoint.id;
// Read the sensor data, along with its possible value range // // Read the sensor data, along with its possible value range
let sensorValue = readSensorValue(deviceId, sensorType); // let sensorValue = readSensorValue(deviceId, sensorType);
const maxSensorValue = getMaxSensorValue(sensorType); // const maxSensorValue = getMaxSensorValue(sensorType);
const minSensorValue = getMinSensorValue(sensorType); // const minSensorValue = getMinSensorValue(sensorType);
// Normalize sensor value to [0, 1.0] // // Normalize sensor value to [0, 1.0]
sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue); // sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
return clamp(sensorValue, 0.0, 1.0); // return clamp(sensorValue, 0.0, 1.0);
} //}
// This value can also be a room instead of a floor // This value can also be a room instead of a floor
const floorName = "01 - Entry Level"; //const floorName = "01 - Entry Level";
dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); //dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
//dataVizExtn.updateSurfaceShading(getSensorValue);
} }