broodjeaap/streamwatcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added content class to base.html

Browse source
This commit is contained in:
BroodjeAap 2020-07-28 19:56:58 +00:00
parent e028e90e96
commit b3959ee720
2 changed files with 65 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/css/style.css
View file

@ -1,12 +1,3 @@
.stream-canvas {
width: 100%;
height: 100%;
}
.debug-img {
max-width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
@ -18,20 +9,34 @@
}
.menu {
flex-basis: 10%;
flex-basis: 15%;
align-items: center;
}
.menu-header {
font-size: 30px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.menu-item {
font-size: 20px;
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
}
.content {
flex-basis: 85%;
}
.stream-canvas {
flex-basis: 90%;
align-self: center;
}
.debug-img {
flex-basis: 30%;
align-self: stretch;
}

100
templates/stream.html
View file

@ -3,61 +3,61 @@
<script src="/static/js/stream.js"></script>
{{end}}
{{define "content"}}
<div>
<canvas class="stream-canvas" id="canvas">Not supported</canvas>
<img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
<div class="pure-g">
<div class="pure-u-1-3">
<img src="{{ .GetPreviousURL }}" class="debug-img">
<div class="flex-column">
<!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>-->
<img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" >
<div class="flex-row">
<div class="debug-img">
<img src="{{ .GetPreviousURL }}">
</div>
<div class="pure-u-1-3">
<img src="{{ .GetDebugURL }}" class="debug-img">
<div class="debug-img">
<img src="{{ .GetDebugURL }}">
</div>
<div class="pure-u-1-3">
<img src="{{ .GetCurrentURL }}" class="debug-img">
<div class="debug-img">
<img src="{{ .GetCurrentURL }}">
</div>
</div>
</div>
<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
<input type="hidden" name="streamName" value="{{ .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>
</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 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>
<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
<input type="hidden" name="streamName" value="{{ .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>
</tr>
{{end}}
</tbody>
</table>
</form>
<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 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>
</tr>
{{end}}
</tbody>
</table>
</form>
</div>
<template id="newWatchAreaTemplate" hidden>
<tr id="addWatchAreaRow">