|
|
|
|
|
function getValue() { |
|
|
GetRequest(); |
|
|
} |
|
|
|
|
|
var canvasTripwire; |
|
|
var canvasTripwire_all; |
|
|
var click_canvas_all = 0; |
|
|
var canvasTripwire1; |
|
|
var canvasTripwire2; |
|
|
var canvasTripwire3; |
|
|
var canvasTripwire4; |
|
|
var canvasTripwire5; |
|
|
var canvasTripwire6; |
|
|
var canvasTripwire7; |
|
|
var canvasTripwire8; |
|
|
var canvasTripwire_default; |
|
|
|
|
|
var TripwireTrafficMode = 0;//0:Traffic Light,1:Tripwire |
|
|
var TrafficLineMode = 0;//0:Rect,1:Line |
|
|
var g_Ctrl_InfoTrafficLight = [];//0:index,1:left,2:top,3:width,4:height,5:direct,6:Traffic Light |
|
|
var MAX_SIZE_POINTS = 6; |
|
|
var MAX_DETECTION_ZONE = 8; |
|
|
|
|
|
var G_VIEW_CANVAS_X = 480; |
|
|
var G_VIEW_CANVAS_Y = 320; |
|
|
|
|
|
var MAX_HEIGHT = G_VIEW_CANVAS_Y; |
|
|
var MAX_WIDTH = G_VIEW_CANVAS_X; |
|
|
|
|
|
var currentPointPosition1 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition2 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition3 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition4 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition5 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition6 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition7 = new Array(MAX_SIZE_POINTS); |
|
|
var currentPointPosition8 = new Array(MAX_SIZE_POINTS); |
|
|
|
|
|
var data_anpr = ""; |
|
|
var bbox_count = 0; |
|
|
var plate_count = 0; |
|
|
var plate_idx = 0; |
|
|
var ai_json; |
|
|
|
|
|
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; //sophia add 20201207 |
|
|
|
|
|
var MAX_LPR_ARRAY = 18; |
|
|
var MAX_LPR_SHIFT = 5; |
|
|
var LPR_Array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_confidence_array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_area_array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_color_array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_sec_color_array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_car_type_name_array = Array(MAX_LPR_ARRAY); |
|
|
var LPR_center_direction_array = Array(MAX_LPR_ARRAY); |
|
|
|
|
|
var MAX_LPBMP_ARRAY = 18; |
|
|
var LPBMP_Array = Array(MAX_LPBMP_ARRAY); // lpr img path |
|
|
|
|
|
var COLOR_ARRAY = ["#F0F0F0", "Red", "#F0F0F0", "Yellow", "Green", "Blue", "Cyan", "Purple", "Black", "#F0F0F0", "Silver", "Darkgray"];//index 0、2、6 沒有在使用,所以一律設定成#F0F0F0 |
|
|
|
|
|
//var LPR_Array = Array(MAX_LPBMP_ARRAY); // lpr text |
|
|
//var LPRC_Array = Array(MAX_LPBMP_ARRAY); // lpr contry |
|
|
|
|
|
{ |
|
|
for (var i = 0; i < MAX_LPR_ARRAY; i++) { |
|
|
LPR_Array[i] = "NULL"; |
|
|
LPR_confidence_array[i] = "NULL"; |
|
|
LPR_area_array[i] = "NULL"; |
|
|
LPR_color_array[i] = "NULL"; |
|
|
LPR_sec_color_array[i] = "NULL"; |
|
|
LPR_car_type_name_array[i] = "NULL"; |
|
|
LPR_center_direction_array[i] = "NULL"; |
|
|
} |
|
|
} |
|
|
|
|
|
{// LPBMP |
|
|
for (var i = 0; i < MAX_LPBMP_ARRAY; i++) { |
|
|
LPBMP_Array[i] = "NULL"; |
|
|
} |
|
|
} |
|
|
|
|
|
var g_drawing_canvas = |
|
|
{ |
|
|
bounding_left: -1, |
|
|
bounding_top: -1, |
|
|
down_x: -1, |
|
|
down_y: -1, |
|
|
move_x: -1, |
|
|
move_y: -1, |
|
|
draw_x: -1, |
|
|
draw_y: -1, |
|
|
draw_w: -1, |
|
|
draw_h: -1, |
|
|
direct: 1 |
|
|
}; |
|
|
|
|
|
function push_lpr(mylpr, myarea, myconfidence, mycolor, myseccolor,mycartype,mycenter_direction) { |
|
|
for (var i = 0; i < MAX_LPR_ARRAY; i++) { |
|
|
if (LPR_Array[i] === "NULL") { |
|
|
LPR_Array[i] = mylpr; |
|
|
LPR_confidence_array[i] = myconfidence; |
|
|
LPR_area_array[i] = myarea; |
|
|
LPR_color_array[i] = mycolor; |
|
|
LPR_sec_color_array[i] = myseccolor; |
|
|
LPR_car_type_name_array[i] = mycartype; |
|
|
LPR_center_direction_array[i] = mycenter_direction; |
|
|
break; |
|
|
} |
|
|
else { |
|
|
if (i === MAX_LPR_ARRAY - 1) { |
|
|
var j = 0; |
|
|
for (j = 0; j < MAX_LPR_ARRAY - 1; j++) { |
|
|
LPR_Array[j] = LPR_Array[j + 1]; |
|
|
LPR_confidence_array[j] = LPR_confidence_array[j + 1]; |
|
|
LPR_area_array[j] = LPR_area_array[j + 1]; |
|
|
LPR_color_array[j] = LPR_color_array[j + 1]; |
|
|
LPR_sec_color_array[j] = LPR_sec_color_array[j + 1]; |
|
|
LPR_car_type_name_array[j] = LPR_car_type_name_array[j + 1]; |
|
|
LPR_center_direction_array[j] = LPR_center_direction_array[j + 1]; |
|
|
} |
|
|
LPR_Array[j] = mylpr; |
|
|
LPR_confidence_array[j] = myconfidence; |
|
|
LPR_area_array[j] = myarea; |
|
|
LPR_color_array[j] = mycolor; |
|
|
LPR_sec_color_array[j] = myseccolor; |
|
|
LPR_car_type_name_array[j] = mycartype; |
|
|
LPR_center_direction_array[j] = mycenter_direction; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function get_front_lpr() { |
|
|
var msg = ""; |
|
|
for (var i = MAX_LPR_ARRAY - 1; i >= MAX_LPR_SHIFT; i--) { |
|
|
if (LPR_Array[i] != "NULL") { |
|
|
if (LPR_area_array[i].length >= 1 && LPR_area_array[i] != "NULL") { |
|
|
msg += LPR_Array[i] + ", " + LPR_area_array[i] + ", " + LPR_confidence_array[i] + "<br/>"; |
|
|
} |
|
|
else { |
|
|
msg += LPR_Array[i] + ", " + LPR_confidence_array[i] + "<br/>"; |
|
|
} |
|
|
//console.log(LPR_Array[i], ", ", LPR_confidence_array[i]); //a113n |
|
|
} |
|
|
} |
|
|
|
|
|
return msg; |
|
|
} |
|
|
|
|
|
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 updateObjects() { |
|
|
g_Ctrl_InfoTrafficLight.length = 0; |
|
|
var j = 0; |
|
|
if (TripwireTrafficMode == 1) { |
|
|
g_Ctrl_InfoTrafficLight[j] = []; |
|
|
g_Ctrl_InfoTrafficLight[j][0] = j; |
|
|
g_Ctrl_InfoTrafficLight[j][1] = 50; |
|
|
g_Ctrl_InfoTrafficLight[j][2] = 50; |
|
|
g_Ctrl_InfoTrafficLight[j][3] = 30; |
|
|
g_Ctrl_InfoTrafficLight[j][4] = 30; |
|
|
g_Ctrl_InfoTrafficLight[j][5] = 1; |
|
|
g_Ctrl_InfoTrafficLight[j][6] = 1; |
|
|
j++; |
|
|
} |
|
|
for (var i = 0; i < canvasTripwire.getObjects().length; i++) { |
|
|
g_Ctrl_InfoTrafficLight[j] = []; |
|
|
g_Ctrl_InfoTrafficLight[j][0] = j; |
|
|
g_Ctrl_InfoTrafficLight[j][1] = canvasTripwire.item(i).left; |
|
|
g_Ctrl_InfoTrafficLight[j][2] = canvasTripwire.item(i).top; |
|
|
g_Ctrl_InfoTrafficLight[j][3] = canvasTripwire.item(i).width; |
|
|
g_Ctrl_InfoTrafficLight[j][4] = canvasTripwire.item(i).height; |
|
|
g_Ctrl_InfoTrafficLight[j][5] = canvasTripwire.item(i).direction; |
|
|
g_Ctrl_InfoTrafficLight[j][6] = canvasTripwire.item(i).trafficlight; |
|
|
j++; |
|
|
} |
|
|
} |
|
|
|
|
|
function insertTrafficLightRectangle(r_left, r_top, r_width, r_height, r_direct, r_tlight) { |
|
|
var rectangle; |
|
|
|
|
|
var color_type = '#00FF00'; |
|
|
|
|
|
if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) { |
|
|
rectangle = new fabric.Rect({ trafficlight: r_tlight, direction: r_direct, left: r_left, top: r_top, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: r_width, height: r_height, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' }); |
|
|
|
|
|
} |
|
|
else { |
|
|
rectangle = new fabric.Rect({ trafficlight: 1, direction: 1, left: 50, top: 50, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: 30, height: 30, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' }); |
|
|
} |
|
|
|
|
|
rectangle.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(rectangle); |
|
|
|
|
|
return rectangle; |
|
|
} |
|
|
|
|
|
function insertTrafficLightRectangle_Red(r_left, r_top, r_width, r_height, r_direct, r_tlight) { |
|
|
var rectangle2; |
|
|
if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) { |
|
|
rectangle2 = new fabric.Rect({ trafficlight: r_tlight, direction: r_direct, left: r_left, top: r_top, stroke: '#FF0000', strokeWidth: 1.5, fill: 'transparent', width: r_width, height: r_height, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' }); |
|
|
|
|
|
} |
|
|
else { |
|
|
rectangle2 = new fabric.Rect({ trafficlight: 1, direction: 1, left: 50, top: 50, stroke: '#FF0000', strokeWidth: 1.5, fill: 'transparent', width: 30, height: 30, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' }); |
|
|
} |
|
|
|
|
|
rectangle2.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(rectangle2); |
|
|
|
|
|
return rectangle2; |
|
|
} |
|
|
|
|
|
function insertTextLabel(r_left, r_top, r_width, r_height, showtext) { |
|
|
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: '#CCFF33' |
|
|
}); |
|
|
|
|
|
} |
|
|
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: '#CCFF33' |
|
|
}); |
|
|
} |
|
|
textcontent.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(textcontent); |
|
|
|
|
|
return textcontent; |
|
|
} |
|
|
|
|
|
function insertTextLabel_Orange(r_left, r_top, r_width, r_height, showtext) { |
|
|
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: 22, // 字体大小 |
|
|
fontWeight: '900', // 字体粗细 |
|
|
shadow: { color: 'black', blur: 5 }, |
|
|
fill: '#ff8c00' |
|
|
}); |
|
|
|
|
|
} |
|
|
else { |
|
|
textcontent = new fabric.Text(showtext, { |
|
|
left: 50, |
|
|
top: 50, |
|
|
width: 50, |
|
|
height: 50, |
|
|
fontFamily: 'helvetica', // 字型 |
|
|
fontSize: 22, // 字体大小 |
|
|
fontWeight: '900', // 字体粗细 |
|
|
shadow: { color: 'black', blur: 5 }, |
|
|
fill: '#ff8c00' |
|
|
}); |
|
|
} |
|
|
textcontent.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(textcontent); |
|
|
|
|
|
return textcontent; |
|
|
} |
|
|
|
|
|
function insertTextLabel_Red(r_left, r_top, r_width, r_height, showtext) { |
|
|
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: '#ff0000' |
|
|
}); |
|
|
|
|
|
} |
|
|
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: '#ff0000' |
|
|
}); |
|
|
} |
|
|
textcontent.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(textcontent); |
|
|
|
|
|
return textcontent; |
|
|
} |
|
|
|
|
|
function insertTextLabel_Blue(r_left, r_top, r_width, r_height, showtext) { |
|
|
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: '#0000ff' |
|
|
}); |
|
|
|
|
|
} |
|
|
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: '#0000ff' |
|
|
}); |
|
|
} |
|
|
textcontent.setControlsVisibility({ |
|
|
bl: true, |
|
|
br: true, |
|
|
tl: true, |
|
|
tr: true, |
|
|
mt: true, |
|
|
mb: true, |
|
|
ml: true, |
|
|
mr: true, |
|
|
}); |
|
|
|
|
|
disabelIteraction(textcontent); |
|
|
|
|
|
return textcontent; |
|
|
} |
|
|
|
|
|
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 enableIteraction(element) { |
|
|
element.lockScalingX = false; //Prevents horizontal scaling |
|
|
element.lockScalingY = false; //Prevents vertical scaling |
|
|
element.lockUniScaling = false; //Prevents scaling in either X or Y direction but not in both. In other words, prevents non-proportional scaling of an object. |
|
|
element.lockRotation = false; //Prevents rotation |
|
|
element.evented = true; |
|
|
element.selectable = true; |
|
|
} |
|
|
|
|
|
function createCanvasTrafficLight() { |
|
|
canvasTripwire = new fabric.Canvas('CanvasTripwire', { |
|
|
height: 320,//window.innerHeight |
|
|
width: 480//window.innerWidth |
|
|
}); |
|
|
canvasTripwire.requestRenderAll(); |
|
|
} |
|
|
|
|
|
var polygon_zone1; |
|
|
var polygon_zone2; |
|
|
var polygon_zone3; |
|
|
var polygon_zone4; |
|
|
var polygon_zone5; |
|
|
var polygon_zone6; |
|
|
var polygon_zone7; |
|
|
var polygon_zone8; |
|
|
|
|
|
function createCanvasTrafficLight_anpr(mypoints1, mypoints2, mypoints3, mypoints4, mypoints5, mypoints6, mypoints7, mypoints8) { |
|
|
currentPointPosition1 = mypoints1; |
|
|
currentPointPosition2 = mypoints2; |
|
|
currentPointPosition3 = mypoints3; |
|
|
currentPointPosition4 = mypoints4; |
|
|
currentPointPosition5 = mypoints5; |
|
|
currentPointPosition6 = mypoints6; |
|
|
currentPointPosition7 = mypoints7; |
|
|
currentPointPosition8 = mypoints8; |
|
|
|
|
|
var min_x1 = 10000; |
|
|
var min_y1 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints1[i].x < min_x1) { |
|
|
min_x1 = mypoints1[i].x; |
|
|
} |
|
|
if (mypoints1[i].y < min_y1) { |
|
|
min_y1 = mypoints1[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x2 = 10000; |
|
|
var min_y2 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints2[i].x < min_x2) { |
|
|
min_x2 = mypoints2[i].x; |
|
|
} |
|
|
if (mypoints2[i].y < min_y2) { |
|
|
min_y2 = mypoints2[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x3 = 10000; |
|
|
var min_y3 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints3[i].x < min_x3) { |
|
|
min_x3 = mypoints3[i].x; |
|
|
} |
|
|
if (mypoints3[i].y < min_y3) { |
|
|
min_y3 = mypoints3[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x4 = 10000; |
|
|
var min_y4 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints4[i].x < min_x4) { |
|
|
min_x4 = mypoints4[i].x; |
|
|
} |
|
|
if (mypoints4[i].y < min_y4) { |
|
|
min_y4 = mypoints4[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x5 = 10000; |
|
|
var min_y5 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints5[i].x < min_x5) { |
|
|
min_x5 = mypoints5[i].x; |
|
|
} |
|
|
if (mypoints5[i].y < min_y5) { |
|
|
min_y5 = mypoints5[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x6 = 10000; |
|
|
var min_y6 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints6[i].x < min_x6) { |
|
|
min_x6 = mypoints6[i].x; |
|
|
} |
|
|
if (mypoints6[i].y < min_y6) { |
|
|
min_y6 = mypoints6[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x7 = 10000; |
|
|
var min_y7 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints7[i].x < min_x7) { |
|
|
min_x7 = mypoints7[i].x; |
|
|
} |
|
|
if (mypoints7[i].y < min_y7) { |
|
|
min_y7 = mypoints7[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
var min_x8 = 10000; |
|
|
var min_y8 = 10000; |
|
|
for (var i = 0; i < MAX_SIZE_POINTS; i++) { |
|
|
if (mypoints8[i].x < min_x8) { |
|
|
min_x8 = mypoints8[i].x; |
|
|
} |
|
|
if (mypoints8[i].y < min_y8) { |
|
|
min_y8 = mypoints8[i].y; |
|
|
} |
|
|
} |
|
|
|
|
|
canvasTripwire1 = new fabric.Canvas('CanvasTripwire1', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
|
|
|
canvasTripwire2 = new fabric.Canvas('CanvasTripwire2', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire3 = new fabric.Canvas('CanvasTripwire3', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire4 = new fabric.Canvas('CanvasTripwire4', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire5 = new fabric.Canvas('CanvasTripwire5', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire6 = new fabric.Canvas('CanvasTripwire6', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire7 = new fabric.Canvas('CanvasTripwire7', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire8 = new fabric.Canvas('CanvasTripwire8', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire_default = new fabric.Canvas('CanvasTripwire_default', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
|
|
|
canvasTripwire_default.requestRenderAll(); |
|
|
|
|
|
canvasTripwire_all = new fabric.Canvas('CanvasTripwire_all', { |
|
|
height: G_VIEW_CANVAS_Y,//window.innerHeight |
|
|
width: G_VIEW_CANVAS_X//window.innerWidth |
|
|
}); |
|
|
/* |
|
|
var rectBox = new fabric.Rect({ |
|
|
width: 100, |
|
|
height: 100, |
|
|
top: 200, |
|
|
left: 200, |
|
|
fill: '#ff0000', |
|
|
opacity: 0.5 |
|
|
}) |
|
|
*/ |
|
|
/* |
|
|
var polBox = new fabric.Polygon([ |
|
|
{ x: 200, y: 50 }, |
|
|
{ x: 200, y: 0 }, |
|
|
{ x: 250, y: 50 }, |
|
|
{ x: 250, y: 100 }, |
|
|
{ x: 150, y: 100 }, |
|
|
{ x: 150, y: 50 }], { |
|
|
left: 200, |
|
|
top: 200, |
|
|
angle: 0, |
|
|
fill: '#ff0000', |
|
|
opacity: 0.5 |
|
|
} |
|
|
); |
|
|
canvasTripwire.add(polBox); |
|
|
*/ |
|
|
polygon_zone1 = new fabric.Polygon(mypoints1, { |
|
|
left: min_x1, |
|
|
top: min_y1, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone2 = new fabric.Polygon(mypoints2, { |
|
|
left: min_x2, |
|
|
top: min_y2, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone3 = new fabric.Polygon(mypoints3, { |
|
|
left: min_x3, |
|
|
top: min_y3, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone4 = new fabric.Polygon(mypoints4, { |
|
|
left: min_x4, |
|
|
top: min_y4, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone5 = new fabric.Polygon(mypoints5, { |
|
|
left: min_x5, |
|
|
top: min_y5, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone6 = new fabric.Polygon(mypoints6, { |
|
|
left: min_x6, |
|
|
top: min_y6, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone7 = new fabric.Polygon(mypoints7, { |
|
|
left: min_x7, |
|
|
top: min_y7, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone8 = new fabric.Polygon(mypoints8, { |
|
|
left: min_x8, |
|
|
top: min_y8, |
|
|
fill: 'transparent', |
|
|
strokeWidth: 2, |
|
|
stroke: '#ffff00', |
|
|
scaleX: 1, |
|
|
scaleY: 1, |
|
|
opacity: 0.7, |
|
|
objectCaching: false, |
|
|
transparentCorners: false, |
|
|
//cornerColor: '#ff0000', |
|
|
}); |
|
|
|
|
|
polygon_zone1.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone1.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone2.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone2.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone3.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone3.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone4.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone4.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone5.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone5.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone6.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone6.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone7.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone7.lockMovementY = true; //Prevents vertical movement |
|
|
polygon_zone8.lockMovementX = true; //Prevents horizontal movement |
|
|
polygon_zone8.lockMovementY = true; //Prevents vertical movement |
|
|
|
|
|
canvasTripwire1.add(polygon_zone1); |
|
|
canvasTripwire2.add(polygon_zone2); |
|
|
canvasTripwire3.add(polygon_zone3); |
|
|
canvasTripwire4.add(polygon_zone4); |
|
|
canvasTripwire5.add(polygon_zone5); |
|
|
canvasTripwire6.add(polygon_zone6); |
|
|
canvasTripwire7.add(polygon_zone7); |
|
|
canvasTripwire8.add(polygon_zone8); |
|
|
|
|
|
/* |
|
|
canvasTripwire1.add(AddArrowObject(mypoints1[3].x, mypoints1[3].y, mypoints1[2].x, mypoints1[2].y)); |
|
|
canvasTripwire2.add(AddArrowObject(mypoints2[3].x, mypoints2[3].y, mypoints2[2].x, mypoints2[2].y)); |
|
|
canvasTripwire3.add(AddArrowObject(mypoints3[3].x, mypoints3[3].y, mypoints3[2].x, mypoints3[2].y)); |
|
|
canvasTripwire4.add(AddArrowObject(mypoints4[3].x, mypoints4[3].y, mypoints4[2].x, mypoints4[2].y)); |
|
|
*/ |
|
|
/* |
|
|
canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
|
|
|
canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
|
|
|
canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
|
|
|
canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, "")); |
|
|
*/ |
|
|
//polygon_zone.visible = false; |
|
|
} |
|
|
|
|
|
function GetPointLocation(zone_id) { |
|
|
if (zone_id === 0) |
|
|
return currentPointPosition1; |
|
|
else if (zone_id === 1) |
|
|
return currentPointPosition2; |
|
|
else if (zone_id === 2) |
|
|
return currentPointPosition3; |
|
|
else if (zone_id === 3) |
|
|
return currentPointPosition4; |
|
|
else if (zone_id === 4) |
|
|
return currentPointPosition5; |
|
|
else if (zone_id === 5) |
|
|
return currentPointPosition6; |
|
|
else if (zone_id === 6) |
|
|
return currentPointPosition7; |
|
|
else if (zone_id === 7) |
|
|
return currentPointPosition8; |
|
|
} |
|
|
|
|
|
function polygonPositionHandler(dim, finalMatrix, fabricObject) { |
|
|
var x = (fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x), |
|
|
y = (fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y); |
|
|
return fabric.util.transformPoint( |
|
|
{ x: x, y: y }, |
|
|
fabric.util.multiplyTransformMatrices( |
|
|
fabricObject.canvas.viewportTransform, |
|
|
fabricObject.calcTransformMatrix() |
|
|
) |
|
|
); |
|
|
} |
|
|
|
|
|
function isPointInLine(point, point2, linePoint1, linePoint2) { |
|
|
|
|
|
//判斷兩條線是否平行或者共線 |
|
|
|
|
|
var denominator = (point.y - point2.y) * (linePoint1.x - linePoint2.x) - (point2.x - point.x) * (linePoint2.y - linePoint1.y); |
|
|
|
|
|
if (denominator == 0) |
|
|
|
|
|
return false; |
|
|
|
|
|
//獲取兩條線延伸後的交點座標 |
|
|
|
|
|
var x = ((point.x - point2.x) * (linePoint1.x - linePoint2.x) * (linePoint2.y - point2.y) + |
|
|
|
|
|
(point.y - point2.y) * (linePoint1.x - linePoint2.x) * point2.x - (linePoint1.y - linePoint2.y) * (point.x - point2.x) * linePoint2.x) / denominator; |
|
|
|
|
|
var y = -((point.y - point2.y) * (linePoint1.y - linePoint2.y) * (linePoint2.x - point2.x) + |
|
|
|
|
|
(point.x - point2.x) * (linePoint1.y - linePoint2.y) * point2.y - (linePoint1.x - linePoint2.x) * (point.y - point2.y) * linePoint2.y) / denominator; |
|
|
|
|
|
//判斷交點是否線上段上 |
|
|
|
|
|
if ((x - point2.x) * (x - point.x) <= 0 && (y - point2.y) * (y - point.y) <= 0 && (x - linePoint2.x) * (x - linePoint1.x) <= 0 && (y - linePoint2.y) * (y - linePoint1.y) <= 0) |
|
|
return true; |
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
// define a function that will define what the control does |
|
|
// this function will be called on every mouse move after a control has been |
|
|
// clicked and is being dragged. |
|
|
// The function receive as argument the mouse event, the current trasnform object |
|
|
// and the current position in canvas coordinate |
|
|
// transform.target is a reference to the current object being transformed, |
|
|
function func_actionHandler(eventData, transform, x, y) { |
|
|
var polygon = transform.target, |
|
|
currentControl = polygon.controls[polygon.__corner], |
|
|
mouseLocalPosition = polygon.toLocalPoint(new fabric.Point(x, y), 'center', 'center'), |
|
|
polygonBaseSize = polygon._getNonTransformedDimensions(), |
|
|
size = polygon._getTransformedDimensions(0, 0), |
|
|
finalPointPosition = { |
|
|
x: Math.round(mouseLocalPosition.x * polygonBaseSize.x / size.x + polygon.pathOffset.x), |
|
|
y: Math.round(mouseLocalPosition.y * polygonBaseSize.y / size.y + polygon.pathOffset.y) |
|
|
}; |
|
|
|
|
|
if (finalPointPosition.x < 10) { |
|
|
finalPointPosition.x = 10; |
|
|
} |
|
|
|
|
|
if (finalPointPosition.x > MAX_WIDTH - 10) { |
|
|
finalPointPosition.x = MAX_WIDTH - 10; |
|
|
} |
|
|
|
|
|
if (finalPointPosition.y < 10) { |
|
|
finalPointPosition.y = 10; |
|
|
} |
|
|
|
|
|
if (finalPointPosition.y > MAX_HEIGHT - 10) { |
|
|
finalPointPosition.y = MAX_HEIGHT - 10; |
|
|
} |
|
|
|
|
|
var check_cross = 0; |
|
|
|
|
|
var max_size_of_points = g_enable_show_direction == 1 ? 4 : 6; |
|
|
|
|
|
var current_point_index = currentControl.pointIndex; |
|
|
var next_point_index = currentControl.pointIndex + 1 < max_size_of_points ? currentControl.pointIndex + 1 : 0; |
|
|
var last_point_index = currentControl.pointIndex - 1 >= 0 ? currentControl.pointIndex - 1 : max_size_of_points - 1; |
|
|
|
|
|
for (var i = 0; i < max_size_of_points; i++) { |
|
|
var current_index = i; |
|
|
var next_index = i + 1 < max_size_of_points ? i + 1 : 0; |
|
|
if (current_index != current_point_index && current_index != next_point_index && next_index != current_point_index && next_index != next_point_index) { |
|
|
if (isPointInLine(finalPointPosition, polygon.points[next_point_index], polygon.points[current_index], polygon.points[next_index])) { |
|
|
check_cross = 1; |
|
|
} |
|
|
if (isPointInLine(finalPointPosition, polygon.points[current_point_index], polygon.points[current_index], polygon.points[next_index])) { |
|
|
check_cross = 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
for (var i = 0; i < max_size_of_points; i++) { |
|
|
var current_index = i; |
|
|
var last_index = i - 1 >= 0 ? i - 1 : max_size_of_points - 1; |
|
|
if (current_index != current_point_index && current_index != last_point_index && last_index != current_point_index && last_index != last_point_index) { |
|
|
if (isPointInLine(finalPointPosition, polygon.points[last_point_index], polygon.points[current_index], polygon.points[last_index])) { |
|
|
check_cross = 1; |
|
|
} |
|
|
if (isPointInLine(finalPointPosition, polygon.points[current_point_index], polygon.points[current_index], polygon.points[last_index])) { |
|
|
check_cross = 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
if (Math.sqrt(Math.pow(finalPointPosition.x - polygon.points[current_point_index].x, 2) + Math.pow(finalPointPosition.y - polygon.points[current_point_index].y, 2)) >= MAX_MOVE_RADIUS) { |
|
|
check_cross = 1; |
|
|
} |
|
|
//console.log("polygon.pathOffset.x:" + polygon.pathOffset.x + "; polygon.pathOffset.y:" + polygon.pathOffset.y); |
|
|
|
|
|
if (check_cross == 0) |
|
|
polygon.points[currentControl.pointIndex] = finalPointPosition; |
|
|
|
|
|
return true; |
|
|
} |
|
|
|
|
|
function GetMaxWidth() { |
|
|
return MAX_WIDTH; |
|
|
} |
|
|
|
|
|
function GetMaxHeight() { |
|
|
return MAX_HEIGHT; |
|
|
} |
|
|
// define a function that can keep the polygon in the same position when we change its |
|
|
// width/height/top/left. |
|
|
function anchorWrapper1(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
//fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition1[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition1[4].x = (currentPointPosition1[0].x * 1 + currentPointPosition1[3].x * 2) / 3; |
|
|
currentPointPosition1[4].y = (currentPointPosition1[0].y * 1 + currentPointPosition1[3].y * 2) / 3; |
|
|
currentPointPosition1[5].x = (currentPointPosition1[0].x * 2 + currentPointPosition1[3].x * 1) / 3; |
|
|
currentPointPosition1[5].y = (currentPointPosition1[0].y * 2 + currentPointPosition1[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper2(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition2[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition2[4].x = (currentPointPosition2[0].x * 1 + currentPointPosition2[3].x * 2) / 3; |
|
|
currentPointPosition2[4].y = (currentPointPosition2[0].y * 1 + currentPointPosition2[3].y * 2) / 3; |
|
|
currentPointPosition2[5].x = (currentPointPosition2[0].x * 2 + currentPointPosition2[3].x * 1) / 3; |
|
|
currentPointPosition2[5].y = (currentPointPosition2[0].y * 2 + currentPointPosition2[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper3(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition3[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition3[4].x = (currentPointPosition3[0].x * 1 + currentPointPosition3[3].x * 2) / 3; |
|
|
currentPointPosition3[4].y = (currentPointPosition3[0].y * 1 + currentPointPosition3[3].y * 2) / 3; |
|
|
currentPointPosition3[5].x = (currentPointPosition3[0].x * 2 + currentPointPosition3[3].x * 1) / 3; |
|
|
currentPointPosition3[5].y = (currentPointPosition3[0].y * 2 + currentPointPosition3[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper4(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition4[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition4[4].x = (currentPointPosition4[0].x * 1 + currentPointPosition4[3].x * 2) / 3; |
|
|
currentPointPosition4[4].y = (currentPointPosition4[0].y * 1 + currentPointPosition4[3].y * 2) / 3; |
|
|
currentPointPosition4[5].x = (currentPointPosition4[0].x * 2 + currentPointPosition4[3].x * 1) / 3; |
|
|
currentPointPosition4[5].y = (currentPointPosition4[0].y * 2 + currentPointPosition4[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper5(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition5[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition5[4].x = (currentPointPosition5[0].x * 1 + currentPointPosition5[3].x * 2) / 3; |
|
|
currentPointPosition5[4].y = (currentPointPosition5[0].y * 1 + currentPointPosition5[3].y * 2) / 3; |
|
|
currentPointPosition5[5].x = (currentPointPosition5[0].x * 2 + currentPointPosition5[3].x * 1) / 3; |
|
|
currentPointPosition5[5].y = (currentPointPosition5[0].y * 2 + currentPointPosition5[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper6(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition6[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition6[4].x = (currentPointPosition6[0].x * 1 + currentPointPosition6[3].x * 2) / 3; |
|
|
currentPointPosition6[4].y = (currentPointPosition6[0].y * 1 + currentPointPosition6[3].y * 2) / 3; |
|
|
currentPointPosition6[5].x = (currentPointPosition6[0].x * 2 + currentPointPosition6[3].x * 1) / 3; |
|
|
currentPointPosition6[5].y = (currentPointPosition6[0].y * 2 + currentPointPosition6[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
function anchorWrapper7(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition7[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition7[4].x = (currentPointPosition7[0].x * 1 + currentPointPosition7[3].x * 2) / 3; |
|
|
currentPointPosition7[4].y = (currentPointPosition7[0].y * 1 + currentPointPosition7[3].y * 2) / 3; |
|
|
currentPointPosition7[5].x = (currentPointPosition7[0].x * 2 + currentPointPosition7[3].x * 1) / 3; |
|
|
currentPointPosition7[5].y = (currentPointPosition7[0].y * 2 + currentPointPosition7[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function anchorWrapper8(anchorIndex, fn) { |
|
|
return function (eventData, transform, x, y) { |
|
|
var fabricObject = transform.target, |
|
|
absolutePoint = fabric.util.transformPoint({ |
|
|
x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x), |
|
|
y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y), |
|
|
}, fabricObject.calcTransformMatrix()), |
|
|
actionPerformed = fn(eventData, transform, x, y), |
|
|
newDim = fabricObject._setPositionDimensions({}), |
|
|
polygonBaseSize = fabricObject._getNonTransformedDimensions(), |
|
|
newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x, |
|
|
newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y; |
|
|
fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5); |
|
|
|
|
|
for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++) |
|
|
currentPointPosition8[index_point] = fabricObject.points[index_point]; |
|
|
|
|
|
if (g_enable_show_direction == 1) { |
|
|
currentPointPosition8[4].x = (currentPointPosition8[0].x * 1 + currentPointPosition8[3].x * 2) / 3; |
|
|
currentPointPosition8[4].y = (currentPointPosition8[0].y * 1 + currentPointPosition8[3].y * 2) / 3; |
|
|
currentPointPosition8[5].x = (currentPointPosition8[0].x * 2 + currentPointPosition8[3].x * 1) / 3; |
|
|
currentPointPosition8[5].y = (currentPointPosition8[0].y * 2 + currentPointPosition8[3].y * 1) / 3; |
|
|
} |
|
|
|
|
|
different_index = anchorIndex; |
|
|
show_pixels_for_zone(); |
|
|
Edit_Arrow(); |
|
|
return actionPerformed; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var check_edit1 = 0; |
|
|
var check_edit2 = 0; |
|
|
var check_edit3 = 0; |
|
|
var check_edit4 = 0; |
|
|
var check_edit5 = 0; |
|
|
var check_edit6 = 0; |
|
|
var check_edit7 = 0; |
|
|
var check_edit8 = 0; |
|
|
|
|
|
function get_check_edit1() { |
|
|
return check_edit1; |
|
|
} |
|
|
|
|
|
function get_check_edit2() { |
|
|
return check_edit2; |
|
|
} |
|
|
|
|
|
function get_check_edit3() { |
|
|
return check_edit3; |
|
|
} |
|
|
function get_check_edit4() { |
|
|
return check_edit4; |
|
|
} |
|
|
|
|
|
function get_check_edit5() { |
|
|
return check_edit5; |
|
|
} |
|
|
|
|
|
function get_check_edit6() { |
|
|
return check_edit6; |
|
|
} |
|
|
|
|
|
function get_check_edit7() { |
|
|
return check_edit7; |
|
|
} |
|
|
|
|
|
function get_check_edit8() { |
|
|
return check_edit8; |
|
|
} |
|
|
|
|
|
function Edit1() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly1 = canvasTripwire1.getObjects()[0]; |
|
|
canvasTripwire1.setActiveObject(poly1); |
|
|
|
|
|
poly1.edit = !poly1.edit; |
|
|
if (poly1.edit) { |
|
|
var lastControl1 = poly1.points.length - 1; |
|
|
poly1.cornerStyle = 'circle'; |
|
|
poly1.cornerColor = '#6c87d4'; |
|
|
poly1.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly1.controls = poly1.points.reduce(function (acc1, point1, index1) { |
|
|
acc1['p' + index1] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper1(index1 > 0 ? index1 - 1 : lastControl1, func_actionHandler), |
|
|
actionName: 'modifyPolygon1', |
|
|
pointIndex: index1 |
|
|
}); |
|
|
return acc1; |
|
|
}, {}); |
|
|
|
|
|
check_edit1 = 1; |
|
|
} else { |
|
|
//poly1.cornerColor = 'black'; |
|
|
//poly1.cornerStyle = 'rect'; |
|
|
//poly1.controls = fabric.Object.prototype.controls; |
|
|
poly1.controls = null; |
|
|
poly1.cornerColor = null; |
|
|
poly1.cornerStyle = null; |
|
|
|
|
|
check_edit1 = 0; |
|
|
} |
|
|
poly1.hasBorders = !poly1.edit; |
|
|
canvasTripwire1.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit2() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly2 = canvasTripwire2.getObjects()[0]; |
|
|
canvasTripwire2.setActiveObject(poly2); |
|
|
|
|
|
poly2.edit = !poly2.edit; |
|
|
if (poly2.edit) { |
|
|
var lastControl2 = poly2.points.length - 1; |
|
|
poly2.cornerStyle = 'circle'; |
|
|
poly2.cornerColor = '#6c87d4'; |
|
|
poly2.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly2.controls = poly2.points.reduce(function (acc2, point2, index2) { |
|
|
acc2['p' + index2] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper2(index2 > 0 ? index2 - 1 : lastControl2, func_actionHandler), |
|
|
actionName: 'modifyPolygon2', |
|
|
pointIndex: index2 |
|
|
}); |
|
|
return acc2; |
|
|
}, {}); |
|
|
|
|
|
check_edit2 = 1; |
|
|
} else { |
|
|
//poly2.cornerColor = 'black'; |
|
|
//poly2.cornerStyle = 'rect'; |
|
|
//poly2.controls = fabric.Object.prototype.controls; |
|
|
poly2.controls = null; |
|
|
poly2.cornerColor = null; |
|
|
poly2.cornerStyle = null; |
|
|
|
|
|
check_edit2 = 0; |
|
|
} |
|
|
poly2.hasBorders = !poly2.edit; |
|
|
canvasTripwire2.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit3() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly3 = canvasTripwire3.getObjects()[0]; |
|
|
canvasTripwire3.setActiveObject(poly3); |
|
|
|
|
|
poly3.edit = !poly3.edit; |
|
|
if (poly3.edit) { |
|
|
var lastControl3 = poly3.points.length - 1; |
|
|
poly3.cornerStyle = 'circle'; |
|
|
poly3.cornerColor = '#6c87d4'; |
|
|
poly3.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly3.controls = poly3.points.reduce(function (acc3, point3, index3) { |
|
|
acc3['p' + index3] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper3(index3 > 0 ? index3 - 1 : lastControl3, func_actionHandler), |
|
|
actionName: 'modifyPolygon3', |
|
|
pointIndex: index3 |
|
|
}); |
|
|
return acc3; |
|
|
}, {}); |
|
|
|
|
|
check_edit3 = 1; |
|
|
} else { |
|
|
//poly3.cornerColor = 'black'; |
|
|
//poly3.cornerStyle = 'rect'; |
|
|
//poly3.controls = fabric.Object.prototype.controls; |
|
|
poly3.controls = null; |
|
|
poly3.cornerColor = null; |
|
|
poly3.cornerStyle = null; |
|
|
|
|
|
check_edit3 = 0; |
|
|
} |
|
|
poly3.hasBorders = !poly3.edit; |
|
|
canvasTripwire3.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit4() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly4 = canvasTripwire4.getObjects()[0]; |
|
|
canvasTripwire4.setActiveObject(poly4); |
|
|
|
|
|
poly4.edit = !poly4.edit; |
|
|
if (poly4.edit) { |
|
|
var lastControl4 = poly4.points.length - 1; |
|
|
poly4.cornerStyle = 'circle'; |
|
|
poly4.cornerColor = '#6c87d4'; |
|
|
poly4.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly4.controls = poly4.points.reduce(function (acc4, point4, index4) { |
|
|
acc4['p' + index4] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper4(index4 > 0 ? index4 - 1 : lastControl4, func_actionHandler), |
|
|
actionName: 'modifyPolygon4', |
|
|
pointIndex: index4 |
|
|
}); |
|
|
return acc4; |
|
|
}, {}); |
|
|
|
|
|
check_edit4 = 1; |
|
|
} else { |
|
|
//poly4.cornerColor = 'black'; |
|
|
//poly4.cornerStyle = 'rect'; |
|
|
//poly4.controls = fabric.Object.prototype.controls; |
|
|
poly4.controls = null; |
|
|
poly4.cornerColor = null; |
|
|
poly4.cornerStyle = null; |
|
|
|
|
|
check_edit4 = 0; |
|
|
} |
|
|
poly4.hasBorders = !poly4.edit; |
|
|
canvasTripwire4.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit5() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly5 = canvasTripwire5.getObjects()[0]; |
|
|
canvasTripwire5.setActiveObject(poly5); |
|
|
|
|
|
poly5.edit = !poly5.edit; |
|
|
if (poly5.edit) { |
|
|
var lastControl5 = poly5.points.length - 1; |
|
|
poly5.cornerStyle = 'circle'; |
|
|
poly5.cornerColor = '#6c87d4'; |
|
|
poly5.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly5.controls = poly5.points.reduce(function (acc5, point5, index5) { |
|
|
acc5['p' + index5] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper5(index5 > 0 ? index5 - 1 : lastControl5, func_actionHandler), |
|
|
actionName: 'modifyPolygon5', |
|
|
pointIndex: index5 |
|
|
}); |
|
|
return acc5; |
|
|
}, {}); |
|
|
|
|
|
check_edit5 = 1; |
|
|
} else { |
|
|
//poly4.cornerColor = 'black'; |
|
|
//poly4.cornerStyle = 'rect'; |
|
|
//poly4.controls = fabric.Object.prototype.controls; |
|
|
poly5.controls = null; |
|
|
poly5.cornerColor = null; |
|
|
poly5.cornerStyle = null; |
|
|
|
|
|
check_edit5 = 0; |
|
|
} |
|
|
poly5.hasBorders = !poly5.edit; |
|
|
canvasTripwire5.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit6() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly6 = canvasTripwire6.getObjects()[0]; |
|
|
canvasTripwire6.setActiveObject(poly6); |
|
|
|
|
|
poly6.edit = !poly6.edit; |
|
|
if (poly6.edit) { |
|
|
var lastControl6 = poly6.points.length - 1; |
|
|
poly6.cornerStyle = 'circle'; |
|
|
poly6.cornerColor = '#6c87d4'; |
|
|
poly6.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly6.controls = poly6.points.reduce(function (acc6, point6, index6) { |
|
|
acc6['p' + index6] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper6(index6 > 0 ? index6 - 1 : lastControl6, func_actionHandler), |
|
|
actionName: 'modifyPolygon6', |
|
|
pointIndex: index6 |
|
|
}); |
|
|
return acc6; |
|
|
}, {}); |
|
|
|
|
|
check_edit6 = 1; |
|
|
} else { |
|
|
//poly4.cornerColor = 'black'; |
|
|
//poly4.cornerStyle = 'rect'; |
|
|
//poly4.controls = fabric.Object.prototype.controls; |
|
|
poly6.controls = null; |
|
|
poly6.cornerColor = null; |
|
|
poly6.cornerStyle = null; |
|
|
|
|
|
check_edit6 = 0; |
|
|
} |
|
|
poly6.hasBorders = !poly6.edit; |
|
|
canvasTripwire6.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit7() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly7 = canvasTripwire7.getObjects()[0]; |
|
|
canvasTripwire7.setActiveObject(poly7); |
|
|
|
|
|
poly7.edit = !poly7.edit; |
|
|
if (poly7.edit) { |
|
|
var lastControl7 = poly7.points.length - 1; |
|
|
poly7.cornerStyle = 'circle'; |
|
|
poly7.cornerColor = '#6c87d4'; |
|
|
poly7.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly7.controls = poly7.points.reduce(function (acc7, point7, index7) { |
|
|
acc7['p' + index7] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper7(index7 > 0 ? index7 - 1 : lastControl7, func_actionHandler), |
|
|
actionName: 'modifyPolygon7', |
|
|
pointIndex: index7 |
|
|
}); |
|
|
return acc7; |
|
|
}, {}); |
|
|
|
|
|
check_edit7 = 1; |
|
|
} else { |
|
|
//poly4.cornerColor = 'black'; |
|
|
//poly4.cornerStyle = 'rect'; |
|
|
//poly4.controls = fabric.Object.prototype.controls; |
|
|
poly7.controls = null; |
|
|
poly7.cornerColor = null; |
|
|
poly7.cornerStyle = null; |
|
|
|
|
|
check_edit7 = 0; |
|
|
} |
|
|
poly7.hasBorders = !poly7.edit; |
|
|
canvasTripwire7.requestRenderAll(); |
|
|
} |
|
|
|
|
|
function Edit8() { |
|
|
// clone what are you copying since you |
|
|
// may want copy and paste on different moment. |
|
|
// and you do not want the changes happened |
|
|
// later to reflect on the copy. |
|
|
var poly8 = canvasTripwire8.getObjects()[0]; |
|
|
canvasTripwire8.setActiveObject(poly8); |
|
|
|
|
|
poly8.edit = !poly8.edit; |
|
|
if (poly8.edit) { |
|
|
var lastControl8 = poly8.points.length - 1; |
|
|
poly8.cornerStyle = 'circle'; |
|
|
poly8.cornerColor = '#6c87d4'; |
|
|
poly8.cornerColor = "rgba(108, 135, 212, 0.8)"; |
|
|
|
|
|
poly8.controls = poly8.points.reduce(function (acc8, point8, index8) { |
|
|
acc8['p' + index8] = new fabric.Control({ |
|
|
positionHandler: polygonPositionHandler, |
|
|
actionHandler: anchorWrapper8(index8 > 0 ? index8 - 1 : lastControl8, func_actionHandler), |
|
|
actionName: 'modifyPolygon8', |
|
|
pointIndex: index8 |
|
|
}); |
|
|
return acc8; |
|
|
}, {}); |
|
|
|
|
|
check_edit8 = 1; |
|
|
} else { |
|
|
//poly4.cornerColor = 'black'; |
|
|
//poly4.cornerStyle = 'rect'; |
|
|
//poly4.controls = fabric.Object.prototype.controls; |
|
|
poly8.controls = null; |
|
|
poly8.cornerColor = null; |
|
|
poly8.cornerStyle = null; |
|
|
|
|
|
check_edit8 = 0; |
|
|
} |
|
|
poly8.hasBorders = !poly8.edit; |
|
|
canvasTripwire8.requestRenderAll(); |
|
|
} |
|
|
|
|
|
|
|
|
function GetAnpr() { |
|
|
|
|
|
if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) { |
|
|
if (!!data_anpr) { |
|
|
var complete_data = ""; |
|
|
complete_data = complete_data.concat(data_anpr); |
|
|
|
|
|
n1 = complete_data.indexOf('{"AiEngine"'); |
|
|
//n2 = complete_data.indexOf('"Count":'); |
|
|
n2_temp = complete_data.indexOf('"Count"'); |
|
|
n2 = complete_data.indexOf('}', n2_temp); |
|
|
|
|
|
var max_protected_objects = 1; |
|
|
if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) { |
|
|
wait_count = 0; |
|
|
clear_count = 0; |
|
|
|
|
|
datas = complete_data.split(/\r\n|\r/); |
|
|
complete_data = ""; |
|
|
|
|
|
for (var i = datas.length - 1; i >= 0; i--) { |
|
|
|
|
|
if (datas[i].length > 12 && datas[i].substring(0, 12) == '{"AiEngine":' && datas[i].length < 8192 * 8) { |
|
|
//datas[i].replace(/\\'/g, "'"); |
|
|
//datas[i].replace('\"', '"'); |
|
|
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); |
|
|
|
|
|
var temp = null; |
|
|
temp = datas[i].slice(); |
|
|
|
|
|
//ai_json = JSON.parse(temp); |
|
|
ai_json = validatingJSON(temp); |
|
|
|
|
|
|
|
|
datas[i] = null; |
|
|
|
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var AI_fps = ai_json.AI_fps; |
|
|
localStorage.setItem('AI_fps', AI_fps); |
|
|
var red_light = ai_json.red_light; |
|
|
if (ai_json != null) { |
|
|
bbox_count = ai_json.Count; |
|
|
} |
|
|
else { |
|
|
bbox_count = 0; |
|
|
} |
|
|
|
|
|
plate_count = 0; |
|
|
plate_idx = 0; |
|
|
|
|
|
RefreshCanvasObject(max_protected_objects); |
|
|
|
|
|
if (red_light == 1) { |
|
|
canvasTripwire_all.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString())); |
|
|
} |
|
|
else { |
|
|
canvasTripwire_all.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString())); |
|
|
} |
|
|
|
|
|
for (var i = 0; i < bbox_count; i++) { |
|
|
if (ai_json.AiEngine[i]) { |
|
|
|
|
|
//console.log("ai_json.AiEngine[i] = " + ai_json.AiEngine[i]); //a113n |
|
|
//console.log("[a113n] " + ai_json.AiEngine[i].toString()) //a113n |
|
|
|
|
|
if (ai_json.AiEngine[i].parent_idx == -1) { |
|
|
if (ai_json.AiEngine[i].label_name == "L._Plate_USA" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_MAC/MYS" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_VNM" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_EUR" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_GBR" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_JPN" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_THA" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_IDN" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_IDN2" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_BGD" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_MEA" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_PHL" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_AUS" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_CNT_1LINE" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_CNT_2LINES" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_CNT_3LINES" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_CNT_VERTICAL" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_CNT_USDOT" || |
|
|
ai_json.AiEngine[i].label_name == "ambulance" || |
|
|
ai_json.AiEngine[i].label_name == "face" || |
|
|
ai_json.AiEngine[i].label_name == "blank" || |
|
|
ai_json.AiEngine[i].label_name == "stop_sign" || |
|
|
ai_json.AiEngine[i].label_name == "qrcode" || |
|
|
ai_json.AiEngine[i].label_name == "barcode" || |
|
|
ai_json.AiEngine[i].label_name == "L._Plate_TWN") { |
|
|
|
|
|
if (ai_json.AiEngine[i].properties) { |
|
|
if (ai_json.AiEngine[i].properties.plate) { |
|
|
var plate_name = ""; |
|
|
if (ai_json.AiEngine[i].label_name == "ambulance") |
|
|
plate_name = plate_name.concat(ai_json.AiEngine[i].label_name); |
|
|
else if (ai_json.AiEngine[i].label_name == "blank") |
|
|
plate_name = plate_name.concat(ai_json.AiEngine[i].label_name); |
|
|
else if (ai_json.AiEngine[i].label_name == "stop_sign") |
|
|
plate_name = plate_name.concat(ai_json.AiEngine[i].label_name); |
|
|
else |
|
|
plate_name = plate_name.concat(ai_json.AiEngine[i].properties.plate); |
|
|
/* |
|
|
plate_name = plate_name.replace(/[「」‘’']/g, ''); |
|
|
if (plate_name === '' || plate_name === '0') { |
|
|
continue; |
|
|
}*/ |
|
|
//console.log("plate_name: " + plate_name + ",behavior_id" + ai_json.AiEngine[i].behavior_id.toString()); |
|
|
|
|
|
if (ai_json.AiEngine[i].behavior_id > 0 || localStorage.getItem("enable_only_once_to_post") == "No") { |
|
|
push_lpr(plate_name, ai_json.AiEngine[i].properties.area, ai_json.AiEngine[i].confidence.toString() + "%", COLOR_ARRAY[ai_json.AiEngine[i].color_id], COLOR_ARRAY[ai_json.AiEngine[i].sec_color_id], ai_json.AiEngine[i].car_type_name, ai_json.AiEngine[i].center_direction); |
|
|
|
|
|
if (("LPR_BMP" in ai_json.AiEngine[i])) { |
|
|
push_LPBMP(ai_json.AiEngine[i]); |
|
|
set_lpr_content(get_lprimgnum()); // get_lprimgnum() returns the last index of img in LPBMP_Array |
|
|
} |
|
|
} |
|
|
|
|
|
AssignPlateObject(ai_json, i, plate_name); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
RenderAllCanvas(); |
|
|
ai_json = null; |
|
|
} |
|
|
else { |
|
|
wait_count++; |
|
|
if (wait_count >= 3) { |
|
|
wait_count = 0; |
|
|
complete_data = ""; |
|
|
} |
|
|
|
|
|
clear_count++; |
|
|
if (clear_count >= 3) { |
|
|
clear_count = 0; |
|
|
RefreshCanvasObject(max_protected_objects); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function AssignPlateObject(ai_json, i_index, plate_name) { |
|
|
var x = parseInt(ai_json.AiEngine[i_index].x, 10); |
|
|
var y = parseInt(ai_json.AiEngine[i_index].y, 10); |
|
|
var w = parseInt(ai_json.AiEngine[i_index].w, 10); |
|
|
var h = parseInt(ai_json.AiEngine[i_index].h, 10); |
|
|
var text_y = parseInt((ai_json.AiEngine[i_index].y + ai_json.AiEngine[i_index].h), 10); |
|
|
//console.log(text_y); |
|
|
/*if (x * 0.25 <= 20) { |
|
|
x = 80; |
|
|
} |
|
|
else if (x * 0.25 >= 460) { |
|
|
x = 1840; |
|
|
} |
|
|
|
|
|
if (y * 0.3 <= 20) { |
|
|
y = 66; |
|
|
} |
|
|
else if (y * 0.3 >= 300) { |
|
|
y = 999; |
|
|
} |
|
|
|
|
|
if (x * 0.25 + w * 0.25 >= 460) { |
|
|
w = parseInt((460 - x * 0.25) * 4, 10); |
|
|
} |
|
|
|
|
|
if (y * 0.3 + h * 0.3 >= 300) { |
|
|
h = parseInt((300 - y * 0.3) * 3.33, 10); |
|
|
}*/ |
|
|
|
|
|
text_y = y - 66; |
|
|
|
|
|
var area_name = ""; |
|
|
var country_name = ""; |
|
|
var out_label = ""; |
|
|
|
|
|
if (ai_json.AiEngine[i_index].label_name == "L._Plate_USA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_THA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_BGD" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_MEA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_AUS" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_EUR" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_JPN") { |
|
|
area_name = area_name.concat(ai_json.AiEngine[i_index].properties.area); |
|
|
country_name = country_name.concat(ai_json.AiEngine[i_index].properties.country); |
|
|
out_label = out_label.concat(plate_name, ", ", area_name, " ", country_name); |
|
|
} |
|
|
|
|
|
if (canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) { |
|
|
canvasTripwire.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire1.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire2.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire3.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire4.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire5.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire6.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire7.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire8.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
canvasTripwire_all.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1)); |
|
|
|
|
|
var behavior_id = ai_json.AiEngine[i_index].behavior_id; |
|
|
if (ai_json.AiEngine[i_index].label_name == "L._Plate_USA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_THA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_BGD" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_MEA" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_AUS" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_EUR" || |
|
|
ai_json.AiEngine[i_index].label_name == "L._Plate_JPN") { |
|
|
if (behavior_id >= 1) { |
|
|
canvasTripwire.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire1.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire2.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire3.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire4.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire5.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire6.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire7.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire8.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire_all.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
} |
|
|
else { |
|
|
canvasTripwire.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire1.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire2.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire3.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire4.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire5.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire6.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire7.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire8.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire_all.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
} |
|
|
} |
|
|
else { |
|
|
if (behavior_id >= 1) { |
|
|
canvasTripwire.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire1.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire2.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire3.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire4.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire5.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire6.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire7.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire8.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire_all.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
} |
|
|
else { |
|
|
canvasTripwire.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire1.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire2.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire3.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire4.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire5.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire6.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire7.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire8.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
canvasTripwire_all.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%")); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function RenderAllCanvas() { |
|
|
if (canvasTripwire) { |
|
|
canvasTripwire.renderAll(); |
|
|
} |
|
|
if (canvasTripwire1) { |
|
|
canvasTripwire1.renderAll(); |
|
|
} |
|
|
if (canvasTripwire2) { |
|
|
canvasTripwire2.renderAll(); |
|
|
} |
|
|
if (canvasTripwire3) { |
|
|
canvasTripwire3.renderAll(); |
|
|
} |
|
|
if (canvasTripwire4) { |
|
|
canvasTripwire4.renderAll(); |
|
|
} |
|
|
if (canvasTripwire5) { |
|
|
canvasTripwire5.renderAll(); |
|
|
} |
|
|
if (canvasTripwire6) { |
|
|
canvasTripwire6.renderAll(); |
|
|
} |
|
|
if (canvasTripwire7) { |
|
|
canvasTripwire7.renderAll(); |
|
|
} |
|
|
if (canvasTripwire8) { |
|
|
canvasTripwire8.renderAll(); |
|
|
} |
|
|
if (canvasTripwire_all) { |
|
|
canvasTripwire_all.renderAll(); |
|
|
} |
|
|
} |
|
|
|
|
|
function RefreshCanvasObject(max_protected_objects) { |
|
|
if (typeof canvasTripwire !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire.getObjects().length > 0) { |
|
|
var items = canvasTripwire.getObjects(); |
|
|
if (items[canvasTripwire.getObjects().length - 1]) { |
|
|
canvasTripwire.remove(items[canvasTripwire.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire1 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire1.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire1.getObjects(); |
|
|
if (items[canvasTripwire1.getObjects().length - 1]) { |
|
|
canvasTripwire1.remove(items[canvasTripwire1.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire1.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
|
|
|
if (typeof canvasTripwire2 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire2.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire2.getObjects(); |
|
|
if (items[canvasTripwire2.getObjects().length - 1]) { |
|
|
canvasTripwire2.remove(items[canvasTripwire2.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire2.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
|
|
|
if (typeof canvasTripwire3 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire3.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire3.getObjects(); |
|
|
if (items[canvasTripwire3.getObjects().length - 1]) { |
|
|
canvasTripwire3.remove(items[canvasTripwire3.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire3.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire4 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire4.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire4.getObjects(); |
|
|
if (items[canvasTripwire4.getObjects().length - 1]) { |
|
|
canvasTripwire4.remove(items[canvasTripwire4.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire4.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire5 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire5.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire5.getObjects(); |
|
|
if (items[canvasTripwire5.getObjects().length - 1]) { |
|
|
canvasTripwire5.remove(items[canvasTripwire5.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire5.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire6 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire6.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire6.getObjects(); |
|
|
if (items[canvasTripwire6.getObjects().length - 1]) { |
|
|
canvasTripwire6.remove(items[canvasTripwire6.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire6.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire7 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire7.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire7.getObjects(); |
|
|
if (items[canvasTripwire7.getObjects().length - 1]) { |
|
|
canvasTripwire7.remove(items[canvasTripwire7.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire7.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire8 !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire8.getObjects().length > max_protected_objects) { |
|
|
var items = canvasTripwire8.getObjects(); |
|
|
if (items[canvasTripwire8.getObjects().length - 1]) { |
|
|
canvasTripwire8.remove(items[canvasTripwire8.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
canvasTripwire8.getObjects()[0].stroke = "#ffff00"; |
|
|
} |
|
|
|
|
|
if (typeof canvasTripwire_all !== 'undefined') { |
|
|
//Clear all objects |
|
|
while (canvasTripwire_all.getObjects().length > click_canvas_all) { |
|
|
var items = canvasTripwire_all.getObjects(); |
|
|
if (items[canvasTripwire_all.getObjects().length - 1]) { |
|
|
canvasTripwire_all.remove(items[canvasTripwire_all.getObjects().length - 1]); |
|
|
} |
|
|
} |
|
|
|
|
|
for (var index_click = 0; index_click < click_canvas_all; index_click++) { |
|
|
canvasTripwire_all.getObjects()[index_click].stroke = "#ffff00"; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function GetUrlPort() { |
|
|
var url_href = window.location.href; |
|
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
|
|
return arr_url; |
|
|
} |
|
|
|
|
|
var g_GetRequest = null; |
|
|
var g_h = -1; |
|
|
var g_m = -1; |
|
|
var g_s = -1; |
|
|
var g_ms = -1; |
|
|
|
|
|
var g_time_canvas = 83;//250 |
|
|
var g_imgUrl = ""; |
|
|
var g_speed = 99999; |
|
|
var g_times_update_canvas = 0; |
|
|
var g_avg_speed = 7000; |
|
|
var g_count_frame = 0; |
|
|
|
|
|
function GetRequest() { |
|
|
clearInterval(g_GetRequest); |
|
|
g_GetRequest = setInterval(function GetRequest_set_interval() { |
|
|
var current_page = localStorage.getItem('current_page'); |
|
|
if (current_page === 'anpr_index') { |
|
|
//g_times_update_canvas++; |
|
|
g_count_frame++; |
|
|
if (data_anpr != sessionStorage.getItem('getalarmmotion_data')) { |
|
|
data_anpr = sessionStorage.getItem('getalarmmotion_data'); |
|
|
GetAnpr(); |
|
|
} |
|
|
|
|
|
if (g_count_frame % 2 == 0) { |
|
|
g_count_frame = 0; |
|
|
g_times_update_canvas++; |
|
|
var win_width = G_VIEW_CANVAS_X, win_height = G_VIEW_CANVAS_Y; |
|
|
|
|
|
//var imgUrl='../snap.jpg?'+Math.random(); |
|
|
//var imgUrl='./snap.jpg?'+Math.random(); |
|
|
|
|
|
var NowDate = new Date(); |
|
|
var h = NowDate.getHours(); |
|
|
var m = NowDate.getMinutes(); |
|
|
var s = NowDate.getSeconds(); |
|
|
var ms = NowDate.getMilliseconds(); |
|
|
//console.log("[anpr]snap_" + h + '_' + m + '_' + s); |
|
|
|
|
|
|
|
|
if (g_h == -1 || g_m == -1 || g_s == -1 || g_ms == -1) { |
|
|
g_h = h; |
|
|
g_m = m; |
|
|
g_s = s; |
|
|
g_ms = ms; |
|
|
} |
|
|
|
|
|
var imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/getimage_ori?' + 'anpr_' + h + '_' + m + '_' + s + '_' + ms; |
|
|
g_imgUrl = imgUrl; |
|
|
|
|
|
try { |
|
|
fabric.Image.fromURL(imgUrl, function (img) { |
|
|
|
|
|
if (img != null && img._element != null) { |
|
|
|
|
|
if ((h * 3600 + m * 60 + s + ms / 1000) > (g_h * 3600 + g_m * 60 + g_s + g_ms / 1000)) { |
|
|
img.set({ |
|
|
scaleX: win_width / img.width, |
|
|
scaleY: win_height / img.height, |
|
|
}); |
|
|
canvasTripwire.setBackgroundImage(img, canvasTripwire.renderAll.bind(canvasTripwire)); |
|
|
canvasTripwire1.setBackgroundImage(img, canvasTripwire1.renderAll.bind(canvasTripwire1)); |
|
|
canvasTripwire2.setBackgroundImage(img, canvasTripwire2.renderAll.bind(canvasTripwire2)); |
|
|
canvasTripwire3.setBackgroundImage(img, canvasTripwire3.renderAll.bind(canvasTripwire3)); |
|
|
canvasTripwire4.setBackgroundImage(img, canvasTripwire4.renderAll.bind(canvasTripwire4)); |
|
|
canvasTripwire5.setBackgroundImage(img, canvasTripwire5.renderAll.bind(canvasTripwire5)); |
|
|
canvasTripwire6.setBackgroundImage(img, canvasTripwire6.renderAll.bind(canvasTripwire6)); |
|
|
canvasTripwire7.setBackgroundImage(img, canvasTripwire7.renderAll.bind(canvasTripwire7)); |
|
|
canvasTripwire8.setBackgroundImage(img, canvasTripwire8.renderAll.bind(canvasTripwire8)); |
|
|
canvasTripwire_all.setBackgroundImage(img, canvasTripwire_all.renderAll.bind(canvasTripwire_all)); |
|
|
|
|
|
g_h = h; |
|
|
g_m = m; |
|
|
g_s = s; |
|
|
g_ms = ms; |
|
|
} |
|
|
|
|
|
if ((g_h * 3600 + g_m * 60 + g_s + g_ms / 1000) - (h * 3600 + m * 60 + s + ms / 1000) >= 3600) { |
|
|
g_h = h; |
|
|
g_m = m; |
|
|
g_s = s; |
|
|
g_ms = ms; |
|
|
} |
|
|
|
|
|
img = null; |
|
|
} |
|
|
}); |
|
|
} |
|
|
catch (e) { |
|
|
//console.log(e); |
|
|
} |
|
|
imgUrl = null; |
|
|
if (g_times_update_canvas >= 10) { |
|
|
g_times_update_canvas = 0; |
|
|
if (localStorage.getItem('AI_fps') != null) { |
|
|
g_time_canvas = 1000 / localStorage.getItem('AI_fps') / 2; |
|
|
clearInterval(g_GetRequest); |
|
|
g_GetRequest = setInterval(GetRequest_set_interval, g_time_canvas); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, g_time_canvas); |
|
|
} |
|
|
|
|
|
function setup_lprimg_in_anprindex() { |
|
|
set_lpr_content(get_lprimgnum()); |
|
|
} |
|
|
|
|
|
function checkURL(myURL) { |
|
|
var str = myURL; |
|
|
//判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? |
|
|
//下面的代码中应用了转义字符"\"输出一个字符"/" |
|
|
var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; |
|
|
var objExp = new RegExp(Expression); |
|
|
if (objExp.test(str) == true) { |
|
|
return true; |
|
|
} else { |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
var try_set_low_encoder = 0; |
|
|
|
|
|
function set_lpr_content(img_num){ |
|
|
if(img_num > 0){ // img_num = -1 when there has no valid lpr imgs. |
|
|
// remove old imgs |
|
|
//var lprimglist = document.getElementById("lpr_jpg"); |
|
|
//while(lprimglist.hasChildNodes()){ |
|
|
//lprimglist.removeChild(lprimglist.firstChild); |
|
|
//} |
|
|
|
|
|
//var fragment = document.createDocumentFragment(); |
|
|
|
|
|
//add new imgs |
|
|
for(var i = 0; i < img_num; i++) // img_num is from get_lprimgnum() which returns the last index of img in LPBMP_Array. |
|
|
{ |
|
|
var index_lpr = img_num - i - 1; |
|
|
|
|
|
//var imgdiv = document.createElement("div"); |
|
|
|
|
|
//var imgdiv = document.getElementById("lpr_jpg" + (i + 1).toString()); |
|
|
//while (imgdiv.hasChildNodes()) { |
|
|
//imgdiv.removeChild(imgdiv.firstChild); |
|
|
//} |
|
|
var imgObj = document.createElement("img"); |
|
|
imgObj.setAttribute("src", get_lprimgpath(index_lpr)); |
|
|
imgObj.style.height = "80px"; |
|
|
imgObj.style.width = "auto"; |
|
|
imgObj.style.marginLeft = "auto"; |
|
|
imgObj.style.marginRight = "auto"; |
|
|
imgObj.style.display = "block"; |
|
|
|
|
|
|
|
|
var divObj = document.createElement("div"); |
|
|
|
|
|
var href_html; |
|
|
var check_if_ok_href_html = 0; |
|
|
|
|
|
var imgtext = document.createElement("h4");//LPR_Array[index_lpr] + ", " + LPR_confidence_array[index_lpr] |
|
|
var lpr_text = ""; |
|
|
|
|
|
var temp_lpr_array = LPR_Array[index_lpr]; |
|
|
if (localStorage.getItem("barcode_qr") == "Yes") { |
|
|
|
|
|
if (checkURL(LPR_Array[index_lpr])) { |
|
|
imgtext.style.color = "#6c87d4"; |
|
|
href_html = document.createElement("a"); |
|
|
href_html.setAttribute("href", LPR_Array[index_lpr]); |
|
|
href_html.setAttribute("target", "_blank"); |
|
|
check_if_ok_href_html = 1; |
|
|
} |
|
|
|
|
|
if (LPR_Array[index_lpr].length > 15) { |
|
|
temp_lpr_array = LPR_Array[index_lpr].slice(0, 15) + ".."; |
|
|
} |
|
|
lpr_text = temp_lpr_array; |
|
|
} |
|
|
else { |
|
|
lpr_text = temp_lpr_array + ", " + LPR_confidence_array[index_lpr]; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//lpr_text += ", \n"; |
|
|
imgtext.appendChild(document.createTextNode(lpr_text)); |
|
|
imgtext.style.display = "inline-block"; |
|
|
//imgtext.style.whiteSpace = "pre"; |
|
|
imgtext.style.lineHeight = "0px"; |
|
|
|
|
|
var imgCar = document.createElement("img"); |
|
|
|
|
|
var path_car_type = ""; |
|
|
if (LPR_car_type_name_array[index_lpr] == "NULL" || LPR_car_type_name_array[index_lpr].length == 0) { |
|
|
path_car_type = "car"; |
|
|
} |
|
|
else { |
|
|
path_car_type = LPR_car_type_name_array[index_lpr]; |
|
|
} |
|
|
|
|
|
imgCar.setAttribute("src", "./labels/car_type/" + path_car_type + "-white.png"); |
|
|
imgCar.style.width = "18px"; |
|
|
imgCar.style.height = "15px"; |
|
|
imgCar.style.display = "inline-block"; |
|
|
|
|
|
divObj.appendChild(imgCar); |
|
|
|
|
|
if (check_if_ok_href_html == 1) { |
|
|
href_html.appendChild(imgtext); |
|
|
divObj.appendChild(href_html); |
|
|
} |
|
|
else { |
|
|
divObj.appendChild(imgtext); |
|
|
} |
|
|
|
|
|
var divObj2 = document.createElement("div"); |
|
|
|
|
|
var color_text = LPR_color_array[index_lpr]; |
|
|
var colorObj = document.createElement("input"); |
|
|
colorObj.type = "button"; |
|
|
colorObj.style.backgroundColor = color_text; |
|
|
colorObj.style.width = "18px"; |
|
|
colorObj.style.height = "15px"; |
|
|
colorObj.style.border = "0px"; |
|
|
colorObj.style.display = "inline-block"; |
|
|
colorObj.style.lineHeight = "0px"; |
|
|
divObj2.appendChild(colorObj); |
|
|
|
|
|
if (LPR_sec_color_array[index_lpr] != LPR_color_array[index_lpr]) { |
|
|
var sec_color_text = LPR_sec_color_array[index_lpr]; |
|
|
var sec_colorObj = document.createElement("input"); |
|
|
sec_colorObj.type = "button"; |
|
|
sec_colorObj.style.backgroundColor = sec_color_text; |
|
|
sec_colorObj.style.width = "18px"; |
|
|
sec_colorObj.style.height = "15px"; |
|
|
sec_colorObj.style.border = "0px"; |
|
|
sec_colorObj.style.display = "inline-block"; |
|
|
sec_colorObj.style.lineHeight = "0px"; |
|
|
divObj2.appendChild(sec_colorObj); |
|
|
} |
|
|
|
|
|
var imgtext2 = document.createElement("h4"); |
|
|
if (LPR_area_array[index_lpr].length >= 1 && LPR_area_array[index_lpr] != "NULL") { |
|
|
var area_text = LPR_area_array[index_lpr]; |
|
|
imgtext2.appendChild(document.createTextNode(area_text)); |
|
|
} |
|
|
imgtext2.style.display = "inline-block"; |
|
|
imgtext2.style.lineHeight = "0px"; |
|
|
divObj2.appendChild(imgtext2); |
|
|
|
|
|
|
|
|
if (LPR_center_direction_array[index_lpr].length >= 1 && LPR_center_direction_array[index_lpr] != "NULL") { |
|
|
var center_direction_text = "up_arrow"; |
|
|
if (parseInt(LPR_center_direction_array[index_lpr]) >= 0) { |
|
|
center_direction_text = "down_arrow"; |
|
|
} |
|
|
else { |
|
|
center_direction_text = "up_arrow"; |
|
|
} |
|
|
|
|
|
var img_direction = document.createElement("img"); |
|
|
|
|
|
img_direction.setAttribute("src", "./images/" + center_direction_text + ".png"); |
|
|
img_direction.style.width = "18px"; |
|
|
img_direction.style.height = "15px"; |
|
|
img_direction.style.display = "inline-block"; |
|
|
|
|
|
divObj2.appendChild(img_direction); |
|
|
} |
|
|
|
|
|
|
|
|
//var imgtext2 = document.createElement("h4");//LPR_Array[index_lpr] + ", " + LPR_confidence_array[index_lpr] |
|
|
//var lpr_text2 = LPR_confidence_array[index_lpr]; |
|
|
//imgtext2.appendChild(document.createTextNode("hello")); |
|
|
|
|
|
//imgdiv.appendChild(imgObj); |
|
|
|
|
|
//fragment.appendChild(imgdiv); |
|
|
|
|
|
var imgdiv = document.querySelector("#lpr_jpg_" + (i + 1).toString()); |
|
|
while (imgdiv.hasChildNodes()) { |
|
|
imgdiv.removeChild(imgdiv.firstChild); |
|
|
} |
|
|
imgdiv.appendChild(imgObj); |
|
|
imgdiv.appendChild(divObj); |
|
|
imgdiv.appendChild(divObj2); |
|
|
|
|
|
//imgdiv.appendChild(imgtext2); |
|
|
//console.log("path:" + get_lprimgpath(i)); |
|
|
//document.getElementById("lpr_jpg_" + (i + 1).toString()).style.width = "auto"; |
|
|
|
|
|
} |
|
|
|
|
|
var len = img_num; |
|
|
var loadCounter = 0; |
|
|
for (var i = 0; i < len; i++) { |
|
|
var index_lpr = img_num - i - 1; |
|
|
|
|
|
$(document.createElement("img")).attr('src', get_lprimgpath(index_lpr)).one("load", function () { |
|
|
//alert(get_lprimgpath(index_lpr)+ 'is loaded'); |
|
|
loadCounter++; |
|
|
|
|
|
}).each(function () { |
|
|
if (this.complete) { |
|
|
$(this).trigger("load"); |
|
|
} |
|
|
else { |
|
|
this.src = '../Aida_data/storage/default.jpg'; |
|
|
//console.log(index_lpr); |
|
|
//console.log(get_lprimgpath(index_lpr)); |
|
|
//console.log(this.src); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
if (loadCounter < len-4) { |
|
|
//console.log("At least two are not loaded"); |
|
|
console.log("try set low encoder"); |
|
|
|
|
|
if (try_set_low_encoder == 0) { |
|
|
try_set_low_encoder = 1; |
|
|
var json_data = '{"system_setting": { "getimage_encoder_id": "' + "4" + '","getimage_encoder_id_HD": "' + "4" + '"}'; |
|
|
json_data += '}'; |
|
|
|
|
|
func_setconfigfile(json_data); |
|
|
} |
|
|
} |
|
|
else { |
|
|
//console.log("OK"); |
|
|
//alert("all are loaded"); |
|
|
} |
|
|
|
|
|
// lprimglist.appendChild(fragment); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function get_lprimgpath(index) { |
|
|
var imgpath = ""; |
|
|
if (LPBMP_Array[index] != "NULL") { |
|
|
imgpath = LPBMP_Array[index]; |
|
|
imgpath = imgpath.replace("/emmc/plugin", ".."); |
|
|
} |
|
|
// console.log(imgpath + " = " + LPBMP_Array[index] + "?"); |
|
|
|
|
|
return imgpath; |
|
|
} |
|
|
|
|
|
function get_lprimgnum(){ //return the last index which is valid. -1 if all invalid. |
|
|
|
|
|
var j = 0; |
|
|
|
|
|
for(j=0; j< MAX_LPBMP_ARRAY; j++){ |
|
|
if(LPBMP_Array[j] == "NULL") |
|
|
break; |
|
|
} |
|
|
//console.log("[get_lprimgnum] j = " + j); |
|
|
|
|
|
|
|
|
return j; //return the last index which is valid. -1 if all invalid. |
|
|
} |
|
|
|
|
|
var MAX_LPR_ALIVE_TIME = 1000; |
|
|
|
|
|
function lprimg_valid(date){ // can be rewrite to other valid check if needed. |
|
|
|
|
|
// console.log("[lprimg_valid]"); |
|
|
// console.log("inpute = " + date); |
|
|
let input_date = new Date(date); |
|
|
// console.log(input_date.toISOString()); |
|
|
|
|
|
let now_date = new Date(); |
|
|
// console.log(now_date.toISOString()); |
|
|
// console.log("pic and now time diff = " + (now_date - input_date)/1000/60/60 + " hours"); |
|
|
|
|
|
let valid = false; |
|
|
if(((now_date - input_date)/1000/60/60) < MAX_LPR_ALIVE_TIME){ |
|
|
valid = true; |
|
|
} |
|
|
return valid; |
|
|
} |
|
|
|
|
|
function push_LPBMP(jsonbuf){ |
|
|
|
|
|
//console.log("[push_LPBMP] jsonbuf = " + typeof jsonbuf); |
|
|
var new_LPBMP_path = jsonbuf.LPR_BMP; |
|
|
|
|
|
|
|
|
if (LPBMP_Array[MAX_LPBMP_ARRAY - 1] != "NULL") { |
|
|
var j = 0; |
|
|
for (j = 0; j < MAX_LPBMP_ARRAY - 1; j++) { |
|
|
LPBMP_Array[j] = LPBMP_Array[j + 1]; |
|
|
} |
|
|
LPBMP_Array[j] = new_LPBMP_path; |
|
|
} |
|
|
else{ |
|
|
for (var i = 0; i < MAX_LPBMP_ARRAY; i++) { |
|
|
if (LPBMP_Array[i] === "NULL") { |
|
|
LPBMP_Array[i] = new_LPBMP_path; |
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function AiEngine_json_split(alarm_data){ // copied from alarm.js |
|
|
var datas; |
|
|
var ai_json; |
|
|
var complete_data = ""; |
|
|
var n1 = -1, n2 = -1, n2_temp = -1; |
|
|
|
|
|
complete_data = complete_data.concat(alarm_data); |
|
|
n1 = complete_data.indexOf('{"AiEngine"'); |
|
|
|
|
|
n2_temp = complete_data.indexOf('"Count"'); |
|
|
|
|
|
n2 = complete_data.indexOf('}', n2_temp); |
|
|
|
|
|
if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) { |
|
|
datas = complete_data.split(/\r\n|\r/); |
|
|
complete_data = ""; |
|
|
|
|
|
for (var i = datas.length - 1; i >= 0; i--) { |
|
|
|
|
|
if (datas[i].length > 12 && datas[i].substring(0, 12) == '{"AiEngine":' && datas[i].length < 8192*8) { |
|
|
var temp = null; |
|
|
temp = datas[i].slice(); |
|
|
|
|
|
ai_json = JSON.parse(temp); |
|
|
//ai_json = validatingJSON(temp); |
|
|
|
|
|
datas[i] = null; |
|
|
|
|
|
break; |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
return ai_json; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function SetLPR(LPR_data){ //save ["INFORMATION"] into seeSionStorage for further use. |
|
|
|
|
|
var jsonbuf = null; |
|
|
try { |
|
|
jsonbuf = JSON.parse(LPR_data); //JSON parse only for try catch |
|
|
} catch (e) { |
|
|
jsonbuf = null; |
|
|
// console.log(e);//the character would be drop sometimes, for example the label "class_id" may be "clas_id". |
|
|
//console.log(json); |
|
|
} |
|
|
|
|
|
if(jsonbuf != null){ // save into session storage only if the data is valid json format |
|
|
sessionStorage.setItem('lprinfologlist_num', jsonbuf["LPR_COUNT"]); |
|
|
sessionStorage.setItem('lprinfologlist', JSON.stringify(jsonbuf["INFORMATION"])); |
|
|
//by saving jsonbuf["INFORMATION"], we can retrive other information like confidence in the future. |
|
|
|
|
|
|
|
|
// var test = JSON.parse(sessionStorage.getItem('lprinfologlist')); |
|
|
// console.log(test[0]); |
|
|
// console.log(test[0].LP_BMP); |
|
|
} |
|
|
|
|
|
|
|
|
} |