116 lines
3.6 KiB
HTML
116 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
#canvas { background-image: url("/image.jpg"); background-size: 100% 100%; }
|
|
.rectangle { position: absolute; }
|
|
</style>
|
|
</head>
|
|
|
|
<body style="margin:0; padding:0;">
|
|
<div id="canvas"></div>
|
|
|
|
<script>
|
|
const IMG_WIDTH = Math.round(parent.document.getElementById('_row').offsetWidth * 0.99);
|
|
const MOTION_SIZE = _motion_size();
|
|
const COEFF = MOTION_SIZE[0] / IMG_WIDTH;
|
|
const GRN = 'rgba(0,255,0,0.5)';
|
|
const RED = 'rgba(255,0,0,0.5)';
|
|
|
|
function _motion_size() {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/api/v1/config.json", false);
|
|
xhr.send(null);
|
|
return JSON.parse(xhr.responseText).video0.size.split('x');
|
|
}
|
|
|
|
function set_canvas_size() {
|
|
document.getElementById('canvas').style.width = IMG_WIDTH + 'px';
|
|
document.getElementById('canvas').style.height = Math.round((MOTION_SIZE[1] / COEFF)) + 'px';
|
|
parent.document.getElementById('_iframe').style.width = IMG_WIDTH + 2 + 'px';
|
|
parent.document.getElementById('_iframe').style.height = Math.round((MOTION_SIZE[1] / COEFF)) + 2 + 'px';
|
|
}
|
|
|
|
function initDraw(canvas) {
|
|
set_canvas_size();
|
|
function setMousePosition(e) {
|
|
let ev = e || window.event; //Moz || IE
|
|
if (ev.pageX) { //Moz
|
|
mouse.x = ev.pageX + window.pageXOffset;
|
|
mouse.y = ev.pageY + window.pageYOffset;
|
|
} else if (ev.clientX) { //IE
|
|
mouse.x = ev.clientX + document.body.scrollLeft;
|
|
mouse.y = ev.clientY + document.body.scrollTop;
|
|
}
|
|
};
|
|
|
|
let mouse = {
|
|
x: 0,
|
|
y: 0,
|
|
startX: 0,
|
|
startY: 0
|
|
};
|
|
|
|
let element = null;
|
|
function draw_rectangle(s, color) {
|
|
e= document.createElement('div');
|
|
e.className = 'rectangle'
|
|
e.style.left = (s[0] / COEFF) + 'px'; e.style.top = (s[1] / COEFF) + 'px';
|
|
e.style.width = (s[2] / COEFF) + 'px'; e.style.height = (s[3] / COEFF) + 'px';
|
|
e.style.background = color;
|
|
canvas.appendChild(e)
|
|
e = null;
|
|
}
|
|
|
|
// draw current regions
|
|
for (v of (parent.document.getElementById('_motionDetect_roi').value).split(', ')) {
|
|
draw_rectangle (v.split('x'), GRN);
|
|
}
|
|
|
|
canvas.onmousemove = function (e) {
|
|
setMousePosition(e);
|
|
if (element !== null) {
|
|
v_width = Math.abs(mouse.x - mouse.startX);
|
|
v_height = Math.abs(mouse.y - mouse.startY);
|
|
element.style.width = v_width + 'px';
|
|
element.style.height = v_height + 'px';
|
|
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
|
|
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
|
|
}
|
|
}
|
|
|
|
canvas.onclick = function (e) {
|
|
if (element == null) {
|
|
mouse.startX = mouse.x;
|
|
mouse.startY = mouse.y;
|
|
element = document.createElement('div');
|
|
element.className = 'rectangle'
|
|
element.style.left = mouse.x + 'px';
|
|
element.style.top = mouse.y + 'px';
|
|
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
|
|
canvas.appendChild(element)
|
|
canvas.style.cursor = "crosshair";
|
|
element.style.background = GRN;
|
|
} else {
|
|
canvas.style.cursor = "default";
|
|
let rect = element.getBoundingClientRect(),
|
|
rX = Math.round(rect.left * COEFF),
|
|
rY = Math.round(rect.top * COEFF),
|
|
rW = Math.round((rect.right - rect.left) * COEFF),
|
|
rH = Math.round((rect.bottom - rect.top) * COEFF);
|
|
rect = element = null;
|
|
let fill_form = '_motionDetect_roi';
|
|
let dimensions = rX + 'x' + rY + 'x' + rW + 'x' + rH;
|
|
dimensions = (parent.document.getElementById(fill_form).value == '') ? dimensions : ',' + dimensions;
|
|
parent.document.getElementById(fill_form).value += dimensions;
|
|
}
|
|
}
|
|
}
|
|
|
|
initDraw(document.getElementById('canvas'));
|
|
</script>
|
|
</body>
|
|
</html>
|