|
|
<!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" /> |
|
|
|
|
|
<nobr id="IDC_CHECK_ENABLE_FACE"></nobr> |
|
|
|
|
|
|
|
|
<input id="enable_show_zone" type="checkbox" name="enable_show_zone" /> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
<nobr id="IDC_CHECK_ENABLE_ADDFREQUENTLIST"></nobr> |
|
|
<br> |
|
|
|
|
|
<div id="lpr_upon_triggered"> |
|
|
<input id="enable_lpr_upon_triggered" type="checkbox" /> |
|
|
|
|
|
<nobr id="IDC_CHECK_ENABLE_LPR_UPON_TRIGGERED"></nobr> |
|
|
<br> |
|
|
</div> |
|
|
|
|
|
<img src="images/info-2-32X32.png" style="vertical-align:middle;" /> |
|
|
<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>
|
|
|
|