|
|
/* [radar_speed_share.js] Sections: |
|
|
Initialization for shared variables |
|
|
Radar View init |
|
|
Radar tab UI |
|
|
Draw radar points |
|
|
Draw FoV section |
|
|
Radar tab ruler ( a113n ) |
|
|
Unit functions |
|
|
*/ |
|
|
|
|
|
// ======================================================================= |
|
|
// Initialization for shared variables |
|
|
var radarViewWidth = 800; |
|
|
var radarViewHeight = 600; |
|
|
|
|
|
var json_world_camera_height; |
|
|
var json_world_camera_degree; |
|
|
var json_distance_format; |
|
|
var json_distance_meter; |
|
|
var json_world_radar_height; |
|
|
var json_world_camera_distance; |
|
|
var json_trial_life_time; |
|
|
var json_radar_section_degree; |
|
|
var json_camera_ip; |
|
|
var json_camera_port; |
|
|
var json_camera_username; |
|
|
var json_camera_password; |
|
|
var json_world_radar_height; |
|
|
var json_target_x_axis; |
|
|
var json_target_y_axis; |
|
|
var json_radar_x_axis; |
|
|
var json_radar_y_axis; |
|
|
var json_calibration_radar; |
|
|
|
|
|
var show_v1_radar = 1; |
|
|
var show_v2_radar = 1; |
|
|
var show_v3_radar = 1; |
|
|
|
|
|
var radar_line = null; |
|
|
var radar_circle = null; |
|
|
var circle_radar = null; |
|
|
var ruler_x_sign = null; |
|
|
var ruler_y_sign = null; |
|
|
var section_line1 = null; |
|
|
var ptz_line |
|
|
var circle_ptz; |
|
|
// var ptz_degree_tmp = 0; |
|
|
// var ptz_degree_offset = 0; |
|
|
|
|
|
var speedThreshold = 0.1; |
|
|
|
|
|
var canvasTripwire_radar; |
|
|
var canvasTripwire_radarPTZ; |
|
|
var canvasTripwire_speed; |
|
|
var canvasTripwire_speedCamera; |
|
|
|
|
|
var rulerRadar = null; |
|
|
var rulerSpeed = null; |
|
|
|
|
|
var radarShowImgInterval = ""; |
|
|
var speedShowImgInterval = ""; |
|
|
|
|
|
var g_getPtzImg = null; |
|
|
var g_getCameraImg = null; |
|
|
|
|
|
var enalbe_radar_xy_sync = 0; |
|
|
// ======================================================================= |
|
|
// Radar View init |
|
|
function func_getRadarData() { |
|
|
$.ajax({ |
|
|
url: "/getradar", |
|
|
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); |
|
|
json_distance_format = jsonbuf["distance_format"]; |
|
|
json_distance_meter = jsonbuf["distance_meter"]; |
|
|
json_world_radar_height = jsonbuf["world_radar_height"]; |
|
|
|
|
|
json_trial_life_time = jsonbuf["trial_life_time"]; |
|
|
json_radar_section_degree = jsonbuf["radar_section_degree"]; |
|
|
|
|
|
json_target_x_axis = jsonbuf["target_x_axis"]; |
|
|
json_target_y_axis = jsonbuf["target_y_axis"]; |
|
|
json_radar_x_axis = jsonbuf["radar_x_axis"]; |
|
|
json_radar_y_axis = jsonbuf["radar_y_axis"]; |
|
|
json_calibration_radar = jsonbuf["calibration_radar"]; |
|
|
|
|
|
var jsoncamera = jsonbuf["camera"]; |
|
|
|
|
|
json_world_camera_height = jsoncamera["world_camera_height"]; |
|
|
json_world_camera_degree = jsoncamera["world_camera_degree"]; |
|
|
json_world_camera_distance = jsoncamera["world_camera_distance"]; |
|
|
|
|
|
json_camera_ip = jsoncamera["camera_ip"]; |
|
|
json_camera_port = jsoncamera["camera_port"]; |
|
|
json_camera_username = jsoncamera["camera_username"]; |
|
|
json_camera_password = jsoncamera["camera_password"]; |
|
|
|
|
|
// console.log(" sucess log radar data radar x,y", json_radar_x_axis, json_radar_y_axis, "target x,y", json_target_x_axis, json_target_y_axis); |
|
|
}, |
|
|
error: function (retdata) { |
|
|
console.warn(retdata); |
|
|
} |
|
|
|
|
|
}); |
|
|
} |
|
|
|
|
|
function func_getradarjson() {//local storage for radar.html UI setting, need revise leo 10-12 |
|
|
$.ajax({ |
|
|
url: "/getradar", |
|
|
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); |
|
|
|
|
|
var jsoncamera = jsonbuf["camera"]; |
|
|
localStorage.setItem('world_camera_height', jsoncamera["world_camera_height"]); |
|
|
localStorage.setItem("world_camera_degree", jsoncamera["world_camera_degree"]); |
|
|
localStorage.setItem("distance_format", jsonbuf["distance_format"]); |
|
|
localStorage.setItem("distance_meter", jsonbuf["distance_meter"]); |
|
|
localStorage.setItem("world_radar_height", jsonbuf["world_radar_height"]); |
|
|
localStorage.setItem("world_camera_distance", jsoncamera["world_camera_distance"]); |
|
|
localStorage.setItem("trial_life_time", jsonbuf["trial_life_time"]); |
|
|
localStorage.setItem("radar_section_degree", jsonbuf["radar_section_degree"]); |
|
|
localStorage.setItem("camera_ip", jsoncamera["camera_ip"]); |
|
|
localStorage.setItem("camera_port", jsoncamera["camera_port"]); |
|
|
localStorage.setItem("camera_username", jsoncamera["camera_username"]); |
|
|
localStorage.setItem("camera_password", jsoncamera["camera_password"]); |
|
|
localStorage.setItem("world_radar_height", jsonbuf["world_radar_height"]); |
|
|
localStorage.setItem("target_x_axis", jsonbuf["target_x_axis"]); |
|
|
localStorage.setItem("target_y_axis", jsonbuf["target_y_axis"]); |
|
|
localStorage.setItem("radar_x_axis", jsonbuf["radar_x_axis"]); |
|
|
localStorage.setItem("radar_y_axis", jsonbuf["radar_y_axis"]); |
|
|
localStorage.setItem("calibration_radar", jsonbuf["calibration_radar"]); |
|
|
localStorage.setItem("enable_ptz", jsonbuf["enable_camera"]); |
|
|
localStorage.setItem("enable_ip_setting", jsoncamera["ip_setting"]); |
|
|
console.log('jsoncamera["ip_setting"]:', jsoncamera["ip_setting"]); |
|
|
|
|
|
}, |
|
|
error: function (retdata) { |
|
|
console.warn(retdata); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function createCanvas(canvasVar, canvasName) { |
|
|
console.log("[radar_speed_share.js] createCanvas() - canvasName: '" + canvasName + "'"); |
|
|
canvasVar = new fabric.Canvas('CanvasTripwire_' + canvasName, { |
|
|
height: radarViewHeight, // window.innerHeight |
|
|
width: radarViewWidth // window.innerWidth |
|
|
}); |
|
|
canvasVar.requestRenderAll(); |
|
|
return canvasVar; |
|
|
} |
|
|
|
|
|
// ======================================================================= |
|
|
// Radar tab UI |
|
|
|
|
|
function change_show_radar_button_color() { |
|
|
if (show_v1_radar == 1) { |
|
|
btn_bg_border_color = |
|
|
//document.getElementById("radar_v1").style.background = "#6c87d4"; |
|
|
document.getElementById("radar_v1").style.background = "#373d40"; |
|
|
//document.getElementById("radar_v1").style.borderColor = "#6c87d4"; |
|
|
document.getElementById("radar_v1").style.borderColor = "#373d40"; |
|
|
document.getElementById("radar_v1").style.color = "white"; |
|
|
} else { |
|
|
document.getElementById("radar_v1").style.background = "#BABABA"; |
|
|
document.getElementById("radar_v1").style.borderColor = "#BABABA"; |
|
|
document.getElementById("radar_v1").style.color = "black"; |
|
|
} |
|
|
|
|
|
if (show_v2_radar == 1) { |
|
|
//document.getElementById("radar_v2").style.background = "#6c87d4"; |
|
|
document.getElementById("radar_v2").style.background = "#ffa321"; |
|
|
//document.getElementById("radar_v2").style.borderColor = "#6c87d4"; |
|
|
document.getElementById("radar_v2").style.borderColor = "#ffa321"; |
|
|
|
|
|
document.getElementById("radar_v2").style.color = "white"; |
|
|
//document.getElementById("radar_v2").style.color = "yellow"; |
|
|
} else { |
|
|
document.getElementById("radar_v2").style.background = "#BABABA"; |
|
|
document.getElementById("radar_v2").style.borderColor = "#BABABA"; |
|
|
document.getElementById("radar_v2").style.color = "black"; |
|
|
} |
|
|
|
|
|
if (show_v3_radar == 1) { |
|
|
//document.getElementById("radar_v3").style.background = "#6c87d4"; |
|
|
document.getElementById("radar_v3").style.background = "#1445f7"; |
|
|
//document.getElementById("radar_v3").style.borderColor = "#6c87d4"; |
|
|
document.getElementById("radar_v3").style.borderColor = "#1445f7"; |
|
|
|
|
|
document.getElementById("radar_v3").style.color = "white"; |
|
|
//document.getElementById("radar_v3").style.color = "blue"; |
|
|
} else { |
|
|
document.getElementById("radar_v3").style.background = "#BABABA"; |
|
|
document.getElementById("radar_v3").style.borderColor = "#BABABA"; |
|
|
document.getElementById("radar_v3").style.color = "black"; |
|
|
} |
|
|
|
|
|
if (show_v1_radar == 1 && show_v2_radar == 1 && show_v3_radar == 1) { |
|
|
document.getElementById("radar_vall").style.background = "#6c87d4"; |
|
|
document.getElementById("radar_vall").style.borderColor = "#6c87d4"; |
|
|
document.getElementById("radar_vall").style.color = "white"; |
|
|
} else { |
|
|
document.getElementById("radar_vall").style.background = "#BABABA"; |
|
|
document.getElementById("radar_vall").style.borderColor = "#BABABA"; |
|
|
document.getElementById("radar_vall").style.color = "black"; |
|
|
} |
|
|
} |
|
|
|
|
|
function func_show_radar_point(btn) { |
|
|
var show = btn.value; |
|
|
|
|
|
if (show == 'V1') { |
|
|
if (show_v1_radar == 0) { |
|
|
show_v1_radar = 1; |
|
|
} else { |
|
|
show_v1_radar = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
if (show == "V2") { |
|
|
if (show_v2_radar == 0) { |
|
|
show_v2_radar = 1; |
|
|
} else { |
|
|
show_v2_radar = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
if (show == "V3") { |
|
|
if (show_v3_radar == 0) { |
|
|
show_v3_radar = 1; |
|
|
} else { |
|
|
show_v3_radar = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
if (show == 'All') { |
|
|
if (show_v1_radar == 0 || show_v2_radar == 0 || show_v3_radar == 0) { |
|
|
show_v1_radar = 1; |
|
|
show_v2_radar = 1; |
|
|
show_v3_radar = 1; |
|
|
} else { |
|
|
show_v1_radar = 0; |
|
|
show_v2_radar = 0; |
|
|
show_v3_radar = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
change_show_radar_button_color(); |
|
|
} |
|
|
|
|
|
|
|
|
// ======================================================================= |
|
|
// Draw radar points |
|
|
|
|
|
function func_drawRadarPoint(interval, canvas, tab) { |
|
|
// console.log("[radar_speed_share.js] func_drawRadarPoint() - canvasName: '" + tab + "'"); |
|
|
|
|
|
clearInterval(interval); |
|
|
interval = setInterval(function drawRadarDot() { |
|
|
if (canvas.getObjects().indexOf(circle_ptz) == -1) { |
|
|
RefreshradarDot(6, canvas); |
|
|
if (tab === "speed") { |
|
|
// RefreshradarDot_PTZ(0); // Merge issue |
|
|
} |
|
|
} else { |
|
|
if (tab === "radar") { |
|
|
RefreshradarDot(8, canvas); |
|
|
canvas.remove(ptz_line); |
|
|
console.log("ptz_degree_tmp", parseInt(localStorage.getItem("ptz_degree_tmp"))); |
|
|
// ptz_degree_tmp = radar_json.ptz_degree; |
|
|
var r = 50; |
|
|
var theta; |
|
|
theta = parseInt(localStorage.getItem("ptz_degree_tmp")); |
|
|
console.log("theta", theta); |
|
|
ptz_line.set({ 'x1': circle_ptz.left + circle_ptz.radius, 'y1': circle_ptz.top + circle_ptz.radius }); |
|
|
ptz_line.set({ 'x2': circle_ptz.left + circle_ptz.radius - r * Math.cos(theta * Math.PI / 180), 'y2': circle_ptz.top + circle_ptz.radius - r * Math.sin(theta * Math.PI / 180) }); |
|
|
|
|
|
canvas.add(ptz_line); |
|
|
} else { |
|
|
// Ken issue |
|
|
// speed tab |
|
|
RefreshradarDot(7, canvas); |
|
|
// RefreshradarDot_PTZ(0); |
|
|
} |
|
|
} |
|
|
var d = new Date(); |
|
|
// console.log(d); |
|
|
var getTime_tmp = d.getTime(); |
|
|
// console.log("getTime_tmp", getTime_tmp); |
|
|
for (var key in trial_array) { |
|
|
var rpi = trial_array[key]; // radar point info |
|
|
var t = rpi.Type; |
|
|
var x = rpi.world_radar_x; |
|
|
var y = rpi.world_radar_y; |
|
|
var csX = rpi.csX; |
|
|
var csY = rpi.csY; |
|
|
var c = rpi.C; |
|
|
var pointColor = func_getPointColor(json_trial_life_time, t, c); |
|
|
var textWidth = 50; |
|
|
var textHeight = 50; |
|
|
var text = ""; |
|
|
//console.log(key, t, x, y, c); |
|
|
|
|
|
// Issue : ===================== |
|
|
// draw |
|
|
// need add V1,V2,V3 show button |
|
|
// draw radar dot & text |
|
|
// ============================= |
|
|
|
|
|
if (t == 1 && show_v1_radar) { |
|
|
radar_dot = makedot( |
|
|
x, |
|
|
y, |
|
|
pointColor, |
|
|
Math.round( |
|
|
(c / json_trial_life_time) * 5 |
|
|
) |
|
|
); |
|
|
canvas.add(radar_dot); |
|
|
|
|
|
if (c == json_trial_life_time) |
|
|
text = "FN: " + rpi.FrameNum + |
|
|
" V1 (" + parseInt(x) + "," + parseInt(y) + ")," + |
|
|
" Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "," + parseFloat(rpi.PosZ).toFixed(1) + ")"; |
|
|
canvas.add( |
|
|
insertTextLabel_Color( |
|
|
x + (radar_dot.radius * 2), |
|
|
y + (radar_dot.radius * 2), |
|
|
textWidth, |
|
|
textHeight, |
|
|
text, |
|
|
pointColor |
|
|
) |
|
|
); |
|
|
// canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " V1 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "," + parseFloat(rpi.PosZ).toFixed(1) + "), json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", pointColor)); |
|
|
} else if (t == 2 && show_v2_radar) { |
|
|
radar_dot = makedot( x, y, pointColor, 5); |
|
|
canvas.add(radar_dot); |
|
|
if (c == json_trial_life_time) { |
|
|
canvas.add( |
|
|
makerect( |
|
|
x, |
|
|
y, |
|
|
csX, |
|
|
csY |
|
|
) |
|
|
); |
|
|
|
|
|
text = "FN: " + rpi.FrameNum + |
|
|
" [DEBUG] V2 (" + parseInt(x) + "," + parseInt(y) + ")," + |
|
|
"Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ")"; |
|
|
|
|
|
canvas.add( |
|
|
insertTextLabel_Color( |
|
|
x + (radar_dot.radius * 2), |
|
|
y + (radar_dot.radius * 2), |
|
|
textWidth, |
|
|
textHeight, |
|
|
text, |
|
|
pointColor |
|
|
) |
|
|
); |
|
|
// canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " [DEBUG] V2 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "), json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", pointColor)); |
|
|
} |
|
|
} else if (t == 3 && show_v3_radar && Math.abs(rpi.Speed) > speedThreshold) { |
|
|
radar_dot = makedot( |
|
|
x, |
|
|
y, |
|
|
pointColor, |
|
|
10 |
|
|
); |
|
|
canvas.add(radar_dot); |
|
|
if (c == json_trial_life_time) |
|
|
if (localStorage.getItem("speed_unit") == "MPH") { // KPH to MPH |
|
|
console.log("KPH : ", rpi.Speed); |
|
|
rpi.Speed = Math.round(rpi.Speed * 0.6213712 * 10) / 10 |
|
|
console.log("MPH : ", rpi.Speed); |
|
|
console.log("-----------------"); |
|
|
} |
|
|
|
|
|
text = "FN: " + rpi.FrameNum + |
|
|
" V3 (" + parseInt(x) + "," + parseInt(y) + ")," + |
|
|
" Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ")," + |
|
|
" Speed: " + parseFloat(rpi.Speed).toFixed(1); |
|
|
|
|
|
canvas.add( |
|
|
insertTextLabel_Color( |
|
|
x + (radar_dot.radius * 2), |
|
|
y + (radar_dot.radius * 2), |
|
|
textWidth, |
|
|
textHeight, |
|
|
text, |
|
|
pointColor |
|
|
) |
|
|
); |
|
|
// canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " V3 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ") Speed: " + parseFloat(rpi.Speed).toFixed(1) + " , json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", color_tmp)); |
|
|
} |
|
|
|
|
|
//C-1 |
|
|
// var tmp_int = 128; |
|
|
// console.log("HEX",tmp_int.toString(16)); |
|
|
|
|
|
//C-1 |
|
|
// console.log("pointColor", pointColor); |
|
|
// c = c - 1; |
|
|
|
|
|
// console.log("json_trial_life_time", json_trial_life_time, "getTime_tmp", getTime_tmp, "rpi.time", rpi.time); |
|
|
// console.log((json_trial_life_time * 1000) - (getTime_tmp - rpi.time)); |
|
|
|
|
|
rpi.C = Math.round(((json_trial_life_time * 1000) - (getTime_tmp - rpi.time)) / 1000); |
|
|
// console.log("c", c); |
|
|
//console.log(key, x, y, c); |
|
|
if (c < json_trial_life_time && t == 2) { |
|
|
delete trial_array[key]; |
|
|
} else if (c <= 0) { |
|
|
delete trial_array[key]; |
|
|
} |
|
|
} |
|
|
// console.log("getTime_tmp", getTime_tmp, "trial_array", trial_array); |
|
|
}, 50); |
|
|
} |
|
|
|
|
|
function func_getPointColor(trial_life_time, point_type, c) { |
|
|
var a; // alpha |
|
|
var color = '#'; // HTML color index in hex |
|
|
|
|
|
if (trial_life_time == 0) { |
|
|
a = Math.round(((c + 0.9) / (trial_life_time + 0.9)) * 256) - 1; |
|
|
} else { |
|
|
a = Math.round(((c) / (trial_life_time)) * 256) - 1; |
|
|
} |
|
|
if (a > 255) |
|
|
a = 255; |
|
|
if (a < 0) |
|
|
a = 0; |
|
|
|
|
|
if (point_type == 3) { |
|
|
color += '6c87d4'; // V3 color |
|
|
} else if (point_type == 2) { |
|
|
color += 'fd9600'; // V2 color |
|
|
} else { |
|
|
color += '5c5c5c'; // V1 color |
|
|
} |
|
|
|
|
|
return color + a.toString(16); |
|
|
} |
|
|
|
|
|
|
|
|
// ======================================================================= |
|
|
// Draw FoV section |
|
|
|
|
|
function func_drawRadarSection(tab) { |
|
|
// console.log("[radar_speed_share.js] func_drawRadarSection() - tab : '" + tab + "'"); |
|
|
// var radar_line = makeLine([395, 555, 395, 100]); |
|
|
radar_line = makeLine([json_radar_x_axis, json_radar_y_axis, json_target_x_axis, json_target_y_axis]); |
|
|
radar_circle = makeCircle(json_target_x_axis, json_target_y_axis, radar_line, 'gray', 12); |
|
|
|
|
|
radar_circle.name = "radar_circle"; |
|
|
|
|
|
circle_radar = makeCircle(json_radar_x_axis, json_radar_y_axis, radar_line, 'red', 12); |
|
|
circle_radar.name = "circle_radar"; |
|
|
// circle_radar = new fabric.Circle({ |
|
|
// radius: 20, fill: 'red', left: 380, top: 550, selectable: false, |
|
|
// }) |
|
|
//ruler sign |
|
|
ruler_x_sign = makeTriangle(100, 10, 'red', 20, 0); |
|
|
ruler_x_sign.name = "ruler_x_sign"; |
|
|
|
|
|
ruler_y_sign = makeTriangle(20, 100, 'red', 20, 90); |
|
|
ruler_y_sign.name = "ruler_y_sign"; |
|
|
//draw section// |
|
|
|
|
|
section_line1 = new fabric.Path('M 100 200 Q 400, 50, 700, 200 L 400 550 L 100 200 z', { fill: '#f5f5f580', stroke: 'black', strokeWidth: 5, objectCaching: false, selectable: false, evented: false }); |
|
|
// var section_line1 = new fabric.Path('M 100 200', { fill: '', stroke: 'black', strokeWidth: 5, objectCaching: false, selectable: false }); |
|
|
//console.log("radar x,y", json_radar_x_axis, json_radar_y_axis, "target x,y", json_target_x_axis, json_target_y_axis); |
|
|
|
|
|
// #6c87d4 opacity: 1 |
|
|
|
|
|
|
|
|
// var section_line1 = new fabric.Path('M 400 550 L 100 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false }); |
|
|
// var section_line2 = new fabric.Path('M 400 550 L 700, 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false }); |
|
|
// var section_line3 = new fabric.Path('M 100 200 Q 400, 50, 700, 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false }); |
|
|
|
|
|
section_line1.path[2][1] = json_radar_x_axis;//localStorage.getItem("radar_x_axis"); |
|
|
section_line1.path[2][2] = json_radar_y_axis;//localStorage.getItem("radar_y_axis"); |
|
|
section_line1.path[1][1] = json_target_x_axis;//localStorage.getItem("target_x_axis"); |
|
|
section_line1.path[1][2] = json_target_y_axis;//localStorage.getItem("target_y_axis"); |
|
|
|
|
|
// console.log("ab_len:" + ab_len); |
|
|
var theta = json_radar_section_degree; |
|
|
var c_x = (Math.cos((-theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) - Math.sin((-theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_x_axis; |
|
|
var c_y = (Math.sin((-theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) + Math.cos((-theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_y_axis; |
|
|
//console.log("c_x,c_y:" + c_x + c_y); |
|
|
section_line1.path[0][1] = c_x; |
|
|
section_line1.path[0][2] = c_y; |
|
|
section_line1.path[3][1] = c_x; |
|
|
section_line1.path[3][2] = c_y; |
|
|
|
|
|
var d_x = (Math.cos((theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) - Math.sin((theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_x_axis; |
|
|
var d_y = (Math.sin((theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) + Math.cos((theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_y_axis; |
|
|
//console.log("d_x,d_y:" + d_x + d_y); |
|
|
section_line1.path[1][3] = d_x; |
|
|
section_line1.path[1][4] = d_y; |
|
|
|
|
|
radar_line.set({ 'x1': json_radar_x_axis, 'y1': json_radar_y_axis, 'x2': json_target_x_axis, 'y2': json_target_y_axis }); |
|
|
|
|
|
circle_radar.set({ 'left': json_radar_x_axis - 12, 'top': json_radar_y_axis - 14 }); |
|
|
radar_circle.set({ 'left': json_target_x_axis - 12, 'top': json_target_y_axis - 14 }); |
|
|
if (tab === "radar") { |
|
|
ptz_line = new fabric.Line([100, 300, 150, 300], { |
|
|
fill: '#ff1493', |
|
|
stroke: '#ff1493', |
|
|
strokeWidth: 5, |
|
|
selectable: false, |
|
|
evented: false, |
|
|
}); |
|
|
ptz_line.name = "ptz_line"; |
|
|
// ptz_line = AddArrowObject(100, 300, 150, 300); |
|
|
|
|
|
circle_ptz; |
|
|
circle_ptz = makeCircle(ptz_line.get('x1') - 18, ptz_line.get('y1') - 20, ptz_line, 'yellow', 20); |
|
|
|
|
|
circle_ptz.name = "circle_ptz"; |
|
|
circle_ptz.hasControls = circle_ptz.hasBorders = false; |
|
|
} |
|
|
} |
|
|
|
|
|
// ======================================================================= |
|
|
// Ruler ( a113n ) |
|
|
function enable_xy_sync(e){ |
|
|
//$('#slider_distance_y').slider('setValue', 100); |
|
|
|
|
|
//if ($('#enable_ptz').is(":checked")) { |
|
|
if (e.checked) { |
|
|
enalbe_radar_xy_sync = 1; |
|
|
} |
|
|
else { |
|
|
enalbe_radar_xy_sync = 0; |
|
|
} |
|
|
|
|
|
if (enalbe_radar_xy_sync == 1) { |
|
|
var distance_meter_x = document.getElementById("slider_distance").value; |
|
|
$('#slider_distance_y').slider('setValue', distance_meter_x); |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function set_ruler(rulerVar, tab) { |
|
|
// console.log("[radar_speed_share.js] set_ruler() tab:", tab); |
|
|
// console.log(document.getElementById("ruler_wrapper_" + tab)); |
|
|
rulerVar = new ruler({ |
|
|
container: document.getElementById("ruler_wrapper_" + tab), // reference to DOM element to apply rulers on |
|
|
rulerHeight: 30, // thickness of ruler |
|
|
fontFamily: 'arial',// font for points |
|
|
fontSize: '15px', |
|
|
strokeStyle: 'black', |
|
|
lineWidth: 1, |
|
|
enableMouseTracking: true, |
|
|
enableToolTip: true |
|
|
}); |
|
|
return rulerVar; |
|
|
} |
|
|
|
|
|
function rescale_ruler(rulerVar) { |
|
|
var scale_factor = cal_ruler_scale(); |
|
|
//console.log("[rescale_ruler]" + document.getElementById("distance_format").value); |
|
|
|
|
|
if (scale_factor > 0) { |
|
|
rulerVar.api.setScale(scale_factor); |
|
|
//rulerVar.api.setScale(scale_factor); //15=0.01875 |
|
|
} |
|
|
else // some error msg maybe? |
|
|
{ |
|
|
console.log("scale_factor is less than zero."); |
|
|
rulerVar.api.setScale(1); |
|
|
} |
|
|
|
|
|
//draw section |
|
|
rulerVar.api.setPos({ x: circle_radar.left - (circle_radar.radius / 2) - 12, y: circle_radar.top - (circle_radar.radius / 2) - 14 }); |
|
|
ruler_x_sign.set({ 'left': circle_radar.left + (circle_radar.radius / 2) + (ruler_x_sign.width / 2) - 14, 'top': 10 }); |
|
|
ruler_y_sign.set({ 'left': 20, 'top': circle_radar.top + (circle_radar.radius / 2) + (ruler_y_sign.width / 2) - 16 }); |
|
|
console.log("rescale_ruler()"); |
|
|
} |
|
|
|
|
|
function cal_ruler_scale() { |
|
|
var scale_factor = 1; |
|
|
var distance = document.getElementById("slider_distance").value; |
|
|
|
|
|
// if (document.getElementById("distance_format").value == "meter") { |
|
|
if (localStorage.getItem("distance_format") == "meter") { |
|
|
|
|
|
scale_factor = (distance / 150) * 0.1875; // 150/800 = 0.1875 |
|
|
} |
|
|
// else if (document.getElementById("distance_format").value == "feet") { |
|
|
else if (localStorage.getItem("distance_format") == "feet") { |
|
|
scale_factor = (distance / 500) * 0.625; // 500/800 = 0.625 |
|
|
} |
|
|
else { |
|
|
scale_factor = -1; |
|
|
} |
|
|
|
|
|
return scale_factor; |
|
|
} |
|
|
|
|
|
function sent_ruler_scale_value() { |
|
|
//Mark at 20230110 Steven |
|
|
/* |
|
|
// $("#IFRAME_RADAR").prop("scrolling", "no"); |
|
|
var delta = e.e.deltaY; |
|
|
console.log("e:", e); |
|
|
console.log("delta:", delta); |
|
|
// var zoom = canvas.getZoom(); |
|
|
// var zoom; |
|
|
// zoom = 0.999 ** delta; |
|
|
// if (zoom > 20) zoom = 20; |
|
|
// if (zoom < 0.01) zoom = 0.01; |
|
|
// console.log("zoom:", zoom); |
|
|
|
|
|
if (delta > 0) { |
|
|
// console.log("document.getElementById(slider_distance).value:", parseInt(document.getElementById("slider_distance").value) + 5); |
|
|
$('#slider_distance').slider('setValue', parseInt(document.getElementById("slider_distance").value) + 5); |
|
|
} else if (delta < 0) { |
|
|
// console.log("document.getElementById(slider_distance).value:", document.getElementById("slider_distance").value - 5); |
|
|
$('#slider_distance').slider('setValue', document.getElementById("slider_distance").value - 5); |
|
|
} |
|
|
// canvas.setZoom(zoom); |
|
|
// opt.e.preventDefault(); |
|
|
// opt.e.stopPropagation(); |
|
|
// $("#IFRAME_RADAR").prop("scrolling", "yes"); |
|
|
*/ |
|
|
|
|
|
rescale_ruler(rulerRadar); |
|
|
|
|
|
func_setelement("distance_meter", document.getElementById("slider_distance").value); |
|
|
|
|
|
func_setelement("distance_meter_y", document.getElementById("slider_distance_y").value); |
|
|
} |
|
|
|
|
|
// ======================================================================= |
|
|
// Unit functions |
|
|
|
|
|
function insertTextLabel_Color(r_left, r_top, r_width, r_height, showtext, fill_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 |
|
|
}); |
|
|
|
|
|
} |
|
|
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 |
|
|
}); |
|
|
} |
|
|
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, radar_line, color) { |
|
|
var c = new fabric.Circle({ |
|
|
left: left - 12, |
|
|
top: top - 12, |
|
|
strokeWidth: 2, |
|
|
radius: 12, |
|
|
fill: color, |
|
|
stroke: '#FFFFFF' |
|
|
}); |
|
|
c.hasControls = c.hasBorders = false; |
|
|
|
|
|
c.radar_line = radar_line; |
|
|
|
|
|
|
|
|
return c; |
|
|
} |
|
|
|
|
|
function makeTriangle(left, top, color, radius, angle) { |
|
|
var c = new fabric.Triangle({ |
|
|
left: left, |
|
|
top: top, |
|
|
width: radius, |
|
|
height: radius, |
|
|
fill: color, |
|
|
stroke: '#FFFFFF', |
|
|
angle: angle |
|
|
}); |
|
|
c.hasControls = c.hasBorders = false; |
|
|
return c; |
|
|
} |
|
|
|
|
|
function makeLine(coords) { |
|
|
return new fabric.Line(coords, { |
|
|
fill: 'red', |
|
|
stroke: 'red', |
|
|
strokeWidth: 5, |
|
|
selectable: false, |
|
|
evented: false |
|
|
}); |
|
|
} |
|
|
|
|
|
function makedot(left, top, color, radius) { |
|
|
var c = new fabric.Circle({ |
|
|
left: left - radius, |
|
|
top: top - radius, |
|
|
strokeWidth: 2, |
|
|
radius: radius, |
|
|
fill: color, |
|
|
stroke: '#FFFFFF', |
|
|
evented: false |
|
|
}); |
|
|
c.hasControls = c.hasBorders = false; |
|
|
return c; |
|
|
} |
|
|
|
|
|
function makerect(left, top, width, height) { |
|
|
var c = new fabric.Rect({ |
|
|
top: parseInt(top - (Math.abs(height) / 2)), |
|
|
left: parseInt(left - (Math.abs(width) / 2)), |
|
|
width: parseInt(Math.abs(width)), |
|
|
height: parseInt(Math.abs(height)), |
|
|
strokeWidth: 2, |
|
|
fill: '#00960000',//fd960000 |
|
|
stroke: '#009600',//fd9600 |
|
|
evented: false |
|
|
}); |
|
|
c.hasControls = c.hasBorders = false; |
|
|
return c; |
|
|
} |
|
|
|
|
|
function RefreshradarDot(protected_objects, canvas) { |
|
|
while (canvas.getObjects().length > protected_objects) { |
|
|
var items = canvas.getObjects(); |
|
|
if (items[canvas.getObjects().length - 1]) { |
|
|
canvas.remove(items[canvas.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// Merge issue |
|
|
// function RefreshradarDot_PTZ(protected_objects) { |
|
|
// while (canvasTripwire_speedCamera.getObjects().length > protected_objects) { |
|
|
// var items = canvasTripwire_speedCamera.getObjects(); |
|
|
// if (items[canvasTripwire_speedCamera.getObjects().length - 1]) { |
|
|
// canvasTripwire_speedCamera.remove(items[canvasTripwire_speedCamera.getObjects().length - 1]); |
|
|
// } |
|
|
// } |
|
|
// } |
|
|
|
|
|
// 2022-12-29 Merge issue : multible defined in all .js |
|
|
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 func_getRadarInfo(tab, canvas, imgInterval) { |
|
|
// 原 func_getradarinfo() |
|
|
console.log("[radar_speed_share.js] func_getRadarInfo() TAB: ", tab); |
|
|
|
|
|
$('#trial_life_time').val(localStorage.getItem("trial_life_time")); |
|
|
|
|
|
$('#radar_height').val(localStorage.getItem("world_radar_height")); |
|
|
$('#distance_format').val(localStorage.getItem("distance_format")); |
|
|
$('#ptz_height').val(localStorage.getItem("world_camera_height")); |
|
|
$('#slider_distance').slider('setValue', localStorage.getItem("distance_meter")); |
|
|
$('#ptz_degree').slider('setValue', localStorage.getItem("world_camera_degree")); |
|
|
document.getElementById("TEXT_DISTANCE_FORMAT1").innerHTML = TEXT_DISTANCE_FORMAT; |
|
|
document.getElementById("TEXT_DISTANCE_FORMAT2").innerHTML = TEXT_DISTANCE_FORMAT; |
|
|
if (tab == "radar") { |
|
|
document.getElementById("TEXT_DISTANCE_FORMAT3").innerHTML = TEXT_DISTANCE_FORMAT; |
|
|
} |
|
|
|
|
|
$('#world_radar_degree').val(localStorage.getItem("world_radar_degree")); |
|
|
|
|
|
if (tab == "radar") { |
|
|
$('#radar_section_degree').val(localStorage.getItem("radar_section_degree")); |
|
|
} |
|
|
|
|
|
$('#camera_ip').val(localStorage.getItem("camera_ip")); |
|
|
$('#camera_port').val(localStorage.getItem("camera_port")); |
|
|
$('#camera_username').val(localStorage.getItem("camera_username")); |
|
|
$('#camera_password').val(localStorage.getItem("camera_password")); |
|
|
document.getElementById("calibration_radar").checked = true; |
|
|
enable_calibration_radar_temp = "Yes"; |
|
|
// 11-16 memory enable ptz & ip setting |
|
|
// console.log("localStorage.getItem(enable_ptz)",localStorage.getItem("enable_ptz")); |
|
|
if(localStorage.getItem("enable_ptz") == "true") |
|
|
{ |
|
|
document.getElementById("enable_ptz").checked = true; |
|
|
enable_ptz_temp = "Yes"; |
|
|
document.getElementById("ptz_view").style.display = "block"; |
|
|
document.getElementById("radar_view").style.width = "50%"; |
|
|
document.getElementById("radar_settings").style.width = "25%"; |
|
|
document.getElementById("radar_settings2").style.width = "25%"; |
|
|
document.getElementById("ptz_setting_block").style.display = "block"; |
|
|
document.getElementById("ptz_setting_block2").style.display = "block"; |
|
|
document.getElementById("radar_settings0").style.display = "none"; |
|
|
// console.log("set .getItem(enable_ptz) YES",localStorage.getItem("enable_ptz")); |
|
|
}else{ |
|
|
document.getElementById("enable_ptz").checked = false; |
|
|
enable_ptz_temp = "No"; |
|
|
document.getElementById("ptz_view").style.display = "none"; |
|
|
document.getElementById("radar_view").style.width = "100%"; |
|
|
document.getElementById("radar_settings").style.width = "25%"; |
|
|
document.getElementById("radar_settings2").style.width = "25%"; |
|
|
document.getElementById("ptz_setting_block").style.display = "none"; |
|
|
document.getElementById("ptz_setting_block2").style.display = "none"; |
|
|
document.getElementById("radar_settings0").style.display = "block"; |
|
|
// console.log("set .getItem(enable_ptz) NO",localStorage.getItem("enable_ptz")); |
|
|
} |
|
|
// console.log("localStorage.getItem(ip_setting)",localStorage.getItem("enable_ip_setting")); |
|
|
|
|
|
if(localStorage.getItem("enable_ip_setting") == "true"){ |
|
|
// console.log("set .getItem(enable_ip_setting) YES",localStorage.getItem("enable_ip_setting")); |
|
|
enable_ip_setting_temp = "true"; |
|
|
localStorage.setItem("enable_ip_setting", "true"); |
|
|
document.getElementById("enable_ip_setting").checked = true; |
|
|
// var ip = document.getElementById("camera_ip").value; |
|
|
// var user = document.getElementById("camera_username").value; |
|
|
// var pwd = document.getElementById("camera_password").value; |
|
|
// if (tab === "radar") { |
|
|
// showPTZimage(ip, user, pwd); |
|
|
// } else if (tab === "speed") { |
|
|
// showCameraImage(ip, user, pwd); |
|
|
// } |
|
|
canvas, imgInterval = showRGBimage( |
|
|
canvas, |
|
|
imgInterval, |
|
|
document.getElementById("camera_ip").value, // remoteIP |
|
|
document.getElementById("camera_username").value, // account |
|
|
document.getElementById("camera_password").value // password |
|
|
); |
|
|
} |
|
|
else { |
|
|
enable_ip_setting_temp = "false"; |
|
|
localStorage.setItem("enable_ip_setting", "false"); |
|
|
document.getElementById("enable_ip_setting").checked = false; |
|
|
// if (tab === "radar") { |
|
|
// clearInterval(g_getPtzImg); |
|
|
// } else if (tab === "speed") { |
|
|
// clearInterval(g_getCameraImg); |
|
|
// } |
|
|
|
|
|
clearInterval(imgInterval); |
|
|
|
|
|
var canvasSuffix = ""; |
|
|
if (tab === "radar") { |
|
|
canvasSuffix = "radarPTZ"; |
|
|
} else if (tab === "speed") { |
|
|
canvasSuffix = "speedCamera"; |
|
|
} |
|
|
// console.log("canvasSuffix:", canvasSuffix); |
|
|
var cxt = document.getElementById("CanvasTripwire_" + canvasSuffix).getContext("2d"); |
|
|
cxt.clearRect(0,0,canvas.width,canvas.height); |
|
|
} |
|
|
|
|
|
// Issue |
|
|
// console.log('localStorage.getItem("calibration_radar").checked :',localStorage.getItem("calibration_radar")); |
|
|
// console.log('document.getElementById(calibration_radar).checked',document.getElementById("calibration_radar").checked); |
|
|
// if (localStorage.getItem("calibration_radar") == "true") { |
|
|
// document.getElementById("enable_calibration_radar").checked = true; |
|
|
// console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked); |
|
|
// mix_scale_radar_visible(); |
|
|
// console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked); |
|
|
// }else { |
|
|
// document.getElementById("enable_calibration_radar").checked = false; |
|
|
// console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked); |
|
|
// mix_scale_radar_hidden(); |
|
|
// console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked); |
|
|
// } |
|
|
return canvas, imgInterval; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showRGBimage(canvas, interval, remoteIP, account, password) { |
|
|
|
|
|
clearInterval(interval); |
|
|
|
|
|
interval = setInterval(function getRGBimgSetInterval(remoteIP, account, password, canvas) { |
|
|
|
|
|
var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random(); |
|
|
|
|
|
if (canvas) { |
|
|
canvas.renderAll(); |
|
|
} |
|
|
|
|
|
if (localStorage.getItem("enable_ip_setting") === "true") { |
|
|
console.log("remoteIP: ", remoteIP, ", account: ", account, ", password: ", password); |
|
|
try { |
|
|
fabric.Image.fromURL(remotesnapUrl, function (img) { |
|
|
if (img != null && img._element != null) { |
|
|
img.set({ |
|
|
scaleX: radarViewWidth / img.width, |
|
|
scaleY: radarViewHeight / img.height, |
|
|
}); |
|
|
canvas.setBackgroundImage(img, () => canvas.renderAll.bind(canvas)); |
|
|
img = null; |
|
|
} |
|
|
}); |
|
|
} |
|
|
catch (e) { |
|
|
console.log(e); |
|
|
} |
|
|
} |
|
|
|
|
|
remotesnapUrl = null; |
|
|
|
|
|
}, g_time_canvas, remoteIP, account, password, canvas); |
|
|
|
|
|
return canvas, interval; |
|
|
} |
|
|
|
|
|
// function showPTZimage(remoteIP, account, password) { |
|
|
// clearInterval(g_getPtzImg); |
|
|
// g_getPtzImg = setInterval(function GetPTZimg_set_interval(remoteIP, account, password) { |
|
|
// console.log("[share.js] showPTZimage() - remoteIP: ", remoteIP, ", account: ", account, ", password: ", password); |
|
|
// var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random(); // TODO 要能夾帶上述變數進去 |
|
|
|
|
|
// if (canvasTripwire_radarPTZ) { |
|
|
// canvasTripwire_radarPTZ.renderAll(); |
|
|
// } |
|
|
// try { |
|
|
// fabric.Image.fromURL(remotesnapUrl, function (img) { |
|
|
// if (img != null && img._element != null) { |
|
|
// img.set({ |
|
|
// scaleX: radarViewWidth / img.width, |
|
|
// scaleY: radarViewHeight / img.height, |
|
|
// }); |
|
|
// canvasTripwire_radarPTZ.setBackgroundImage(img, () => canvasTripwire_radarPTZ.renderAll.bind(canvasTripwire_radarPTZ)); |
|
|
// img = null; |
|
|
// } |
|
|
// }); |
|
|
// } |
|
|
// catch (e) { |
|
|
// console.log(e); |
|
|
// } |
|
|
|
|
|
// remotesnapUrl = null; |
|
|
// // return "Success"; |
|
|
|
|
|
// }, g_time_canvas, remoteIP, account, password); |
|
|
// } |
|
|
|
|
|
// function showCameraImage(remoteIP, account, password) { |
|
|
// clearInterval(g_getCameraImg); |
|
|
// g_getCameraImg = 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(); // TODO 要能夾帶上述變數進去 |
|
|
|
|
|
// if (canvasTripwire_speedCamera) { |
|
|
// canvasTripwire_speedCamera.renderAll(); |
|
|
// } |
|
|
// try { |
|
|
// fabric.Image.fromURL(remotesnapUrl, function (img) { |
|
|
// if (img != null && img._element != null) { |
|
|
// img.set({ |
|
|
// scaleX: radarViewWidth / img.width, |
|
|
// scaleY: radarViewHeight / img.height, |
|
|
// }); |
|
|
// canvasTripwire_speedCamera.setBackgroundImage(img, () => canvasTripwire_speedCamera.renderAll.bind(canvasTripwire_speedCamera)); |
|
|
// img = null; |
|
|
// } |
|
|
// }); |
|
|
// } |
|
|
// catch (e) { |
|
|
// console.log(e); |
|
|
// } |
|
|
|
|
|
// remotesnapUrl = null; |
|
|
// return "Success"; |
|
|
|
|
|
// }, g_time_canvas, remoteIP, account, password); |
|
|
// }
|
