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

[Frontend] forge 熱圖測試

Browse Source
This commit is contained in:
wanli 2022-12-29 00:06:28 +08:00
parent 551af0ebde
commit e9a82aa5aa
2 changed files with 110 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Frontend/forgetTest2.html
View File

@ -32,6 +32,8 @@
<button id="12F1oor" onclick="move12Floor()">12 Floor</button>
<button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>
<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>
<button type="button" class="btn btn-danger" onclick="changeColorHotspot()">變更熱點顏色</button>
<button type="button" class="btn btn-dark" onclick="loadHeatMap()">載入熱圖</button>
<!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
<!-- <input type="range">Main Axis</input> -->
</div>
@ -192,9 +194,9 @@
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');
//測試單獨 7樓熱圖 DEMO
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw');
//測試 方案2 7樓熱圖
//測試 方案2 7樓熱圖
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MEFSQyVFMyU4MCU5MTdGXzIwMjJfMTJfMjYubndj');
//測試 方案3 熱圖
@ -203,6 +205,13 @@
//測試 方案4
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
//12.28 三菱單層樓 + 系統
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC
@ -302,6 +311,13 @@
}
}
function changeColorHotspot() {
changeColorForHotspot(10);
}
function loadHeatMap() {
loadHeatmap();
}

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

@ -5,6 +5,10 @@ var elevatorSpeed;
var allDbIdsStr;
let bulbLight;//點燈
let spotLight;//聚光燈
var myDataList;
var viewableData;
var dataVizExtn;
var spriteColorRed;
function launchViewer(urn) {
var av = Autodesk.Viewing;
@ -20,9 +24,9 @@ function launchViewer(urn) {
var documentId = 'urn:' + urn;
//加入熱點
//viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
// once: true,
//});
viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
once: true,
});
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
@ -167,7 +171,7 @@ function onDocumentLoadSuccess(doc) {
const fragList = model.getFragmentList();
loadHeatmaps(model);
/*loadHeatmaps(model);*/
@ -446,14 +450,14 @@ function onDocumentLoadSuccess(doc) {
//viewer.scene.add(bulbLight);
//聚光燈
//spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff
//spotLight.position.set(-17.33, 51.03, -2.52);
//spotLight = new THREE.SpotLight(0xffff00, 80, 10);//0xffffff
//spotLight.position.set(-7.58, 18.20, -0.25); //set(-17.33, 51.03, -2.52);
//spotLight.castShadow = true;
//spotLight.visible = true;
//var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
//var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
//var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
//var cube = new THREE.Mesh(geom, material);
//cube.position.set(-17.33, 51.03, -10);//-4.52
//cube.position.set(-7.58, 18.20, -1); //set(-17.33, 51.03, -10);//-4.52
//viewer.scene.add(cube);
//spotLight.target = cube;
//viewer.scene.add(spotLight);
@ -463,11 +467,12 @@ function onDocumentLoadSuccess(doc) {
//------------------- 加入熱點 -----------------
async function addHotPoint(data) {
var viewer = data.target;
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0xffffff);
const spriteIcon = "/img/forge/hotspot.svg";
const spriteColor = new THREE.Color(0xffff00); //0xffffff
spriteColorRed = new THREE.Color(0xff0000);
const spriteIcon = "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg"; //"/img/forge/hotspot.svg";
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
@ -487,11 +492,11 @@ async function addHotPoint(data) {
onSelectionChange
);
const viewableData = new DataVizCore.ViewableData();
viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
//熱圖 打點 x: 0, y: 25.03, z: -2.52 三菱
const myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27
myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27
{ position: { x: -21.95, y: 7.61, z: 63.27 } },//-21.95, 7.61, 63.27
{ position: { x: -21.95, y: 6.43, z: 63.27 } },//-21.95, 6.43, 63.27
{ position: { x: -21.95, y: 5.31, z: 63.27 } }//-21.95, 5.31, 63.27
@ -510,7 +515,7 @@ async function addHotPoint(data) {
//---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) {
//event.hasStopped = true;
event.hasStopped = true;
if (event != undefined && event != null) {
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
console.log(`Sprite clicked: ${event.dbId}`);
@ -518,6 +523,16 @@ async function addHotPoint(data) {
}
if (event.clickInfo != null) {
//if (event.clickInfo.dbId == 12449) {
//const viewablesToUpdate = [event.dbId];
//dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
// return {
// color: spriteColorRed,
// };
//});
//}
//document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
@ -558,6 +573,18 @@ async function addHotPoint(data) {
}
//------------------- end --------------
// 熱點 更換顏色
function changeColorForHotspot(dbId) {
//const viewablesToUpdate = [event.dbId];
const viewablesToUpdate = dbId;
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: spriteColorRed,
};
});
}
////---------------- 熱點點擊事件 --------------------
//function onSpriteClicked(event) {
// //event.hasStopped = true;
@ -1039,12 +1066,44 @@ async function loadHeatmaps(model) {
//x: -17.33, y: 51.03, z: -2.52
const devices = [
{
id: "Oficina 6",
id: "Oficina 5",
//name: "Oficina-",
position: { x: 0, y: 25, z: -2.5 }, // x: 0, y: 25.03, z: -2.52
position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
sensorTypes: ["temperature", "humidity"]
},
{
id: "Oficina 4",
//name: "Oficina-",
position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88)
sensorTypes: ["temperature", "humidity"]
},
{
id: "Oficina 3",
//name: "Oficina-",
position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88)
sensorTypes: ["temperature", "humidity"]
}
//{
// id: "Oficina 5",
// //name: "Oficina-",
// position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
// sensorTypes: ["temperature", "humidity"]
//},
//{
// id: "Oficina 4",
// //name: "Oficina-",
// position: { x: 37.03, y: -4.81, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88)
// sensorTypes: ["temperature", "humidity"]
//},
//{
// id: "Oficina 3",
// //name: "Oficina-",
// position: { x: 2.83, y: -22.60, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88)
// 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 = [];
@ -1070,7 +1129,9 @@ async function loadHeatmaps(model) {
// },
// true
//);
roofDbIds.push(834);//5113 834 838 8106 8177
roofDbIds.push(792);//5113 834 838 8106 8177 792 8181
//roofDbIds.push(8183);
//roofDbIds.push(8185);
const {
SurfaceShadingData,
@ -1109,6 +1170,14 @@ async function loadHeatmaps(model) {
dataVizExtn.renderSurfaceShading("Roof Panel", "temperature", getSensorValue);
setInterval(() => {
// Modify sensor values.
for (let i = 0; i < devices.length; i++) {
sensorVals[i] = Math.random();
}
dataVizExtn.updateSurfaceShading(getSensorValue);
}, 2000);
//viewer.hide(5108);//五樓底下的六樓物件
//-------------------------------------------------------------------------------
@ -1149,4 +1218,9 @@ async function loadHeatmaps(model) {
//dataVizExtn.updateSurfaceShading(getSensorValue);
}
}
async function loadHeatmap() {
const model = viewer.model;
loadHeatmaps(model);
}