going in the very right direction!

dodgeballtracker/helper.py

@@ -23,7 +23,7 @@ def iter_frames(video_cap):
         ret, frame = video_cap.read()
         if not ret:
             return
-        yield frame
+        yield frame, video_cap.get(cv2.CAP_PROP_POS_MSEC)
 
 
 @contextlib.contextmanager

dodgeballtracker/logic.py

@@ -1,3 +1,5 @@
+import json
+import sys
 from pathlib import Path
 
 from ultralytics import YOLO
@@ -34,7 +36,10 @@ class DodgeballTracker:
                  detected_box_objects: list[DetectedObjectBox]):
         self.input_path = input_file
         self.output_path = output_file
+        self.output_json_path = output_file.with_suffix(".json")
         self.detected_box_objects = sorted(detected_box_objects, reverse=True)
+        self.transformation_matrix = self.get_court_perspective_transform()
+        self.points = []
 
     def write_frame(self, writer, frame) -> None:
         cv2.imshow("Frame", frame)
@@ -43,18 +48,6 @@ class DodgeballTracker:
     def extract_box(self, data) -> tuple[int, int, int, int]:
         return int(data[0]), int(data[1]), int(data[2]), int(data[3])
 
-    def plot_boxe_to_frame(self, data, frame):
-        confidence = float(data[4])
-        for detected_box_object in self.detected_box_objects:
-
-            if detected_box_object.min_threshold < confidence:
-                xmin, ymin, xmax, ymax = self.extract_box(data)
-                cv2.rectangle(frame, (xmin, ymin), (xmax, ymax), detected_box_object.color, 2)
-                return
-
-    def run_model_on_frame(self, model, frame):
-        return model(frame)[0]
-
     def get_court_perspective_transform(self):
         """
         """
@@ -79,6 +72,30 @@ class DodgeballTracker:
                                        court_bottom_right]) * pixel_per_meter
         return cv2.getPerspectiveTransform(empirical_source, empirical_target)
 
+    def print_box(self, data, frame_idx, frame_ts):
+        xmin, ymin, xmax, ymax = self.extract_box(data)
+        v = np.array([
+            (xmax + xmin) / 2,
+            ymax,  # (ymax + ymin) / 2,
+            1
+        ])
+        ret = self.transformation_matrix @ v
+        x, y = ret[0] / ret[2], ret[1] / ret[2]
+        self.points.append({"x": x, "y": y, "frameIndex": frame_idx, "frameTimestamp": frame_ts})
+
+    def plot_boxe_to_frame(self, data, frame, frame_idx, frame_ts):
+        confidence = float(data[4])
+        for detected_box_object in self.detected_box_objects:
+
+            if detected_box_object.min_threshold < confidence:
+                xmin, ymin, xmax, ymax = self.extract_box(data)
+                self.print_box(data, frame_idx, frame_ts)
+                cv2.rectangle(frame, (xmin, ymin), (xmax, ymax), detected_box_object.color, 2)
+                return
+
+    def run_model_on_frame(self, model, frame):
+        return model(frame)[0]
+
     def crazy_experiment(self, frame):
         cv2.putText(frame,
                     "Hello world",
@@ -92,6 +109,10 @@ class DodgeballTracker:
 
         cv2.polylines(frame, pts, True, (0, 255, 255), 8)
 
+    def persist_points(self):
+        with open(self.output_json_path, "wt") as file_:
+            json.dump({"points": self.points}, file_, indent=4)
+
     def main(self):
         # define some constants
 
@@ -101,22 +122,22 @@ class DodgeballTracker:
         # load the pre-trained YOLOv8n model
         model = YOLO("yolov8n.pt")
 
-        for frame in iter_frames(video_cap):
-            with time_tracker():
-                # run the YOLO model on the frame
-                detections = self.run_model_on_frame(model, frame)
-                for data in detections.boxes.data.tolist():
-                    self.plot_boxe_to_frame(data, frame)
+        for i, (frame, ts) in enumerate(iter_frames(video_cap)):
+            # run the YOLO model on the frame
+            detections = self.run_model_on_frame(model, frame)
+            for data in detections.boxes.data.tolist():
+                self.plot_boxe_to_frame(data, frame, i, ts)
 
-                # show the frame to our screen
-                self.write_frame(writer, frame)
+            # show the frame to our screen
+            self.write_frame(writer, frame)
 
-                if cv2.waitKey(1) == ord("q"):
-                    break
+            if cv2.waitKey(1) == ord("q"):
+                break
 
         video_cap.release()
         writer.release()
         cv2.destroyAllWindows()
+        self.persist_points()
 
 
 

frontend/index.html

@@ -12,6 +12,13 @@
 </head>
 <body>
   <h1>Hello, world!</h1>
+
+  <h3 id="first-ts"></h3>
+  <svg width="450" height="900" id="first" style="background-color: lightgray">
+  </svg>
+
+  <br>
+
   <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>
@@ -57,6 +64,7 @@
 
   </svg>
 
+
   <div>
     <button id="play">play</button> <br>
     <button id="pause">pause</button>

frontend/main.js

@@ -1,4 +1,5 @@
 import anime from "https://esm.sh/animejs@3.2.2";
+import m from "https://esm.sh/mithril@2.2.2"
 
 const second = 1000;
 
@@ -13,7 +14,6 @@ function gaussianRandom(mean=0, stdev=1) {
     return z * stdev + mean;
 }
 
-
 function* brownian(n){
     let x = 0;
     for(let i = 0; i < n; i ++){
@@ -64,3 +64,38 @@ document.querySelector('#seek').onclick = function(){
     timeline.pause();
     timeline.seek(seekVal);
 }
+
+
+function generatePoints(points, frames){
+    const lst = [];
+    for(const point of points.points){
+        if(frames.indexOf(point.frameIndex) !== -1){
+            lst.push(m("circle", {cx: point.x, cy: point.y, r: 3}));
+        }
+    }
+    return m("g", lst);
+}
+
+function getTimeStamp(points, frameId){
+    for(const point of points.points){
+        if(point.frameIndex === frameId){
+            return `${point.frameTimestamp / 1000} seconds`;
+        }
+    }
+}
+
+const url = "/dodgeball-tracker/outputs/output.json";
+const resp = await fetch(url);
+const points = await resp.json();
+
+function range(min, max){
+    const ret = [];
+    while(min < max){
+        ret.push(min);
+        min ++;
+    }
+    return ret
+}
+
+m.render(document.getElementById("first"), generatePoints(points, range(-10, 400)));
+m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points, 80)));