all-dressed-programming/dodgeball-tracker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved frontend.

Browse Source
This commit is contained in:
didier amyot committed 2024-01-21 09:47:39 -05:00
1 parent e26489bf9c
commit 6bda4df111
5 files changed
+34 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dodgeballtracker/__init__.py
+1 -1
View File
@@ -6,7 +6,7 @@ import numpy as np
here = Path(__file__).parent here = Path(__file__).parent
input_dir = here / '..' / 'data' input_dir = here / '..' / 'data'
output_dir = here / '..' / 'data' output_dir = here / '..' / 'outputs'
if __name__ == "__main__": if __name__ == "__main__":
detected_box_objects = [ detected_box_objects = [
dodgeballtracker/logic.py
+3
View File
@@ -10,6 +10,7 @@ import numpy as np
Color = tuple[int, int, int] Color = tuple[int, int, int]
class DetectedObjectBox: class DetectedObjectBox:
def __init__(self, min_threshold: float, color: Color): def __init__(self, min_threshold: float, color: Color):
self.min_threshold = min_threshold self.min_threshold = min_threshold
@@ -90,3 +91,5 @@ def main(input_filename: Path, output_filename: Path, detected_box_objects):
writer.release() writer.release()
cv2.destroyAllWindows() cv2.destroyAllWindows()
frontend/index.html
+13 -7
View File
@@ -1,16 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Animation</title> <title>Animation</title>
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.png">
<script src="main.js" type="module"></script> <link rel="stylesheet" href="style.css">
<script src="main.js" type="module"></script>
</head> </head>
<body> <body>
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<svg height="300" width="1000" style="border: solid;"> <svg width="900" height="450" >
<rect x="0" y="0" width="900" height="450" class="court-border"></rect>
<line x1="450" y1="0" x2="450" y2="450" class="court-border"></line>
<line x1="300" y1="0" x2="300" y2="450" class="return-line"></line>
<line x1="600" y1="0" x2="600" y2="450" class="return-line"></line>
<rect x="0" y="157.5" width="15" height="15" <rect x="0" y="157.5" width="15" height="15"
style="fill: red;" id="rect-1"></rect> style="fill: red;" id="rect-1"></rect>
frontend/main.js
+6 -2
View File
@@ -2,6 +2,9 @@ import anime from "https://esm.sh/animejs@3.2.2";
const second = 1000; const second = 1000;
const canvasWidth = Number.parseFloat(document.querySelector("svg").getAttribute("width"));
const canvasHeight = Number.parseFloat(document.querySelector("svg").getAttribute("height"));
function gaussianRandom(mean=0, stdev=1) { function gaussianRandom(mean=0, stdev=1) {
const u = 1 - Math.random(); // Converting [0,1) to (0,1] const u = 1 - Math.random(); // Converting [0,1) to (0,1]
const v = Math.random(); const v = Math.random();
@@ -33,8 +36,9 @@ function* pseudoBrownian(n, limit){
} }
function* keyFrames(duration, framePerSeconds){ function* keyFrames(duration, framePerSeconds){
const deltaX = 1000 / (duration * framePerSeconds); const deltaX = canvasWidth / (duration * framePerSeconds);
for(const deltaY of pseudoBrownian(duration * framePerSeconds, 100)){ const limit = 0.75 * (canvasHeight / 2);
for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){
yield {translateX: `+=${deltaX}`, translateY: deltaY}; yield {translateX: `+=${deltaX}`, translateY: deltaY};
} }
} }
frontend/style.css
+11
View File
@@ -0,0 +1,11 @@
.court-border {
stroke: red;
stroke-width: 4px;
fill-opacity: 0;
}
.return-line {
stroke: yellow;
stroke-width: 2px;
fill-opacity: 0;
}