<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <link rel="shortcut icon" href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" /> <!-- Autodesk Forge Viewer files --> <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css"> <div id="MyControls" class="adsk control"> <p style="text-align: center; font-weight: bold;">Robot Controls</p> <p id="id_printer">Selected_ID: </p> <p id="all_id">All_ID: </p> <!--<button id="1F1oor" onclick="move1Floor()">1 Floor</button> <button id="2F1oor" onclick="move2Floor()">2 Floor</button> <button id="3F1oor" onclick="move3Floor()">3 Floor</button> <button id="4F1oor" onclick="move4Floor()">4 Floor</button> <button id="5F1oor" onclick="move5Floor()">5 Floor</button> <button id="6F1oor" onclick="move6Floor()">6 Floor</button> <button id="7F1oor" onclick="move7Floor()">7 Floor</button> <button id="8F1oor" onclick="move8Floor()">8 Floor</button> <button id="9F1oor" onclick="move9Floor()">9 Floor</button> <button id="10F1oor" onclick="move10Floor()">10 Floor</button> <button id="11F1oor" onclick="move11Floor()">11 Floor</button> <button id="12F1oor" onclick="move12Floor()">12 Floor</button> <button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>--> <label>Intensity:</label><input id="LightIntensity" /> <label>Distance:</label><input id="LightDistance" /> <label>Angle:</label><input id="LightAngle" /> <label>Penumbra:</label><input id="LightPenumbra" /> <label>Decay:</label><input id="LightDecay" /> <button onclick="setLightValue()">設定燈光</button> <button id="Light1" onclick="newALight()">新增燈光</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> <button type="button" class="btn btn-dark" onclick="hideModel()">隱藏物件</button> <button type="button" class="btn btn-dark" onclick="openModel()">顯示物件</button> <button type="button" class="btn btn-dark" onclick="transparentModel()">透明化物件</button> <button type="button" class="btn btn-dark" onclick="cancelTransparentModel()">取消透明物件</button> <button type="button" class="btn btn-danger" onclick="proFile()">剖面</button> <button type="button" class="btn btn-dark" onclick="getLevels()">取得levels</button> <div style="height: 50px"> <canvas id="iot-heatmap-legend" width="300" height="50"></canvas> </div> <button type="button" class="btn btn-info" onclick="showHeat()">顯示熱圖圖示</button> <button type="button" class="btn btn-default" onclick="showList()">顯示設備清單</button> <!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度--> <!-- <input type="range">Main Axis</input> --> </div> <div> <div id="forgeViewer"></div> </div> <div class="modal" id="hotspotModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link py-3 px-4" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">即時值</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link py-3 px-4 active" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">基本資料</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link py-3 px-4" id="pills-alarm-tab" data-toggle="pill" href="#pills-alarm" role="tab" aria-controls="pills-alarm" aria-selected="false">異常</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link py-3 px-4" id="pills-operation-tab" data-toggle="pill" href="#pills-operation" role="tab" aria-controls="pills-operation" aria-selected="false">運維</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab"> <div class="modal-header"> <h5 class="modal-title" id="loginModalLabel">即時值資訊</h5> </div> <div class="modal-body"> <form> <div class="form-group"> <input id="lightBar" type="range" min="0" max="100" step="1" onchange="changeLightPower()">明亮度 <!--<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>--> </div> <!--<div class="form-group"> <label for="register-recipient-name" class="col-form-label">訂閱時間:</label> <label class="col-form-label">100</label> </div> <div class="form-group"> <label for="register-pwd-text" class="col-form-label">執行時間:</label> <label class="col-form-label">200</label> </div>--> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button> </div> </div> <div class="tab-pane fade" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab"> <div class="modal-header"> <h5 class="modal-title" id="loginModalLabel">基本資料</h5> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="login-recipient-name" class="col-form-label">設備名稱:</label> <label class="col-form-label" id="deviceName"></label> </div> <div class="form-group"> <label for="login-message-text" class="col-form-label">DBID:</label> <label class="col-form-label" id="deviceDbid"></label> </div> <div class="form-group"> <label for="login-message-text" class="col-form-label">位置:</label> <label class="col-form-label" id="devicePosition"></label> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button> </div> </div> <div class="tab-pane fade" id="pills-alarm" role="tabpanel" aria-labelledby="pills-alarm-tab"> <div class="modal-header"> <h5 class="modal-title" id="loginModalLabel">異常資訊</h5> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="alarm-recipient-name" class="col-form-label">異常狀況:</label> <label class="col-form-label" id="alarmStatus"></label> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button> </div> </div> <div class="tab-pane fade" id="pills-operation" role="tabpanel" aria-labelledby="pills-operation-tab"> <div class="modal-header"> <h5 class="modal-title" id="loginModalLabel">運維資訊</h5> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="operation-recipient-name" class="col-form-label">運維人員:</label> <label class="col-form-label" id="operationStatus"></label> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button> </div> </div> </div> </div> </div> </div> <!--Base JS--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script src="js/init.js"></script> <!-- Common packages: jQuery, Bootstrap, jsTree --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script> <script src="js/forge/modeltest.js"></script> <!--<script src="js/forge/AdnLevelSectionPanel.js"></script>--> <style> .show-env-bg-button { background: red; } .hide-env-bg-button { background: blue; } </style> <script> var curLightIsOpen = true; //var light; var cavas; this.canvas = document.getElementById('iot-heatmap-legend'); $(document).ready(function () { //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q'); //launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjEubndk'); //測試熱圖 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q'); //三菱 最新urn 資料庫 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q'); //測試單獨 7樓熱圖 DEMO //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw'); //測試 方案2 7樓熱圖 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MEFSQyVFMyU4MCU5MTdGXzIwMjJfMTJfMjYubndj'); //測試 方案3 熱圖 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4M18yMDIyXzEyXzI2Lm53ZA'); //測試 方案4 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA'); //12.28 三菱單層樓 + 系統 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA'); //目前線上整棟模型 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA'); //單層 + 系統 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvTUVQK0FSQzdGX0RFTU9fJUU1JTg5JThBJUU5JUEwJTgyXzEyMjgubndk'); //單層 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxMUZfREVNT18yMDIyXzEyXzI5Lm53Yw'); //MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMjkubndj'); //12.29 整棟 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk'); //12.30 整棟樓 ARC + MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8xMl8zMC5ud2Q'); //12.30 整棟樓 ARC + MEP 半透明 //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC //01.06 加上room_id(樓層有燈具) //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU2JUE4JUExJUU1JUJDJThGK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8yMDIzXzAxXzA2Lm53ZA'); //01.06 樓層刪除燈具 launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQyVFOSU5QiU5OSVFNiVBOCVBMSVFNSVCQyU4RitNRVAlRTYlOEIlODYlRTclQjMlQkIlRTclQjUlQjFfJUU1JTg4JUFBJUU3JTg3JTg4JUU1JTg1JUI3XzIwMjNfMDFfMDYubndk'); }); //function move1Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(0); // requestAnimationFrame(movElevator); //} //function move2Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(1); // requestAnimationFrame(movElevator); //} //function move3Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(2); // requestAnimationFrame(movElevator); //} //function move4Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(3); // requestAnimationFrame(movElevator); //} //function move5Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(4); // requestAnimationFrame(movElevator); //} //function move6Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(5); // requestAnimationFrame(movElevator); //} //function move7Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(6); // requestAnimationFrame(movElevator); //} //function move8Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(7); // requestAnimationFrame(movElevator); //} //function move9Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(8); // requestAnimationFrame(movElevator); //} //function move10Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(9); // requestAnimationFrame(movElevator); //} //function move11Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(10); // requestAnimationFrame(movElevator); //} //function move12Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(11); // requestAnimationFrame(movElevator); //} //function moveB1Floor() { // setElevatorSpeed(0.2); // setElevatorFloor(-1); // requestAnimationFrame(movElevator); //} function newALight() { //light = newLight(); //newLight(); } function setLightValue() { var intensity = document.getElementById("LightIntensity").value; var distance = document.getElementById("LightDistance").value; var angle = document.getElementById("LightAngle").value; var penumbra = document.getElementById("LightPenumbra").value; var decay = document.getElementById("LightDecay").value; setLightValues(intensity, distance, angle, penumbra, decay); } function changeLightPower() { var value = document.getElementById('lightBar').value; console.log("power: " + value); setLightPower(value); } function openOrCloseLight() { //if (light != null) { if (curLightIsOpen) { curLightIsOpen = false; setLightOpenOrClose(curLightIsOpen);//, light } else { curLightIsOpen = true; setLightOpenOrClose(curLightIsOpen);//, light } //} } function changeColorHotspot() { changeColorForHotspot(10); } function loadHeatMap() { loadHeatmap(); } function hideModel() { hideObject(); } function openModel() { openObject(); } function transparentModel() { setObjectTransparent(); } function cancelTransparentModel() { cancelObjectTransparent(); } function getLevels() { //取得levels getLevelsData(); } function proFile() { profile(); } function showHeat() { const labels = [ `${(10).toFixed(2) }${"°C"}`, `${(40 / 2).toFixed(2)}${"°C"}`, `${(30).toFixed(2) }${"°C"}` ]; const colorStops = ['blue', 'green', 'yellow', 'red']; createHeatmapRect(labels, colorStops); } function showList() { consoleList(); } function createHeatmapRect(labels, colorStops) { if (!this.canvas) { return; } const context = this.canvas.getContext('2d'); let i, len; context.clearRect(0, 0, 300, 50); context.fillStyle = 'back';//white for (i = 0, len = labels.length; i < len; i++) { let x = 10 + 280 * 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, 300, 0); for (i = 0, len = colorStops.length; i < len; i++) { gradient.addColorStop(i / (len - 1), colorStops[i]); } context.fillStyle = gradient; context.fillRect(10, 20, 280, 20); } </script> </body> </html >