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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Frontend/_sysElevator.html
View File

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

13
Frontend/forgeTest.html
View File

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

80
Frontend/index.html
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" 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/site.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.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> </head>
<!-- BEGIN Body --> <!-- BEGIN Body -->
<!-- Possible Classes <!-- 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:--> <!--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="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--> <!--Bajascript-->
<script src="js/bajascript/bscriptReq.js"></script> <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 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='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'> <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/bajascript/require.config.js"></script>
<script src="js/FileSaver.js"></script> <script src="js/FileSaver.js"></script>
<script> <script>
/*$('#js-page-content').smartPanel();*/ /*$('#js-page-content').smartPanel();*/
@ -2708,7 +2708,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
pageAct.sysMainTag = null; pageAct.sysMainTag = null;
} }
$.each(tolSubList, (idx, sub) => { $.each(tolSubList, (idx, sub) => {
console.log("sub",sub,idx) console.log("sub", sub, idx)
sub.unsubscribeAll(); sub.unsubscribeAll();
sub.detach(); sub.detach();
}) })
@ -2773,7 +2773,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() { function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>` </table>`
return strHtml; return strHtml;
} }
@ -2781,7 +2781,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() { function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>` </table>`
return strHtml; return strHtml;
} }
@ -2794,37 +2794,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(ele).YTTooltip({ $(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap"> html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3"> <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="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div> </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", group: "device",
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" }) 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> </script>
</body> </body>

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

@ -1,62 +1,25 @@
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 // Initialize sensor values
let sensorVals = []; //let sensorVals = [];
let fragProxy; let fragProxy;
var targetFloorZ; var targetFloorZ;
var elevatorSpeed; var elevatorSpeed;
for (let i = 0; i < devices.length; i++) { let bulbLight;
sensorVals[i] = Math.random(); //for (let i = 0; i < devices.length; i++) {
} // sensorVals[i] = Math.random();
//}
function launchViewer(urn) { function launchViewer(urn) {
var options = { var options = {
env: 'AutodeskProduction', env: 'AutodeskProduction',
getAccessToken: getForgeToken getAccessToken: getForgeToken,
language: 'en'
}; };
Autodesk.Viewing.Initializer(options, () => { Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer')); viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//這是沒有工具列的
viewer.start(); viewer.start();
var documentId = 'urn:' + urn; var documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
@ -64,26 +27,26 @@ function launchViewer(urn) {
//test //test
for (let i = 0; i < urn.length; i++) { //for (let i = 0; i < urn.length; i++) {
Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => { // Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
let viewables = doc.getRoot().getDefaultGeometry(); // let viewables = doc.getRoot().getDefaultGeometry();
let model = await viewer.loadDocumentNode(doc, viewables, { // let model = await viewer.loadDocumentNode(doc, viewables, {
preserveView: false, // preserveView: false,
keepCurrentModels: true, // keepCurrentModels: true,
placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]), // placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
keepCurrentModels: true, // keepCurrentModels: true,
globalOffset: { // globalOffset: {
x: 0, // x: 0,
y: 0, // y: 0,
z: 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 => { viewer.loadDocumentNode(doc, viewables).then(i => {
// documented loaded, any action? // documented loaded, any action?
}); });
viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => { //viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
var currSelection = viewer.getSelection(); // var currSelection = viewer.getSelection();
var domElem = document.getElementById('id_printer'); // var domElem = document.getElementById('id_printer');
domElem.innerText = currSelection[0]; // domElem.innerText = currSelection[0];
});
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { // const targetElem = currSelection[0];
var instanceTree = viewer.model.getData().instanceTree;
var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); // const model = viewer.model;
var domElem = document.getElementById('all_id'); // const instanceTree = model.getData().instanceTree;
domElem.innerText = allDbIdsStr; // const fragList = model.getFragmentList();
//allDbIdsStr.map(function (id) { return parseInt(id) });
//getAllLeafComponents(viewer, function (jsonData) { // let bounds = new THREE.Box3();
// console.log("data: " + jsonData);
// 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); //viewer.impl.sceneUpdated(true);
//console.log("a: " + a);//10952
let tree = viewer.model.getData().instanceTree; });//, { once: true, }
let nodeId = 10952;
tree.enumNodeFragments(nodeId, function (frag) { //bulbLight = new THREE.PointLight(0xff0000, 20, 2, 1);//0xffee88
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag); //bulbLight.position.set(39.33340644836426, 19.965089797973633, 18);//17.880840301513672
fragProxy.getAnimTransform(); //bulbLight.castShadow = true;
//fragProxy.quaternion = new THREE.Quaternion().setFromAxisAngle( //bulbLight.power = 100;// 110000;
// new THREE.Vector3(0, 0.3, 0), //bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
// -Math.PI / 2); //viewer.scene.add(bulbLight);
//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
function setLightPower(value) {
//var fragPosition = new THREE.Vector3( bulbLight.intensity = (value * 10);
// 10 - fragProxy.offset.x, viewer.impl.sceneUpdated(true);
// 10 - fragProxy.offset.y, //bulbLight.power = value;
// 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 setElevatorFloor(floor) { function setElevatorFloor(floor) {