126 lines
No EOL
3.4 KiB
JavaScript
Executable file
126 lines
No EOL
3.4 KiB
JavaScript
Executable file
let canvas = null
|
|
let ctx = null;
|
|
let img = null;
|
|
|
|
let isDrawing = false;
|
|
|
|
class WatchArea {
|
|
constructor(name, x0, y0, x1, y1, R, G, B) {
|
|
this.name = name;
|
|
this.x0 = x0;
|
|
this.y0 = y0;
|
|
this.x1 = x1;
|
|
this.y1 = y1;
|
|
this.R = R;
|
|
this.G = G;
|
|
this.B = B;
|
|
}
|
|
|
|
draw(ctx) {
|
|
ctx.beginPath();
|
|
ctx.lineWidth = "3";
|
|
ctx.strokeStyle = "rgb(" + this.R + ", " + this.G + ", " + this.B + ")";
|
|
ctx.rect(
|
|
this.x0,
|
|
this.y0,
|
|
this.x1 - this.x0,
|
|
this.y1 - this.y0
|
|
);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
let watchArea = new WatchArea(
|
|
"",
|
|
0, 0,
|
|
0, 0,
|
|
0, 0, 0
|
|
)
|
|
|
|
let watchAreas = [];
|
|
|
|
document.addEventListener("DOMContentLoaded", function(){
|
|
canvas = document.getElementById("canvas");
|
|
ctx = canvas.getContext("2d");
|
|
src = document.getElementById("current_color_stream");
|
|
img = new Image();
|
|
img.src = src.src;
|
|
img.onload = function() {
|
|
draw(ctx, img);
|
|
};
|
|
|
|
canvas.addEventListener("mousedown", e => {
|
|
watchArea.x0 = e.offsetX;
|
|
watchArea.y0 = e.offsetY;
|
|
isDrawing = true;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", e => {
|
|
if(isDrawing === true) {
|
|
watchArea.x1 = e.offsetX;
|
|
watchArea.y1 = e.offsetY;
|
|
draw();
|
|
update();
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", e => {
|
|
if(isDrawing === true) {
|
|
|
|
}
|
|
isDrawing = false;
|
|
});
|
|
});
|
|
|
|
function draw(){
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawImage();
|
|
watchArea.draw(ctx);
|
|
}
|
|
|
|
function drawImage(){
|
|
ctx.drawImage(img, 0, 0)
|
|
}
|
|
|
|
function update() {
|
|
var existingRow = document.getElementById("addWatchAreaRow")
|
|
if (existingRow !== null) {
|
|
updateRectInputs();
|
|
return
|
|
}
|
|
var newWatchAreaTemplate = document.getElementById("newWatchAreaTemplate");
|
|
var newWatchArea = newWatchAreaTemplate.content.cloneNode(true);
|
|
var watchAreaTableBody = document.getElementById("watchAreas");
|
|
watchAreaTableBody.appendChild(newWatchArea);
|
|
updateRectInputs();
|
|
}
|
|
|
|
function submitNewArea(){
|
|
let nameInput = document.getElementsByName("name")[0];
|
|
if (nameInput.value.length == 0){
|
|
nameInput.select();
|
|
return;
|
|
}
|
|
let name = nameInput.value;
|
|
document.getElementById("newWatchAreaForm").submit()
|
|
}
|
|
|
|
function updateRectInputs(){
|
|
document.getElementsByName("R")[0].value = watchArea.R;
|
|
document.getElementsByName("G")[0].value = watchArea.G;
|
|
document.getElementsByName("B")[0].value = watchArea.B;
|
|
|
|
document.getElementsByName("x0")[0].value = watchArea.x0;
|
|
document.getElementsByName("y0")[0].value = watchArea.y0;
|
|
document.getElementsByName("x1")[0].value = watchArea.x1;
|
|
document.getElementsByName("y1")[0].value = watchArea.y1;
|
|
}
|
|
|
|
let changeR = function(elem){watchArea.R = elem.value; draw();}
|
|
let changeG = function(elem){watchArea.G = elem.value; draw();}
|
|
let changeB = function(elem){watchArea.B = elem.value; draw();}
|
|
|
|
let changeX0 = function(elem){watchArea.x0 = elem.value; draw();}
|
|
let changeY0 = function(elem){watchArea.y0 = elem.value; draw();}
|
|
let changeX1 = function(elem){watchArea.x1 = elem.value; draw();}
|
|
let changeY1 = function(elem){watchArea.y1 = elem.value; draw();} |