diff --git a/static/js/stream.js b/static/js/stream.js index ba59f81..07a19ee 100755 --- a/static/js/stream.js +++ b/static/js/stream.js @@ -4,7 +4,7 @@ let img = null; let isDrawing = false; -class Rectangle { +class WatchArea { constructor(name, x0, y0, x1, y1, R, G, B) { this.name = name; this.x0 = x0; @@ -30,14 +30,14 @@ class Rectangle { } } -let rectangle = new Rectangle( +let watchArea = new WatchArea( "", 0, 0, 0, 0, 0, 0, 0 ) -let rectangles = []; +let watchAreas = []; document.addEventListener("DOMContentLoaded", function(){ canvas = document.getElementById("canvas"); @@ -50,15 +50,15 @@ document.addEventListener("DOMContentLoaded", function(){ }; canvas.addEventListener("mousedown", e => { - rectangle.x0 = e.offsetX; - rectangle.y0 = e.offsetY; + watchArea.x0 = e.offsetX; + watchArea.y0 = e.offsetY; isDrawing = true; }); canvas.addEventListener("mousemove", e => { if(isDrawing === true) { - rectangle.x1 = e.offsetX; - rectangle.y1 = e.offsetY; + watchArea.x1 = e.offsetX; + watchArea.y1 = e.offsetY; draw(); update(); } @@ -75,7 +75,7 @@ document.addEventListener("DOMContentLoaded", function(){ function draw(){ ctx.clearRect(0, 0, canvas.width, canvas.height); drawImage(); - rectangle.draw(ctx); + watchArea.draw(ctx); } function drawImage(){ @@ -106,21 +106,21 @@ function submitNewArea(){ } function updateRectInputs(){ - document.getElementsByName("R")[0].value = rectangle.R; - document.getElementsByName("G")[0].value = rectangle.G; - document.getElementsByName("B")[0].value = rectangle.B; + 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 = rectangle.x0; - document.getElementsByName("y0")[0].value = rectangle.y0; - document.getElementsByName("x1")[0].value = rectangle.x1; - document.getElementsByName("y1")[0].value = rectangle.y1; + 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){rectangle.R = elem.value; draw();} -let changeG = function(elem){rectangle.G = elem.value; draw();} -let changeB = function(elem){B = elem.value; draw();} +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){rectangle.x0 = elem.value; draw();} -let changeY0 = function(elem){rectangle.y0 = elem.value; draw();} -let changeX1 = function(elem){rectangle.x1 = elem.value; draw();} -let changeY1 = function(elem){rectangle.y1 = elem.value; draw();} \ No newline at end of file +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();} \ No newline at end of file diff --git a/templates/stream.html b/templates/stream.html index b2878c9..ea07379 100755 --- a/templates/stream.html +++ b/templates/stream.html @@ -63,4 +63,5 @@