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

added proper sizing/resizing of stream images with new layout

Browse source
This commit is contained in:
BroodjeAap 2020-07-30 18:14:26 +00:00
parent b3959ee720
commit 87b50bdeb2
3 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/css/style.css
View file

@ -31,12 +31,12 @@
flex-basis: 85%; flex-basis: 85%;
} }
.stream-canvas { .debug-img-div {
flex-basis: 90%; flex-basis: 30%;
align-self: center; align-self: stretch;
} }
.debug-img { .debug-img {
flex-basis: 30%; max-width: 100%;
align-self: stretch;
} }

9
static/js/stream.js
View file

@ -41,6 +41,7 @@ let watchAreas = [];
document.addEventListener("DOMContentLoaded", function(){ document.addEventListener("DOMContentLoaded", function(){
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
src = document.getElementById("current_color_stream"); src = document.getElementById("current_color_stream");
img = new Image(); img = new Image();
@ -72,7 +73,13 @@ document.addEventListener("DOMContentLoaded", function(){
}); });
}); });
window.addEventListener('resize', draw);
function draw(){ function draw(){
contentDiv = document.getElementById("content")
var rect = contentDiv.getBoundingClientRect();
canvas.width = Math.floor(rect.width * 0.9);
canvas.height = (img.height / img.width) * canvas.width;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
drawImage(); drawImage();
watchAreas.forEach(watchArea => watchArea.draw(ctx)); watchAreas.forEach(watchArea => watchArea.draw(ctx));
@ -80,7 +87,7 @@ function draw(){
} }
function drawImage(){ function drawImage(){
ctx.drawImage(img, 0, 0) ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height)
} }
function update() { function update() {

20
templates/stream.html
View file

@ -3,18 +3,20 @@
<script src="/static/js/stream.js"></script> <script src="/static/js/stream.js"></script>
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<div class="flex-column"> <div class="flex-column" id="content">
<!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>--> <div class="stream-canvas-div">
<img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" > <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
<canvas class="stream-canvas" id="canvas">Not supported</canvas>
</div>
<div class="flex-row"> <div class="flex-row">
<div class="debug-img"> <div class="debug-img-div">
<img src="{{ .GetPreviousURL }}"> <img src="{{ .GetPreviousURL }}" class="debug-img">
</div> </div>
<div class="debug-img"> <div class="debug-img-div">
<img src="{{ .GetDebugURL }}"> <img src="{{ .GetDebugURL }}" class="debug-img">
</div> </div>
<div class="debug-img"> <div class="debug-img-div">
<img src="{{ .GetCurrentURL }}"> <img src="{{ .GetCurrentURL }}" class="debug-img">
</div> </div>
</div> </div>
<form action="/addWatchArea" method="GET" id="newWatchAreaForm"> <form action="/addWatchArea" method="GET" id="newWatchAreaForm">