100 lines
No EOL
4.2 KiB
HTML
Executable file
100 lines
No EOL
4.2 KiB
HTML
Executable file
{{template "base" .}}
|
|
{{define "head"}}
|
|
<script src="/static/js/stream.js"></script>
|
|
{{end}}
|
|
{{define "content"}}
|
|
<div class="flex-column" id="content">
|
|
<div class="content-header">
|
|
<h1>{{ .Stream.Name }}</h1>
|
|
<h2>{{ .Stream.URL }}</h2>
|
|
</div>
|
|
<div class="stream-canvas-div">
|
|
<img class="stream-canvas" src="{{ .Stream.GetCurrentColorURL }}" id="current_color_stream" hidden>
|
|
<canvas class="stream-canvas" id="canvas">Not supported</canvas>
|
|
</div>
|
|
<div class="flex-row">
|
|
<div class="debug-img-div">
|
|
<img src="{{ .Stream.GetPreviousURL }}" class="debug-img">
|
|
</div>
|
|
<div class="debug-img-div">
|
|
<img src="{{ .Stream.GetDebugURL }}" class="debug-img">
|
|
</div>
|
|
<div class="debug-img-div">
|
|
<img src="{{ .Stream.GetCurrentURL }}" class="debug-img">
|
|
</div>
|
|
</div>
|
|
<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
|
|
<input type="hidden" name="streamName" value="{{ .Stream.Name }}">
|
|
<table class="pure-table pure-table-horizontal">
|
|
<caption>Watches</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th colspan="3">Color</th>
|
|
<th colspan="4">Area</th>
|
|
<th>Add/Remove</th>
|
|
<th>View</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>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="watchAreas">
|
|
{{range $watchArea := .Stream.WatchAreas}}
|
|
<tr style="background-color:rgb({{ $watchArea.Color.R }}, {{$watchArea.Color.G}}, {{$watchArea.Color.B}})">
|
|
<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>
|
|
<td><a href="/streamRecordings?stream={{$.Stream.Name}}&watchArea={{$watchArea.Name}}">View</a></td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
let _watchAreas = {{.WatchAreasJSON}};
|
|
function loadWatchAreas(){
|
|
_watchAreas.forEach(watchArea => {
|
|
watchAreas.push(new WatchArea(
|
|
watchArea.name,
|
|
watchArea.area.Min.X, watchArea.area.Min.Y,
|
|
watchArea.area.Max.X, watchArea.area.Max.Y,
|
|
watchArea.color.R, watchArea.color.G, watchArea.color.B
|
|
));
|
|
_watchAreas = null;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
{{end}} |