110 lines
No EOL
2.9 KiB
JavaScript
Executable file
110 lines
No EOL
2.9 KiB
JavaScript
Executable file
let canvas = null
|
|
let ctx = null;
|
|
let img = null;
|
|
|
|
let isDrawing = false;
|
|
|
|
// rectangle
|
|
let x0 = 0;
|
|
let y0 = 0;
|
|
let x1 = 0;
|
|
let y1 = 0;
|
|
|
|
// color
|
|
let R = 0;
|
|
let G = 0;
|
|
let B = 0;
|
|
|
|
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 => {
|
|
x0 = e.offsetX;
|
|
y0 = e.offsetY;
|
|
isDrawing = true;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", e => {
|
|
if(isDrawing === true) {
|
|
x1 = e.offsetX;
|
|
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();
|
|
drawRectangle();
|
|
}
|
|
|
|
function drawImage(){
|
|
ctx.drawImage(img, 0, 0)
|
|
}
|
|
|
|
function drawRectangle(){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = "5";
|
|
ctx.strokeStyle = "rgb(" + R + ", " + G + ", " + B + ")";
|
|
ctx.rect(x0,y0,x1-x0,y1-y0);
|
|
ctx.stroke();
|
|
}
|
|
|
|
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 = R;
|
|
document.getElementsByName("G")[0].value = G;
|
|
document.getElementsByName("B")[0].value = B;
|
|
|
|
document.getElementsByName("x0")[0].value = x0;
|
|
document.getElementsByName("y0")[0].value = y0;
|
|
document.getElementsByName("x1")[0].value = x1;
|
|
document.getElementsByName("y1")[0].value = y1;
|
|
}
|
|
|
|
let changeR = function(elem){R = elem.value; draw();}
|
|
let changeG = function(elem){G = elem.value; draw();}
|
|
let changeB = function(elem){B = elem.value; draw();}
|
|
|
|
let changeX0 = function(elem){x0 = elem.value; draw();}
|
|
let changeY0 = function(elem){y0 = elem.value; draw();}
|
|
let changeX1 = function(elem){x1 = elem.value; draw();}
|
|
let changeY1 = function(elem){y1 = elem.value; draw();} |