renamed 'rectangles' class and variables to WatchArea

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();}
+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();}

templates/stream.html

@@ -63,4 +63,5 @@
         <td><button type="button" class="pure-button pure-button-primary" onclick="submitNewArea()">Add</button></td>
     </tr>
 </template>
+
 {{end}}