[Frontend] 測試熱點、熱圖
This commit is contained in:
		
							parent
							
								
									00c9d700cb
								
							
						
					
					
						commit
						6da73ceec6
					
				@ -182,7 +182,12 @@
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
 | 
			
		||||
            launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjEubndk');
 | 
			
		||||
 | 
			
		||||
            //測試熱圖
 | 
			
		||||
            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
 | 
			
		||||
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
 | 
			
		||||
@ -285,6 +290,11 @@
 | 
			
		||||
 | 
			
		||||
        
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    </script>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -19,6 +19,7 @@ function launchViewer(urn) {
 | 
			
		||||
        viewer.start();
 | 
			
		||||
        var documentId = 'urn:' + urn;
 | 
			
		||||
 | 
			
		||||
        //加入熱點
 | 
			
		||||
        viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
 | 
			
		||||
            once: true,
 | 
			
		||||
        });
 | 
			
		||||
@ -161,9 +162,14 @@ function onDocumentLoadSuccess(doc) {
 | 
			
		||||
    var childIdArr = new Array();
 | 
			
		||||
    let evelMap = new Map();
 | 
			
		||||
 | 
			
		||||
        let tree = viewer.model.getData().instanceTree;
 | 
			
		||||
        const model = viewer.model;
 | 
			
		||||
        const fragList = model.getFragmentList();
 | 
			
		||||
    let tree = viewer.model.getData().instanceTree;
 | 
			
		||||
    const model = viewer.model;
 | 
			
		||||
    const fragList = model.getFragmentList();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    loadHeatmaps(model);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    //allDbIdsStr.forEach((dbId) => {
 | 
			
		||||
    //    curDbId = parseInt(dbId);
 | 
			
		||||
@ -257,10 +263,12 @@ function onDocumentLoadSuccess(doc) {
 | 
			
		||||
        curDbId = parseInt(dbId);
 | 
			
		||||
        viewer.getProperties(curDbId, function (e) {
 | 
			
		||||
            e.properties.forEach(function (item) {
 | 
			
		||||
                if (item.displayName == "Tag_name") { // Tag_name tag_id 【tag_id】
 | 
			
		||||
                if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】
 | 
			
		||||
                    if (item.displayValue != "") {
 | 
			
		||||
                        console.log("Tag_name dbid: " + e.dbId);
 | 
			
		||||
                        console.log("value: " + item.displayValue);
 | 
			
		||||
                        //if ((item.displayValue).indexOf('TPE_B1_EE_E4') > -1) {
 | 
			
		||||
                            //console.log("Tag_name dbid: " + e.dbId);
 | 
			
		||||
                            //console.log("value: " + item.displayValue);
 | 
			
		||||
                        //}
 | 
			
		||||
                        //var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer);
 | 
			
		||||
                        //console.log("v: " + v);
 | 
			
		||||
 | 
			
		||||
@ -281,7 +289,9 @@ function onDocumentLoadSuccess(doc) {
 | 
			
		||||
                            bounds.union(box);
 | 
			
		||||
                        }, true);
 | 
			
		||||
                        var position = bounds.center();
 | 
			
		||||
                        console.log("position: (" + position.x + ", " + position.y + ", " + position.z + ")");
 | 
			
		||||
                        //if ((item.displayValue).indexOf('TPE_B1_EE_E4') > -1) {
 | 
			
		||||
                            //console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")");
 | 
			
		||||
                        //}
 | 
			
		||||
                    }
 | 
			
		||||
                    //getFragmentWorldMatrixByNodeId(e.dbId, viewer);
 | 
			
		||||
                    //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
 | 
			
		||||
@ -434,17 +444,17 @@ 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.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 cube = new THREE.Mesh(geom, material);
 | 
			
		||||
    cube.position.set(-17.33, 51.03, -10);//-4.52
 | 
			
		||||
    viewer.scene.add(cube);
 | 
			
		||||
    spotLight.target = cube;
 | 
			
		||||
    viewer.scene.add(spotLight);
 | 
			
		||||
    //spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff
 | 
			
		||||
    //spotLight.position.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 cube = new THREE.Mesh(geom, material);
 | 
			
		||||
    //cube.position.set(-17.33, 51.03, -10);//-4.52
 | 
			
		||||
    //viewer.scene.add(cube);
 | 
			
		||||
    //spotLight.target = cube;
 | 
			
		||||
    //viewer.scene.add(spotLight);
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -459,8 +469,17 @@ async function addHotPoint(data) {
 | 
			
		||||
 | 
			
		||||
    const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    //function onSpriteClicked(event) {
 | 
			
		||||
    //    console.log(`Sprite clicked: ${event.dbId}`);
 | 
			
		||||
    //}
 | 
			
		||||
 | 
			
		||||
    //熱點 點擊事件註冊
 | 
			
		||||
    viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
 | 
			
		||||
    viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);//MOUSE_CLICK SPRITE_SELECTED
 | 
			
		||||
    //viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
 | 
			
		||||
    //viewer.addEventListener(DataVizCore.MOUSE_DOWN, onSpriteClicked);
 | 
			
		||||
    //viewer.addEventListener(DataVizCore.MOUSE_HOVERING, onSpriteHovering);
 | 
			
		||||
 | 
			
		||||
    viewer.addEventListener(
 | 
			
		||||
        Autodesk.Viewing.SELECTION_CHANGED_EVENT,
 | 
			
		||||
        onSelectionChange
 | 
			
		||||
@ -469,7 +488,12 @@ async function addHotPoint(data) {
 | 
			
		||||
    const viewableData = new DataVizCore.ViewableData();
 | 
			
		||||
    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
 | 
			
		||||
 | 
			
		||||
    const myDataList = [{ position: { x: -17.33, y: 51.03, z: -2.52 } }, { position: { x: -23.21, y: 51.03, z: -2.52 } }];
 | 
			
		||||
    //熱圖 打點  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
 | 
			
		||||
                        { 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
 | 
			
		||||
                       ];// x: -17.33, y: 51.03, z: -2.52 ; x: -23.21, y: 51.03, z: -2.52
 | 
			
		||||
 | 
			
		||||
    myDataList.forEach((myData, index) => {
 | 
			
		||||
        const dbId = 10 + index;
 | 
			
		||||
@ -482,27 +506,91 @@ async function addHotPoint(data) {
 | 
			
		||||
    await viewableData.finish();
 | 
			
		||||
    dataVizExtn.addViewables(viewableData);
 | 
			
		||||
 | 
			
		||||
    //---------------- 熱點點擊事件 --------------------
 | 
			
		||||
    function onSpriteClicked(event) {
 | 
			
		||||
        //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}`);
 | 
			
		||||
                openHotspotModal();
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            if (event.clickInfo != null) {
 | 
			
		||||
                //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
 | 
			
		||||
                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) {
 | 
			
		||||
    //    //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
 | 
			
		||||
    //    event.hasStopped = true;
 | 
			
		||||
 | 
			
		||||
    //    const viewablesToUpdate = [event.dbId];
 | 
			
		||||
    //    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
 | 
			
		||||
    //        return {
 | 
			
		||||
    //            scale: 1.0, // Restore the viewable size
 | 
			
		||||
    //            url: "https://.../circle.svg",
 | 
			
		||||
    //        };
 | 
			
		||||
    //    });
 | 
			
		||||
    //}
 | 
			
		||||
    
 | 
			
		||||
    //function onSpriteHovering(event) {
 | 
			
		||||
    //    const targetDbId = event.dbId;
 | 
			
		||||
 | 
			
		||||
    //    if (event != undefined && event != null && event.hovering) {
 | 
			
		||||
 | 
			
		||||
    //        if (targetDbId >= 10 && targetDbId <= 13) {//event.dbId > 0 && event.dbId < 19
 | 
			
		||||
    //            console.log(`Sprite clicked: ${event.dbId}`);
 | 
			
		||||
    //            openHotspotModal();
 | 
			
		||||
    //        }
 | 
			
		||||
            
 | 
			
		||||
    //        console.log(`The mouse hovers over ${targetDbId}`);
 | 
			
		||||
    //    } else {
 | 
			
		||||
    //        console.log(`The mouse hovers off ${targetDbId}`);
 | 
			
		||||
    //    }
 | 
			
		||||
    //}
 | 
			
		||||
}
 | 
			
		||||
//------------------- end --------------
 | 
			
		||||
 | 
			
		||||
//---------------- 熱點點擊事件 --------------------
 | 
			
		||||
function onSpriteClicked(event) {
 | 
			
		||||
    if (event != undefined && event != null) {
 | 
			
		||||
        if (event.dbId == 10 || event.dbId == 11) {//event.dbId > 0 && event.dbId < 19
 | 
			
		||||
            console.log(`Sprite clicked: ${event.dbId}`);
 | 
			
		||||
            //alert("I am an alert box! " + event.dbId);
 | 
			
		||||
            openHotspotModal();
 | 
			
		||||
        }
 | 
			
		||||
////---------------- 熱點點擊事件 --------------------
 | 
			
		||||
//function onSpriteClicked(event) {
 | 
			
		||||
//    //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}`);
 | 
			
		||||
//            //alert("I am an alert box! " + event.dbId);
 | 
			
		||||
//            openHotspotModal();
 | 
			
		||||
//        }
 | 
			
		||||
 | 
			
		||||
        if (event.clickInfo != null) {
 | 
			
		||||
            //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
 | 
			
		||||
            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)}`);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
//        if (event.clickInfo != null) {
 | 
			
		||||
//            //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
 | 
			
		||||
//            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) {
 | 
			
		||||
//    //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
 | 
			
		||||
//    event.hasStopped = true;
 | 
			
		||||
 | 
			
		||||
//    const viewablesToUpdate = [event.dbId];
 | 
			
		||||
//    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
 | 
			
		||||
//        return {
 | 
			
		||||
//            scale: 1.0, // Restore the viewable size
 | 
			
		||||
//            url: "https://.../circle.svg",
 | 
			
		||||
//        };
 | 
			
		||||
//    });
 | 
			
		||||
 | 
			
		||||
//    // Continue with application logic that reacts to the deselection
 | 
			
		||||
//    // event (e.g., update UI to a state where no selection is made).
 | 
			
		||||
//}
 | 
			
		||||
 | 
			
		||||
function onSelectionChange(event) {
 | 
			
		||||
    if (event != undefined && event != null) {
 | 
			
		||||
@ -510,6 +598,8 @@ function onSelectionChange(event) {
 | 
			
		||||
 | 
			
		||||
        if (dbIds.length > 0) {
 | 
			
		||||
            // 處理已選取元件的邏輯
 | 
			
		||||
 | 
			
		||||
            //openHotspotModal();
 | 
			
		||||
            console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
 | 
			
		||||
        } else {
 | 
			
		||||
            // 處理沒有選取元件的邏輯
 | 
			
		||||
@ -532,6 +622,8 @@ function openHotspotModal() {
 | 
			
		||||
function closeHotspotModal() {
 | 
			
		||||
    var modal = document.getElementById("hotspotModal");
 | 
			
		||||
    modal.style.display = "none";
 | 
			
		||||
    //dataVizExtn.removeAllViewables();
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
//------------------ end --------------------------------
 | 
			
		||||
 | 
			
		||||
@ -917,21 +1009,21 @@ function onDocumentLoadFailure(viewerErrorCode) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getForgeToken(callback) {
 | 
			
		||||
    //fetch(baseApiUrl + '/api/forge/oauth/token').then(res => {
 | 
			
		||||
    //    res.json().then(data => {
 | 
			
		||||
    //        callback(data.dictionary.access_token, data.dictionary.expires_in);
 | 
			
		||||
    //    });
 | 
			
		||||
    //});
 | 
			
		||||
 | 
			
		||||
    //for wsp get token
 | 
			
		||||
    var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com";
 | 
			
		||||
    fetch(wspApiUrl + '/api/forge/getToken').then(res => {
 | 
			
		||||
    // for 三菱
 | 
			
		||||
    fetch(baseApiUrl + '/api/forge/oauth/token').then(res => {
 | 
			
		||||
        res.json().then(data => {
 | 
			
		||||
            callback(data.access_token, data.expires_in);
 | 
			
		||||
            callback(data.dictionary.access_token, data.dictionary.expires_in);
 | 
			
		||||
        });
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
 | 
			
		||||
    //for wsp get token
 | 
			
		||||
    //var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com";
 | 
			
		||||
    //fetch(wspApiUrl + '/api/forge/getToken').then(res => {
 | 
			
		||||
    //    res.json().then(data => {
 | 
			
		||||
    //        callback(data.access_token, data.expires_in);
 | 
			
		||||
    //    });
 | 
			
		||||
    //});
 | 
			
		||||
 | 
			
		||||
    //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -942,56 +1034,117 @@ async function loadHeatmaps(model) {
 | 
			
		||||
    // Given a model loaded from Forge
 | 
			
		||||
    const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
 | 
			
		||||
 | 
			
		||||
    //x: -17.33, y: 51.03, z: -2.52
 | 
			
		||||
    const devices = [
 | 
			
		||||
        {
 | 
			
		||||
            id: "Oficina 6",
 | 
			
		||||
            name: "Oficina-",
 | 
			
		||||
            position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 },
 | 
			
		||||
            //name: "Oficina-",
 | 
			
		||||
            position: { x: 0, y: 25, z: -2.5 }, // x: 0, y: 25.03, z: -2.52
 | 
			
		||||
            sensorTypes: ["temperature", "humidity"]
 | 
			
		||||
        }
 | 
			
		||||
    ];
 | 
			
		||||
 | 
			
		||||
    var offset = Autodesk.viewer.model.getGlobalOffset();
 | 
			
		||||
    removeOffset(devices[0], offset)
 | 
			
		||||
    // Initialize sensor values
 | 
			
		||||
    let sensorVals = [];
 | 
			
		||||
    for (let i = 0; i < devices.length; i++) {
 | 
			
		||||
        sensorVals[i] = Math.random();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //var offset = Autodesk.viewer.model.getGlobalOffset();
 | 
			
		||||
    //removeOffset(devices[0], offset)
 | 
			
		||||
 | 
			
		||||
    //---------------- test node ---------------
 | 
			
		||||
 | 
			
		||||
    // Retrive all dbIds that compose the stadium roof.
 | 
			
		||||
    const it = viewer.model.getInstanceTree();
 | 
			
		||||
    const roofDbIds = [];
 | 
			
		||||
 | 
			
		||||
    //it.enumNodeChildren(
 | 
			
		||||
    //    5027,//4239
 | 
			
		||||
    //    (id) => {
 | 
			
		||||
    //        if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板
 | 
			
		||||
    //            roofDbIds.push(id);
 | 
			
		||||
    //        }
 | 
			
		||||
    //    },
 | 
			
		||||
    //    true
 | 
			
		||||
    //);
 | 
			
		||||
    roofDbIds.push(5113);
 | 
			
		||||
 | 
			
		||||
    const {
 | 
			
		||||
        SurfaceShadingData,
 | 
			
		||||
        SurfaceShadingPoint,
 | 
			
		||||
        SurfaceShadingNode,
 | 
			
		||||
    } = Autodesk.DataVisualization.Core;
 | 
			
		||||
 | 
			
		||||
    const shadingNode = new SurfaceShadingNode("Roof Panel", roofDbIds);
 | 
			
		||||
 | 
			
		||||
    devices.forEach((device) => {
 | 
			
		||||
        const shadingPoint = new SurfaceShadingPoint(
 | 
			
		||||
            device.id,
 | 
			
		||||
            device.position,
 | 
			
		||||
            device.sensorTypes
 | 
			
		||||
        );
 | 
			
		||||
        shadingNode.addPoint(shadingPoint);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Generates `SurfaceShadingData` after assigning each device to a room.
 | 
			
		||||
    //const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
 | 
			
		||||
    //const shadingData = await structureInfo.generateSurfaceShadingData(devices);
 | 
			
		||||
    //shadingData.initialize(model);
 | 
			
		||||
    const heatmapData = new SurfaceShadingData();
 | 
			
		||||
    heatmapData.addChild(shadingNode);
 | 
			
		||||
    heatmapData.initialize(model);
 | 
			
		||||
 | 
			
		||||
    const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
 | 
			
		||||
    // 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("Roof Panel", "temperature", getSensorValue);
 | 
			
		||||
 | 
			
		||||
    //viewer.hide(5108);//五樓底下的六樓物件
 | 
			
		||||
    //-------------------------------------------------------------------------------
 | 
			
		||||
    
 | 
			
		||||
 | 
			
		||||
    // Use the resulting shading data to generate heatmap from.
 | 
			
		||||
    await dataVizExtn.setupSurfaceShading(model, shadingData);
 | 
			
		||||
    //await dataVizExtn.setupSurfaceShading(model, shadingData);
 | 
			
		||||
 | 
			
		||||
    // Register color stops for the heatmap. Along with the normalized sensor value
 | 
			
		||||
    // in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
 | 
			
		||||
    // heatmap color based on these specified colors.
 | 
			
		||||
    const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
 | 
			
		||||
    //const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
 | 
			
		||||
 | 
			
		||||
    // Set heatmap colors for temperature
 | 
			
		||||
    const sensorType = "temperature";
 | 
			
		||||
    dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
 | 
			
		||||
    //const sensorType = "temperature";
 | 
			
		||||
    //dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
 | 
			
		||||
 | 
			
		||||
    // Function that provides sensor value in the range of [0.0, 1.0]
 | 
			
		||||
 | 
			
		||||
    function getSensorValue(surfaceShadingPoint, sensorType) {
 | 
			
		||||
        // The `SurfaceShadingPoint.id` property matches one of the identifiers passed
 | 
			
		||||
        // to `generateSurfaceShadingData` function. In our case above, this will either
 | 
			
		||||
        // be "cafeteria-entrace-01" or "cafeteria-exit-01".
 | 
			
		||||
        const deviceId = surfaceShadingPoint.id;
 | 
			
		||||
    //function getSensorValue(surfaceShadingPoint, sensorType) {
 | 
			
		||||
    //    // The `SurfaceShadingPoint.id` property matches one of the identifiers passed
 | 
			
		||||
    //    // to `generateSurfaceShadingData` function. In our case above, this will either
 | 
			
		||||
    //    // be "cafeteria-entrace-01" or "cafeteria-exit-01".
 | 
			
		||||
    //    const deviceId = surfaceShadingPoint.id;
 | 
			
		||||
 | 
			
		||||
        // Read the sensor data, along with its possible value range
 | 
			
		||||
        let sensorValue = readSensorValue(deviceId, sensorType);
 | 
			
		||||
        const maxSensorValue = getMaxSensorValue(sensorType);
 | 
			
		||||
        const minSensorValue = getMinSensorValue(sensorType);
 | 
			
		||||
    //    // Read the sensor data, along with its possible value range
 | 
			
		||||
    //    let sensorValue = readSensorValue(deviceId, sensorType);
 | 
			
		||||
    //    const maxSensorValue = getMaxSensorValue(sensorType);
 | 
			
		||||
    //    const minSensorValue = getMinSensorValue(sensorType);
 | 
			
		||||
 | 
			
		||||
        // Normalize sensor value to [0, 1.0]
 | 
			
		||||
        sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
 | 
			
		||||
        return clamp(sensorValue, 0.0, 1.0);
 | 
			
		||||
    }
 | 
			
		||||
    //    // Normalize sensor value to [0, 1.0]
 | 
			
		||||
    //    sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
 | 
			
		||||
    //    return clamp(sensorValue, 0.0, 1.0);
 | 
			
		||||
    //}
 | 
			
		||||
 | 
			
		||||
    // This value can also be a room instead of a floor
 | 
			
		||||
    const floorName = "01 - Entry Level";
 | 
			
		||||
    dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
 | 
			
		||||
 | 
			
		||||
    //const floorName = "01 - Entry Level";
 | 
			
		||||
    //dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
 | 
			
		||||
 | 
			
		||||
    //dataVizExtn.updateSurfaceShading(getSensorValue);
 | 
			
		||||
    
 | 
			
		||||
} 
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user