You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

977 lines
45 KiB

<!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 charset="utf-8" />
<style>
body, html {
font-family: "Arial";
}
* {
box-sizing: border-box;
}
.titlebox {
float: left;
padding: 0 5px;
margin: 5px 0px 0 56px;
background: #fff;
}
/* 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 */
}
.row:after {
content: "";
display: table;
clear: both;
}
/*
.dashboard {
width: 80%;
margin: auto;
text-align: center;
}*/
/*
.camera-feed {
border: 1px solid #000;
margin: 20px 0;
padding: 10px;
}*/
.recognition-results {
display: flex;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
overflow-y: auto;
}
.face-recognition-result {
position: relative;
text-align: center;
background-color: #5C5C5C;
padding: 0px;
max-width: 200px;
padding-top: 60px; /* 为绝对定位的元素预留空间 */
/*font-size: 0.9em;*/
}
.image-container {
position: relative;
margin-bottom: 0px;
}
.image-container img {
width: 120px;
height: 120px;
display: block;
margin-bottom: 0px;
object-fit: cover;
}
.text-info-placeholder,
.name-info-placeholder {
height: 20px; /* 占位元素的高度與 .text-info 和 .name-info 一致 */
visibility: hidden; /* 使占位元素不可见 */
}
/*
.default-image,
.visitor-image,
.database-image {
width: 105px;
height: 100px;
object-fit: cover;
}*/
.similarity {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
background-color: #d6d6d6;
color: rgb(0, 0, 0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-weight: bold;
/*font-size: 1em;*/
}
.text-info {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
/*font-size: 0.8em;*/
padding: 0px;
color: rgb(255, 255, 255);
background-color: #5C5C5C;
display: block;
}
.name-info {
font-weight: bold;
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 5;
color: rgb(255, 255, 255);
background-color: #5C5C5C;
padding: 0px;
display: block;
}
.group-tag {
font-weight: bold;
position: relative;
/*margin-top: 5px;*/
color: rgb(255, 255, 255);
background-color: #5C5C5C;
/*padding: 5px;*/
display: block;
}
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
<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 src="cookie.min.js"></script>
<script src="lang.js"></script>
<script src="lang_cookie.js"></script>
<script src="cgi.js"></script>
<script src="face.js"></script>
<script src="face_index.js"></script>
<script src="face_list.js"></script>
<script src="lib/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="easyui.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css" />
<script>
window.onerror = function (message, url, linenumber) {
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("owl.carousel.min.js") >= 1) {
loadScript("lib/owl.carousel.min.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("cgi.js") >= 1) {
loadScript("cgi.js", function () {
});
}
else if (url.search("label_names.js") >= 1) {
loadScript("label_names.js", function () {
});
}
else if (url.search("index.js") >= 1) {
loadScript("index.js", function () {
});
}
else if (url.search("face.js") >= 1) {
loadScript("face.js", function () {
});
}
else if (url.search("face_index.js") >= 1) {
loadScript("face_index.js", function () {
});
}
else if (url.search("face_list.js") >= 1) {
loadScript("face_list.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 {
var replaceUrl = 'http://' + window.location.hostname + ':' + GetUrlPort() + '/Aida/face_index.html';
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>
</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>
<div class="titlebox"><nobr id="TITLEBOX_PAGE_FACE"></nobr></div>
<div style="border:1px gray solid;padding:10px;margin:15px 15px 4px 15px">
<br>
<div class="row">
<div class="column" style="width: 50%;">
<input id="enable_face" type="checkbox" />
&nbsp;
<nobr id="IDC_CHECK_ENABLE_FACE"></nobr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="enable_show_zone" type="checkbox" name="enable_show_zone" />
&nbsp;
<nobr id="IDC_STATIC_SHOW_ZONE"></nobr>
<br>
<nobr id="IDC_STATIC_CONFIDENCE_FACE"></nobr>
<br><br>
<input class="easyui-slider" id="confidence_face" style="width:350px" />
<input id="enable_add_face_frequent_list" type="checkbox" />
&nbsp;
<nobr id="IDC_CHECK_ENABLE_ADDFREQUENTLIST"></nobr>
<br>
<div id="lpr_upon_triggered">
<input id="enable_lpr_upon_triggered" type="checkbox" />
&nbsp;
<nobr id="IDC_CHECK_ENABLE_LPR_UPON_TRIGGERED"></nobr>
<br>
</div>
<img src="images/info-2-32X32.png" style="vertical-align:middle;" />&nbsp;
<nobr id="IDC_STATIC_ENCODER_JPEG_NOTICE"></nobr><br>
<nobr id="IDC_STATIC_ENCODER_JPEG_NOTICE2"></nobr>
</div>
<div class="column" style="width: 50%;">
<div class="div-f">
<canvas id="CanvasTripwire_all"></canvas>
</div>
</div>
</div>
</div>
<div>
<div align="center">
<input align="center" id="IDOK" type="button" value=" Set " onclick="func_setanpr()" style="background-color:#6c87d4;color:white;height:36px;width:300px;" />
</div>
</div>
<div class="recognition-results" style="position:absolute;background: #5C5C5C;margin-top:5px;left:0px;">
<div class="face-recognition-result">
<div class="text-info-placeholder"></div>
<div class="name-info-placeholder"></div>
<div class="text-info"></div>
<div class="name-info"></div>
<div class="image-container" id="face_jpg_1">
<img src="images/icon_face.png">
<div class="similarity"></div>
<img src="images/icon_face.png">
</div>
<div class="group-tag"></div>
</div>
</div>
<script>
// UI Interface
func_get_lang_cookie();
document.getElementById("IDC_STATIC_SHOW_ZONE").innerHTML = IDC_STATIC_SHOW_ZONE;
document.getElementById("IDC_CHECK_ENABLE_FACE").innerHTML = IDC_CHECK_ENABLE_FACE;
document.getElementById("IDC_CHECK_ENABLE_ADDFREQUENTLIST").innerHTML = IDC_CHECK_ENABLE_ADDFREQUENTLIST;
document.getElementById("IDC_STATIC_ENCODER_JPEG_NOTICE").innerHTML = IDC_STATIC_ENCODER_JPEG_NOTICE;
document.getElementById("IDC_STATIC_ENCODER_JPEG_NOTICE2").innerHTML = IDC_STATIC_ENCODER_JPEG_NOTICE2;
document.getElementById("IDC_STATIC_CONFIDENCE_FACE").innerHTML = IDC_STATIC_CONFIDENCE_FACE;
document.getElementById("TITLEBOX_PAGE_FACE").innerHTML = TITLEBOX_PAGE_FACE;
document.getElementById("IDC_CHECK_ENABLE_LPR_UPON_TRIGGERED").innerHTML = IDC_CHECK_ENABLE_LPR_UPON_TRIGGERED;
$('#IDOK').val(IDOK);
var count_zone = 0;
var points_x_config = new Array(MAX_DETECTION_ZONE);
var points_y_config = new Array(MAX_DETECTION_ZONE);
var enable_ambulance = "No";
var enable_lpr_upon_triggered = "No";
var levenshtein_distance = "0";
var enable_cloud = "No";
var tab_view_size = new Array(2);
{
for (var i = 0; i < MAX_DETECTION_ZONE; i++) {
points_x_config[i] = new Array(MAX_SIZE_POINTS);
points_y_config[i] = new Array(MAX_SIZE_POINTS);
}
}
var image_width = GetMaxWidth();
var image_height = GetMaxHeight();
func_getZoneData();
var checkbox_enable_show_zone = document.querySelector("input[name=enable_show_zone]");
checkbox_enable_show_zone.addEventListener('change', function () {
if ($('#enable_show_zone').is(":checked")) {
func_getZoneData();
createCanvasTrafficLight_anpr([{
x: Math.round(points_x_config[0][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[1][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[2][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[3][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[4][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[5][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[6][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[7][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][5] * image_height / tab_view_size[1])
}]);
createCanvasTrafficLight();
func_show_all_zone();
}
else {
if (typeof canvasTripwire_all !== 'undefined') {
//Clear all objects
while (canvasTripwire_all.getObjects().length > 0) {
var items = canvasTripwire_all.getObjects();
if (items[canvasTripwire_all.getObjects().length - 1]) {
canvasTripwire_all.remove(items[canvasTripwire_all.getObjects().length - 1]);
}
}
}
click_canvas_all = 0;
canvasTripwire_all.requestRenderAll();
}
});
createCanvasTrafficLight_anpr([{
x: Math.round(points_x_config[0][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[0][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[0][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[1][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[1][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[1][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[2][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[2][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[2][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[3][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[3][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[3][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[4][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[4][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[4][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[5][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[5][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[5][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[6][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[6][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[6][5] * image_height / tab_view_size[1])
}],
[{
x: Math.round(points_x_config[7][0] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][0] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][1] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][1] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][2] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][2] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][3] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][3] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][4] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][4] * image_height / tab_view_size[1])
}, {
x: Math.round(points_x_config[7][5] * image_width / tab_view_size[0]), y: Math.round(points_y_config[7][5] * image_height / tab_view_size[1])
}]);
createCanvasTrafficLight();
$("#confidence_face").slider({
mode: 'h',//v,h
showTip: true,
//将最大最小值对调
// reversed:true,
// disabled:true,
min: 0,
max: 100,
// step:2.5,
//提示格式函数
tipFormatter: function (value) {
return value;
},
onChange: function (newValue, oldValue) {
},
onSlideStart: function (value) {
},
onSlideEnd: function (value) {
}
});
func_get_lang_cookie();
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);
}
function GetUrlPort() {
var url_href = window.location.href;
var arr_url = url_href.split(":")[2].split("/")[0];
return arr_url;
}
function waitSeconds(iMilliSeconds) {
var counter = 0,
start = new Date().getTime(),
end = 0;
while (counter < iMilliSeconds) {
end = new Date().getTime();
counter = end - start;
}
}
function validatingJSON(json) {
var checkedjson;
try {
checkedjson = JSON.parse(json); //JSON parse only for try catch
//console.log("json OK");
//console.log(json);
} catch (e) {
checkedjson = null;
console.log(e);//the character would be drop sometimes, for example the label "class_id" may be "clas_id".
//console.log(json);
}
return checkedjson;
}
function func_setanpr() {
k_index = 0;
makeProgress();
}
function makeProgress() {
if (k_index >= 0 && k_index < 100) {
k_index++;
updateProgressBar();
// console.log("k_index:" + k_index);
if (k_index === 1) {
scrollToTop();
sendConfigData();
k_index = 94;
} else if (k_index === 100) {
k_index = -1;
}
setTimeout(makeProgress, 200);
}
}
function updateProgressBar() {
const progressBar = $(".progress-bar");
progressBar.css({
"visibility": (k_index < 100) ? "visible" : "hidden",
"width": (k_index < 100) ? `${k_index}%` : "0%"
});
}
function scrollToTop() {
$('html, body').scrollTop(0);
}
function sendConfigData() {
const json_data = createConfigData();
console.log("json_data: ", json_data);
$.ajax({
url: "/setconfigfile",
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");
},
success: function () {
console.log("Success write to config.json");
console.info();
},
error: function () {
console.log("Failed to write to config.json");
console.warn();
k_index++;
if (k_index <= 94) {
waitSeconds(500);
sendConfigData();
}
}
});
}
function createConfigData() {
return JSON.stringify({
view_setting: {
camera01: {
enable_face: $('#enable_face').is(":checked") ? "Yes" : "No",
confidence: $('#confidence_face').val(),
enable_add_face_frequent_list: $('#enable_add_face_frequent_list').is(":checked") ? "Yes" : "No",
}
}
});
}
function waitSeconds(ms) {
const start = Date.now();
while (Date.now() - start < ms) { }
}
function func_setelement(name_, value_) {
$.ajax({
url: "/setconfig?ch=1&" + name_ + "=" + value_,
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 () {
//console.info();
},
error: function () {
console.warn();
}
});
return false;
}
function func_getZoneData() {
$.ajax({
url: "/getconfigfile?ch=all",
type: "GET",
async: false,
beforeSend: function (xmlHttp) {
xmlHttp.setRequestHeader("If-Modified-Since", "0");
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
},
success: function (retdata) {
//var jsonbuf = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
var jsonbuf = validatingJSON(retdata);
console.log("retdata : ", jsonbuf);
enable_cloud = jsonbuf["system_setting"]["enable_cloud"];
tab_view_size = jsonbuf["view_setting"]["camera01"]["tab_view_size"].split("x");
tab_view_size[0] = parseInt(tab_view_size[0], 10);
tab_view_size[1] = parseInt(tab_view_size[1], 10);
count_zone = jsonbuf["view_setting"]["camera01"]["count_zone"];
enable_ambulance = jsonbuf["view_setting"]["camera01"]["enable_ambulance"];
enable_lpr_upon_triggered = jsonbuf["view_setting"]["camera01"]["enable_lpr_upon_triggered"];
levenshtein_distance = jsonbuf["view_setting"]["camera01"]["levenshtein_distance"];
confidence_face = jsonbuf["view_setting"]["camera01"]["confidence"];
if (jsonbuf != null) {
for (var i = 0; i < MAX_DETECTION_ZONE; i++) {
for (var j = 0; j < MAX_SIZE_POINTS; j++) {
points_x_config[i][j] = jsonbuf["view_setting"]["camera01"]["detection_zone"][i]["x" + (j + 1).toString()];
points_y_config[i][j] = jsonbuf["view_setting"]["camera01"]["detection_zone"][i]["y" + (j + 1).toString()];
}
}
}
if (enable_cloud == "Yes") {
}
else {
document.getElementById("lpr_upon_triggered").style.display = "none";
}
if (jsonbuf["view_setting"]["camera01"]["enable_face"] == 'Yes')
$('#enable_face').prop("checked", true);
else
$('#enable_face').prop("checked", false);
if (enable_lpr_upon_triggered == "Yes")
$('#enable_add_face_frequent_list').prop("checked", true);
else
$('#enable_lpr_upon_triggered').prop("checked", false);
if (jsonbuf["view_setting"]["camera01"]["enable_add_face_frequent_list"] == 'Yes')
$('#enable_add_face_frequent_list').prop("checked", true);
else
$('#enable_add_face_frequent_list').prop("checked", false);
$('#confidence_face').val(confidence_face);
},
error: function (retdata) {
console.warn(retdata);
}
});
}
function func_show_all_zone() {
if (typeof canvasTripwire_all !== 'undefined') {
//Clear all objects
while (canvasTripwire_all.getObjects().length > 0) {
var items = canvasTripwire_all.getObjects();
if (items[canvasTripwire_all.getObjects().length - 1]) {
canvasTripwire_all.remove(items[canvasTripwire_all.getObjects().length - 1]);
}
}
}
if (get_check_edit1() === 1) {
disabelIteraction(canvasTripwire1.getObjects()[0]);
Edit1();
}
if (get_check_edit2() === 1) {
disabelIteraction(canvasTripwire2.getObjects()[0]);
Edit2();
}
if (get_check_edit3() === 1) {
disabelIteraction(canvasTripwire3.getObjects()[0]);
Edit3();
}
if (get_check_edit4() === 1) {
disabelIteraction(canvasTripwire4.getObjects()[0]);
Edit4();
}
if (get_check_edit5() === 1) {
disabelIteraction(canvasTripwire5.getObjects()[0]);
Edit5();
}
if (get_check_edit6() === 1) {
disabelIteraction(canvasTripwire6.getObjects()[0]);
Edit6();
}
if (get_check_edit7() === 1) {
disabelIteraction(canvasTripwire7.getObjects()[0]);
Edit7();
}
if (get_check_edit8() === 1) {
disabelIteraction(canvasTripwire8.getObjects()[0]);
Edit8();
}
var object1 = fabric.util.object.clone(canvasTripwire1.getObjects()[0]);
var object2 = fabric.util.object.clone(canvasTripwire2.getObjects()[0]);
var object3 = fabric.util.object.clone(canvasTripwire3.getObjects()[0]);
var object4 = fabric.util.object.clone(canvasTripwire4.getObjects()[0]);
var object5 = fabric.util.object.clone(canvasTripwire5.getObjects()[0]);
var object6 = fabric.util.object.clone(canvasTripwire6.getObjects()[0]);
var object7 = fabric.util.object.clone(canvasTripwire7.getObjects()[0]);
var object8 = fabric.util.object.clone(canvasTripwire8.getObjects()[0]);
if (count_zone >= 1) {
canvasTripwire_all.add(object1);
if (count_zone >= 2) {
canvasTripwire_all.add(object2);
if (count_zone >= 3) {
canvasTripwire_all.add(object3);
if (count_zone >= 4) {
canvasTripwire_all.add(object4);
if (count_zone >= 5) {
canvasTripwire_all.add(object5);
if (count_zone >= 6) {
canvasTripwire_all.add(object6);
if (count_zone >= 7) {
canvasTripwire_all.add(object7);
if (count_zone == 8) {
canvasTripwire_all.add(object8);
}
}
}
}
}
}
}
}
click_canvas_all = count_zone;
canvasTripwire_all.requestRenderAll();
}
getValue();
localStorage.setItem('face_success', 'OK');
</script>
</body>
</html>