Merge pull request #7 from centralelyon/switch-to-imgCtrlPts

Switch to img ctrl pts and switch to vizapi features

Author: NakoGH

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Inject API URL
+        env:
+          API_BASE: ${{ secrets.API_BASE }}
+        run: |
+          sed -i "s|http://localhost:8000/aquanote|$API_BASE|g" assets/js/aquanote-providers.js
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: .
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -88,4 +88,8 @@ dist/
 
 # Ignorer les dépendances
 node_modules/
-.env
+.env
+package-lock.json
+
+.venv/
+venv/

README.md

@@ -59,7 +59,7 @@ To use the site locally, you need to pull the branch and go offline with competi
 
 ### Structure of annotated data 
 
-Aquanote uses a specific data structure to store the annotations. It is based on a CSV file for each video, with samples provided in the [`course_demo`](courses_demo/2025_courses_demo/2025_courses_demo_translation_carre_100_demifinale) folder. Here is a sample of such a CSV file:
+Aquanote uses a specific data structure to store the annotations. It is based on a CSV file for each video, with samples provided in the [`videos`](videos/2025_courses_demo/2025_courses_demo_translation_carre_100_demifinale) folder. Here is a sample of such a CSV file:
 
 ```
 frameId,swimmerId,swimmerName,lane,cumul,eventId,eventX,eventY,event,TempsVideo (s),Temps (s),distance (m),tempo (s),frequence (cylce/min),amplitude (m),vitesse (m/s)
@@ -75,17 +75,17 @@ To analyse the CSV file, a dedicated repository is available:
 
 ### Adding new videos
 
-The videos provided is in the `courses_demo` folder are samples. To add your own videos, you need to follow the same structure as in the demo folder. 
+The videos provided is in the `videos` folder are samples. To add your own videos, you need to follow the same structure as in the demo folder. 
 
 Each competition should have its own subfolder, and then videos to used should be specified in a `metadata JSON` file located at the root of each competition folder. For example, for the demo competition the metadata file is `2025_courses_demo_translation_carre_50_finale`, 
 
-**[flatdir](https://github.com/centralelyon/flatdir)** is a Python module to flatten a directory structure and automatically generate the required JSON files at the root of each competition folder (like the [`courses_demo/flat.json`](courses_demo/flat.json) JSON, add `> flat.json` to save the output in such a file):
+**[flatdir](https://github.com/centralelyon/flatdir)** is a Python module to flatten a directory structure and automatically generate the required JSON files at the root of each competition folder (like the [`videos/flat.json`](videos/flat.json) JSON, add `> flat.json` to save the output in such a file):
 
-> python -m flatdir courses_demo --limit 10 --nested --only type=directory --add espadon=false --add espadonModifie=false --add data_checked=false --no-defaults --min-depth 1 --add-depth 2 --ignore-typical > courses_demo/flat.json
+> python -m flatdir videos --limit 10 --nested --only type=directory --add espadon=false --add espadonModifie=false --add data_checked=false --no-defaults --min-depth 1 --add-depth 2 --ignore-typical > videos/flat.json
 
 ### Pre-processing videos
 
-A `metadata JSON` contains information about pre-processing steps for each race to analyzed and should be created before the annotation phase. This includes temporal calibration (start and end times), spatial calibration (real-world dimensions) and athletes information (names, lanes). An example of such a JSON file is available in the demo folder: [`courses_demo/2025_courses_demo_translation_carre_50_finale/metadata.json`.](courses_demo/2025_courses_demo_translation_carre_50_finale/metadata.json).
+A `metadata JSON` contains information about pre-processing steps for each race to analyzed and should be created before the annotation phase. This includes temporal calibration (start and end times), spatial calibration (real-world dimensions) and athletes information (names, lanes). An example of such a JSON file is available in the demo folder: [`videos/2025_courses_demo/2025_courses_demo_translation_carre_50_finale/2025_courses_demo_translation_carre_50_finale.json`.](videos/2025_courses_demo/2025_courses_demo_translation_carre_50_finale/2025_courses_demo_translation_carre_50_finale.json).
 
 While some pre-processingt steps can be done directly in Aquanote, some require external video and image processing tools. We suggest two tools to achieve this: 
 
@@ -108,7 +108,7 @@ To use another metadata file or output path:
 
 ```sh
 python scripts/generate_video.py \
-  --metadata courses_demo/2025_courses_demo/2025_courses_demo_translation_carre_100_demifinale/2025_courses_demo_translation_carre_100_demifinale.json \
+  --metadata videos/2025_courses_demo/2025_courses_demo_translation_carre_100_demifinale/2025_courses_demo_translation_carre_100_demifinale.json \
   --output demo_homography.mp4
 ```
 

assets/css/custom.css

@@ -853,7 +853,7 @@ padding: 20px;
     box-shadow: 0px 8px 16px rgba(0,0,0,0.1); /* Subtle shadow */
     border-radius: 5px; /* Rounded corners */
     overflow: hidden; /* Clip rounded corners */
-    z-index: 1;
+    z-index: 1000; /* Ensure it appears above other elements */
 }
 .dropdown-content button {
     color: #333; /* Dark gray text */
@@ -868,6 +868,10 @@ padding: 20px;
     text-align: center;
 }
 
+.source-menu {
+    z-index: 1001; /* Ensure it appears above other elements */
+}
+
 .dropdown:hover .dropdown-content {
     display: block;
 }
@@ -977,7 +981,7 @@ padding: 20px;
         box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
         border-radius: 5px;
         overflow: hidden;
-        z-index: 1;
+        z-index: 1000;
     }
 
     .dropdown-content button {