Team766 · maxspier · Jan 1, 2025 · Dec 29, 2024 · Dec 29, 2024 · Dec 30, 2024
diff --git a/README.md b/README.md
@@ -119,27 +119,14 @@ This code ships with a GPU apriltag detection pipeline, and a flask based web vi
 * From the root directory (e.g. apriltags_cuda):
 ```bash
 # Start the GPU Detection Pipeline:
-./build/ws_server -camera_idx 0
+./build/ws_server -camera_idx 0 -cal_file data/calibrationmatrix.json
 ```
 
-* This will start the GPU detection pipeline running off of frames from /dev/video0.  You can also set other indices if your camera mounts on /dev/video1 or a different device.
+* This will start the GPU detection pipeline running off of frames captured from /dev/video0.  You can also set other indices if your camera mounts on /dev/video1 or a different device.  This command launches a websocket server accessible from port 8080 on the local machine.
 
-* Build the python virtualenv for the flask app:
-```bash
-cd app
-virtualenv venv
-source venv/bin/activate
-pip install -r requirements.txt
-```
-
-* Launch the flask app
-```bash
-python app.py
-```
-
-* Now bring up a web browser and navigate to `http://localhost:5000` and you should see something like shown below
+* Now bring up a web browser and navigate to `http://localhost:8080` and you should see something like shown below
 
-Flask App: ![Alt](/res/flaskapp.png "Flask App Screenshot")
+Flask App: ![Alt](/res/webserver.png "Webserver Screenshot")
 
 * You can adjust between manual and auto exposure.  When manual exposure is selected you can adjust the exposure and brightness of the image.  If you hold an apriltag of type 36h11 it should be detected by the system and outlines of the detection will be shown.
 

diff --git a/app/app.py b/app/app.py
diff --git a/app/requirements.txt b/app/requirements.txt
diff --git a/app/templates/index.html → public/index.html b/app/templates/index.html → public/index.html
@@ -3,7 +3,6 @@
 
 <head>
     <title>AprilTag Detection with Controls and Pose Data</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -157,23 +156,66 @@ <h2>Pose Data:</h2>
     <div id="pose-data"></div>
 
     <script>
-        const socket = io();
 
-        socket.on('connect', function () {
+        // Establish WebSocket connection
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const socket = new WebSocket(`${protocol}://${window.location.host}/ws`);
+        socket.binaryType = 'arraybuffer';
+
+        socket.onopen = function () {
             console.log('Connected to server');
-        });
+        };
 
-        socket.on('image', function (data) {
-            document.getElementById('apriltag-image').src = 'data:image/jpeg;base64,' + data;
-        });
+        socket.onmessage = function (event) {
+            const data = event.data;
+
+            if (data instanceof ArrayBuffer) {
+                const bytes = new Uint8Array(data);
+                const prefixBytes = bytes.slice(0, 5); // First 5 bytes for the prefix
+                const prefix = new TextDecoder().decode(prefixBytes);
+
+                if (prefix === "IMG::") {
+                    // Handle image data
+                    const imageData = bytes.slice(5); // Remaining bytes are image data
+                    const blob = new Blob([imageData], { type: 'image/jpeg' });
+                    const url = URL.createObjectURL(blob);
+                    document.getElementById('apriltag-image').src = url;
+
+                    // Revoke the object URL after the image has loaded to free memory
+                    imgElement.onload = function () {
+                        URL.revokeObjectURL(url);
+                    };
+                }
+                else if (prefix === "POSE:") {
+                    // Handle pose data
+                    const poseDataBytes = bytes.slice(5); // Remaining bytes are JSON data
+                    const poseDataString = new TextDecoder().decode(poseDataBytes);
+                    try {
+                        const poseData = JSON.parse(poseDataString);
+                        const poseDataElement = document.getElementById('pose-data');
+                        poseDataElement.innerHTML = formatPoseData(poseData);
+                    } catch (e) {
+                        console.error('Failed to parse pose data JSON:', e);
+                    }
+                }
+                else {
+                    console.warn('Unknown message prefix:', prefix);
+                }
+            }
+        };
 
