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.
1208 lines
43 KiB
1208 lines
43 KiB
var canvasTripwire_tof; |
|
var canvasTripwire_camera; |
|
var canvasTripwire_all; |
|
var click_canvas_all = 0; |
|
|
|
var TOF_VIEW_CANVAS_X = 640; |
|
var TOF_VIEW_CANVAS_Y = 480; |
|
var TOF_IMG_WIDTH = 640; |
|
var TOF_IMG_HEIGHT = 480; |
|
|
|
var data_tof = ""; |
|
var bbox_count = 0; |
|
var plate_count = 0; |
|
var plate_idx = 0; |
|
var ai_json; |
|
var complete_data = ""; |
|
var complete_flag = 0; |
|
var content_len = 0; |
|
var datas; |
|
var n1 = -1, n2 = -1, n2_temp = -1; |
|
var wait_count = 0; |
|
|
|
var clear_count = 0; |
|
|
|
var tof_json_install_angle; |
|
var tof_json_enable_camera; |
|
var tof_json_enable_tof_ground; |
|
// var tof_json_enable_tof_wall; |
|
var tof_json_camera_ip; |
|
var tof_json_camera_port; |
|
var tof_json_camera_username; |
|
var tof_json_camera_password; |
|
|
|
var tof_json_enable_ip_setting = ""; |
|
|
|
var tof_json_distance_options; |
|
var tof_json_distance_threshold; |
|
var tof_json_distance_min_max; |
|
var tof_json_height_options; |
|
var tof_json_height_threshold; |
|
var tof_json_height_min_max; |
|
|
|
var tof_json_ground_x; |
|
var tof_json_ground_y; |
|
|
|
var checkPTZ = ""; |
|
|
|
var k_index = -1; |
|
|
|
var clickPointRadius = 4; |
|
|
|
var groundPoint = null; |
|
var groundPointRadius = 4; |
|
var groundPointText = null; |
|
|
|
var textColor = "red";//black |
|
var stroke_color = "red"; |
|
|
|
var debugMode = 0; // 0 : release , 1 : debug |
|
|
|
// ======================================================================= |
|
|
|
function func_getToFSettings() { |
|
$.ajax({ |
|
url: "/gettof", |
|
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(retdata); |
|
tof_json_install_angle = jsonbuf["install_angle"]; |
|
tof_json_enable_camera = jsonbuf["enable_camera"]; |
|
tof_json_enable_tof_ground = jsonbuf["enable_tof_ground"]; |
|
|
|
tof_json_distance_options = jsonbuf["distance_options"]; |
|
tof_json_distance_min_max = jsonbuf["distance_min_max"]; |
|
tof_json_distance_threshold = jsonbuf["distance_threshold"]; |
|
tof_json_height_options = jsonbuf["height_options"]; |
|
tof_json_height_threshold = jsonbuf["height_threshold"]; |
|
tof_json_height_min_max = jsonbuf["height_min_max"]; |
|
|
|
tof_json_ground_x = jsonbuf["ground_x"]; |
|
tof_json_ground_y = jsonbuf["ground_y"]; |
|
|
|
// tof_json_enable_tof_wall = jsonbuf["enable_tof_wall"]; |
|
|
|
var jsoncamera = jsonbuf["camera"]; |
|
tof_json_enable_ip_setting = jsoncamera["ip_setting"]; |
|
tof_json_camera_ip = jsoncamera["camera_ip"]; |
|
tof_json_camera_port = jsoncamera["camera_port"]; |
|
tof_json_camera_username = jsoncamera["camera_username"]; |
|
tof_json_camera_password = jsoncamera["camera_password"]; |
|
|
|
if (debugMode) { |
|
console.log("func_getToFSettings():"); |
|
console.log("- tof_json_install_angle = ", tof_json_install_angle); |
|
console.log("- tof_json_enable_camera = ", tof_json_enable_camera); |
|
console.log("- tof_json_enable_tof_ground = ", tof_json_enable_tof_ground); |
|
// console.log("- tof_json_enable_tof_wall = ", tof_json_enable_tof_wall); |
|
console.log("- tof_json_enable_ip_setting = ", tof_json_enable_ip_setting); |
|
console.log("- tof_json_camera_ip = ", tof_json_camera_ip); |
|
console.log("- tof_json_camera_port = ", tof_json_camera_port); |
|
console.log("- tof_json_camera_username = ", tof_json_camera_username); |
|
console.log("- tof_json_camera_password = ", tof_json_camera_password); |
|
|
|
console.log("- tof_json_distance_options = ", tof_json_distance_options); |
|
console.log("- tof_json_distance_threshold = ", tof_json_distance_threshold); |
|
console.log("- tof_json_height_options = ", tof_json_height_options); |
|
console.log("- tof_json_height_threshold = ", tof_json_height_threshold); |
|
} |
|
|
|
}, |
|
error: function (retdata) { |
|
console.warn(retdata); |
|
} |
|
|
|
}); |
|
} |
|
|
|
function func_showToFSettings() { |
|
if (debugMode) { |
|
console.log("func_showToFSettings():"); |
|
console.log("- tof_json_install_angle = ", tof_json_install_angle); |
|
console.log("- tof_json_enable_camera = ", tof_json_enable_camera); |
|
console.log("- tof_json_enable_tof_ground = ", tof_json_enable_tof_ground); |
|
// console.log("- tof_json_enable_tof_wall = ", tof_json_enable_tof_wall); |
|
console.log("- tof_json_camera_ip = ", tof_json_camera_ip); |
|
console.log("- tof_json_camera_port = ", tof_json_camera_port); |
|
console.log("- tof_json_camera_username = ", tof_json_camera_username); |
|
console.log("- tof_json_camera_password = ", tof_json_camera_password); |
|
|
|
console.log("- tof_json_distance_options = ", tof_json_distance_options); |
|
console.log("- tof_json_distance_threshold = ", tof_json_distance_threshold); |
|
console.log("- tof_json_height_options = ", tof_json_height_options); |
|
console.log("- tof_json_height_threshold = ", tof_json_height_threshold); |
|
} |
|
|
|
$('#install_angle').val(tof_json_install_angle); |
|
$('#camera_ip').val(tof_json_camera_ip); |
|
$('#camera_port').val(tof_json_camera_port); |
|
$('#camera_username').val(tof_json_camera_username); |
|
$('#camera_password').val(tof_json_camera_password); |
|
|
|
$('#distance_options').val(tof_json_distance_options); |
|
$('#distance_min_max').val(tof_json_distance_min_max); |
|
|
|
$('#distance_threshold').slider('setValue', tof_json_distance_threshold); |
|
|
|
$('#height_options').val(tof_json_height_options); |
|
$('#height_min_max').val(tof_json_height_min_max); |
|
|
|
$('#height_threshold').slider('setValue', tof_json_height_threshold); |
|
|
|
if(tof_json_enable_camera == true) |
|
{ |
|
document.getElementById("enable_camera").checked = true; |
|
document.getElementById("ptz_view").style.display = "block"; |
|
document.getElementById("tof_view").style.width = "50%"; |
|
document.getElementById("tof_settings").style.width = "50%"; |
|
|
|
document.getElementById("camera_setting_block").style.display = "block"; |
|
//document.getElementById("camera_setting_block2").style.display = "block"; |
|
document.getElementById("tof_settings0").style.display = "none"; |
|
}else{ |
|
document.getElementById("enable_camera").checked = false; |
|
document.getElementById("ptz_view").style.display = "none"; |
|
document.getElementById("tof_view").style.width = "100%"; |
|
document.getElementById("tof_settings").style.width = "50%"; |
|
|
|
document.getElementById("camera_setting_block").style.display = "none"; |
|
//document.getElementById("camera_setting_block2").style.display = "none"; |
|
document.getElementById("tof_settings0").style.display = "block"; |
|
} |
|
|
|
if(tof_json_enable_ip_setting == true){ |
|
tof_json_enable_ip_setting = true; |
|
document.getElementById("enable_ip_setting").checked = true; |
|
var cleanIP = func_IPfilter(document.getElementById("camera_ip").value); |
|
|
|
checkPTZ = showRGBimage( |
|
cleanIP, // remoteIP |
|
document.getElementById("camera_username").value, // account |
|
document.getElementById("camera_password").value // password |
|
); |
|
} |
|
else { |
|
tof_json_enable_ip_setting = false; |
|
document.getElementById("enable_ip_setting").checked = false; |
|
} |
|
|
|
if(tof_json_enable_tof_ground == true) |
|
{ |
|
document.getElementById("enable_ground").checked = true; |
|
enable_tof_ground(); |
|
} |
|
else |
|
{ |
|
document.getElementById("enable_ground").checked = false; |
|
enable_tof_ground(); |
|
} |
|
|
|
// if(tof_json_enable_tof_wall == true) |
|
// { |
|
// document.getElementById("enable_wall").checked = true; |
|
// } |
|
// else |
|
// { |
|
// document.getElementById("enable_wall").checked = false; |
|
// } |
|
} |
|
|
|
function func_IPfilter(text) { |
|
var filterConditionHTTP = "http://"; |
|
var filterConditionSlash = "/"; |
|
|
|
// console.log("IP address input text:", text); |
|
|
|
if (text.includes(filterConditionHTTP)) { |
|
// console.log("'" + filterConditionHTTP + "' exist :", text.includes(filterConditionHTTP)); |
|
text = text.replace(filterConditionHTTP, ''); |
|
} |
|
|
|
while (text.includes(filterConditionSlash)) { |
|
// console.log("'" + filterConditionSlash + "' exist :", text.includes(filterConditionSlash)); |
|
text = text.replace(filterConditionSlash, ''); |
|
} |
|
|
|
// console.log("clean IP address:", text); |
|
return text; |
|
} |
|
|
|
function camera_view_toggle() { |
|
if ($('#enable_camera').is(":checked")) { |
|
tof_json_enable_camera = true; |
|
document.getElementById("ptz_view").style.display = "block"; |
|
document.getElementById("tof_view").style.width = "50%"; |
|
document.getElementById("tof_settings").style.width = "50%"; |
|
|
|
document.getElementById("camera_setting_block").style.display = "block"; |
|
//document.getElementById("camera_setting_block2").style.display = "block"; |
|
document.getElementById("tof_settings0").style.display = "none"; |
|
} |
|
else { |
|
tof_json_enable_camera = false; |
|
document.getElementById("ptz_view").style.display = "none"; |
|
document.getElementById("tof_view").style.width = "100%"; |
|
document.getElementById("tof_settings").style.width = "50%"; |
|
|
|
document.getElementById("camera_setting_block").style.display = "none"; |
|
//document.getElementById("camera_setting_block2").style.display = "none"; |
|
document.getElementById("tof_settings0").style.display = "block"; |
|
} |
|
} |
|
|
|
// 2023-01-05 add pcd view |
|
// function camera_view_toggle() { |
|
// if ($('#enable_camera').is(":checked")) { |
|
// tof_json_enable_camera = true; |
|
// document.getElementById("pcd_view").style.display = "block"; |
|
// document.getElementById("ptz_view").style.display = "block"; |
|
// document.getElementById("tof_view").style.width = "33%"; |
|
// document.getElementById("tof_settings").style.width = "25%"; |
|
|
|
// document.getElementById("camera_setting_block").style.display = "block"; |
|
// document.getElementById("camera_setting_block2").style.display = "block"; |
|
// document.getElementById("tof_settings0").style.display = "none"; |
|
// } |
|
// else { |
|
// tof_json_enable_camera = false; |
|
// document.getElementById("pcd_view").style.display = "none"; |
|
// document.getElementById("ptz_view").style.display = "none"; |
|
// document.getElementById("tof_view").style.width = "100%"; |
|
// document.getElementById("tof_settings").style.width = "25%"; |
|
|
|
// document.getElementById("camera_setting_block").style.display = "none"; |
|
// document.getElementById("camera_setting_block2").style.display = "none"; |
|
// document.getElementById("tof_settings0").style.display = "block"; |
|
// } |
|
// } |
|
|
|
|
|
|
|
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; |
|
} |
|
|
|
|
|
|
|
// =========================================================================================================== |
|
|
|
// 2023-01-05 original |
|
function createCanvasCamera() { |
|
canvasTripwire_camera = new fabric.Canvas('canvasTripwireCamera', { |
|
height: TOF_VIEW_CANVAS_Y,//window.innerHeight |
|
width: TOF_VIEW_CANVAS_X//window.innerWidth |
|
}); |
|
canvasTripwire_camera.requestRenderAll(); |
|
} |
|
|
|
function createCanvasToF() { |
|
canvasTripwire_tof = new fabric.Canvas('CanvasTripwireToF', { |
|
height: TOF_VIEW_CANVAS_Y,//window.innerHeight |
|
width: TOF_VIEW_CANVAS_X//window.innerWidth |
|
}); |
|
|
|
canvasTripwire_tof.requestRenderAll(); |
|
} |
|
|
|
// function createCanvasCamera() { |
|
// canvasTripwire_camera = new fabric.Canvas('canvasTripwireCamera', { |
|
// height: 450,//window.innerHeight |
|
// width: 600//window.innerWidth |
|
// }); |
|
// canvasTripwire_camera.requestRenderAll(); |
|
// } |
|
|
|
// function createCanvasToF() { |
|
// canvasTripwire_tof = new fabric.Canvas('CanvasTripwireToF', { |
|
// height: 450,//window.innerHeight |
|
// width: 600//window.innerWidth |
|
// }); |
|
|
|
// canvasTripwire_tof.requestRenderAll(); |
|
// } |
|
|
|
|
|
// =========================================================================================================== |
|
|
|
function enable_camera_change(){ |
|
camera_view_toggle(); |
|
func_setelement("enable_camera", tof_json_enable_camera); |
|
} |
|
|
|
function func_setelement(name_, value_) { |
|
if (debugMode) |
|
console.log("func_setelement input:", name_, " , value:", value_); |
|
|
|
$.ajax({ |
|
url: "/settofconfig?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 (res) { |
|
console.info(res); |
|
}, |
|
error: function (err) { |
|
console.warn(err); |
|
} |
|
}); |
|
return false; |
|
} |
|
|
|
// tmp mark ( not using ) |
|
// var g_max_protected_objects = 2; |
|
// var g_enable_show_pixel = 0; |
|
// var radar_msg; |
|
// var radar_dot = []; |
|
// var radar_id_num = 10; |
|
// var trial_array = {}; |
|
|
|
// function GetAlarmToF(alarm_data) { |
|
// // console.log("GetAlarmToF"); |
|
// if (!!alarm_data) { |
|
// var datas; |
|
// var radar_json; |
|
// var complete_data = ""; |
|
// var n1 = -1, n2 = -1, n2_temp = -1; |
|
|
|
// var max_protected_objects = 3; |
|
// // var max_protected_objects = g_max_protected_objects; |
|
// // if (g_enable_show_pixel === 1) { |
|
// // max_protected_objects = g_max_protected_objects + 2; |
|
// // } |
|
|
|
// complete_data = complete_data.concat(alarm_data); |
|
|
|
// // n1 = complete_data.indexOf('{"AiRadar"'); |
|
// n1 = complete_data.indexOf('"AiRadar"'); |
|
|
|
// // n2_temp = complete_data.indexOf('"Type"'); |
|
// n2_temp = complete_data.indexOf('"Speed"'); |
|
|
|
// // n2 = complete_data.indexOf('}]}', n2_temp); |
|
// n2 = complete_data.indexOf('}]}', n2_temp); |
|
|
|
// if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) { |
|
// // Ken 2022-09-22 |
|
// // console.log("complete_data"); |
|
// // console.log(complete_data); |
|
|
|
// wait_count = 0; |
|
// clear_count = 0; |
|
|
|
// complete_data = complete_data.replace(',"AiRadar"', ',\r\{"AiRadar"') |
|
|
|
// // console.log("complete_data"); |
|
// // console.log(complete_data); |
|
|
|
// datas = complete_data.split(/\r\n|\r/); |
|
// complete_data = ""; |
|
|
|
// // console.log("datas"); |
|
// // console.log(datas); |
|
|
|
// //var check_cam_time = 0; |
|
// //var buffer_cam_time = ""; |
|
// for (var i = datas.length - 1; i >= 0; i--) { |
|
// /* |
|
// if (datas[i].substring(0, 8) == 'CamTime:') { |
|
// buffer_cam_time = ""; |
|
// buffer_cam_time = datas[i].slice(); |
|
// }*/ |
|
// if (datas[i].length > 11 && datas[i].substring(0, 11) == '{"AiRadar":' && datas[i].length < 8192 * 8) { |
|
// //datas[i].replace(/\\'/g, "'"); |
|
// //datas[i].replace('\"', '"'); |
|
|
|
// // console.log(datas[i]); |
|
|
|
// /* |
|
// datas[i].replace('\n', ''); |
|
// datas[i].replace('\r', ''); |
|
// datas[i].replace('\t', ''); |
|
// datas[i].replace('\\', ''); |
|
// */ |
|
|
|
// /* |
|
// var alarm_test = '{"AiEngine":[{"id":0,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":59,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":1,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":83,"y":136,"w":215,"h":168,"parent_idx":-1,"behavior_id":0},{"id":1,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":43,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":2,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":158,"y":538,"w":218,"h":144,"parent_idx":-1,"behavior_id":0},{"id":2,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":82,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":3,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":342,"y":175,"w":321,"h":196,"parent_idx":-1,"behavior_id":0},{"id":3,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":49,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":6,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":362,"y":578,"w":253,"h":132,"parent_idx":-1,"behavior_id":0},{"id":4,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":69,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":4,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":714,"y":608,"w":239,"h":130,"parent_idx":-1,"behavior_id":0},{"id":5,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":31,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":5,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":1035,"y":663,"w":340,"h":179,"parent_idx":-1,"behavior_id":0}],"Count":6}'; |
|
|
|
// ai_json = JSON.parse(alarm_test);*/ |
|
|
|
// /* |
|
// if (index_ == 0) { |
|
// index_ = 1; |
|
// alert(ai_json); |
|
// }*/ |
|
|
|
// var temp = null; |
|
// temp = datas[i].slice(); |
|
|
|
// radar_json = JSON.parse(temp); |
|
// //radar_json = validatingJSON(temp); |
|
|
|
// // console.log("radar_json", radar_json); |
|
|
|
// // radar_msg = radar_json; |
|
|
|
|
|
// datas[i] = null; |
|
// //check_cam_time = 1; |
|
// break; |
|
// } |
|
|
|
// } |
|
// /* |
|
// if (check_cam_time === 1) { |
|
// if (last_cam_time === "") { |
|
// last_cam_time = buffer_cam_time; |
|
// count_the_same_cam_time++; |
|
// } |
|
// else if (last_cam_time === buffer_cam_time) { |
|
// count_the_same_cam_time++; |
|
// } |
|
// else { |
|
// last_cam_time = buffer_cam_time; |
|
// console.log(count_the_same_cam_time); |
|
// count_the_same_cam_time = 0; |
|
// } |
|
// }*/ |
|
// if (radar_json != null) { |
|
// bbox_count = radar_json.Count; |
|
// } |
|
// else { |
|
// bbox_count = 0; |
|
// } |
|
|
|
// plate_count = 0; |
|
// plate_idx = 0; |
|
|
|
// /* |
|
// if (bbox_count == 0) { |
|
// clear_count_2++; |
|
// } |
|
// else { |
|
// clear_count_2 = 3; |
|
// }*/ |
|
// /*if (clear_count_2 >= 3) */ |
|
// { |
|
// //clear_count_2 = 0; |
|
|
|
// // RefreshCanvasObject(max_protected_objects); |
|
// } |
|
|
|
// //console.log("bbox_count: " + bbox_count.toString()); |
|
// radar_id_num = (Math.random() * 100 % 10) + 1; |
|
// // console.log("radar_id_num", radar_id_num); |
|
// if (radar_json != null && (canvasTripwire_speed.getObjects().indexOf(section_line1) != -1)) { |
|
// // console.log("radar_circle.radar_line.get('x1')"); |
|
|
|
|
|
// // console.log("canvasTripwire_speed.getObjects(radar_dot)", canvasTripwire_speed.getObjects(radar_dot)); |
|
// // while (canvasTripwire_speed.getObjects().indexOf(radar_dot) != -1) { |
|
// // canvasTripwire_speed.remove(radar_dot); |
|
|
|
// // } |
|
// // console.log("add circle_ptz indexOf:", canvasTripwire_speed.getObjects().indexOf(circle_ptz)); |
|
// // if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) == -1) { |
|
// // RefreshradarDot(4); |
|
// // } else if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) != -1) { |
|
// // RefreshradarDot(5); |
|
// // } |
|
|
|
// // for (var id_index = 0; id_index < 10; id_index++) { |
|
// // canvasTripwire_speed.remove(radar_dot[id_index]); |
|
// // } |
|
// // console.log("radar_json.AiRadar.RadarArray.length", radar_json.AiRadar.RadarArray.length); |
|
// // console.log("canvasTripwire_speed.getObjects().indexOf(0)", canvasTripwire_speed.getObjects().indexOf(radar_dot)); |
|
|
|
// var d = new Date(); |
|
// // console.log(d); |
|
// var getTime_tmp = d.getTime(); |
|
|
|
// //steven modify |
|
// var a_x = radar_circle.radar_line.get('x1'); |
|
// var a_y = radar_circle.radar_line.get('y1'); |
|
// var b_x = radar_circle.radar_line.get('x2'); |
|
// var b_y = radar_circle.radar_line.get('y2'); |
|
// var ab_len = Math.sqrt((a_x - b_x) * (a_x - b_x) + (a_y - b_y) * (a_y - b_y)); |
|
// var distance_meter = document.getElementById("slider_distance").value; |
|
// var scalex = ab_len / distance_meter; |
|
// var rotate_theta = (Math.atan((b_y - a_y) / (b_x - a_x + 0.001)) * 180 / Math.PI) - 90; |
|
|
|
// //console.log(" sucess log radar data a x,y", a_x, a_y, "b x,y", b_x, b_y); |
|
|
|
// if (b_x >= a_x) { |
|
// document.getElementById("world_radar_degree").innerHTML = 270 + Math.round(rotate_theta); |
|
// } |
|
// else { |
|
// if (b_y >= a_y) { |
|
// document.getElementById("world_radar_degree").innerHTML = 180 + 270 + Math.round(rotate_theta); |
|
// } |
|
// else { |
|
// document.getElementById("world_radar_degree").innerHTML = 90 + Math.round(rotate_theta); |
|
// } |
|
// } |
|
// //steven modify |
|
|
|
// // console.log("trial_array", trial_array); |
|
// // draw_radar_dot(); |
|
|
|
// } |
|
// } |
|
// else { |
|
// wait_count++; |
|
// if (wait_count >= 3) { |
|
// wait_count = 0; |
|
// complete_data = ""; |
|
// } |
|
|
|
// clear_count++; |
|
// if (clear_count >= 3) { |
|
// clear_count = 0; |
|
// // if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) == -1) { |
|
// // RefreshradarDot(4); |
|
// // } else if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) != -1) { |
|
// // RefreshradarDot(5); |
|
// // } |
|
// // RefreshCanvasObject(max_protected_objects); |
|
// } |
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// ############################################################# |
|
|
|
|
|
function GetUrlPort() { |
|
var url_href = window.location.href; |
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
return arr_url; |
|
} |
|
|
|
var tof_GetRequest = null; |
|
var tof_time_canvas = 250; |
|
var tof_speed = 99999; |
|
var tof_times_update_canvas = 0; |
|
var tof_avg_speed = 7000; |
|
var tof_imgUrl = ""; |
|
// var get_bg_count = 0; |
|
|
|
function tofGetRequest() { |
|
clearInterval(tof_GetRequest); |
|
tof_GetRequest = setInterval(function GetRequest_set_interval() { |
|
var current_page = localStorage.getItem('current_page'); |
|
|
|
if (current_page === 'tof') { |
|
// TODO: |
|
// data_tof = sessionStorage.getItem('getalarmmotion_data'); |
|
// GetAlarmToF(data_tof); |
|
|
|
var NowDate = new Date(); |
|
var h = NowDate.getHours(); |
|
var m = NowDate.getMinutes(); |
|
var s = NowDate.getSeconds(); |
|
var ms = NowDate.getMilliseconds(); |
|
|
|
var tofImgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/snap?' + 'tof_' + h + '_' + m + '_' + s + '_' + ms; |
|
tof_imgUrl = tofImgUrl; |
|
tof_times_update_canvas++; |
|
|
|
if (tof_times_update_canvas >= 100) { |
|
|
|
tofMeasureBW((speed) => { |
|
tof_speed = speed; |
|
}) |
|
|
|
if (debugMode) |
|
console.log(tof_speed + " KB/s"); //215 KB/sec |
|
|
|
tof_times_update_canvas = 0; |
|
|
|
if (tof_speed != 99999) { |
|
tof_avg_speed = tof_avg_speed * 0.95 + tof_speed * 0.05; |
|
} |
|
|
|
if (tof_speed >= 15000 && tof_avg_speed >= 15000) { |
|
tof_time_canvas = 100; |
|
} |
|
else if (tof_speed >= 10000 && tof_avg_speed >= 10000) { |
|
tof_time_canvas = 250; |
|
} |
|
else if (tof_speed >= 7000 && tof_avg_speed >= 7000) { |
|
tof_time_canvas = 250; |
|
} |
|
else if (tof_speed >= 4000 && tof_avg_speed >= 4000) { |
|
tof_time_canvas = 250; |
|
} |
|
else { |
|
tof_time_canvas = 250; |
|
} |
|
|
|
clearInterval(tof_GetRequest); |
|
tof_GetRequest = setInterval(GetRequest_set_interval, tof_time_canvas); |
|
} |
|
|
|
try { |
|
fabric.Image.fromURL(tofImgUrl, function (img) { |
|
if (img != null && img._element != null) { |
|
img.set({ |
|
scaleX: TOF_VIEW_CANVAS_X / img.width, |
|
scaleY: TOF_VIEW_CANVAS_Y / img.height, |
|
}); |
|
canvasTripwire_tof.setBackgroundImage(img, () => canvasTripwire_tof.renderAll.bind(canvasTripwire_tof)); |
|
img = null; |
|
} |
|
}); |
|
} |
|
catch (e) { |
|
console.log(e); |
|
} |
|
|
|
if (canvasTripwire_tof) { |
|
canvasTripwire_tof.renderAll(); |
|
} |
|
|
|
tofImgUrl = null; |
|
} |
|
// =========================================================================================================== |
|
}, tof_time_canvas); |
|
} |
|
|
|
var g_GetPTZimg = null; |
|
|
|
function showRGBimage(remoteIP, account, password) { |
|
clearInterval(g_GetPTZimg); |
|
g_GetPTZimg = setInterval(function GetPTZimg_set_interval(remoteIP, account, password) { |
|
// console.log("remoteIP: ", remoteIP, ", account: ", account, ", password: ", password); |
|
var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random(); |
|
|
|
if (canvasTripwire_camera) { |
|
canvasTripwire_camera.renderAll(); |
|
} |
|
try { |
|
fabric.Image.fromURL(remotesnapUrl, function (img) { |
|
if (img != null && img._element != null) { |
|
img.set({ |
|
scaleX: TOF_VIEW_CANVAS_X / img.width, |
|
scaleY: TOF_VIEW_CANVAS_Y / img.height, |
|
}); |
|
canvasTripwire_camera.setBackgroundImage(img, () => canvasTripwire_camera.renderAll.bind(canvasTripwire_camera)); |
|
img = null; |
|
} |
|
}); |
|
} |
|
catch (e) { |
|
console.log(e); |
|
} |
|
|
|
remotesnapUrl = null; |
|
|
|
}, tof_time_canvas, remoteIP, account, password); |
|
} |
|
|
|
function tofMeasureBW(fn) { |
|
var tofStartTime, tofEndTime, tofFileSize; |
|
var tof_xhr = new XMLHttpRequest(); |
|
tof_xhr.onreadystatechange = () => { |
|
if (tof_xhr.readyState === 2) { |
|
tofStartTime = Date.now(); |
|
} |
|
if (tof_xhr.readyState === 4 && tof_xhr.status === 200) { |
|
tofEndTime = Date.now(); |
|
tofFileSize = tof_xhr.responseText.length; |
|
//console.log(tofFileSize); |
|
|
|
if (tofEndTime > tofStartTime) { |
|
var speed = tofFileSize / ((tofEndTime - tofStartTime) / 1000) / 1024; |
|
fn && fn(Math.floor(speed)); |
|
} |
|
else { |
|
var speed = 99999; |
|
fn && fn(Math.floor(speed)); |
|
} |
|
} |
|
} |
|
tof_xhr.open("GET", tof_imgUrl, true); |
|
tof_xhr.send(); |
|
} |
|
|
|
// ======================================================================= |
|
// depth point |
|
var clickPoint = null; |
|
var pointInfoText = null; |
|
|
|
function getPointText(x, y, depth, distance, height) { |
|
var text = ""; |
|
|
|
var meterToft = 3.2808 |
|
|
|
var depthmeter = Math.floor(depth * 1000) / 1000; |
|
var depthft = Math.floor(depth * meterToft * 1000) / 1000; |
|
|
|
var distancemeter = Math.floor(distance * 1000) / 1000; |
|
var distanceft = Math.floor(distance * meterToft * 1000) / 1000; |
|
|
|
var heightmeter = Math.floor(height * 1000) / 1000; |
|
var heightft = Math.floor(height * meterToft * 1000) / 1000; |
|
|
|
if (tof_json_enable_tof_ground) { |
|
text = "x: " + x + ", " + |
|
"y: " + y + ", " + |
|
"Inst: " + depthmeter + "M " + depthft + " Ft,\n" + |
|
"Dist: " + distancemeter + "M " + distanceft + " Ft, " + |
|
"Ht: " + heightmeter + "M " + heightft + "Ft"; |
|
} else { |
|
text = "x: " + x + ", " + |
|
"y: " + y + ", " + |
|
"Inst: " + depthmeter + "M " + depthft + "Ft"; |
|
//"Dist: " + distancemeter + "M " + distanceft + "Ft, " + |
|
//"Ht: " + heightmeter + "M " + heightft + "Ft" |
|
} |
|
return text; |
|
} |
|
|
|
function initClickPoint() { |
|
if (debugMode) |
|
console.log("[tof.js] initClickPoint()"); |
|
|
|
clickPoint = makeCircle(-clickPointRadius, -clickPointRadius, clickPointRadius, 'red'); |
|
clickPoint.name = "clickPoint"; |
|
canvasTripwire_tof.add(clickPoint); |
|
|
|
var depth = 0.0; |
|
var height = 0.0; |
|
var distance = 0.0; |
|
var textW = 50; |
|
var textH = 50; |
|
|
|
canvasTripwire_tof.on({ |
|
// 'object:moving': onObjectMoving, |
|
// 'object:moved': onObjectMoved, |
|
// 'mouse:wheel': MouseWheel, |
|
// 'mouse:over': MouseOver, |
|
// 'mouse:out': MouseOut, |
|
// 'mouse:move': MouseMove, |
|
'mouse:down': MouseDown |
|
}); |
|
|
|
function MouseDown(event) { |
|
// console.log(event.e); |
|
if (enableClickPoint) { |
|
var rect = document.getElementById("CanvasTripwireToF").getBoundingClientRect(); |
|
var x = parseInt(event.e.clientX - rect.left); |
|
var y = parseInt(event.e.clientY - rect.top); |
|
var halfRadius = ( clickPointRadius / 2 ); |
|
|
|
|
|
// update click point position |
|
clickPoint.set({ |
|
'left': parseInt(x - halfRadius ), |
|
'top': parseInt(y - halfRadius ) |
|
}); |
|
|
|
var tofX = parseInt(x * ( TOF_IMG_WIDTH / TOF_VIEW_CANVAS_X )); |
|
var tofY = parseInt(y * ( TOF_IMG_HEIGHT / TOF_VIEW_CANVAS_Y )); |
|
|
|
if (debugMode) { |
|
console.log("Canvas coordinate x: " + x, " , y: " + y); |
|
console.log("ToF coordinate tofX: " + tofX, " , tofY: " + tofY); |
|
} |
|
|
|
// AJAX -> gynet -> tof driver : get depth info by pixel coordinate |
|
$.ajax({ |
|
url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + tofX + "&y=" + tofY + "&angle=" + $('#install_angle').val(), |
|
// url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + tofX + "&y=" + tofY, |
|
method: "GET", |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
}, |
|
success: function (res) { |
|
// console.info(res); |
|
var jsonTmp = JSON.parse(res); |
|
depth = jsonTmp['depth']; |
|
height = jsonTmp['height']; |
|
distance = jsonTmp['distance']; |
|
}, |
|
error: function (err) { |
|
console.warn(err); |
|
} |
|
}); |
|
|
|
// update click point info |
|
if (!(pointInfoText === null)) { |
|
canvasTripwire_tof.remove(pointInfoText); |
|
} |
|
|
|
|
|
var textX = x + halfRadius; |
|
|
|
var yOffset = 5; |
|
var textY = y + halfRadius + yOffset; |
|
|
|
// prevent hidden text situation |
|
var textBoundryX = 200; |
|
var textBoundryY = 40; |
|
if (textX > TOF_VIEW_CANVAS_X - textBoundryX) { |
|
textX -= textBoundryX; |
|
} |
|
if (textY > TOF_VIEW_CANVAS_Y - textBoundryY) { |
|
textY -= textBoundryY; |
|
textY -= yOffset; |
|
} |
|
|
|
pointInfoText = insertTextLabel_Color( |
|
textX, // left |
|
textY, // top |
|
textW, |
|
textH, |
|
getPointText( |
|
tofX, |
|
tofY, |
|
Number(depth).toFixed(3), |
|
Number(distance).toFixed(2), |
|
Number(height).toFixed(2) |
|
), // text info |
|
textColor, |
|
stroke_color |
|
); |
|
canvasTripwire_tof.add(pointInfoText); |
|
} |
|
} |
|
} |
|
|
|
|
|
// ======================================================================= |
|
// ground point |
|
|
|
|
|
function enable_tof_ground(){ |
|
tof_json_enable_tof_ground = $("#enable_ground").prop("checked"); |
|
|
|
if (debugMode) |
|
console.log("enable_tof_ground() checked:", tof_json_enable_tof_ground); |
|
|
|
if (tof_json_enable_tof_ground) { |
|
// canvasTripwire_tof.remove(clickPoint); |
|
// canvasTripwire_tof.remove(pointInfoText); |
|
initGroundPoint(); |
|
} else { |
|
canvasTripwire_tof.remove(groundPoint); |
|
canvasTripwire_tof.remove(groundPointText); |
|
|
|
// hide click point and text |
|
if (!(clickPoint === null)) { |
|
clickPoint.set({ |
|
'left': -(clickPointRadius*2), |
|
'top': -(clickPointRadius*2) |
|
}); |
|
} |
|
|
|
if (!(pointInfoText === null)) { |
|
canvasTripwire_tof.remove(pointInfoText); |
|
} |
|
} |
|
|
|
func_setelement("enable_tof_ground", tof_json_enable_tof_ground); |
|
} |
|
|
|
var enableClickPoint = true; |
|
|
|
function setToFGround(x, y, angle) { |
|
var groundPointHeight = 0; |
|
|
|
$.ajax({ |
|
url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + x + "&y=" + y + "&angle=" + angle + "&settofheight=1", |
|
method: "GET", |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
}, |
|
success: function (res) { |
|
// console.info(res); |
|
var jsonTmp = JSON.parse(res); |
|
// 02-04 update ground point text |
|
groundPointHeight = jsonTmp['height']; |
|
|
|
if (debugMode) { |
|
console.log("[tof.js] ground point res:" , jsonTmp); |
|
console.log("[tof.js] ground point height: ", groundPointHeight); |
|
console.log("[tof.js] successfully set device height "); |
|
} |
|
|
|
}, |
|
error: function (err) { |
|
if (debugMode) { |
|
console.log("[tof.js] set device height error"); |
|
console.warn(err); |
|
} |
|
} |
|
}); |
|
|
|
return groundPointHeight; |
|
} |
|
|
|
|
|
function initGroundPoint() { |
|
var canvasCenterX = parseInt(tof_json_ground_x,10); |
|
var canvasCenterY = parseInt(tof_json_ground_y, 10); |
|
|
|
var initX = canvasCenterX - groundPointRadius; |
|
var initY = canvasCenterY - groundPointRadius; |
|
|
|
var textW = 50; |
|
var textH = 50; |
|
|
|
var angle = tof_json_install_angle; |
|
|
|
groundPoint = makeCircle(initX, initY, groundPointRadius, 'green'); |
|
groundPoint.name = "groundPoint"; |
|
canvasTripwire_tof.add(groundPoint); |
|
|
|
var groundHeight = setToFGround(initX, initY, angle); |
|
|
|
var meterToft = 3.2808 |
|
|
|
var groundHeightmeter = Math.floor(groundHeight * 1000) / 1000; |
|
var groundHeighthft = Math.floor(groundHeight * meterToft * 1000) / 1000; |
|
|
|
groundPointText = insertTextLabel_Color( |
|
canvasCenterX - groundPointRadius, // left |
|
canvasCenterY + groundPointRadius, // top |
|
textW, |
|
textH, |
|
"Ground: " + groundHeightmeter + " M " + groundHeighthft + " Ft", |
|
textColor, |
|
stroke_color |
|
); |
|
canvasTripwire_tof.add(groundPointText); |
|
|
|
// ground point events |
|
|
|
canvasTripwire_tof.on('mouse:move', function(e) { |
|
// console.log(e); |
|
// console.log("[tof.js] initGroundPoint - tof_json_enable_tof_ground:", tof_json_enable_tof_ground); |
|
// if (tof_json_enable_tof_ground) { |
|
if (e.target === null) { |
|
console.log("check target null >>> can create click point"); |
|
enableClickPoint = true; |
|
} else { |
|
// console.log("hover on something >>> do not create clik point"); |
|
// console.log("e.target.name: ", e.target.name); |
|
if ( (e.target.name == "groundPoint") || (e.target.name == "wallPoint") ) { |
|
enableClickPoint = false; |
|
} else { |
|
// TODO add ground point condition |
|
enableClickPoint = true; |
|
} |
|
} |
|
// } else { |
|
// enableClickPoint = false; |
|
// } |
|
|
|
// console.log("[tof.js] initGroundPoint - enableClickPoint:", enableClickPoint); |
|
}); |
|
|
|
canvasTripwire_tof.on({ |
|
'object:moving': onObjectMoving, |
|
'object:moved': onObjectMoved, |
|
// 'mouse:over': onMouseOver, |
|
// 'mouse:out': MouseOut, |
|
// 'mouse:move': MouseMove, |
|
// 'mouse:down': MouseDown |
|
}); |
|
|
|
function onObjectMoving(e) { |
|
|
|
if (e.target.name == "groundPoint") { |
|
var p = e.target; |
|
// console.log(p); |
|
// var toLeft = p.left; |
|
// var toTop = p.top; |
|
if (p.left < 0) |
|
p.left = 0; |
|
if (p.left > (TOF_VIEW_CANVAS_X - (groundPointRadius*2))) |
|
p.left = (TOF_VIEW_CANVAS_X - (groundPointRadius*2)); |
|
if (p.top < 0) |
|
p.top = 0; |
|
if (p.top > (TOF_VIEW_CANVAS_Y - (groundPointRadius*2))) |
|
p.top = (TOF_VIEW_CANVAS_Y - (groundPointRadius*2)); |
|
|
|
// console.log("groundPoint moving | x: ", p.top, " , y: ", p.left); |
|
|
|
// update position |
|
groundPointText.set({ |
|
'left': p.left+(groundPointRadius*2), |
|
'top':p.top+(groundPointRadius*2) |
|
}); |
|
} |
|
|
|
canvasTripwire_tof.requestRenderAll(); |
|
} |
|
|
|
function onObjectMoved(e) { |
|
if (e.target.name == "groundPoint") { |
|
var p = e.target; |
|
|
|
var tofX = parseInt((p.left+groundPointRadius) * ( TOF_IMG_WIDTH / TOF_VIEW_CANVAS_X )); |
|
var tofY = parseInt((p.top+groundPointRadius) * ( TOF_IMG_HEIGHT / TOF_VIEW_CANVAS_Y )); |
|
|
|
tof_json_ground_x = tofX.toString(); |
|
tof_json_ground_y = tofY.toString(); |
|
|
|
if (debugMode) { |
|
console.log("[tof.js] ground point - onObjectMoved | x: ", p.left, " , y : ", p.top); |
|
console.log("[tof.js] ground point - tofX: " + tofX, " , tofY: " + tofY); |
|
} |
|
|
|
angle = $('#install_angle').val(); |
|
|
|
var groundHeight = setToFGround(tofX, tofY, angle); |
|
|
|
var meterToft = 3.2808 |
|
|
|
var groundHeightmeter = Math.floor(groundHeight * 1000) / 1000; |
|
var groundHeighthft = Math.floor(groundHeight * meterToft * 1000) / 1000; |
|
|
|
// update height and position |
|
canvasTripwire_tof.remove(groundPointText); |
|
groundPointText = insertTextLabel_Color( |
|
p.left+(groundPointRadius*2), // left |
|
p.top+(groundPointRadius*2), // top |
|
textW, |
|
textH, |
|
"Ground: " + groundHeightmeter + " M " + groundHeighthft + " Ft", |
|
textColor, |
|
stroke_color |
|
); |
|
canvasTripwire_tof.add(groundPointText); |
|
|
|
} |
|
} |
|
} |
|
|
|
// ======================================================================= |
|
// wall point |
|
|
|
// function enable_tof_wall(){ |
|
// console.log("enable_tof_wall() checked:"); |
|
// console.log($("#enable_wall").prop( "checked")); |
|
|
|
// var enable_tof_wall = $("#enable_wall").prop("checked"); |
|
|
|
// func_setelement("enable_tof_wall", enable_tof_wall); |
|
// } |
|
|
|
// ======================================================================= |
|
// Unit functions |
|
|
|
function insertTextLabel_Color(r_left, r_top, r_width, r_height, showtext, fill_color, stroke_color) { |
|
var textcontent; |
|
if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) { |
|
textcontent = new fabric.Text(showtext, { |
|
left: r_left, |
|
top: r_top, |
|
width: r_width, |
|
height: r_height, |
|
fontFamily: 'helvetica', |
|
fontSize: 15, |
|
fontWeight: '', |
|
// shadow: { color: 'black', blur: 5 }, |
|
fill: fill_color, |
|
stroke: stroke_color |
|
}); |
|
|
|
} |
|
else { |
|
textcontent = new fabric.Text(showtext, { |
|
left: 50, |
|
top: 50, |
|
width: 50, |
|
height: 50, |
|
fontFamily: 'helvetica', |
|
fontSize: 15, |
|
fontWeight: '', |
|
// shadow: { color: 'black', blur: 5 }, |
|
fill: fill_color, |
|
stroke: stroke_color |
|
}); |
|
} |
|
textcontent.setControlsVisibility({ |
|
bl: true, |
|
br: true, |
|
tl: true, |
|
tr: true, |
|
mt: true, |
|
mb: true, |
|
ml: true, |
|
mr: true, |
|
}); |
|
|
|
disabelIteraction(textcontent); |
|
|
|
return textcontent; |
|
} |
|
|
|
function makeCircle(left, top, radius, color) { |
|
var c = new fabric.Circle({ |
|
left: left - radius, |
|
top: top - radius, |
|
strokeWidth: 2, |
|
radius: radius, |
|
fill: color, |
|
stroke: '#FFFFFF' |
|
}); |
|
c.hasControls = c.hasBorders = false; |
|
|
|
return c; |
|
} |
|
|
|
|
|
function disabelIteraction(element) { |
|
//https://github.com/fabricjs/fabric.js/wiki/Preventing-object-modification |
|
element.lockMovementX = true; //Prevents horizontal movement |
|
element.lockMovementY = true; //Prevents vertical movement |
|
element.lockScalingX = true; //Prevents horizontal scaling |
|
element.lockScalingY = true; //Prevents vertical scaling |
|
element.lockUniScaling = true; //Prevents scaling in either X or Y direction but not in both. In other words, prevents non-proportional scaling of an object. |
|
element.lockRotation = true; //Prevents rotation |
|
element.selectable = false; |
|
element.evented = false; |
|
} |
|
|
|
|
|
function check_threshold(option) { |
|
var targetID = option + "_threshold"; |
|
var threshold = document.getElementById(targetID).value; |
|
|
|
if (threshold > 7.4 || threshold < 0.3) { |
|
alert("The threshold value shold be 0.3 ~ 7.4. Please redefine the "+ option +" threshold, thanks."); |
|
$("#"+targetID).val(''); |
|
} |
|
} |