[Frontend] 系統監控-電梯3D模型匯入

This commit is contained in:
wanli 2022-11-28 23:16:14 +08:00
parent 9da9ff177a
commit 930b06de18
4 changed files with 144 additions and 162 deletions

View File

@ -35,12 +35,12 @@
<div id="elevatorBlock" class="elevator">
<div class="elevator-header">
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
2D
</button>
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv">
3D
</button>
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv">
2D
</button>
</div>
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button id="upFloBtn" class="btn btn-secondary btn-sm">
@ -52,13 +52,13 @@
</div>
</div>
<div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
<div id="forgeViewer"></div>
</div>
<div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
<table id="floorTable" class="elevator-build m-auto">
</table>
</div>
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
<div id="forgeViewer"></div>
</div>
</div>
</div>
<!--<div>
@ -903,19 +903,20 @@
var zoomToggle = 3;
$(function () {
initChart();
setBuildFloor();
setCards();
subDeviceSetStatus();
setEleManTable();
console.log("--- load 3d ---");
load3DModel();
})
function getFloDevList() {
}
$(document).ready(function () {
load3DModel();
});
//baja 訂閱設備
function subDeviceSetStatus() {
myBaja = new subscriptionDevices();
@ -2283,8 +2284,7 @@
//載入3D模型
function load3DModel() {
console.log("launchViewer~");
/*launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');*/
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
}
</script>

View File

@ -20,6 +20,7 @@
<button id="1F1oor" onclick="move1Floor()">1 Floor</button>
<button id="2F1oor" onclick="move2Floor()">2 Floor</button>
<button id="3F1oor" onclick="move3Floor()">3 Floor</button>
<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度
<!-- <input type="range">Main Axis</input> -->
</div>
@ -55,8 +56,11 @@
$(document).ready(function () {
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU2JUIwJUI4JUU2JTk4JUE1JUU2JUEzJUE3JUUzJTgwJTkxJUUzJTgwJTkwTUVQJUUzJTgwJTkxVjMubndk');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxLm53Yw');//[TEST].nwd
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwTUVQJUUzJTgwJTkxLm53Yw==');
//
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwVEVTVCVFMyU4MCU5MS5ud2Q=');
});
function move1Floor() {
@ -74,6 +78,13 @@
setElevatorFloor(2);
requestAnimationFrame(movElevator);
}
function changeLightPower() {
var value = document.getElementById('lightBar').value;
console.log("power: " + value);
setLightPower(value);
}
</script>

View File

@ -37,7 +37,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
<!--<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">-->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
</head>
<!-- BEGIN Body -->
<!-- Possible Classes
@ -2528,15 +2528,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="js/forge/forgemodel.js"></script>
<!--Bajascript-->
<script src="js/bajascript/bscriptReq.js"></script>
<!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
<script src='js/bajascript/require.js'></script>
<!--<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>-->
<!--<script src="js/forge/forgemodel.js"></script>-->
<script type='text/javascript'>
@ -2549,7 +2549,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<script src="js/bajascript/require.config.js"></script>
<script src="js/FileSaver.js"></script>
<script>
/*$('#js-page-content').smartPanel();*/
@ -2708,7 +2708,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
pageAct.sysMainTag = null;
}
$.each(tolSubList, (idx, sub) => {
console.log("sub",sub,idx)
console.log("sub", sub, idx)
sub.unsubscribeAll();
sub.detach();
})
@ -2773,7 +2773,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
</table>`
return strHtml;
}
@ -2781,7 +2781,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
</table>`
return strHtml;
}
@ -2794,37 +2794,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo(devNum)}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo(devGuid)}
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
</div>`,
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo(devNum)}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo(devGuid)}
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div>
</div>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
@ -2958,9 +2958,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
}
//==============================================================================
// ↑ 系統監控 - 共用 Function ↑
//==============================================================================
//==============================================================================
// ↑ 系統監控 - 共用 Function ↑
//==============================================================================
</script>
</body>

View File

@ -1,62 +1,25 @@
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 sensorVals = [];
let fragProxy;
var targetFloorZ;
var elevatorSpeed;
for (let i = 0; i < devices.length; i++) {
sensorVals[i] = Math.random();
}
let bulbLight;
//for (let i = 0; i < devices.length; i++) {
// sensorVals[i] = Math.random();
//}
function launchViewer(urn) {
var options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken
getAccessToken: getForgeToken,
language: 'en'
};
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//這是沒有工具列的
viewer.start();
var documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
@ -64,26 +27,26 @@ function launchViewer(urn) {
//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
}
});
//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)
});
}
// await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
// });
//}
loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
//loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
@ -122,57 +85,65 @@ function onDocumentLoadSuccess(doc) {
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.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 () {
var instanceTree = viewer.model.getData().instanceTree;
var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
var domElem = document.getElementById('all_id');
domElem.innerText = allDbIdsStr;
//allDbIdsStr.map(function (id) { return parseInt(id) });
//getAllLeafComponents(viewer, function (jsonData) {
// console.log("data: " + jsonData);
// const targetElem = currSelection[0];
// const model = viewer.model;
// const instanceTree = model.getData().instanceTree;
// const fragList = model.getFragmentList();
// let bounds = new THREE.Box3();
// instanceTree.enumNodeFragments(targetElem, (fragId) => {
// let box = new THREE.Box3();
// fragList.getWorldBounds(fragId, box);
// bounds.union(box);
// }, true);
// const position = bounds.center();
// console.log(position)
//});
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (data) {
//var viewer = data.target;
//var instanceTree = viewer.model.getData().instanceTree;
//var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
//var domElem = document.getElementById('all_id');
//domElem.innerText = allDbIdsStr;
//let tree = viewer.model.getData().instanceTree;
//let nodeId = 10952;
//tree.enumNodeFragments(nodeId, function (frag) {
// fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
// console.log("p:" + fragProxy.position);
// fragProxy.getAnimTransform();
// let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
// fragProxy.position = fragPosition;
// fragProxy.updateAnimTransform();
//});
//var a = getAllDbIds(viewer);
//console.log("a: " + a);//10952
//viewer.impl.sceneUpdated(true);
let tree = viewer.model.getData().instanceTree;
let nodeId = 10952;
});//, { once: true, }
tree.enumNodeFragments(nodeId, function (frag) {
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
fragProxy.getAnimTransform();
//fragProxy.quaternion = new THREE.Quaternion().setFromAxisAngle(
// new THREE.Vector3(0, 0.3, 0),
// -Math.PI / 2);
//fragProxy.quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0));
//fragProxy.quaternion = new THREE.Quaternion().setPosition(new THREE.Vector3(10, 5, 0), 5);
//fragProxy.updateAnimTransform();
//do some work with fragment proxy
//bulbLight = new THREE.PointLight(0xff0000, 20, 2, 1);//0xffee88
//bulbLight.position.set(39.33340644836426, 19.965089797973633, 18);//17.880840301513672
//bulbLight.castShadow = true;
//bulbLight.power = 100;// 110000;
//bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
//viewer.scene.add(bulbLight);
}
//var fragPosition = new THREE.Vector3(
// 10 - fragProxy.offset.x,
// 10 - fragProxy.offset.y,
// 10 - fragProxy.offset.z)
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
fragProxy.position = fragPosition
fragProxy.updateAnimTransform()
});
viewer.impl.sceneUpdated(true);
});
function setLightPower(value) {
bulbLight.intensity = (value * 10);
viewer.impl.sceneUpdated(true);
//bulbLight.power = value;
}
function setElevatorFloor(floor) {