Add a checkbox in the UI that shows the swimming pool boundaries from the json file button should be next to droite

Author: romsson

assets/css/custom.css

@@ -440,19 +440,62 @@ table {
     background-color: #232157;
   }
 
+  .radio-option input[type="checkbox"] {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #232157;
+    border-radius: 4px;
+    outline: none;
+    margin-right: 8px;
+    cursor: pointer;
+    transition: background 0.2s ease-in-out;
+    position: relative;
+  }
+
+  .radio-option input[type="checkbox"]:checked {
+    background-color: #232157;
+  }
+
+  .radio-option input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
+    border: solid #ffffff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
   .radio-option label {
     cursor: pointer;
     color: #000000;
     font-weight: bold;
     margin-right: 12px;
   }
+
+  .checkbox-option label {
+    margin-right: 0;
+  }
 #bottom_data .radio-group {
     display: inline-flex; /* inline pour centrer avec text-align */
     justify-content: center;
     gap: 1rem; /* espace entre les boutons */
     margin-top: 10px; /* si tu veux un peu d'air */
 }
 
+.pool_boundary_line {
+    position: absolute;
+    height: 0;
+    border-top: 3px solid rgba(46, 163, 221, 0.95);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
+    transform-origin: left top;
+    z-index: 998;
+    pointer-events: none;
+}
+
 
 
 /* The switch - the box around the slider */
@@ -1076,4 +1119,3 @@ padding: 20px;
     max-width: 140px;
     box-sizing: border-box;
 }
-

assets/js/plot_handler.js

@@ -9,6 +9,7 @@ import { get_meter_plot_label  } from './cycles_handler.js';
 import { getMeta } from './utils.js';
 
 export let show_indicator_lines = false;// Boolean correspondant au bouton Ligne Ref : true -> affichage et aide à la visée des lignes indicatrices, false -> pas d'affichage ni aide
+export let show_pool_boundaries = false;// Boolean correspondant à l'affichage des limites de la piscine calibrées dans le JSON
 let last_mode = "enter";// Dernier Mode d'annotation : quand on active les lignes ref on passe automatiquement en mode intermed, et quand on les désactive, on repasse en last_mode 
 let ecart_bord_premiere_barre=5;
 let ecart_barres=10;
@@ -107,6 +108,115 @@ export function plot_indicator_lines(isPlot){
     }
 }
 
+function getPoolBoundaryDisplayPoints(meta, container) {
+    if (!meta?.srcPts || meta.srcPts.length < 2) {
+        return [];
+    }
+
+    const [videoWidth, videoHeight] = getSize(meta);
+    const containerWidth = container?.clientWidth || videoWidth;
+    const containerHeight = container?.clientHeight || videoHeight;
+
+    if (containerWidth <= 0 || containerHeight <= 0 || videoWidth <= 0 || videoHeight <= 0) {
+        return [];
+    }
+
+    const containerRatio = containerWidth / containerHeight;
+    const videoRatio = videoWidth / videoHeight;
+    let visibleWidth = videoWidth;
+    let visibleHeight = videoHeight;
+    let cropLeft = 0;
+    let cropTop = 0;
+
+    if (videoRatio > containerRatio) {
+        visibleWidth = videoHeight * containerRatio;
+        cropLeft = (videoWidth - visibleWidth) / 2;
+    } else if (videoRatio < containerRatio) {
+        visibleHeight = videoWidth / containerRatio;
+        cropTop = (videoHeight - visibleHeight) / 2;
+    }
+
+    if (visibleWidth <= 0 || visibleHeight <= 0) {
+        return [];
+    }
+
+    return meta.srcPts.map(([x, y]) => [
+        ((x - cropLeft) / visibleWidth) * containerWidth,
+        ((y - cropTop) / visibleHeight) * containerHeight,
+    ]);
+}
+
+export function plot_pool_boundaries(isPlot) {
+    $(".pool_boundary_line").remove();
+
+    if (!isPlot) {
+        return;
+    }
+
+    const container = document.getElementById("video");
+    let meta = null;
+    try {
+        meta = getMeta();
+    } catch {
+        return;
+    }
+
+    if (!container || !meta) {
+        return;
+    }
+
+    const points = getPoolBoundaryDisplayPoints(meta, container);
+    if (points.length < 2) {
+        return;
+    }
+
+    for (let i = 0; i < points.length; i++) {
+        const start = points[i];
+        const end = points[(i + 1) % points.length];
+        const dx = end[0] - start[0];
+        const dy = end[1] - start[1];
+        const distance = Math.sqrt((dx * dx) + (dy * dy));
+        const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+        const line = document.createElement("div");
+        line.setAttribute("class", "pool_boundary_line");
+        line.style.left = `${start[0]}px`;
+        line.style.top = `${start[1]}px`;
+        line.style.width = `${distance}px`;
+        line.style.transform = `rotate(${angle}deg)`;
+
+        container.append(line);
+    }
+}
+
+function syncPoolBoundariesToggle(checked) {
+    show_pool_boundaries = checked;
+    plot_pool_boundaries(show_pool_boundaries);
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+    const boundariesToggle = document.getElementById('show_pool_boundaries');
+    boundariesToggle?.addEventListener('change', function(e) {
+        syncPoolBoundariesToggle(e.target.checked);
+    });
+
+    document.getElementById('vid')?.addEventListener('loadedmetadata', function() {
+        if (show_pool_boundaries) {
+            plot_pool_boundaries(true);
+        }
+    });
+
+    document.getElementById('vid')?.addEventListener('loadstart', function() {
+        plot_pool_boundaries(false);
+    });
+
+    window.addEventListener('resize', function() {
+        if (show_pool_boundaries) {
+            plot_pool_boundaries(true);
+        }
+    });
+});
+
 /**
  * Corrige la position du curseur selon les lignes indicatrices :
  * Si les lignes indicatrices sont actives et que le curseur est à moins de 1 mètre d'une ligne indicatrice : le curseur s'y colle
@@ -131,4 +241,4 @@ export function indicator_correction(x){
         return (x)
     }
     return x;
-}
+}

index.html

@@ -224,6 +224,10 @@
                             <input type="radio" name="cote_action" id="droite" value="2">
                             <label for="droite">droite</label>
                         </div>
+                        <div class="radio-option checkbox-option">
+                            <input type="checkbox" id="show_pool_boundaries">
+                            <label for="show_pool_boundaries">piscine</label>
+                        </div>
                         </div>
                         <br>
 

workflow/test/index-test.html

@@ -240,6 +240,10 @@
                             <input type="radio" name="cote_action" id="droite" value="2">
                             <label for="droite">droite</label>
                         </div>
+                        <div class="radio-option checkbox-option">
+                            <input type="checkbox" id="show_pool_boundaries">
+                            <label for="show_pool_boundaries">piscine</label>
+                        </div>
                         </div>
                         <br>
 
@@ -473,4 +477,4 @@
 
 </body>
 
-</html>
+</html>