|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
|
|
|
<head> |
|
|
<meta http-equiv="cache-control" |
|
|
content="max-age=0" /> |
|
|
<meta http-equiv="cache-control" |
|
|
content="no-store" /> |
|
|
<meta http-equiv="expires" |
|
|
content="-1" /> |
|
|
<meta http-equiv="expires" |
|
|
content="Tue, 01 Jan 1980 1:00:00 GMT" /> |
|
|
<meta http-equiv="pragma" |
|
|
content="no-cache" /> |
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<!--meta http-equiv="refresh" content="300" />--> <!--Refresh each 5s--> |
|
|
<meta charset="utf-8" /> |
|
|
<style> |
|
|
|
|
|
body, |
|
|
html { |
|
|
font-family: "Arial"; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
/* Create two equal columns that floats next to each other */ |
|
|
.column { |
|
|
float: left; |
|
|
overflow: hidden; |
|
|
/*width: 33%;*/ |
|
|
padding-left: 10px; |
|
|
/*height: 300px;*/ |
|
|
margin: auto; |
|
|
/* Should be removed. Only for demonstration */ |
|
|
} |
|
|
|
|
|
/* Clear floats after the columns */ |
|
|
.keyrow { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
/*align-content: center;*/ |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
|
|
|
.row:after { |
|
|
content: ""; |
|
|
display: table; |
|
|
clear: both; |
|
|
} |
|
|
|
|
|
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ |
|
|
@media screen and (max-width: 800px) { |
|
|
.column { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
ul { |
|
|
list-style-type: none; |
|
|
margin: 0px; |
|
|
/*overflow: hidden;*/ |
|
|
overflow-y: scroll; |
|
|
} |
|
|
|
|
|
li { |
|
|
margin-left: -40px; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.titlebox { |
|
|
float: left; |
|
|
padding: 0 5px; |
|
|
margin: -30px 0 0 20px; |
|
|
background: #fff; |
|
|
} |
|
|
|
|
|
/* 2023-01-05 original */ |
|
|
.div-a { |
|
|
position: relative; |
|
|
width: 640px; |
|
|
height: 480px; |
|
|
} |
|
|
|
|
|
.div-b { |
|
|
position: relative; |
|
|
width: 640px; |
|
|
height: 480px; |
|
|
} |
|
|
|
|
|
/* 2023-01-05 add pcd view */ |
|
|
/* .div-a { |
|
|
position: relative; |
|
|
width: 600px; |
|
|
height: 450px; |
|
|
} |
|
|
|
|
|
.div-b { |
|
|
position: relative; |
|
|
width: 600px; |
|
|
height: 450px; |
|
|
} |
|
|
|
|
|
.div-c { |
|
|
position: relative; |
|
|
width: 600px; |
|
|
height: 450px; |
|
|
} */ |
|
|
|
|
|
.div-relative { |
|
|
position: relative; |
|
|
align-items: center; |
|
|
color: #000000; |
|
|
} |
|
|
|
|
|
/* add pcd view */ |
|
|
.info { |
|
|
position: fixed; |
|
|
top: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
color: #fff; |
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); |
|
|
} |
|
|
|
|
|
label { |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
/* hide the up and down arrows which are built in number type input */ |
|
|
/* Chrome, Safari, Edge, Opera */ |
|
|
input::-webkit-outer-spin-button, |
|
|
input::-webkit-inner-spin-button { |
|
|
-webkit-appearance: none; |
|
|
margin: 0; |
|
|
} |
|
|
/* Firefox */ |
|
|
input[type=number] { |
|
|
-moz-appearance: textfield; |
|
|
} |
|
|
</style> |
|
|
<!--meta http-equiv="refresh" content="300" />--> |
|
|
<!--Refresh each 5s--> |
|
|
<title>AI Engine</title> |
|
|
<script src="jquery_3_2_1.min.js"></script> |
|
|
<script src="fabric_jquery.easyui.min_compressed_on_nvr.js"></script> |
|
|
<script src="config.js"></script> |
|
|
<script> |
|
|
window.onerror = function (message, url, linenumber) { |
|
|
|
|
|
console.log('JavaScript error: ' + message + ' on line ' + linenumber + ' for ' + url); |
|
|
|
|
|
if (url.search("fabric_jquery.easyui.min_compressed_on_nvr.js") >= 1) { |
|
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("jquery_3_2_1.min.js") >= 1) { |
|
|
loadScript("jquery_3_2_1.min.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("config.js") >= 1) { |
|
|
loadScript("config.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("cookie.min.js") >= 1) { |
|
|
loadScript("cookie.min.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("lang.js") >= 1) { |
|
|
loadScript("lang.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("label_names.js") >= 1) { |
|
|
loadScript("label_names.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (url.search("lang_cookie.js") >= 1) { |
|
|
loadScript("lang_cookie.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (message.search("slider") >= 1) { |
|
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (message.search("myport") >= 1) { |
|
|
loadScript("config.js", function () { |
|
|
}); |
|
|
} |
|
|
else if (message.search("cookie") >= 1) { |
|
|
loadScript("cookie.min.js", function () { |
|
|
}); |
|
|
} |
|
|
else { |
|
|
//location.reload(); |
|
|
var replaceUrl = 'http://' + window.location.hostname + ':' + GetUrlPort() + '/Aida/tof.html'; |
|
|
//alert(replaceUrl); |
|
|
window.location.replace(replaceUrl); |
|
|
} |
|
|
} |
|
|
function GetUrlPort() { |
|
|
var url_href = window.location.href; |
|
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
|
|
return arr_url; |
|
|
} |
|
|
if (window.history.replaceState) { |
|
|
window.history.replaceState(null, null, window.location.href); |
|
|
} |
|
|
</script> |
|
|
<script src="cookie.min.js"></script> |
|
|
<script src="lang.js"></script> |
|
|
<script src="lang_cookie.js"></script> |
|
|
<!-- a113n added --> |
|
|
<!-- <link rel="stylesheet" href="ruler/ruler.min.css"> |
|
|
<script src="ruler/ruler.min.js"></script> --> |
|
|
|
|
|
<link rel="stylesheet" href="bootstrap.min.css"> |
|
|
<link rel="stylesheet" type="text/css" href="easyui.css"> |
|
|
<script src="tof.js"></script> |
|
|
|
|
|
<!-- 2023-01-05 add pcl.js --> |
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/pcl.js/dist/pcl.js"></script> --> |
|
|
</head> |
|
|
|
|
|
<body onContextMenu="window.event.returnValue=false"> |
|
|
|
|
|
<div class="progress" style="background-color:white"> |
|
|
<div class="progress-bar progress-bar-striped" style="min-width: 20px;visibility:hidden;"></div> |
|
|
</div> |
|
|
|
|
|
<!-- height = inner div height + 40 --> |
|
|
<div style="border:1px gray solid;padding:20px; height: 520px;margin:15px 15px 15px 15px"> |
|
|
<!-- add pcl.js --> |
|
|
<!-- <div style="border:1px gray solid;padding:20px; height: 490px;margin:15px 15px 15px 15px"> --> |
|
|
<div class="titlebox"> |
|
|
<nobr id="TITLEBOX_PAGE_TOF"></nobr> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<!-- 2023-01-05 2 views --> |
|
|
<div id="tof_view" class="column" style="width:100%;"> |
|
|
|
|
|
<div align="center" class="div-relative"> |
|
|
<div class="div-a"> |
|
|
<canvas id="CanvasTripwireToF"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="ptz_view" class="column" style="width:50%;display:none;"> |
|
|
<div align="center" class="div-relative"> |
|
|
<div class="div-b"> |
|
|
<canvas id="canvasTripwireCamera"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 2023-01-05 3 views : add pcd view ( https://pcljs.org/ ) --> |
|
|
<!-- <div id="tof_view" class="column" style="width:100%;"> |
|
|
<div align="center" class="div-relative"> |
|
|
<div class="div-a"> |
|
|
<canvas id="CanvasTripwireToF"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="ptz_view" class="column" style="width:33%;display:none;"> |
|
|
<div align="center" class="div-relative"> |
|
|
<div class="div-b"> |
|
|
<canvas id="canvasTripwireCamera"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="pcd_view" class="column" style="width:33%;display:none;"> |
|
|
<div align="center" class="div-relative"> |
|
|
<div class="div-c"> |
|
|
<canvas id="canvasTripwirePCD"></canvas> |
|
|
|
|
|
<div id="app"> |
|
|
<h1 |
|
|
id="progress" |
|
|
style="position: absolute; z-index: 9; right: 50%; top: 50%;" |
|
|
> |
|
|
Loading... |
|
|
</h1> |
|
|
|
|
|
<div id="container"> |
|
|
<canvas id="canvas"></canvas> |
|
|
<div |
|
|
style=" |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
color: #fff; |
|
|
" |
|
|
> |
|
|
<fieldset> |
|
|
|
|
|
<legend> Select display mode </legend> |
|
|
|
|
|
<div> |
|
|
<input type="radio" id="mix" name="display" value="mix" checked /> |
|
|
<label for="mix">Mix</label> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<input |
|
|
type="radio" |
|
|
id="original" |
|
|
name="display" |
|
|
value="original" |
|
|
/> |
|
|
<label for="original">Original</label> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<input |
|
|
type="radio" |
|
|
id="keypoints" |
|
|
name="display" |
|
|
value="keypoints" |
|
|
/> |
|
|
<label for="keypoints">Keypoints</label> |
|
|
</div> |
|
|
</fieldset> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> --> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- <div style="border:1px gray solid;padding:20px; height: 290px;margin:15px 15px 15px 15px"> --> |
|
|
<div style="border:1px gray solid;padding:20px; height: 210px;margin:15px 15px 15px 15px"> <!-- height = inner div height = 98 + 40 = 148 --> |
|
|
|
|
|
<div class="titlebox"> |
|
|
<nobr id="TITLEBOX_PAGE15"></nobr> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div id="tof_settings0" class="column" style="width: 27%;display:none"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="tof_settings" class="column" style="width: 50%;"> |
|
|
<nobr id="TITLEBOX_PAGE_TOF_SETTINGS"></nobr> |
|
|
<br> |
|
|
<nobr id="IDC_STATIC_INSTALL_ANGLE"></nobr> |
|
|
<select name="install_angle" id="install_angle" onchange="fucn_get_angle()"> |
|
|
<option value="0">0</option> |
|
|
<option value="30">30</option> |
|
|
<option value="45">45</option> |
|
|
<option value="60">60</option> |
|
|
<option value="90">90</option> |
|
|
</select> |
|
|
<nobr id="IDC_TOF_GROUND"></nobr> |
|
|
<input id="enable_ground" type="checkbox" onchange=enable_tof_ground(); /> |
|
|
<input id="btn_pcl" type="button" onclick="window.open('pcl/pcl.html', '_blank', 'resizable=yes,top=0,left=0,width=900,height=400');" value="PCL" style="background:#6c87d4;border-color:#6c87d4;color:white" /> |
|
|
<input id="btn_download" type="button" onclick="func_gettof3dpcd_data();" value="Download" style="background:#6c87d4;border-color:#6c87d4;color:white" /> |
|
|
<br> |
|
|
<!-- <nobr id="IDC_TOF_WALL"> </nobr> |
|
|
<input id="enable_wall" type="checkbox" onchange=enable_tof_wall(); /> --> |
|
|
<nobr id="IDC_TOF_DISTANCE_DETECTION"></nobr> |
|
|
<select name="distance_min_max" id="distance_min_max"> |
|
|
<option value="min">Min</option> |
|
|
<option value="max">Max</option> |
|
|
</select> |
|
|
<select name="distance_options" id="distance_options"> |
|
|
<option value="Off">Off</option> |
|
|
<option value="gt">></option> |
|
|
<option value="lt"><</option> |
|
|
</select> |
|
|
<br><br> |
|
|
<input class="easyui-slider" style="width:93%;" id="distance_threshold" /> |
|
|
<!-- |
|
|
<input id="distance_threshold" type="number" value="" style="width: 100px;" onkeydown="javascript: return event.keyCode == 69 ? false : true" onchange="check_threshold('distance')" /> |
|
|
<nobr> ( 0.3 ~ 7.4 )</nobr>--> |
|
|
<nobr id="IDC_TOF_HEIGHT_DETECTION"></nobr> |
|
|
<select name="height_min_max" id="height_min_max"> |
|
|
<option value="min">Min</option> |
|
|
<option value="max">Max</option> |
|
|
</select> |
|
|
<select name="height_options" id="height_options"> |
|
|
<option value="Off">Off</option> |
|
|
<option value="gt">></option> |
|
|
<option value="lt"><</option> |
|
|
</select> |
|
|
<br><br> |
|
|
<input class="easyui-slider" style="width:93%;" id="height_threshold" /> |
|
|
|
|
|
<nobr id="IDC_CHECK_ENABLE_CAMERA"></nobr> |
|
|
<input id="enable_camera" type="checkbox" onchange=enable_camera_change(); /> |
|
|
|
|
|
<!-- |
|
|
<input id="height_threshold" type="number" value="" style="width: 100px;" onkeydown="javascript: return event.keyCode == 69 ? false : true" onchange="check_threshold('height')" /> |
|
|
<nobr> ( 0.3 ~ 7.4 )</nobr>--> |
|
|
</div> |
|
|
|
|
|
<div id="camera_setting_block" class="column" style="width:50%;display:none;"> |
|
|
<nobr id="TITLEBOX_PAGE18"></nobr> |
|
|
<br> |
|
|
<nobr id="IDC_STATIC_IP_SETTING"></nobr> |
|
|
<input id="enable_ip_setting" type="checkbox" name="enable_ip_setting" /> |
|
|
<br> |
|
|
<nobr id="IDC_STATIC_IP_ADDRESS"></nobr> |
|
|
<input id="camera_ip" type="text" value="" style="width: 200px" /> |
|
|
<nobr id="IDC_STATIC_IP_PORT"></nobr> |
|
|
<input id="camera_port" type="number" value="" style="width: 200px;" onkeydown="javascript: return event.keyCode == 69 ? false : true" /> |
|
|
<br> |
|
|
<nobr id="IDC_STATIC_IP_USERNAME"></nobr> |
|
|
<input id="camera_username" type="text" value="" style="width: 200px" /> |
|
|
<nobr id="IDC_STATIC_IP_PASSWORD"></nobr> |
|
|
<input id="camera_password" type="password" value="" style="width: 200px" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
<div align="center"> |
|
|
<input align="center" id="IDOK" type="button" value=" Set " onclick="func_setToF_with_progress()" |
|
|
style="background-color:#6c87d4;color:white;height:36px;width:300px;" /> |
|
|
|
|
|
<input align="center" id="ID_DEFAULT" type="button" value=" Default " onclick="func_setToF_default_with_progress()" |
|
|
style="background-color:#6c87d4;color:white;height:36px;width:300px;" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style="border:1px gray solid;padding:10px;margin:4px 15px 4px 15px"> |
|
|
<img src="images/info-2-32X32.png" style="vertical-align:middle;" /> |
|
|
|
|
|
<!-- Note --> |
|
|
<nobr id="IDC_STATIC_TEXT_TOF_HELP_01"></nobr> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function fucn_get_angle() { |
|
|
console.log("install_angle value:", document.getElementById("install_angle").value); |
|
|
} |
|
|
|
|
|
/* |
|
|
loadScript("config.js", function () { |
|
|
loadScript("cookie.min.js", function () { |
|
|
loadScript("lang.js", function () { |
|
|
loadScript("lang_cookie.js", function () { |
|
|
//alert("all load"); |
|
|
|
|
|
}); |
|
|
}); |
|
|
}); |
|
|
});*/ |
|
|
|
|
|
function loadScript(url, callback) { |
|
|
var script = document.createElement("Script"); |
|
|
script.type = "text/javascript"; |
|
|
|
|
|
//IE 验证脚本是否下载完成 |
|
|
if (script.readyState) { |
|
|
script.onreadystatechange = function () { |
|
|
//readyState属性有5种取值 |
|
|
//uninitialized：初始状态 |
|
|
//loading：开始下载 |
|
|
//interactive：数据完成下载但尚不可用 |
|
|
//complete：数据已经准备就绪 |
|
|
//实际使用时，readyState的值并不像我们预想的那样有规律，实践发现使用readyState |
|
|
//最靠谱的方式是同时检查以下2个状态，只要其中1个触发，就认为脚本下载完成。 |
|
|
if (script.readyState == "loaded" || script.readyState == "complete") { |
|
|
//移除事件处理器，确保事件不会处理2次 |
|
|
script.onreadystatechange = null; |
|
|
callback(); |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
//其他浏览器 |
|
|
else { |
|
|
script.onload = function () { |
|
|
callback(); |
|
|
}; |
|
|
} |
|
|
|
|
|
script.src = url; |
|
|
//把新建的<Script>添加到<head>里比添加到<body>里更保险。 |
|
|
document.getElementsByTagName("head")[0].appendChild(script); |
|
|
} |
|
|
|
|
|
// =================================================================================== |
|
|
|
|
|
//UI Interface |
|
|
|
|
|
func_get_lang_cookie(); |
|
|
|
|
|
document.getElementById("IDC_CHECK_ENABLE_CAMERA").innerHTML = IDC_CHECK_ENABLE_CAMERA; |
|
|
document.getElementById("IDC_TOF_GROUND").innerHTML = IDC_TOF_GROUND; |
|
|
// document.getElementById("IDC_TOF_WALL").innerHTML = IDC_TOF_WALL; |
|
|
document.getElementById("IDC_TOF_DISTANCE_DETECTION").innerHTML = IDC_TOF_DISTANCE_DETECTION; |
|
|
document.getElementById("IDC_TOF_HEIGHT_DETECTION").innerHTML = IDC_TOF_HEIGHT_DETECTION; |
|
|
document.getElementById("IDC_STATIC_INSTALL_ANGLE").innerHTML = IDC_STATIC_INSTALL_ANGLE; |
|
|
document.getElementById("IDC_STATIC_IP_SETTING").innerHTML = IDC_STATIC_IP_SETTING; |
|
|
document.getElementById("IDC_STATIC_IP_ADDRESS").innerHTML = IDC_STATIC_IP_ADDRESS; |
|
|
document.getElementById("IDC_STATIC_IP_PORT").innerHTML = IDC_STATIC_IP_PORT; |
|
|
document.getElementById("IDC_STATIC_IP_USERNAME").innerHTML = IDC_STATIC_IP_USERNAME; |
|
|
document.getElementById("IDC_STATIC_IP_PASSWORD").innerHTML = IDC_STATIC_IP_PASSWORD; |
|
|
|
|
|
//apply |
|
|
$('#IDOK').val(IDOK); |
|
|
$("#ID_DEFAULT").val(IDC_STATIC_DEFAULT_BUTTON); |
|
|
$("#btn_download").val(IDC_STATIC_DOWNLOAD); |
|
|
|
|
|
|
|
|
document.getElementById("TITLEBOX_PAGE_TOF").innerHTML = TITLEBOX_PAGE_TOF; |
|
|
document.getElementById("TITLEBOX_PAGE15").innerHTML = TITLEBOX_PAGE15; |
|
|
document.getElementById("TITLEBOX_PAGE_TOF_SETTINGS").innerHTML = TITLEBOX_PAGE_TOF_SETTINGS; |
|
|
document.getElementById("TITLEBOX_PAGE18").innerHTML = TITLEBOX_PAGE18; |
|
|
|
|
|
// Note |
|
|
document.getElementById("IDC_STATIC_TEXT_TOF_HELP_01").innerHTML = IDC_STATIC_TEXT_TOF_HELP_01; |
|
|
|
|
|
var pcd_data = ""; |
|
|
|
|
|
$("#distance_threshold").slider({ |
|
|
//width: 300, |
|
|
//height: 300, |
|
|
//value: 12, |
|
|
mode: 'h',//v,h |
|
|
showTip: true, |
|
|
//将最大最小值对调 |
|
|
// reversed:true, |
|
|
// disabled:true, |
|
|
min: 0.3, |
|
|
max: 7.4, |
|
|
step:0.1, |
|
|
//提示格式函数 |
|
|
tipFormatter: function (value) { |
|
|
// return '['+value+']'; |
|
|
return value; |
|
|
}, |
|
|
onChange: function (newValue, oldValue) { |
|
|
// alert(newValue+" | "+oldValue); |
|
|
}, |
|
|
onSlideStart: function (value) { |
|
|
// alert(value); |
|
|
}, |
|
|
onSlideEnd: function (value) { |
|
|
// alert(value); |
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
$("#height_threshold").slider({ |
|
|
//width: 300, |
|
|
//height: 300, |
|
|
//value: 12, |
|
|
mode: 'h',//v,h |
|
|
showTip: true, |
|
|
//将最大最小值对调 |
|
|
// reversed:true, |
|
|
// disabled:true, |
|
|
min: 0.3, |
|
|
max: 7.4, |
|
|
step: 0.1, |
|
|
//提示格式函数 |
|
|
tipFormatter: function (value) { |
|
|
// return '['+value+']'; |
|
|
return value; |
|
|
}, |
|
|
onChange: function (newValue, oldValue) { |
|
|
// alert(newValue+" | "+oldValue); |
|
|
}, |
|
|
onSlideStart: function (value) { |
|
|
// alert(value); |
|
|
}, |
|
|
onSlideEnd: function (value) { |
|
|
// alert(value); |
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
function func_settoffile(json_data) { |
|
|
$.ajax({ |
|
|
url: "/settoffile", |
|
|
method: "POST", |
|
|
async: false, |
|
|
data: json_data, |
|
|
contentType: false, |
|
|
processData: false, |
|
|
beforeSend: function (xmlHttp) { |
|
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
}, |
|
|
success: function () { |
|
|
//console.info(); |
|
|
}, |
|
|
error: function () { |
|
|
console.warn(); |
|
|
|
|
|
k_index++; |
|
|
|
|
|
if (k_index <= 94) { |
|
|
waitSeconds(500); |
|
|
func_settoffile(json_data); |
|
|
} |
|
|
} |
|
|
}); |
|
|
return false; |
|
|
} |
|
|
|
|
|
k_index = 0; |
|
|
//make progress |
|
|
$(".progress-bar").css("visibility", "hidden"); |
|
|
function makeProgress_setToF() { |
|
|
console.log("makeProgress_setToF",k_index); |
|
|
if (k_index < 100 && k_index >= 0) { |
|
|
k_index = k_index + 1; |
|
|
$(".progress-bar").css("visibility","visible"); |
|
|
//$(".progress-bar").css("width", k_index + "%").text(k_index + " %"); |
|
|
$(".progress-bar").css("width", k_index + "%"); |
|
|
|
|
|
if (k_index == 1) { |
|
|
$('html, body').scrollTop(0); |
|
|
|
|
|
// set tof start |
|
|
camera_view_toggle(); |
|
|
|
|
|
var cleanIP = func_IPfilter(document.getElementById("camera_ip").value); |
|
|
if ($('#enable_ip_setting').is(":checked")) { |
|
|
tof_json_enable_ip_setting = true; |
|
|
showRGBimage( |
|
|
cleanIP, // remoteIP |
|
|
document.getElementById("camera_username").value, // account |
|
|
document.getElementById("camera_password").value // password |
|
|
); |
|
|
} else { |
|
|
tof_json_enable_ip_setting = false; |
|
|
clearInterval(g_GetPTZimg); |
|
|
var cxt = document.getElementById("canvasTripwireCamera").getContext("2d"); |
|
|
cxt.clearRect(0, 0, canvasTripwire_camera.width, canvasTripwire_camera.height); |
|
|
} |
|
|
|
|
|
//console.log("apply btn tof_json_enable_camera:", tof_json_enable_camera); |
|
|
|
|
|
var json_data = '{'; |
|
|
json_data += '"install_angle": ' + document.getElementById("install_angle").value + ','; |
|
|
json_data += '"enable_camera": ' + tof_json_enable_camera + ','; |
|
|
json_data += '"distance_options": "' + document.getElementById("distance_options").value + '",'; |
|
|
json_data += '"distance_threshold": "' + $('#distance_threshold').slider('getValue') + '",'; |
|
|
json_data += '"height_options": "' + document.getElementById("height_options").value + '",'; |
|
|
json_data += '"height_threshold": "' + $('#height_threshold').slider('getValue') + '",'; |
|
|
json_data += '"distance_min_max": "' + document.getElementById("distance_min_max").value + '",'; |
|
|
json_data += '"height_min_max": "' + document.getElementById("height_min_max").value + '",'; |
|
|
json_data += '"ground_x": "' + tof_json_ground_x + '",'; |
|
|
json_data += '"ground_y": "' + tof_json_ground_y + '",'; |
|
|
json_data += '"camera": {'; |
|
|
json_data += '"ip_setting": ' + tof_json_enable_ip_setting + ','; |
|
|
json_data += '"camera_ip": "' + cleanIP + '",'; |
|
|
json_data += '"camera_port": "' + document.getElementById("camera_port").value + '",'; |
|
|
json_data += '"camera_username": "' + document.getElementById("camera_username").value + '",'; |
|
|
json_data += '"camera_password": "' + document.getElementById("camera_password").value + '"'; |
|
|
json_data += '}}'; |
|
|
func_settoffile(json_data); |
|
|
|
|
|
k_index = 94; |
|
|
} |
|
|
else if (k_index == 95) { |
|
|
//console.log("makeProgress_settof END"); |
|
|
} |
|
|
else if (k_index == 100) { |
|
|
$(".progress-bar").css("visibility", "hidden"); |
|
|
//$(".progress-bar").css("width", "0%").text("0 %"); |
|
|
$(".progress-bar").css("width", "0%"); |
|
|
k_index = -1; |
|
|
} |
|
|
|
|
|
// Wait for sometime before running this script again |
|
|
setTimeout("makeProgress_setToF()", 200); |
|
|
} |
|
|
} |
|
|
|
|
|
function func_setToF_with_progress() { |
|
|
// makeProgress(); |
|
|
k_index = 0; |
|
|
makeProgress_setToF(); |
|
|
} |
|
|
|
|
|
|
|
|
function func_setToF_default() { |
|
|
$.ajax({ |
|
|
url: "/settofconfig?default", |
|
|
method: "GET", |
|
|
async: false, |
|
|
beforeSend: function (xmlHttp) { |
|
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
}, |
|
|
success: function (res) { |
|
|
console.info(res); |
|
|
}, |
|
|
error: function (err) { |
|
|
console.warn(err); |
|
|
} |
|
|
}); |
|
|
return false; |
|
|
} |
|
|
//make progress set tof default |
|
|
|
|
|
function makeProgress_setToF_default() { |
|
|
console.log("makeProgress_setToF_default",k_index); |
|
|
if (k_index < 100 && k_index >= 0) { |
|
|
k_index = k_index + 1; |
|
|
$(".progress-bar").css("visibility","visible"); |
|
|
//$(".progress-bar").css("width", k_index + "%").text(k_index + " %"); |
|
|
$(".progress-bar").css("width", k_index + "%"); |
|
|
|
|
|
if (k_index == 1) { |
|
|
$('html, body').scrollTop(0); |
|
|
|
|
|
k_index = 94; |
|
|
} |
|
|
else if (k_index == 95) { |
|
|
func_setToF_default(); |
|
|
} |
|
|
else if (k_index == 100) { |
|
|
func_getToFSettings(); |
|
|
func_showToFSettings(); |
|
|
$(".progress-bar").css("visibility", "hidden"); |
|
|
//$(".progress-bar").css("width", "0%").text("0 %"); |
|
|
$(".progress-bar").css("width", "0%"); |
|
|
k_index = -1; |
|
|
} |
|
|
// Wait for sometime before running this script again |
|
|
setTimeout("makeProgress_setToF_default()", 200); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function func_setToF_default_with_progress() { |
|
|
// makeProgress(); |
|
|
k_index = 0; |
|
|
makeProgress_setToF_default(); |
|
|
} |
|
|
|
|
|
function sleep(milliseconds) { |
|
|
var start = new Date().getTime(); |
|
|
for (var i = 0; i < 1e7; i++) { |
|
|
if ((new Date().getTime() - start) > milliseconds) { |
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
var count_reload = 0; |
|
|
function func_getreload() { |
|
|
$.ajax({ |
|
|
url: "/getconfig?reload=1", |
|
|
method: "GET", |
|
|
async: false, |
|
|
beforeSend: function (xmlHttp) { |
|
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
}, |
|
|
//data : JSON.stringify(data), |
|
|
success: function (retdata) { |
|
|
count_reload++; |
|
|
if (retdata === "Reload OK.") { |
|
|
count_reload = 0; |
|
|
//console.log("Reload OK."); |
|
|
} |
|
|
else { |
|
|
if (count_reload <= 3) { |
|
|
setTimeout(func_getreload(), 2000); |
|
|
} |
|
|
else { |
|
|
count_reload = 0; |
|
|
} |
|
|
} |
|
|
//console.info(); |
|
|
}, |
|
|
error: function () { |
|
|
console.warn(); |
|
|
} |
|
|
}); |
|
|
return false; |
|
|
} |
|
|
|
|
|
createCanvasToF(); |
|
|
createCanvasCamera(); |
|
|
|
|
|
func_getToFSettings(); |
|
|
func_showToFSettings(); |
|
|
|
|
|
tofGetRequest(); |
|
|
localStorage.setItem('tof_success', 'OK'); |
|
|
|
|
|
initClickPoint(); |
|
|
|
|
|
function download(data, filename, type) { |
|
|
var file = new Blob([data], { type: type }); |
|
|
if (window.navigator.msSaveOrOpenBlob) // IE10+ |
|
|
window.navigator.msSaveOrOpenBlob(file, filename); |
|
|
else { // Others |
|
|
var a = document.createElement("a"), |
|
|
url = URL.createObjectURL(file); |
|
|
a.href = url; |
|
|
a.download = filename; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
setTimeout(function () { |
|
|
document.body.removeChild(a); |
|
|
window.URL.revokeObjectURL(url); |
|
|
}, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
function func_gettof3dpcd_data() { |
|
|
pcd_data = ""; |
|
|
|
|
|
$.ajax({ |
|
|
url: "/gettof3dpcd?res=480", |
|
|
type: "GET", |
|
|
async: false, |
|
|
beforeSend: function (xmlHttp) { |
|
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
}, |
|
|
success: function (retdata) { |
|
|
//var jsonbuf = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); |
|
|
pcd_data = retdata.replaceAll("HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=utf-8; charset=utf-8\r\n\r\n", ""); |
|
|
//console.log(pcd_data); |
|
|
|
|
|
var today = new Date(); |
|
|
var file_name = today.getFullYear().toString() + "_" + (today.getMonth() + 1).toString() + "_" + today.getDate().toString() + "_" + today.getHours().toString() + "_" + today.getMinutes().toString() + "_" + today.getSeconds().toString() + "_" + today.getMilliseconds().toString() + ".pcd"; |
|
|
|
|
|
download(pcd_data, file_name, 'text/plain'); |
|
|
|
|
|
}, |
|
|
error: function (retdata) { |
|
|
console.warn(retdata); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
<!-- <script> |
|
|
// 2023-01-05 add pcd view |
|
|
// async function testPCLjs() { |
|
|
// // Initialization, PCL is a global object. |
|
|
// await PCL.init(); |
|
|
// console.log("PCL init done..."); |
|
|
// // ... |
|
|
// } |
|
|
// testPCLjs(); |
|
|
|
|
|
import * as PCL from "pcl.js"; |
|
|
import PointCloudViewer from "pcl.js/PointCloudViewer"; |
|
|
import { |
|
|
BufferGeometry, |
|
|
PointsMaterial, |
|
|
Points, |
|
|
Float32BufferAttribute |
|
|
} from "three"; |
|
|
import pkg from "package.json"; |
|
|
|
|
|
const PCL_VERSION = pkg.dependencies["pcl.js"].replace("^", ""); |
|
|
var cloud; |
|
|
var keypoints; |
|
|
var viewer; |
|
|
|
|
|
main(); |
|
|
|
|
|
async function main() { |
|
|
const data = await getPCDData("bun0.pcd"); |
|
|
|
|
|
await PCL.init({ |
|
|
url: `https://cdn.jsdelivr.net/npm/pcl.js@${PCL_VERSION}/dist/pcl-core.wasm` |
|
|
}); |
|
|
|
|
|
cloud = PCL.loadPCDData(data); |
|
|
const resolution = PCL.computeCloudResolution(cloud); |
|
|
const tree = new PCL.SearchKdTree(); |
|
|
keypoints = new PCL.PointCloud(); |
|
|
const iss = new PCL.ISSKeypoint3D(); |
|
|
|
|
|
iss.setSearchMethod(tree); |
|
|
iss.setSalientRadius(6 * resolution); |
|
|
iss.setNonMaxRadius(4 * resolution); |
|
|
iss.setThreshold21(0.975); |
|
|
iss.setThreshold32(0.975); |
|
|
iss.setMinNeighbors(5); |
|
|
iss.setInputCloud(cloud); |
|
|
iss.compute(keypoints); |
|
|
|
|
|
showMainPage(); |
|
|
showPointCloud(); |
|
|
bindEvent(); |
|
|
} |
|
|
|
|
|
async function getPCDData(url) { |
|
|
return await fetch(url).then((res) => res.arrayBuffer()); |
|
|
} |
|
|
|
|
|
function showMainPage() { |
|
|
document.getElementById("progress").style.display = "none"; |
|
|
document.getElementById("container").style.display = "block"; |
|
|
} |
|
|
|
|
|
function showPointCloud() { |
|
|
viewer = new PointCloudViewer( |
|
|
document.getElementById("canvas"), |
|
|
window.innerWidth, |
|
|
window.innerHeight |
|
|
); |
|
|
|
|
|
mixCloud(); |
|
|
viewer.setCameraParameters({ position: { x: 0, y: 0, z: 1.5 } }); |
|
|
|
|
|
window.addEventListener("resize", () => { |
|
|
viewer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
} |
|
|
|
|
|
function bindEvent() { |
|
|
const radioOriginal = document.getElementById("original"); |
|
|
const radioKeypoints = document.getElementById("keypoints"); |
|
|
const radioMix = document.getElementById("mix"); |
|
|
|
|
|
[radioOriginal, radioKeypoints, radioMix].forEach((el) => { |
|
|
el.addEventListener("change", (e) => { |
|
|
const mode = e.target.id; |
|
|
|
|
|
viewer.setPointCloudProperties({ |
|
|
sizeAttenuation: false, |
|
|
color: "#FFF", |
|
|
size: 1 |
|
|
}); |
|
|
viewer.removePointCloud(); |
|
|
viewer.removePointCloud("point-cloud-mix"); |
|
|
switch (mode) { |
|
|
case "original": |
|
|
viewer.addPointCloud(cloud); |
|
|
break; |
|
|
case "keypoints": |
|
|
viewer.addPointCloud(keypoints); |
|
|
viewer.setPointCloudProperties({ color: "#F00", size: 6 }); |
|
|
break; |
|
|
default: |
|
|
mixCloud(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function mixCloud() { |
|
|
viewer.addPointCloud(cloud); |
|
|
|
|
|
const position = []; |
|
|
const points = keypoints.points; |
|
|
|
|
|
for (var i = 0; i < points.size; i++) { |
|
|
const point = points.get(i); |
|
|
position.push(point.x, point.y, point.z); |
|
|
} |
|
|
|
|
|
const geometry = new BufferGeometry(); |
|
|
const material = new PointsMaterial({ |
|
|
sizeAttenuation: false, |
|
|
size: 6, |
|
|
color: "#F00" |
|
|
}); |
|
|
|
|
|
geometry.setAttribute("position", new Float32BufferAttribute(position, 3)); |
|
|
|
|
|
const mesh = new Points(geometry, material); |
|
|
mesh.name = "point-cloud-mix"; |
|
|
viewer.scene.add(mesh); |
|
|
} |
|
|
|
|
|
</script> --> |
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
