1517 lines
51 KiB
JavaScript
1517 lines
51 KiB
JavaScript
var viewer;
|
||
|
||
let fragProxy;
|
||
var targetFloorZ;
|
||
var elevatorSpeed;
|
||
var selector = "#forgeViewer";
|
||
var myDataList;
|
||
var lightDataList;
|
||
var lightList = []; //燈光清單
|
||
var levels; //剖面用
|
||
var lowerIdx = 0; //剖面的下方樓層
|
||
var upperIdx = 0; //剖面的上方樓層
|
||
|
||
function launchViewer(urn, callback, failCallback, _selector = "#forgeViewer") {
|
||
selector = _selector;
|
||
var options = {
|
||
env: "AutodeskProduction",
|
||
getAccessToken: getForgeToken,
|
||
settings: {
|
||
ambientShadows: false,
|
||
groundShadows: false,
|
||
},
|
||
};
|
||
|
||
Autodesk.Viewing.Initializer(options, () => {
|
||
viewer = new Autodesk.Viewing.GuiViewer3D($(selector)[0]);
|
||
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
|
||
viewer.start();
|
||
var documentId = "urn:" + urn;
|
||
|
||
Autodesk.Viewing.Document.load(
|
||
documentId,
|
||
onDocumentLoadSuccess,
|
||
onDocumentLoadFailure
|
||
);
|
||
setShadowShow();
|
||
|
||
$(selector).on("autodesk:loaded", function (e, nodeIds) {
|
||
callback ? callback(viewer, nodeIds) : "";
|
||
});
|
||
$(selector).on("autodesk:loaded:fail", function (e) {
|
||
failCallback ? failCallback(viewer) : "";
|
||
});
|
||
|
||
//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
|
||
});
|
||
}
|
||
|
||
function launchViewerForHotspot(
|
||
urn,
|
||
callback,
|
||
failCallback,
|
||
_selector = "#forgeViewer"
|
||
) {
|
||
selector = _selector;
|
||
var av = Autodesk.Viewing;
|
||
var options = {
|
||
env: "AutodeskProduction",
|
||
getAccessToken: getForgeToken,
|
||
settings: {
|
||
ambientShadows: false,
|
||
groundShadows: false,
|
||
},
|
||
};
|
||
|
||
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
|
||
);
|
||
setShadowShow();
|
||
$(selector).on("autodesk:loaded", function (e, nodeIds) {
|
||
callback ? callback(viewer, nodeIds) : "";
|
||
});
|
||
|
||
$(selector).on("autodesk:loaded:fail", function (e) {
|
||
failCallback ? failCallback(viewer) : "";
|
||
});
|
||
});
|
||
}
|
||
|
||
function launchViewerNoTools(
|
||
urn,
|
||
callback,
|
||
failCallback,
|
||
_selector = "#forgeViewer"
|
||
) {
|
||
selector = _selector;
|
||
var options = {
|
||
env: "AutodeskProduction",
|
||
getAccessToken: getForgeToken,
|
||
settings: {
|
||
ambientShadows: false,
|
||
groundShadows: false,
|
||
},
|
||
};
|
||
|
||
Autodesk.Viewing.Initializer(options, () => {
|
||
//viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
|
||
viewer = new Autodesk.Viewing.Viewer3D($(selector)[0]);
|
||
viewer.start();
|
||
var documentId = "urn:" + urn;
|
||
|
||
Autodesk.Viewing.Document.load(
|
||
documentId,
|
||
onDocumentLoadSuccess,
|
||
onDocumentLoadFailure
|
||
);
|
||
setShadowShow();
|
||
$(selector).on("autodesk:loaded", function (e, nodeIds) {
|
||
callback ? callback(viewer, nodeIds) : "";
|
||
});
|
||
|
||
$(selector).on("autodesk:loaded:fail", function (e) {
|
||
failCallback ? failCallback(viewer) : "";
|
||
});
|
||
});
|
||
}
|
||
|
||
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, "#");
|
||
});
|
||
}
|
||
|
||
class elevator3D {
|
||
constructor(option = {}) {
|
||
this.ele = option.element;
|
||
this.viewer = option.viewer;
|
||
this.nodeId = option.nodeId;
|
||
this.speed = option.speed ?? 0.18;
|
||
this.tagValue = option.tagValue ?? "";
|
||
this.fragProxys = [];
|
||
this.fragProxy = null;
|
||
this.initCallback = option.inited ?? null;
|
||
this.movStatus = 0;
|
||
this.targetFloorZ = 0;
|
||
this.floorHeight = option.floorHeight ?? [{}];
|
||
this.sensorObjs = option.sensorObjs ?? null;
|
||
this.init();
|
||
}
|
||
|
||
// 定義遍歷模型中所有片段的異步函數
|
||
enumFragments = function (nodeId) {
|
||
return new Promise((resolve, reject) => {
|
||
// 定義結果陣列
|
||
let result = [];
|
||
// 使用 InstanceTree.enumNodeFragments 遍歷模型中的所有片段
|
||
this.viewer?.model?.getData().instanceTree.enumNodeFragments(
|
||
nodeId,
|
||
(fragId) => {
|
||
// 將遍歷到的片段 ID 添加到結果陣列中
|
||
result.push(fragId);
|
||
},
|
||
(nodeId) => {
|
||
// 如果遍歷到的節點是葉節點，则返回 true，表示繼續遍歷該節點的片段
|
||
return model.getData().instanceTree.isLeaf(nodeId);
|
||
}
|
||
);
|
||
// 将结果陣列作為参数调用 resolve 函数
|
||
resolve(result);
|
||
});
|
||
};
|
||
|
||
// 設置樹狀結構中片段
|
||
setTreeFrag = async function (callback) {
|
||
let tree = this.viewer?.model?.getData().instanceTree;
|
||
if (!tree) {
|
||
return;
|
||
}
|
||
|
||
let nodeId = this.nodeId;
|
||
|
||
if (nodeId) {
|
||
// 刪除 fragmentProxys 中與當前 nodeId 相同的項目
|
||
this.fragProxys
|
||
.filter((x) => x.nodeId == nodeId)
|
||
.forEach((x) => {
|
||
let idx = this.fragProxys.indexOf(x);
|
||
this.fragProxys.splice(idx, 1);
|
||
});
|
||
|
||
// 遍歷當前 nodeId 中的所有片段
|
||
let fragments = await this.enumFragments(nodeId);
|
||
|
||
fragments.forEach((frag) => {
|
||
// 取得當前片段的 FragmentProxy 物件
|
||
let fragProxy = this.viewer.impl.getFragmentProxy(
|
||
this.viewer.model,
|
||
frag
|
||
);
|
||
// 將當前片段的信息添加到 fragProxys 陣列中
|
||
this.fragProxys.push({ nodeId: nodeId, fragId: frag, frag: fragProxy });
|
||
// 取得當前片段的動畫變換矩陣
|
||
fragProxy.getAnimTransform();
|
||
// 定義當前片段的位置向量
|
||
let fragPosition = new THREE.Vector3(0, 0, 0); // 一樓0 二樓15 三樓 26
|
||
// 設置當前片段的位置
|
||
fragProxy.position = fragPosition;
|
||
|
||
// 更新當前片段的動畫變換矩陣
|
||
fragProxy.updateAnimTransform();
|
||
});
|
||
}
|
||
// 通知檢視器更新場景
|
||
this.viewer.impl.sceneUpdated(true);
|
||
|
||
if (!$(this.ele)[0]) {
|
||
callback ? callback() : "";
|
||
return;
|
||
}
|
||
|
||
if (typeof $(this.ele)[0]._elevator3D == "undefined") {
|
||
$(this.ele)[0]._elevator3D = [];
|
||
}
|
||
|
||
$(this.ele)[0]._elevator3D.push({ nodeId: nodeId, obj: this });
|
||
|
||
this.initCallback ? this.initCallback() : "";
|
||
callback ? callback() : "";
|
||
};
|
||
|
||
init = function (callback = null) {
|
||
this.setTreeFrag(callback);
|
||
};
|
||
|
||
setElevatorFloor = function (floor) {
|
||
this.targetFloorZ =
|
||
this.floorHeight.filter((x) => x.floor == floor)[0]?.height ?? 0;
|
||
};
|
||
|
||
setElevatorSpeed = function (speed) {
|
||
//0.01 ~ 1
|
||
this.speed = speed;
|
||
};
|
||
|
||
// 電梯移動
|
||
movElevator = async function () {
|
||
let nodeId = this.nodeId;
|
||
let fragProxyZ = 0; // 定義 fragProxyZ 變量，用於存儲當前片段的 z 坐標
|
||
|
||
// 取得當前 nodeId 的片段代理對象
|
||
let fragProxy = this.fragProxys.filter((x) => x.nodeId == nodeId)[0]?.frag;
|
||
if (!fragProxy) {
|
||
return;
|
||
}
|
||
|
||
changeColor(nodeId);
|
||
|
||
if (
|
||
(this.movStatus == 2 &&
|
||
fragProxy.position.z.roundDecimal(2) <
|
||
this.targetFloorZ.roundDecimal(2)) ||
|
||
(this.movStatus == 1 &&
|
||
fragProxy.position.z.roundDecimal(2) >
|
||
this.targetFloorZ.roundDecimal(2)) ||
|
||
fragProxy.position.z.roundDecimal(2) == this.targetFloorZ.roundDecimal(2)
|
||
) {
|
||
stoped(this);
|
||
}
|
||
|
||
if (
|
||
fragProxy.position.z.roundDecimal(2) > this.targetFloorZ.roundDecimal(2)
|
||
) {
|
||
this.movStatus = 2;
|
||
} else if (
|
||
fragProxy.position.z.roundDecimal(2) < this.targetFloorZ.roundDecimal(2)
|
||
) {
|
||
this.movStatus = 1;
|
||
}
|
||
|
||
// 遍歷當前 nodeId 中的所有片段
|
||
let fragments = await this.enumFragments(nodeId);
|
||
|
||
fragments.forEach((frag) => {
|
||
let fragProxy = this.viewer.impl.getFragmentProxy(
|
||
this.viewer.model,
|
||
frag
|
||
);
|
||
fragProxy.getAnimTransform();
|
||
|
||
if (this.movStatus == 2) {
|
||
fragProxy.position.z -= this.speed;
|
||
} else if (this.movStatus == 1) {
|
||
fragProxy.position.z += this.speed;
|
||
}
|
||
let tarFrag = this.fragProxys.filter(
|
||
(x) => x.nodeId == nodeId && x.fragId == frag
|
||
)[0];
|
||
if (tarFrag) {
|
||
tarFrag.frag.position.z = fragProxy.position.z;
|
||
}
|
||
fragProxyZ = fragProxy.position.z;
|
||
|
||
// 改變感測器熱點位置
|
||
this.sensorObjs && this.sensorObjs[0]?.changePos(nodeId + 2, fragProxyZ);
|
||
// if(nodeId === 15200) {
|
||
// }
|
||
fragProxy.updateAnimTransform();
|
||
});
|
||
|
||
this.viewer.impl.sceneUpdated(true);
|
||
|
||
let movElevator = $(this.ele)[0]
|
||
._elevator3D.filter((x) => x.nodeId == this.nodeId)[0]
|
||
?.obj.movElevator.bind(this);
|
||
|
||
if (this.movStatus == 2) {
|
||
if (fragProxyZ >= this.targetFloorZ) {
|
||
requestAnimationFrame(() => {
|
||
movElevator();
|
||
});
|
||
} else {
|
||
stoped(this);
|
||
}
|
||
} else if (this.movStatus == 1) {
|
||
if (fragProxyZ <= this.targetFloorZ) {
|
||
requestAnimationFrame(() => {
|
||
movElevator();
|
||
});
|
||
} else {
|
||
stoped(this);
|
||
}
|
||
} else {
|
||
stoped(this);
|
||
}
|
||
|
||
function stoped(obj) {
|
||
obj.movStatus = 0;
|
||
hideColor(nodeId);
|
||
return;
|
||
}
|
||
};
|
||
}
|
||
|
||
function onDocumentLoadSuccess(doc, eleOption) {
|
||
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];
|
||
// });
|
||
|
||
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
|
||
let instanceTree = viewer.model?.getData().instanceTree;
|
||
// console.log(instanceTree.nodeAccess)
|
||
allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
||
/*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/
|
||
$(selector).trigger("autodesk:loaded");
|
||
/*});*/
|
||
});
|
||
}
|
||
|
||
// 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
|
||
function viewerGetProperties(dbIds, attributeName = null) {
|
||
// 在這裡，我們使用 viewer.getProperties 函數的成功回調函數作為 resolve 函數，
|
||
// 並使用 viewer.getProperties 函數的失敗回調函數作為 resolve 函數的參數
|
||
// 這樣，當 viewer.getProperties 函數成功時，Promise 會傳回 properties 物件；
|
||
// 當 viewer.getProperties 函數失敗時，Promise 會傳回 null。
|
||
return new Promise((resolve, reject) => {
|
||
let option = {};
|
||
if (attributeName != null) {
|
||
option.propFilter = [attributeName]; // 限制只返回指定的屬性
|
||
}
|
||
viewer.model.getBulkProperties2(
|
||
dbIds,
|
||
option, // 取得指定元素的屬性信息
|
||
function (elements) {
|
||
resolve(elements); // 成功時傳回 elements 物件
|
||
}
|
||
);
|
||
});
|
||
}
|
||
|
||
// 輔助函數，使用 Promise 封裝 viewer.search 函數
|
||
async function getNodeIdBySearch(text) {
|
||
return new Promise((resolve, reject) => {
|
||
viewer.search(
|
||
text,
|
||
(e) => {
|
||
// 在 3D 模型中搜索具有指定文本的元素
|
||
resolve(e); // 成功時傳回搜索結果
|
||
},
|
||
(e) => {
|
||
resolve(null); // 失敗時傳回 null
|
||
}
|
||
);
|
||
});
|
||
}
|
||
|
||
// 主函數 - 透過 model 全部 node 取得特定 nodeId
|
||
async function getNodeIdByDbIds(checkValue = [], callback = null) {
|
||
let evelMap = new Map();
|
||
let hasElement = false; // 設置是否有 【tag_id】的node
|
||
let targetNodeIds = await getNodeIdBySearch(checkValue);
|
||
let elements = await viewerGetProperties(targetNodeIds, "【tag_id】");
|
||
|
||
// 從 elements 中篩選出包含 【tag_id】 屬性的元素
|
||
elements = elements.filter(
|
||
(x) =>
|
||
x.properties.findIndex(
|
||
(y) =>
|
||
y.displayName == "【tag_id】" &&
|
||
checkValue.indexOf(y.displayValue) != -1
|
||
) != -1
|
||
);
|
||
|
||
if (elements) {
|
||
hasElement = true;
|
||
}
|
||
|
||
for (var e of elements) {
|
||
let name = e.properties[0].displayValue; // 獲取元素的 【tag_id】 屬性
|
||
let chiElements = null;
|
||
|
||
// 獲取 node 元素的子元素信息
|
||
targetNodeIds = await viewerGetProperties([e.dbId], "child");
|
||
// 二次篩選
|
||
chiElements = targetNodeIds.filter(
|
||
(x) => x.properties.findIndex((y) => y.displayName == "child") != -1
|
||
);
|
||
|
||
// 獲取子元素的 nodeId
|
||
targetNodeIds = chiElements.map((x) => x.properties[0].displayValue);
|
||
// 獲取子元素的屬性信息
|
||
chiElements = await viewerGetProperties(targetNodeIds);
|
||
|
||
// 將 node 元素的 【tag_id】 屬性和子元素的 nodeId 加入 Map 中
|
||
evelMap.set(name, chiElements[0]?.dbId);
|
||
}
|
||
|
||
if (!hasElement) {
|
||
callback ? callback([]) : "";
|
||
return [];
|
||
}
|
||
|
||
callback ? callback(evelMap) : "";
|
||
return evelMap;
|
||
}
|
||
|
||
function setElevatorFloor(floor) {
|
||
if (floor == 0) targetFloorZ = 0;
|
||
else if (floor == 1) targetFloorZ = 15;
|
||
else if (floor == 2) targetFloorZ = 26;
|
||
}
|
||
|
||
function setElevatorSpeed(speed) {
|
||
//0.01 ~ 1
|
||
elevatorSpeed = speed;
|
||
}
|
||
|
||
function movElevator() {
|
||
let tree = viewer.model?.getData().instanceTree;
|
||
let nodeId = 10952;
|
||
let fragProxyZ = 0;
|
||
var movStatus = 0; // 0=no 1=up 2=down
|
||
|
||
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);
|
||
|
||
if (movStatus == 2) {
|
||
if (fragProxyZ >= targetFloorZ) {
|
||
requestAnimationFrame(movElevator);
|
||
}
|
||
} else if (movStatus == 1) {
|
||
if (fragProxyZ <= targetFloorZ) {
|
||
requestAnimationFrame(movElevator);
|
||
}
|
||
}
|
||
|
||
//let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
|
||
|
||
//fragProxy.position = fragPosition;
|
||
|
||
//fragProxy.updateAnimTransform();
|
||
|
||
//viewer.impl.sceneUpdated(true);
|
||
}
|
||
|
||
function getAllDbIds(viewer) {
|
||
var instanceTree = viewer.model?.getData().instanceTree;
|
||
|
||
var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
||
|
||
return allDbIdsStr.map(function (id) {
|
||
return parseInt(id);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Autodesk.Viewing.Document.load() failuire callback.
|
||
*/
|
||
function onDocumentLoadFailure(viewerErrorCode) {
|
||
$(selector).trigger("autodesk:loaded:fail");
|
||
console.error("onDocumentLoadFailure() - errorCode:" + viewerErrorCode);
|
||
}
|
||
|
||
function getForgeToken(callback) {
|
||
fetch(forgeTokenBase.url).then((res) => {
|
||
res.json().then((data) => {
|
||
let limitResType = ["object", "undefined"];
|
||
let access_token = data;
|
||
$.each(forgeTokenBase.res_access_token, (idx, dict) => {
|
||
access_token = access_token[dict];
|
||
});
|
||
|
||
let expires_in = data;
|
||
$.each(forgeTokenBase.res_expires_in, (idx, dict) => {
|
||
expires_in = expires_in[dict];
|
||
});
|
||
|
||
if (
|
||
limitResType.includes(typeof access_token) ||
|
||
limitResType.includes(typeof expires_in)
|
||
) {
|
||
(access_token = ""), (expires_in = "");
|
||
throw "access_token or expires_in on the ForgeTokenBase object for getting forge token by URL is not the correct path.";
|
||
}
|
||
|
||
callback(access_token, expires_in);
|
||
});
|
||
});
|
||
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
|
||
}
|
||
|
||
//------------------ 熱圖 -------------------------------
|
||
class ADHeatMaps {
|
||
constructor(option = {}) {
|
||
this.devices = option.devices ?? [];
|
||
this.checkNodeString = "【ROOM】";
|
||
this.tempVals = [];
|
||
this.roomDbIds = []; //房間 dbId
|
||
this.model = null;
|
||
this.dataVizExtn = null;
|
||
this.shadingData = null;
|
||
this.onComplete = option.onComplete ?? null;
|
||
this.init();
|
||
}
|
||
|
||
init = async function () {
|
||
// 載入 Autodesk Viewer 的資料視覺化擴充功能
|
||
const dataVizExtn = await viewer.loadExtension(
|
||
"Autodesk.DataVisualization"
|
||
);
|
||
this.dataVizExtn = dataVizExtn;
|
||
// 儲存 Viewer 的模型
|
||
this.model = viewer.model;
|
||
this.addHeatMaps();
|
||
};
|
||
|
||
async addHeatMaps() {
|
||
const {
|
||
SurfaceShadingData,
|
||
SurfaceShadingPoint,
|
||
SurfaceShadingNode,
|
||
SurfaceShadingGroup,
|
||
} = Autodesk.DataVisualization.Core;
|
||
// test
|
||
const shadingGroup = new SurfaceShadingGroup("iot-heatmap");
|
||
const rooms = new Map();
|
||
|
||
console.log(this.devices);
|
||
for (const { id, roomDbId, position, sensorTypes } of this.devices) {
|
||
if (!id || roomDbId == -1) {
|
||
continue;
|
||
}
|
||
|
||
if (!rooms.has(roomDbId)) {
|
||
const room = new SurfaceShadingNode(id, roomDbId);
|
||
shadingGroup.addChild(room);
|
||
rooms.set(roomDbId, room);
|
||
}
|
||
const room = rooms.get(roomDbId);
|
||
room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
|
||
}
|
||
this.shadingData = new SurfaceShadingData();
|
||
this.shadingData.addChild(shadingGroup);
|
||
this.shadingData.initialize(this.model);
|
||
|
||
if (pageAct.sysSubTag == "L1") {
|
||
await this.dataVizExtn.setupSurfaceShading(this.model, this.shadingData, {
|
||
type: "PlanarHeatmap",
|
||
placementPosition: 0.7,
|
||
confidence: 240.0,
|
||
});
|
||
this.dataVizExtn.registerSurfaceShadingColors(
|
||
"temperature",
|
||
[0x000000, 0xffd524]
|
||
);
|
||
} else {
|
||
await this.dataVizExtn.setupSurfaceShading(this.model, this.shadingData);
|
||
this.dataVizExtn.registerSurfaceShadingColors(
|
||
"temperature",
|
||
[0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
|
||
);
|
||
}
|
||
this.dataVizExtn.renderSurfaceShading(
|
||
"iot-heatmap",
|
||
"temperature",
|
||
this.getSensorValue.bind(this)
|
||
);
|
||
|
||
//let nodeIds = await getNodeIdByDbIds(this.checkNodeString);
|
||
//nodeIds = Array.from(nodeIds);
|
||
//nodeIds = nodeIds.map(x => { return { room: x[0] , nodeId: x[1]} });
|
||
// this.roomDbIds = this.devices.filter(x => x.roomDbId != -1).map(x => x.roomDbId).Distinct();
|
||
|
||
// // 建立一個 SurfaceShadingData 物件，並將 SurfaceShadingNode 加入到該物件中
|
||
// const heatmapData = new SurfaceShadingData();
|
||
|
||
// $.each(this.roomDbIds, (idx, rDbid) => {
|
||
// // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入，只在該房間呈現溫度
|
||
// const shadingNode = new SurfaceShadingNode("RoomPanel" + rDbid, rDbid);
|
||
|
||
// // 遍歷每個設備，建立一個 SurfaceShadingPoint 物件並加入到 SurfaceShadingNode 中，透過這些設備渲染溫度
|
||
// this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
|
||
// const shadingPoint = new SurfaceShadingPoint(
|
||
// device.id,
|
||
// undefined,
|
||
// device.sensorTypes
|
||
// );
|
||
// shadingPoint.positionFromDBId(this.model, device.roomDbId)
|
||
// shadingNode.addPoint(shadingPoint);
|
||
// // device.temp = 0;
|
||
// });
|
||
|
||
// heatmapData.addChild(shadingNode);
|
||
// })
|
||
|
||
// // 將資料初始化並顯示在模型上
|
||
// heatmapData.initialize(this.model);
|
||
|
||
// // 對模型做表面顏色的渲染
|
||
// await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);
|
||
|
||
// // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
|
||
// this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
|
||
|
||
// $.each(this.roomDbIds, (idx, rDbid) => {
|
||
// this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
|
||
// })
|
||
|
||
// /*this.changeTemp(this.tempVal);*/
|
||
this.onComplete ? this.onComplete() : "";
|
||
}
|
||
|
||
getSensorValue = function (device, sensorType) {
|
||
let dev = this.devices.filter((x) => x.id == device.id)[0];
|
||
// shadingPoint.positionFromDBId(this.model, device.roomDbId)
|
||
return dev.temp / 40;
|
||
};
|
||
|
||
// 改變溫度
|
||
changeTemp = async function (devId, temp) {
|
||
// console.log("changeTemp",devId, temp)
|
||
this.tempVal = temp;
|
||
// 透過 device id 取得 roomDbId
|
||
this.devices.forEach((dev) => {
|
||
if (devId == dev.id) {
|
||
dev.temp = temp;
|
||
}
|
||
});
|
||
|
||
if (!this.shadingData) {
|
||
await this.addHeatMaps();
|
||
this.dataVizExtn.renderSurfaceShading(
|
||
"iot-heatmap",
|
||
"temperature",
|
||
this.getSensorValue.bind(this)
|
||
);
|
||
} else {
|
||
this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
|
||
}
|
||
// $.each(this.roomDbIds, async (idx, rDbid) => {
|
||
// this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
|
||
// })
|
||
|
||
//if (rDbid != null) {
|
||
// // 取得新的溫度值
|
||
// let getSensorValue = (device, sensorType) => {
|
||
// return this.tempVal / 40;
|
||
// }
|
||
// // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值
|
||
// this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
|
||
//}
|
||
};
|
||
}
|
||
|
||
//全部物件 透明度: 輸入0:透明；輸入1:不透明
|
||
function setTransparentBuilding(transparent, filDbids = []) {
|
||
for (var i = 0; i < allDbIdsStr.length; i++) {
|
||
setTransparency(parseInt(allDbIdsStr[i]), transparent);
|
||
}
|
||
|
||
for (var i = 0; i < filDbids.length; i++) {
|
||
setTransparency(parseInt(filDbids[i]), transparent == 0 ? 1 : 0);
|
||
}
|
||
}
|
||
|
||
//設定模型 透明度
|
||
function setTransparency(nodeId, opacity) {
|
||
var model = viewer.model;
|
||
var fragList = viewer.model.getFragmentList();
|
||
var fragIds = [];
|
||
|
||
model.getData().instanceTree.enumNodeFragments(
|
||
nodeId,
|
||
(fragId) => {
|
||
// 將遍歷到的片段 ID 添加到結果陣列中
|
||
fragIds.push(fragId);
|
||
},
|
||
(nodeId) => {
|
||
// 如果遍歷到的節點是葉節點，则返回 true，表示繼續遍歷該節點的片段
|
||
return model.getData().instanceTree.isLeaf(nodeId);
|
||
}
|
||
);
|
||
|
||
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 changeColor(nodeId, color = [0, 255, 0, 1]) {
|
||
//電梯變綠色
|
||
let model = viewer.model;
|
||
let fragList = viewer.model.getFragmentList();
|
||
let instanceTree = viewer.model?.getData().instanceTree;
|
||
color = color.map((x, i) => (i < 3 ? x / 255 : x));
|
||
color = new THREE.Vector4().fromArray(color);
|
||
model.getData().instanceTree.enumNodeFragments(
|
||
nodeId,
|
||
(fragId) => {
|
||
// 將遍歷到的片段 ID 添加到結果陣列中
|
||
let material = fragList.getMaterial(fragId);
|
||
|
||
if (material) {
|
||
//设置透明度
|
||
material.opacity = 1; //0.5;
|
||
material.transparent = true;
|
||
//标记更新
|
||
material.needsUpdate = true;
|
||
}
|
||
},
|
||
(nodeId) => {
|
||
// 如果遍歷到的節點是葉節點，则返回 true，表示繼續遍歷該節點的片段
|
||
return model.getData().instanceTree.isLeaf(nodeId);
|
||
}
|
||
);
|
||
instanceTree.enumNodeChildren(
|
||
nodeId,
|
||
function (chiNodeId) {
|
||
viewer.setThemingColor(chiNodeId, color);
|
||
},
|
||
(chiNodeId) => {
|
||
// 如果遍歷到的節點是葉節點，则返回 true，表示繼續遍歷該節點的片段
|
||
return model.getData().instanceTree.isLeaf(chiNodeId);
|
||
}
|
||
);
|
||
}
|
||
|
||
function hideColor(nodeId) {
|
||
//顏色改成透明
|
||
let instanceTree = viewer.model?.getData().instanceTree;
|
||
instanceTree.enumNodeChildren(
|
||
nodeId,
|
||
function (chiNodeId) {
|
||
var color = new THREE.Vector4(0, 1, 0, 0);
|
||
viewer.setThemingColor(chiNodeId, color);
|
||
},
|
||
true
|
||
);
|
||
}
|
||
|
||
//紀錄燈具座標
|
||
async function getLightData(data) {
|
||
lightList = [];
|
||
lightDataList = data;
|
||
}
|
||
|
||
async function testNewLight(dataList) {
|
||
dataList.forEach((myData, index) => {
|
||
const position = myData.position;
|
||
if (lightList.findIndex((x) => x.device_guid == myData.device_guid) == -1) {
|
||
lightList.push({
|
||
dbid: myData.forge_dbid,
|
||
device_guid: myData.device_guid,
|
||
lightObject: new THREE.SpotLight(0xe1cf18, 10, 200, 1, 1, 2),
|
||
});
|
||
} else if (
|
||
lightList.findIndex((x) => x.device_guid == myData.device_node_guid) == -1
|
||
) {
|
||
lightList.push({
|
||
dbid: myData.forge_dbid,
|
||
device_guid: myData.device_node_guid,
|
||
lightObject: new THREE.SpotLight(0xe1cf18, 10, 200, 1, 1, 2),
|
||
});
|
||
}
|
||
if (position && position.x && position.y && position.z) {
|
||
lightList[index].lightObject.position.set(
|
||
position.x,
|
||
position.y,
|
||
position.z
|
||
);
|
||
lightList[index].lightObject.castShadow = true;
|
||
lightList[index].lightObject.visible = true;
|
||
lightList[index].lightObject.target.position.set(
|
||
position.x,
|
||
position.y,
|
||
position.z - 100
|
||
);
|
||
viewer.scene.add(lightList[index].lightObject.target);
|
||
viewer.scene.add(lightList[index].lightObject);
|
||
}
|
||
|
||
//let spotLightHelper = new THREE.SpotLightHelper(lightList[index].lightObject);
|
||
//viewer.scene.add(spotLightHelper);
|
||
});
|
||
viewer.impl.sceneUpdated(true);
|
||
}
|
||
|
||
//------------------- 加入熱點 -----------------
|
||
async function addHotPoint(data) {
|
||
if (pageAct.sysMainTag == null && pageAct.sysSubTag == null) return
|
||
var viewer = data.target ? data.target : data;
|
||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||
const DataVizCore = Autodesk.DataVisualization.Core;
|
||
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
|
||
let spriteColor = null;
|
||
let spriteIcon = "";
|
||
const dbIdStart = 10;
|
||
const dbIdEnd = 19;
|
||
if (pageAct.sysSubTag === "M12") {
|
||
return;
|
||
} else {
|
||
spriteColor = new THREE.Color(0xffffff);
|
||
spriteIcon = "/file/img/forge/sensor_circle.svg";
|
||
if (location.href.indexOf("localhost:5966") != -1) {
|
||
spriteIcon = "/img/forge/sensor_circle.svg";
|
||
}
|
||
}
|
||
|
||
const style = new DataVizCore.ViewableStyle(
|
||
viewableType,
|
||
spriteColor,
|
||
spriteIcon
|
||
);
|
||
|
||
if (
|
||
lightDataList != undefined &&
|
||
lightDataList != null &&
|
||
lightDataList.length > 0
|
||
) {
|
||
testNewLight(lightDataList);
|
||
}
|
||
|
||
//熱點 點擊事件註冊
|
||
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked); // SPRITE_SELECTED
|
||
// viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClickedOut);
|
||
//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);
|
||
myData._dbId = dbId;
|
||
viewableData.addViewable(viewable);
|
||
});
|
||
await viewableData.finish();
|
||
dataVizExtn.addViewables(viewableData);
|
||
// console.log(dataVizExtn)
|
||
$(selector).trigger("autodesk:complete:sprite", { myDataList });
|
||
|
||
//---------------- 熱點點擊事件 --------------------
|
||
function onSpriteClicked(event) {
|
||
event.hasStopped = true;
|
||
if (event != undefined && event != null) {
|
||
if (event.dbId >= dbIdStart) {
|
||
//event.dbId > 0 && event.dbId < 19
|
||
// console.log(`Sprite clicked: ${event.dbId}`);
|
||
|
||
for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
|
||
!alarmDbIdList.some(({ spriteDbid }) => spriteDbid == i) &&
|
||
pageAct.sysSubTag !== "L1" &&
|
||
changeColorForHotspot(i);
|
||
changeScaleForHotspot(i, true);
|
||
}
|
||
let myData = myDataList.filter((x) => x._dbId == event.dbId)[0];
|
||
if (
|
||
lightList != undefined &&
|
||
lightList != null &&
|
||
lightList.length > 0
|
||
) {
|
||
//setLightOpenOrClose(false, myData.device_guid);//關燈測試
|
||
//setLightValues(myData.device_guid, 20, 0x00ff00);//更改燈光顏色和強度的測試
|
||
moveViewToDevice(myData.forge_dbid); //移動視角至該設備
|
||
}
|
||
$(selector).trigger("autodesk:click:sprite", { event, myData });
|
||
} else {
|
||
!alarmDbIdList.some(({ spriteDbid }) => spriteDbid == event.dbId) &&
|
||
pageAct.sysSubTag !== "L1" &&
|
||
changeColorForHotspot(event.dbId, null);
|
||
changeScaleForHotspot(event.dbId, false);
|
||
$(selector).trigger("autodesk:clickOut:sprite", { event });
|
||
}
|
||
|
||
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 onSpriteClickedOut(event){
|
||
// event.hasStopped = true;
|
||
// if (event != undefined && event != null) {
|
||
// if (event.dbId >= dbIdStart) {
|
||
// for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
|
||
// changeColorForHotspot(event.dbId);
|
||
// changeScaleForHotspot(event.dbId, false);
|
||
// }
|
||
// let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
|
||
// debugger
|
||
// $(selector).trigger("autodesk:clickOut:sprite", { event });
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
//function onSelectionChange(event) {
|
||
// if (event != undefined && event != null) {
|
||
// const dbIds = event.dbIdArray;
|
||
|
||
// if (dbIds.length > 0) {
|
||
// // 處理已選取元件的邏輯
|
||
// $(selector).trigger("autodesk:click:sprite", event);
|
||
// 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 {
|
||
// // 處理沒有選取元件的邏輯
|
||
// $(selector).trigger("autodesk:click:sprite", event);
|
||
// console.log("no item");
|
||
// }
|
||
// }
|
||
//}
|
||
}
|
||
|
||
//hex -> rgbsensor_circle
|
||
function hexToRgb(hex) {
|
||
return (
|
||
"rgb(" +
|
||
parseInt("0x" + hex.slice(1, 3)) +
|
||
"," +
|
||
parseInt("0x" + hex.slice(3, 5)) +
|
||
"," +
|
||
parseInt("0x" + hex.slice(5, 7)) +
|
||
")"
|
||
);
|
||
}
|
||
|
||
// 熱點 更換顏色
|
||
async function changeColorForHotspot(dbId, type = null, OnOff = false) {
|
||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||
let spriteColorFocus = new THREE.Color(0xffffff);
|
||
|
||
spriteColorFocus = OnOff
|
||
? pageAct.sysSubObj.device_normal_color
|
||
? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_normal_color))
|
||
: new THREE.Color(0xffffff)
|
||
: pageAct.sysSubObj.device_close_color
|
||
? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_close_color))
|
||
: new THREE.Color(0xffffff);
|
||
|
||
if (type == "focus") {
|
||
spriteColorFocus = new THREE.Color(0x00ffe1);
|
||
} else if (type == "error") {
|
||
spriteColorFocus = new THREE.Color(
|
||
hexToRgb(pageAct.sysSubObj.device_error_color)
|
||
);
|
||
spriteErrIcon = baseForgeApiUrl + "/file/img/forge/sensor_circle.svg";
|
||
if (location.href.indexOf("localhost:5966") != -1) {
|
||
spriteErrIcon = baseForgeApiUrl + "/img/forge/sensor_circle.svg";
|
||
}
|
||
}
|
||
const viewablesToUpdate = dbId;
|
||
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
|
||
return {
|
||
url: "/file/img/forge/sensor_circle.svg",
|
||
color: spriteColorFocus,
|
||
};
|
||
});
|
||
}
|
||
|
||
// 熱點 更換大小
|
||
async function changeScaleForHotspot(dbId, type = true) {
|
||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||
let scale = 1;
|
||
if (type) {
|
||
scale = 1.2;
|
||
}
|
||
const viewablesToUpdate = dbId;
|
||
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
|
||
return {
|
||
scale: scale, // Restore the viewable size
|
||
//url: "https://.../circle.svg",
|
||
};
|
||
});
|
||
}
|
||
|
||
//------------------- end --------------
|
||
|
||
//------------------ 熱圖 -------------------------------
|
||
async function loadHeatmaps(model) {
|
||
//console.log("熱圖 loadHeat")
|
||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||
|
||
//取三個空調設備的位置打點
|
||
const devices = [
|
||
{
|
||
id: "Oficina 5",
|
||
//name: "Oficina-",
|
||
position: { x: 6.98, y: -19.0, 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
|
||
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("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);
|
||
}
|
||
//------------------ 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.0, 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);
|
||
}
|
||
|
||
//------------ 剖面 ----------------------
|
||
|
||
function findLevels(model) {
|
||
return new Promise((resolve, reject) => {
|
||
model.search(
|
||
"layer",
|
||
(nodeIds) => {
|
||
let levels = [];
|
||
const tree = viewer.model.getInstanceTree();
|
||
for (let i = 0; i < nodeIds.length; i++) {
|
||
const dbId = nodeIds[i];
|
||
const name = tree.getNodeName(dbId);
|
||
if (!name || name.includes("<沒有層級>")) continue;
|
||
levels.push({
|
||
guid: dbId,
|
||
name,
|
||
dbId,
|
||
extension: {
|
||
buildingStory: true,
|
||
structure: false,
|
||
computationHeight: 0,
|
||
groundPlane: false,
|
||
hasAssociatedViewPlans: false,
|
||
},
|
||
});
|
||
}
|
||
resolve(levels);
|
||
},
|
||
(e) => {
|
||
reject(e);
|
||
}
|
||
);
|
||
});
|
||
}
|
||
|
||
async function getRemoteLevels() {
|
||
let aecData = await Autodesk.Viewing.Document.getAecModelData(
|
||
this.viewer.model.getDocumentNode()
|
||
);
|
||
|
||
let levels;
|
||
if (!aecData || !aecData.levels) {
|
||
const levelExt = await viewer.loadExtension("Autodesk.AEC.LevelsExtension");
|
||
levelExt.setAecModelData(undefined, viewer.model); //!<<< Clear before reset
|
||
levels = await findLevels(viewer.model);
|
||
aecdata = Autodesk.AEC.AecModelData.computeLevels(levels, viewer.model); //!<<< Rebuild aec model data
|
||
} else {
|
||
levels = aecData.levels;
|
||
}
|
||
levels.sort((a, b) => b.elevation - a.elevation);
|
||
return levels;
|
||
}
|
||
|
||
async function getLevelsData(lowerFloor, upperFloor, callback = null) {
|
||
// 樓層正規化 取得樓層
|
||
const floorRegex = /[\d|\w]+F/gim;
|
||
const floorRegex2 = /^FL[\d|\w]+/gim;
|
||
const data = await this.getRemoteLevels();
|
||
for (var i = 0; i < data.length; i++) {
|
||
let name =
|
||
data[i].name?.match(floorRegex) || data[i].name?.match(floorRegex2);
|
||
if (
|
||
name &&
|
||
(name[0] == lowerFloor || name[0].split("L")[1] + "F" == lowerFloor)
|
||
) {
|
||
lowerIdx = i;
|
||
}
|
||
if (
|
||
name &&
|
||
(name[0] == upperFloor || name[0].split("L")[1] + "F" == upperFloor)
|
||
) {
|
||
if (i > upperIdx && lowerFloor == upperFloor) {
|
||
} else {
|
||
upperIdx = i;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.levels = data;
|
||
profile(callback);
|
||
}
|
||
|
||
function getCutPlaneParam(idx, n) {
|
||
if (idx < 0 || !n) return;
|
||
|
||
const level = this.levels[idx];
|
||
if (!level) return;
|
||
|
||
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 profile(callback = null) {
|
||
//const upperIdx = 6;
|
||
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
|
||
//const lowerIdx = 7;
|
||
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
|
||
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
|
||
callback ? callback() : "";
|
||
}
|
||
//----------------- end -----------------------------------------------
|
||
//新增燈光
|
||
async function newLight(lightPosition) {
|
||
//聚光燈
|
||
var spotLight = new THREE.SpotLight(0xe1cf18, 0, 20, 0.6, 0.5, 10);
|
||
spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
|
||
// console.log(lightPosition.x, lightPosition.y, lightPosition.z)
|
||
spotLight.castShadow = false;
|
||
spotLight.visible = true;
|
||
spotLight.target.position.set(
|
||
lightPosition.x,
|
||
lightPosition.y,
|
||
lightPosition.z - 20
|
||
);
|
||
viewer.scene.add(spotLight.target);
|
||
viewer.scene.add(spotLight);
|
||
viewer.impl.sceneUpdated(true);
|
||
|
||
return spotLight;
|
||
}
|
||
|
||
//調整燈光 強度、顏色
|
||
async function setLightValues(deviceGuid, intensity, color) {
|
||
const light = lightList.find(({ device_guid }) => device_guid === deviceGuid);
|
||
if (light) {
|
||
console.log(light, intensity, color);
|
||
light.lightObject.intensity = intensity;
|
||
var tempcolor = new THREE.Color().setHex(color);
|
||
light.lightObject.color = tempcolor;
|
||
}
|
||
// for (var i = 0; i < lightList.length; i++) {
|
||
// if (lightList[i].device_guid == deviceGuid) {
|
||
// lightList[i].lightObject.intensity = intensity;
|
||
|
||
// var tempcolor = new THREE.Color().setHex(color);
|
||
// lightList[i].lightObject.color = tempcolor;
|
||
// }
|
||
// }
|
||
viewer.impl.sceneUpdated(true);
|
||
}
|
||
|
||
//燈光開關
|
||
async function setLightOpenOrClose(value, deviceGuid) {
|
||
for (var i = 0; i < lightList.length; i++) {
|
||
if (lightList[i].device_guid == deviceGuid) {
|
||
lightList[i].lightObject.visible = value;
|
||
}
|
||
}
|
||
viewer.impl.sceneUpdated(true);
|
||
}
|
||
|
||
//透過nodeId，更改物件顏色或顯示與否；color請填寫THREE.Vector4
|
||
function changeColorTransparency(nodeId, color) {
|
||
//變綠色
|
||
//var color = new THREE.Vector4(0, 1, 0, 1);//綠色；前三個代表r、g、b; 亦可填入255/255
|
||
//var color = new THREE.Vector4(0, 1, 0, 0);//不顯示顏色；最後的參數為透明度
|
||
viewer.setThemingColor(nodeId, color);
|
||
}
|
||
|
||
//隱藏全物件
|
||
function hideAllObjects(filDbids = []) {
|
||
//viewer.hide(4);//只針對一個物件(dbid為4)做隱藏
|
||
for (var i = 0; i < allDbIdsStr.length; i++) {
|
||
viewer.hide(parseInt(allDbIdsStr[i]));
|
||
}
|
||
|
||
for (var i = 0; i < filDbids.length; i++) {
|
||
viewer.show(parseInt(filDbids[i]), viewer.model);
|
||
}
|
||
}
|
||
//顯示全物件
|
||
function showAllObjects() {
|
||
//viewer.show(4); //只針對一個物件(dbid為4)做顯示
|
||
for (var i = 0; i < allDbIdsStr.length; i++) {
|
||
viewer.show(parseInt(allDbIdsStr[i]));
|
||
}
|
||
}
|
||
|
||
function showHeat(selector) {
|
||
const labels = [
|
||
`${(10).toFixed(2)}${"°C"}`,
|
||
`${(40 / 2).toFixed(2)}${"°C"}`,
|
||
`${(30).toFixed(2)}${"°C"}`,
|
||
];
|
||
const colorStops = ["blue", "green", "yellow", "red"];
|
||
createHeatmapRect(labels, colorStops, selector);
|
||
}
|
||
|
||
function createHeatmapRect(labels, colorStops, selector) {
|
||
if (!$(selector)[0]) {
|
||
return;
|
||
}
|
||
const context = $(selector)[0].getContext("2d");
|
||
let i, len;
|
||
context.clearRect(0, 0, 200, 50);
|
||
context.fillStyle = "back"; //white
|
||
for (i = 0, len = labels.length; i < len; i++) {
|
||
let x = 10 + (180 * i) / (len - 1);
|
||
if (i === len - 1) {
|
||
x -= context.measureText(labels[i]).width;
|
||
} else if (i > 0) {
|
||
x -= 0.5 * context.measureText(labels[i]).width;
|
||
}
|
||
context.fillText(labels[i], x, 10);
|
||
}
|
||
const gradient = context.createLinearGradient(0, 0, 200, 0);
|
||
for (i = 0, len = colorStops.length; i < len; i++) {
|
||
gradient.addColorStop(i / (len - 1), colorStops[i]);
|
||
}
|
||
context.fillStyle = gradient;
|
||
context.fillRect(10, 20, 200, 25);
|
||
}
|
||
|
||
//======================== 外部呼叫function ===========================
|
||
//紀錄熱點座標
|
||
function getHopspotPoint(data) {
|
||
myDataList = data;
|
||
}
|
||
|
||
//呼叫載入熱圖
|
||
async function toLoadHeatmap(roomArr) {
|
||
const model = viewer.model;
|
||
loadHeatmaps(model, roomArr);
|
||
}
|
||
|
||
function setShadowShow(type = false) {
|
||
viewer.setGroundShadow(type);
|
||
viewer.impl.sceneUpdated(true);
|
||
}
|
||
//============================= end ===================================
|
||
|
||
function moveViewToDevice(letter) {
|
||
if (letter != "") {
|
||
viewer.clearSelection();
|
||
viewer.select(letter);
|
||
viewer.fitToView([letter]);
|
||
} else {
|
||
viewer.clearSelection();
|
||
}
|
||
}
|