-        socket.on('pose_data', function (data) {
-            const poseDataElement = document.getElementById('pose-data');
-            poseDataElement.innerHTML = formatPoseData(data);
-        });
+        socket.onerror = function (error) {
+            console.error('WebSocket error:', error);
+        };
+
+        socket.onclose = function () {
+            console.log('WebSocket connection closed');
+            // Optionally implement reconnection logic here
+        };
 
         function sendControl(type, value) {
-            socket.emit('control', { type: type, value: value });
+            const message = JSON.stringify({ type: type, value: value });
+            socket.send(message);
         }
 
         document.getElementById('brightness').oninput = function () {

diff --git a/res/flaskapp.png b/res/flaskapp.png
diff --git a/res/webserver.png b/res/webserver.png
diff --git a/src/ws_server.cu b/src/ws_server.cu
@@ -84,7 +84,7 @@ class AprilTagHandler : public seasocks::WebSocket::Handler {
         flipVertical_ = j["value"].get<bool>();
         settings_changed_ = true;
       }
-      if(j["type"] == "flipHorizontal"){
+      if (j["type"] == "flipHorizontal") {
         flipHorizontal_ = j["value"].get<bool>();
         settings_changed_ = true;
       }
@@ -171,18 +171,19 @@ class AprilTagHandler : public seasocks::WebSocket::Handler {
 
     return true;
   }
-//Flipcode -1 = both directions
-  void flipVertical(const cv::Mat& bgr_img, cv::Mat* output_img){
+  // Flipcode -1 = both directions
+  void flipVertical(const cv::Mat& bgr_img, cv::Mat* output_img) {
     cv::flip(bgr_img, *output_img, 0);
   }
-  void flipHorizontal(const cv::Mat& bgr_img, cv::Mat* output_img){
+  void flipHorizontal(const cv::Mat& bgr_img, cv::Mat* output_img) {
     cv::flip(bgr_img, *output_img, 1);
   }
-    void flipBoth(const cv::Mat& bgr_img, cv::Mat* output_img){
+  void flipBoth(const cv::Mat& bgr_img, cv::Mat* output_img) {
     cv::flip(bgr_img, *output_img, -1);
   }
   void startReadAndSendThread(const int camera_idx, const std::string& cal_file,
-                              const bool rotate_vertical, const bool rotate_horizontal) {
+                              const bool rotate_vertical,
+                              const bool rotate_horizontal) {
     read_thread_ = std::thread(&AprilTagHandler::readAndSend, this, camera_idx,
                                cal_file, rotate_vertical, rotate_horizontal);
   }
@@ -317,9 +318,10 @@ class AprilTagHandler : public seasocks::WebSocket::Handler {
         frame_counter++;
 
         auto overallstart = std::chrono::high_resolution_clock::now();
-        //Let's check the time this takes, can always combine to one call if both are true later.
-        //Best case scenario is we don't place the camera wrong so we do not need this method at all.
-        if(flipVertical_ && flipHorizontal_){
+        // Let's check the time this takes, can always combine to one call if
+        // both are true later. Best case scenario is we don't place the camera
+        // wrong so we do not need this method at all.
+        if (flipVertical_ && flipHorizontal_) {
           flipBoth(bgr_img.clone(), &bgr_img);
         } else {
           // if (flipVertical_) {
@@ -329,7 +331,6 @@ class AprilTagHandler : public seasocks::WebSocket::Handler {
           //   flipHorizontal(bgr_img.clone(), &bgr_img);
           // }
         }
-
 
         cv::cvtColor(bgr_img, yuyv_img, cv::COLOR_BGR2YUV_YUYV);
         auto gpudetectstart = std::chrono::high_resolution_clock::now();
@@ -465,14 +466,17 @@ int main(int argc, char* argv[]) {
 
   auto logger = std::make_shared<seasocks::PrintfLogger>();
   auto server = std::make_shared<seasocks::Server>(logger);
+
   try {
     auto handler = std::make_shared<AprilTagHandler>(server);
     server->addWebSocketHandler("/ws", handler);
 
-    handler
-        ->startReadAndSendThread(FLAGS_camera_idx, FLAGS_cal_file,
-                                 FLAGS_rotate_vertical, FLAGS_rotate_horizontal);
-    server->serve("", 8080);
+    handler->startReadAndSendThread(FLAGS_camera_idx, FLAGS_cal_file,
+                                    FLAGS_rotate_vertical,
+                                    FLAGS_rotate_horizontal);
+
+    server->serve("public", 8080);
+
     handler->stop();
     handler->joinReadAndSendThread();
   } catch (const std::exception& e) {