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 { .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -18,20 +9,34 @@
} }
.menu { .menu {
flex-basis: 10%; flex-basis: 15%;
align-items: center; align-items: center;
} }
.menu-header { .menu-header {
font-size: 30px; font-size: 30px;
margin-top: 20px; margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
} }
.menu-item { .menu-item {
font-size: 20px; font-size: 20px;
margin-top: 15px; margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
} }
.content { .content {
flex-basis: 85%;
}
.stream-canvas {
flex-basis: 90%; 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> <script src="/static/js/stream.js"></script>
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<div> <div class="flex-column">
<canvas class="stream-canvas" id="canvas">Not supported</canvas> <!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>-->
<img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden> <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" >
<div class="pure-g"> <div class="flex-row">
<div class="pure-u-1-3"> <div class="debug-img">
<img src="{{ .GetPreviousURL }}" class="debug-img"> <img src="{{ .GetPreviousURL }}">
</div> </div>
<div class="pure-u-1-3"> <div class="debug-img">
<img src="{{ .GetDebugURL }}" class="debug-img"> <img src="{{ .GetDebugURL }}">
</div> </div>
<div class="pure-u-1-3"> <div class="debug-img">
<img src="{{ .GetCurrentURL }}" class="debug-img"> <img src="{{ .GetCurrentURL }}">
</div> </div>
</div> </div>
</div> <form action="/addWatchArea" method="GET" id="newWatchAreaForm">
<form action="/addWatchArea" method="GET" id="newWatchAreaForm"> <input type="hidden" name="streamName" value="{{ .Name }}">
<input type="hidden" name="streamName" value="{{ .Name }}"> <table class="pure-table pure-table-horizontal">
<table class="pure-table pure-table-horizontal"> <caption>Watches</caption>
<caption>Watches</caption> <thead>
<thead> <tr>
<tr> <th>Name</th>
<th>Name</th> <th colspan="3">Color</th>
<th colspan="3">Color</th> <th colspan="4">Area</th>
<th colspan="4">Area</th> <th>Add/Remove</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>
</tr> </tr>
{{end}} <tr>
</tbody> <th></th>
</table> <th>R</th>
</form> <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> <template id="newWatchAreaTemplate" hidden>
<tr id="addWatchAreaRow"> <tr id="addWatchAreaRow">