frontend of watchareas mostly done

main.go

@@ -76,6 +76,10 @@ func (server Server) addStream(w http.ResponseWriter, r *http.Request) {
 	})
 }
 
+func (server Server) addWatchArea(w http.ResponseWriter, r *http.Request) {
+
+}
+
 func main() {
 	staticFileServer := http.FileServer(http.Dir("./static"))
 	http.Handle("/static/", http.StripPrefix("/static/", staticFileServer))
@@ -105,5 +109,6 @@ func main() {
 
 	http.HandleFunc("/", server.index)
 	http.HandleFunc("/addStream", server.addStream)
+	http.HandleFunc("/addWatchArea", server.addWatchArea)
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }

static/js/stream.js

@@ -1,13 +1,25 @@
+let canvas = null
+let ctx = null;
+let img = null;
+
 let isDrawing = false;
+
+// rectangle 
 let x0 = 0;
 let y0 = 0;
-let rectangle = null
+let x1 = 0;
+let y1 = 0;
+
+// color
+let R = 0;
+let G = 0;
+let B = 0;
 
 document.addEventListener("DOMContentLoaded", function(){
-    const canvas = document.getElementById("canvas");
+    canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
+    ctx = canvas.getContext("2d");
-    var src = document.getElementById("current_color_stream");
+    src = document.getElementById("current_color_stream");
-    var img = new Image();
+    img = new Image();
     img.src = src.src;
     img.onload = function() {
         draw(ctx, img);
@@ -21,12 +33,10 @@ document.addEventListener("DOMContentLoaded", function(){
 
     canvas.addEventListener("mousemove", e => {
         if(isDrawing === true) {
-            draw(ctx, img);
             x1 = e.offsetX;
             y1 = e.offsetY;
-            ctx.beginPath();
+            draw();
-            ctx.rect(x0,y0,x1-x0,y1-y0);
+            update();
-            ctx.stroke();
         }
     });
 
@@ -38,6 +48,63 @@ document.addEventListener("DOMContentLoaded", function(){
     });
 });
 
-function draw(ctx, img){
+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();}

templates/stream.html

@@ -10,13 +10,15 @@
     <img src="{{ .GetDebugURL }}" width="425" height="240">
     <img src="{{ .GetCurrentURL }}" width="425" height="240">
 </div>
-<table class="pure-table pure-table-horizontal pure-table-striped">
+<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
+    <table class="pure-table pure-table-horizontal pure-table-striped">
         <caption>Watches</caption>
         <thead>
             <tr>
                 <th>Name</th>
                 <th colspan="3">Color</th>
                 <th colspan="4">Area</th>
+                <th>Add/Remove</th>
             </tr>
             <tr>
                 <th></th>
@@ -27,8 +29,10 @@
                 <th>MinY</th>
                 <th>MaxX</th>
                 <th>MaxY</th>
+                <th></th>
             </tr>
         </thead>
+        <tbody id="watchAreas">
             {{range $watchArea := .WatchAreas}}
                 <tr>
                     <td>{{ $watchArea.Name }}</td>
@@ -39,7 +43,24 @@
                     <td>{{ $watchArea.Area.Min.Y }}</td>
                     <td>{{ $watchArea.Area.Max.X }}</td>
                     <td>{{ $watchArea.Area.Max.Y }}</td>
+                    <td>Remove</td>
                 </tr>
             {{end}}
-</table>
+        </tbody>
+    </table>
+</form>
+
+<template id="newWatchAreaTemplate" hidden>
+    <tr id="addWatchAreaRow">
+        <td><input type="text" name="name" placeholder="Name"></td>
+        <td><input type="number" name="R" min="0" max="255" size="5" onchange="changeR(this)"></td>
+        <td><input type="number" name="G" min="0" max="255" size="5" onchange="changeG(this)"></td>
+        <td><input type="number" name="B" min="0" max="255" size="5" onchange="changeB(this)"></td>
+        <td><input type="number" name="x0" min="0" max="1280" size="5" onchange="changeX0(this)"></td>
+        <td><input type="number" name="y0" min="0" max="720" size="5" onchange="changeY0(this)"></td>
+        <td><input type="number" name="x1" min="0" max="1280" size="5" onchange="changeX1(this)"></td>
+        <td><input type="number" name="y1" min="0" max="720" size="5" onchange="changeY1(this)"></td>
+        <td><button type="button" class="pure-button pure-button-primary" onclick="submitNewArea()">Add</button></td>
+    </tr>
+</template>
 {{end}}