frontend of watchareas mostly done
This commit is contained in:
BroodjeAap
parent
cef301d7f4
commit
d4d0ba593d
3 changed files with 136 additions and 43 deletions
5
main.go
5
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))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
const ctx = canvas.getContext("2d");
|
||||
var src = document.getElementById("current_color_stream");
|
||||
var img = new Image();
|
||||
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);
|
||||
|
|
@ -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();
|
||||
ctx.rect(x0,y0,x1-x0,y1-y0);
|
||||
ctx.stroke();
|
||||
draw();
|
||||
update();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -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();}
|
||||
|
|
@ -10,36 +10,57 @@
|
|||
<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">
|
||||
<caption>Watches</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th colspan="3">Color</th>
|
||||
<th colspan="4">Area</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>R</th>
|
||||
<th>G</th>
|
||||
<th>B</th>
|
||||
<th>MinX</th>
|
||||
<th>MinY</th>
|
||||
<th>MaxX</th>
|
||||
<th>MaxY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{{range $watchArea := .WatchAreas}}
|
||||
<tr>
|
||||
<td>{{ $watchArea.Name }}</td>
|
||||
<td>{{ $watchArea.Color.R }}</td>
|
||||
<td>{{ $watchArea.Color.G }}</td>
|
||||
<td>{{ $watchArea.Color.B }}</td>
|
||||
<td>{{ $watchArea.Area.Min.X }}</td>
|
||||
<td>{{ $watchArea.Area.Min.Y }}</td>
|
||||
<td>{{ $watchArea.Area.Max.X }}</td>
|
||||
<td>{{ $watchArea.Area.Max.Y }}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
<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>
|
||||
<th>R</th>
|
||||
<th>G</th>
|
||||
<th>B</th>
|
||||
<th>MinX</th>
|
||||
<th>MinY</th>
|
||||
<th>MaxX</th>
|
||||
<th>MaxY</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="watchAreas">
|
||||
{{range $watchArea := .WatchAreas}}
|
||||
<tr>
|
||||
<td>{{ $watchArea.Name }}</td>
|
||||
<td>{{ $watchArea.Color.R }}</td>
|
||||
<td>{{ $watchArea.Color.G }}</td>
|
||||
<td>{{ $watchArea.Color.B }}</td>
|
||||
<td>{{ $watchArea.Area.Min.X }}</td>
|
||||
<td>{{ $watchArea.Area.Min.Y }}</td>
|
||||
<td>{{ $watchArea.Area.Max.X }}</td>
|
||||
<td>{{ $watchArea.Area.Max.Y }}</td>
|
||||
<td>Remove</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</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}}
|
||||
Loading…
Add table
Reference in a new issue