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

[Frontend] 熱圖input 加入房間dbid，熱圖打點: 使用該層系統設備的座標

Browse Source
This commit is contained in:
wanli 2022-12-31 15:24:02 +08:00
parent a3a0a0c963
commit 1eb730b15d
2 changed files with 49 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Frontend/_sysMonFloor.html
View File

@ -867,8 +867,9 @@
// show 3D 模型 // show 3D 模型
function show3DModel(urn) { function show3DModel(urn) {
launchViewerForHotspot(urn, (viewer, nodeIds) => { launchViewerForHotspot(urn, (viewer, nodeIds) => {
getLevelsData("R2F","RF") getLevelsData("R2F", "RF");//剖面的下方樓層，剖面的上方樓層
loadHeatmapForFloor(); var roomsArr = [10481, 10479];//七樓的兩間房間dbid
toLoadHeatmap(roomsArr);
}); });
} }

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

@ -1,10 +1,9 @@
var viewer; var viewer;
let fragProxy; let fragProxy;
var targetFloorZ; var targetFloorZ;
var elevatorSpeed; var elevatorSpeed;
var selector = "#forgeViewer"; var selector = "#forgeViewer";
let myDataList; var myDataList;//設備list
var levels;//剖面用 var levels;//剖面用
var lowerIdx;//剖面的下方樓層 var lowerIdx;//剖面的下方樓層
var upperIdx;//剖面的上方樓層 var upperIdx;//剖面的上方樓層
@ -28,31 +27,6 @@ function launchViewer(urn, callback, _selector = "#forgeViewer") {
callback ? callback(viewer, nodeIds) : ""; callback ? callback(viewer, nodeIds) : "";
}) })
//test
// for (let i = 0; i < urn.length; i++) {
// Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
// let viewables = doc.getRoot().getDefaultGeometry();
// let model = await viewer.loadDocumentNode(doc, viewables, {
// preserveView: false,
// keepCurrentModels: true,
// placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
// keepCurrentModels: true,
// globalOffset: {
// x: 0,
// y: 0,
// z: 0
// }
// });
// await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
// });
// }
//loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
}); });
} }
@ -273,13 +247,6 @@ class elevator3D {
hideColor(nodeId); hideColor(nodeId);
return; return;
} }
//let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
//fragProxy.position = fragPosition;
//fragProxy.updateAnimTransform();
//viewer.impl.sceneUpdated(true);
} }
} }
@ -287,14 +254,7 @@ function onDocumentLoadSuccess(doc, eleOption) {
var viewables = doc.getRoot().getDefaultGeometry(); var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables).then(i => { viewer.loadDocumentNode(doc, viewables).then(i => {
// documented loaded, any action? // 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];
// });
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
let instanceTree = viewer.model.getData().instanceTree; let instanceTree = viewer.model.getData().instanceTree;
console.log(instanceTree.nodeAccess) console.log(instanceTree.nodeAccess)
@ -304,8 +264,6 @@ function onDocumentLoadSuccess(doc, eleOption) {
}); });
}); });
} }
// 輔助函數，使用 Promise 封裝 viewer.getProperties 函數 // 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
@ -393,14 +351,11 @@ function setElevatorSpeed(speed) { //0.01 ~ 1
} }
function movElevator() { function movElevator() {
let tree = viewer.model.getData().instanceTree; let tree = viewer.model.getData().instanceTree;
let nodeId = 10952; let nodeId = 10952;
let fragProxyZ = 0; let fragProxyZ = 0;
var movStatus = 0; // 0=no 1=up 2=down var movStatus = 0; // 0=no 1=up 2=down
if (fragProxy.position.z > targetFloorZ) { if (fragProxy.position.z > targetFloorZ) {
movStatus = 2 movStatus = 2
} }
@ -415,7 +370,6 @@ function movElevator() {
tree.enumNodeFragments(nodeId, function (frag) { tree.enumNodeFragments(nodeId, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform(); fragProxy.getAnimTransform();
//let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
if (movStatus == 2) { if (movStatus == 2) {
fragProxy.position.z -= elevatorSpeed; fragProxy.position.z -= elevatorSpeed;
} }
@ -439,15 +393,6 @@ function movElevator() {
requestAnimationFrame(movElevator); requestAnimationFrame(movElevator);
} }
} }
//let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
//fragProxy.position = fragPosition;
//fragProxy.updateAnimTransform();
//viewer.impl.sceneUpdated(true);
} }
function getAllDbIds(viewer) { function getAllDbIds(viewer) {
@ -572,21 +517,12 @@ class ADHeatMaps {
function setTransparentBuilding() { function setTransparentBuilding() {
//allDbIdsStr.forEach((dbId) => {
// setTransparency(dbId, 0.2);
//})
for (var i = 0; i < allDbIdsStr.length; i++) { for (var i = 0; i < allDbIdsStr.length; i++) {
setTransparency(parseInt(allDbIdsStr[i]), 0.2); setTransparency(parseInt(allDbIdsStr[i]), 0.2);
} }
} }
function recoverTransparentBuilding() { function recoverTransparentBuilding() {
//allDbIdsStr.forEach((dbId) => {
// setTransparency(dbId, 1);
//})
for (var i = 0; i < allDbIdsStr.length; i++) { for (var i = 0; i < allDbIdsStr.length; i++) {
setTransparency(parseInt(allDbIdsStr[i]), 1); setTransparency(parseInt(allDbIdsStr[i]), 1);
} }
@ -639,16 +575,6 @@ function hideColor(nodeId) {//顏色改成透明
} }
//------------------ 紀錄熱點座標 ---------------
function getHopspotPoint(data) {
//var av = Autodesk.Viewing;
myDataList = data;
//viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
// once: true,
//});
}
//-------------------- end ----------------------
//------------------- 加入熱點 ----------------- //------------------- 加入熱點 -----------------
async function addHotPoint(data) { async function addHotPoint(data) {
var viewer = data.target; var viewer = data.target;
@ -678,7 +604,7 @@ async function addHotPoint(data) {
myDataList.forEach((myData, index) => { myDataList.forEach((myData, index) => {
const dbId = 10 + index; const dbId = 10 + index;
const myPosition = myData.position; const myPosition = JSON.parse(myData.device_coordinate_3d);
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId); const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
myData._dbId = dbId; myData._dbId = dbId;
viewableData.addViewable(viewable); viewableData.addViewable(viewable);
@ -694,7 +620,6 @@ async function addHotPoint(data) {
if (event != undefined && event != null) { if (event != undefined && event != null) {
if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19 if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
console.log(`Sprite clicked: ${event.dbId}`); console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal();
for (let i = dbIdStart; i <= dbIdEnd; i++) { for (let i = dbIdStart; i <= dbIdEnd; i++) {
changeColorForHotspot(i, false); changeColorForHotspot(i, false);
changeScaleForHotspot(i, false); changeScaleForHotspot(i, false);
@ -721,7 +646,6 @@ async function addHotPoint(data) {
// if (dbIds.length > 0) { // if (dbIds.length > 0) {
// // 處理已選取元件的邏輯 // // 處理已選取元件的邏輯
// $(selector).trigger("autodesk:click:sprite", event); // $(selector).trigger("autodesk:click:sprite", event);
// //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 {
// // 處理沒有選取元件的邏輯 // // 處理沒有選取元件的邏輯
@ -763,52 +687,16 @@ async function changeScaleForHotspot(dbId, type = true) {
}; };
}); });
} }
//------------------------------ end ----------------------------------
//------------------- end -------------- //------------------------------ 熱圖 ---------------------------------
async function loadHeatmaps(model, roomsArr) {
//----------------- 開關熱點小視窗 ----------------------
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 --------------------------------
//------------------ 熱圖 -------------------------------
async function loadHeatmaps(model) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
var devices = [];
//取三個空調設備的位置打點 myDataList.forEach((myData, index) => {
const devices = [ devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] });
{ });
id: "Oficina 5",
//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 4",
//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 3",
//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"]
}
];
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
// Initialize sensor values // Initialize sensor values
let sensorVals = []; let sensorVals = [];
@ -817,7 +705,9 @@ async function loadHeatmaps(model) {
} }
const roomDbIds = []; const roomDbIds = [];
roomDbIds.push(7567); for (var i = 0; i < roomsArr.length; i++) {
roomDbIds.push(roomsArr[i]);
}
const { const {
SurfaceShadingData, SurfaceShadingData,
@ -842,11 +732,10 @@ async function loadHeatmaps(model) {
// Setup surface shading // Setup surface shading
await dataVizExtn.setupSurfaceShading(model, heatmapData); await dataVizExtn.setupSurfaceShading(model, heatmapData);
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]); dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
function getSensorValue(device, sensorType) { function getSensorValue(device, sensorType) {
return sensorVals[parseInt(device.id.slice(-1)) - 1]; return sensorVals[parseInt(device.id)];
} }
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue); dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
@ -859,97 +748,9 @@ async function loadHeatmaps(model) {
dataVizExtn.updateSurfaceShading(getSensorValue); dataVizExtn.updateSurfaceShading(getSensorValue);
}, 2000); }, 2000);
} }
//------------------ end -------------------------------- //------------------------------ end ----------------------------------
async function loadHeatmapsForFloor(model) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); //--------------------------- -- 剖面 ---------------------------------
//x: -17.33, y: 51.03, z: -2.52
const devices = [
{
id: "Oficina 5",
//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 4",
//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 3",
//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();
}
const roomDbIds = [];
roomDbIds.push(7567);
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);
});
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];
}
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);
}
//
async function loadHeatmap() {
const model = viewer.model;
loadHeatmaps(model);
}
async function loadHeatmapForFloor() {
const model = viewer.model;
loadHeatmapsForFloor(model);
}
//------------ 剖面 ----------------------
async function getRemoteLevels() { async function getRemoteLevels() {
const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode()); const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
if (!aecData.levels) return null; if (!aecData.levels) return null;
@ -959,21 +760,6 @@ async function getRemoteLevels() {
return levels2; return levels2;
} }
async function getLevelsData(lowerFloor, upperFloor) {
const data = await this.getRemoteLevels();
for (var i = 0; i < data.length; i++) {
if ((data[i].name).indexOf(lowerFloor) != -1) {
lowerIdx = i;
}
if ((data[i].name).indexOf(upperFloor) != -1) {
upperIdx = i;
}
}
this.levels = data;
profile();
}
function getCutPlaneParam(idx, n) { function getCutPlaneParam(idx, n) {
if (idx < 0 || !n) return; if (idx < 0 || !n) return;
@ -993,10 +779,38 @@ function getCutPlaneParam(idx, n) {
} }
function profile() { function profile() {
//const upperIdx = 6;
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1); const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
//const lowerIdx = 7;
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1); const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]); this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
} }
//----------------- end ----------------------------------------------- //------------------------------ end ----------------------------------
//======================== 外部呼叫function ===========================
//紀錄熱點座標
function getHopspotPoint(data) {
myDataList = data;
}
//呼叫載入熱圖
async function toLoadHeatmap(roomArr) {
const model = viewer.model;
loadHeatmaps(model, roomArr);
}
//取得levels，執行剖面
async function getLevelsData(lowerFloor, upperFloor) {
const data = await this.getRemoteLevels();
for (var i = 0; i < data.length; i++) {
if ((data[i].name).indexOf(lowerFloor) != -1) {
lowerIdx = i;
}
if ((data[i].name).indexOf(upperFloor) != -1) {
upperIdx = i;
}
}
this.levels = data;
profile();
}
//============================= end ===================================