<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>KEYENCE VS Calculator</title>
   <style>
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f4f8;
    margin: 0;
}


.calculator {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 20px;
    width: 1200px;
    display: flex;
    flex-direction: column;
}

.main-content {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
}

.form-column {
    flex: 0 0 380px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
	position: relative;
}

.graph-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.graphics {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.form-group {
    margin-bottom: 25px;
}

label {
    display: block;
    margin-bottom: 10px;
    color: #2c3e50;
    font-weight: bold;
}

select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #bdc3c7;
}

input[type="range"] {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #bdc3c7;
}

#result {
    background-color: #f0f4f8;  /* Un gris très clair, comme le fond général */
    color: #2c3e50;            /* La même couleur que les labels */
    border: 1px solid #bdc3c7;  /* La même bordure que les selects */
    padding: 10px 10px;
    border-radius: 5px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.6;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.8em;
    color: #666;
}

.main-title {
    font-size: 30px;
    margin-bottom: 5px;
    margin-top: 0;
}

.main-title .red-k {
    color: red;
}

.sub-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    color: black;
}

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    width: 100%;
}

.disclaimer {
    font-size: 0.7em;
    color: red;
    font-style: italic;
font-weight: bold;
    text-align: center;
}

#fovGraph {
    width: 100%;
    height: 100%;
}
.range-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-control input[type="range"] {
    flex: 1;
}

.adjustment-buttons {
    display: flex;
    gap: 5px;
}

.adjustment-button {
    width: 30px;
    height: 30px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.adjustment-button:hover {
    background-color: #f0f4f8;
}

.adjustment-button:active {
    background-color: #e0e4e8;
}

.adjustment-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-container {
    position: absolute;
    top: 10px;
    right: 20px;
}

.capture-button {
    background-color: white;
    border: 0px;
    border-radius: 5px;
    padding: 0px 0px 0px 0px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 20px;
}

.capture-button:hover {
    background-color: #f0f4f8;
}
.capture-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

   </style>
</head>
<body>
   <div class="calculator">
       <div class="main-content">
           <div class="form-column">
<div class="button-container">
    <button id="capture-button" class="capture-button" disabled>📷</button>
</div>
               <h1 class="main-title"><span class="red-k">K</span>EYENCE</h1>
               <h2 class="sub-title">VS Calculator</h2>
               <div class="form-group">
                   <label for="camera">VS Model</label>
                   <select id="camera" name="camera">
                       <option value="">Select VS Model</option>
                       <option value="VS-S160">VS-S160</option>
                       <option value="VS-L160">VS-L160</option>
                       <option value="VS-S320">VS-S320</option>
                       <option value="VS-L320">VS-L320</option>
                       <option value="VS-S500">VS-S500</option>
                       <option value="VS-L500">VS-L500</option>
                       <option value="VS-S1500">VS-S1500</option>
                       <option value="VS-L1500">VS-L1500</option>
                   </select>
               </div>
               <div class="form-group">
                   <label for="image-size">Sensor Size (px)</label>
                   <select id="image-size" name="image-size" disabled>
                       <option value="">Select Sensor Size (px)</option>
                   </select>
               </div>
               <div class="form-group">
                   <label for="working-distance">Working Distance (mm)</label>
                   <div class="range-control">
                       <input type="range" id="working-distance" name="working-distance" min="0" max="1000" value="0" disabled>
                       <div class="adjustment-buttons">
                           <button class="adjustment-button" id="decrease-distance" disabled>-</button>
                           <button class="adjustment-button" id="increase-distance" disabled>+</button>
                       </div>
                   </div>
                   <div class="range-labels">
                       <span id="working-distance-min">-</span>
                       <span id="working-distance-value">- mm</span>
                       <span id="working-distance-max">-</span>
                   </div>
               </div>
               <div class="form-group">
                   <label for="optical-zoom">Optical Zoom</label>
                   <div class="range-control">
                       <input type="range" id="optical-zoom" name="optical-zoom" min="1" max="10" step="0.01" value="1" disabled>
                       <div class="adjustment-buttons">
                           <button class="adjustment-button" id="decrease-zoom" disabled>-</button>
                           <button class="adjustment-button" id="increase-zoom" disabled>+</button>
                       </div>
                   </div>
                   <div class="range-labels">
                       <span id="optical-zoom-min">-</span>
                       <span id="optical-zoom-value">- x</span>
                       <span id="optical-zoom-max">-</span>
                   </div>
               </div>
               <div class="bottom-row">
                   <div id="result">
                       Field of View: - x - mm<br>
                       System Resolution: - µm/px<br>
			Offsets: - mm (- px)
                   </div>
               </div>
           </div>
           <div class="graph-column">
               <div class="graphics">
                   <canvas id="fovGraph" width="780" height="500"></canvas>
    
               </div>
           </div>
       </div>
       <div class="disclaimer">
           Please note: This calculator is for reference only and does not replace KEYENCE consultation. Additional factors such as depth of field, optical resolution, and other parameters should be considered when selecting a camera.
       </div>
   </div>

<script>

const cameraConfigs = {
  'VS-L1500': {
    'sizes': {
      '4400x3296': {min: 1.0, max: 2.75, zoomIntermediate: 1.1, 
        fov: {min: {x: 137, y: 102}, intermediate: {x: 817, y: 612}, max: {x: 2417, y: 1818}}, 
        offsets: {min: {x: 65, y: 49}, intermediate: {x: 176, y: 132}, max: {x: 176, y: 132}}
   }
 },
    'working-distance': {min: 150, intermediate: 1000, max: 3000}
  },

  'VS-L500': {
    'sizes': {
      '2544x1904': {min: 1.0, max: 5.0, zoomIntermediate: 2, 
        fov: {min: {x: 137, y: 102}, intermediate: {x: 817, y: 612}, max: {x: 2417, y: 1818}}, 
        offsets: {min: {x: 12, y: 9}, intermediate: {x: 640, y: 480}, max: {x: 640, y: 480}}},
      '2224x2224': {min: 1.0, max: 4.25, zoomIntermediate: 1.7, 
        fov: {min: {x: 102, y: 102}, intermediate: {x: 612, y: 612}, max: {x: 1818, y: 1818}}, 
        offsets: {min: {x: 328, y: 8}, intermediate: {x: 720, y: 400}, max: {x: 720, y: 400}}},
      '2976x1664': {min: 1.0, max: 4.25, zoomIntermediate: 1.7, 
        fov: {min: {x: 136, y: 76}, intermediate: {x: 817, y: 458}, max: {x: 2417, y: 1348}}, 
        offsets: {min: {x: 8, y: 246}, intermediate: {x: 532, y: 540}, max: {x: 532, y: 540}}},
      '1904x2544': {min: 1.0, max: 3.75, zoomIntermediate: 1.5, 
        fov: {min: {x: 76, y: 103}, intermediate: {x: 459, y: 612}, max: {x: 1347, y: 1818}}, 
        offsets: {min: {x: 560, y: 0}, intermediate: {x: 800, y: 320}, max: {x: 800, y: 320}}},
      '1664x2976': {min: 1.0, max: 3.0, zoomIntermediate: 1.2, 
        fov: {min: {x: 57, y: 102}, intermediate: {x: 343, y: 612}, max: {x: 1010, y: 1812}}, 
        offsets: {min: {x: 776, y: 62}, intermediate: {x: 860, y: 212}, max: {x: 860, y: 212}}},
      '3824x1280': {min: 1.0, max: 3.25, zoomIntermediate: 1.3, 
        fov: {min: {x: 135, y: 45}, intermediate: {x: 817, y: 272}, max: {x: 2417, y: 805}}, 
        offsets: {min: {x: 32, y: 539}, intermediate: {x: 320, y: 636}, max: {x: 320, y: 636}}},
      '1280x3824': {min: 1.0, max: 2.5, zoomIntermediate: 2.5, 
        fov: {min: {x: 34, y: 102}, intermediate: {x: 204, y: 612}, max: {x: 604, y: 1812}}, 
        offsets: {min: {x: 956, y: 0}, intermediate: {x: 956, y: 0}, max: {x: 956, y: 0}}}
    },
    'working-distance': {min: 150, intermediate: 1000, max: 3000}
  },

  'VS-L320': {
    'sizes': {
      '2048x1536': {min: 1.0, max: 6.0, zoomIntermediate: 2.4, 
        fov: {min: {x: 137, y: 102}, intermediate: {x: 817, y: 612}, max: {x: 2417, y: 1818}}, 
        offsets: {min: {x: 41, y: 29}, intermediate: {x: 764, y: 572}, max: {x: 764, y: 572}}},
      '1536x2048': {min: 1.0, max: 4.5, zoomIntermediate: 2, 
        fov: {min: {x: 76, y: 103}, intermediate: {x: 459, y: 612}, max: {x: 1347, y: 1818}}, 
        offsets: {min: {x: 581, y: 31}, intermediate: {x: 892, y: 444}, max: {x: 892, y: 444}}},
      '1776x1776': {min: 1.0, max: 5.0, zoomIntermediate: 2, 
        fov: {min: {x: 102, y: 102}, intermediate: {x: 612, y: 612}, max: {x: 1818, y: 1818}}, 
        offsets: {min: {x: 384, y: 64}, intermediate: {x: 832, y: 512}, max: {x: 832, y: 512}}},
      '2368x1328': {min: 1.0, max: 5.0, zoomIntermediate: 2, 
        fov: {min: {x: 136, y: 76}, intermediate: {x: 817, y: 458}, max: {x: 2417, y: 1348}}, 
        offsets: {min: {x: 88, y: 288}, intermediate: {x: 684, y: 624}, max: {x: 684, y: 624}}},
      '1328x2368': {min: 1.0, max: 4.0, zoomIntermediate: 1.6, 
        fov: {min: {x: 57, y: 102}, intermediate: {x: 343, y: 612}, max: {x: 1010, y: 1812}}, 
        offsets: {min: {x: 742, y: 6}, intermediate: {x: 944, y: 364}, max: {x: 944, y: 364}}},
      '3072x1024': {min: 1.0, max: 4.0, zoomIntermediate: 1.6, 
        fov: {min: {x: 135, y: 45}, intermediate: {x: 817, y: 272}, max: {x: 2417, y: 805}}, 
        offsets: {min: {x: 45, y: 544}, intermediate: {x: 508, y: 700}, max: {x: 508, y: 700}}},
      '1024x3072': {min: 1.0, max: 3.0, zoomIntermediate: 1.2, 
        fov: {min: {x: 34, y: 102}, intermediate: {x: 204, y: 612}, max: {x: 604, y: 1812}}, 
        offsets: {min: {x: 968, y: 33}, intermediate: {x: 1020, y: 188}, max: {x: 1020, y: 188}}}
    },
    'working-distance': {min: 150, intermediate: 1000, max: 3000}
  },

  'VS-L160': {
    'sizes': {
      '1440x1072': {min: 1.0, max: 8.75, zoomIntermediate: 3.5, 
        fov: {min: {x: 137, y: 102}, intermediate: {x: 817, y: 612}, max: {x: 2417, y: 1818}}, 
        offsets: {min: {x: 6, y: 8}, intermediate: {x: 916, y: 688}, max: {x: 916, y: 688}}},
      '1072x1440': {min: 1.0, max: 6.25, zoomIntermediate: 2.5, 
        fov: {min: {x: 76, y: 103}, intermediate: {x: 459, y: 612}, max: {x: 1347, y: 1818}}, 
        offsets: {min: {x: 600, y: 50}, intermediate: {x: 1008, y: 596}, max: {x: 1008, y: 596}}},
      '1248x1248': {min: 1.0, max: 7.5, zoomIntermediate: 3, 
        fov: {min: {x: 102, y: 102}, intermediate: {x: 612, y: 612}, max: {x: 1818, y: 1818}}, 
        offsets: {min: {x: 332, y: 12}, intermediate: {x: 964, y: 644}, max: {x: 964, y: 644}}},
      '1664x928': {min: 1.0, max: 7.5, zoomIntermediate: 3, 
        fov: {min: {x: 136, y: 76}, intermediate: {x: 817, y: 458}, max: {x: 2417, y: 1348}}, 
        offsets: {min: {x: 20, y: 252}, intermediate: {x: 860, y: 724}, max: {x: 860, y: 724}}},
      '928x1664': {min: 1.0, max: 5.5, zoomIntermediate: 2.2, 
        fov: {min: {x: 57, y: 102}, intermediate: {x: 343, y: 612}, max: {x: 1010, y: 1812}}, 
        offsets: {min: {x: 761, y: 36}, intermediate: {x: 1044, y: 540}, max: {x: 1044, y: 540}}},
      '2160x720': {min: 1.0, max: 5.75, zoomIntermediate: 2.3, 
        fov: {min: {x: 135, y: 45}, intermediate: {x: 817, y: 272}, max: {x: 2417, y: 805}}, 
        offsets: {min: {x: 29, y: 537}, intermediate: {x: 736, y: 776}, max: {x: 736, y: 776}}},
      '720x2160': {min: 1.0, max: 4.25, zoomIntermediate: 1.7, 
        fov: {min: {x: 34, y: 102}, intermediate: {x: 204, y: 612}, max: {x: 604, y: 1812}}, 
        offsets: {min: {x: 967, y: 35}, intermediate: {x: 1086, y: 416}, max: {x: 1086, y: 416}}}
    },
    'working-distance': {min: 150, intermediate: 1000, max: 3000}
  },

'VS-S1500': {
    'sizes': {
      '4400x3296': {min: 1.0, max: 1.1, zoomIntermediate: 1.1, 
        fov: {min: {x: 57, y: 42}, intermediate: {x: 137, y: 102}, max: {x: 417, y: 310}}, 
        offsets: {min: {x: 65, y: 49}, intermediate: {x: 176, y: 132}, max: {x: 176, y: 132}}}
    },
    'working-distance': {min: 50, intermediate: 150, max: 500}
},

'VS-S500': {
    'sizes': {
      '2544x1904': {min: 1.0, max: 2.0, zoomIntermediate: 2, 
        fov: {min: {x: 57, y: 42}, intermediate: {x: 137, y: 102}, max: {x: 417, y: 310}}, 
        offsets: {min: {x: 12, y: 9}, intermediate: {x: 640, y: 480}, max: {x: 640, y: 480}}},
      '2224x2224': {min: 1.0, max: 1.7, zoomIntermediate: 1.7, 
        fov: {min: {x: 42, y: 42}, intermediate: {x: 102, y: 102}, max: {x: 310, y: 310}}, 
        offsets: {min: {x: 328, y: 8}, intermediate: {x: 720, y: 400}, max: {x: 720, y: 400}}},
      '2976x1664': {min: 1.0, max: 1.7, zoomIntermediate: 1.7, 
        fov: {min: {x: 57, y: 32}, intermediate: {x: 137, y: 76}, max: {x: 417, y: 231}}, 
        offsets: {min: {x: 8, y: 246}, intermediate: {x: 532, y: 540}, max: {x: 532, y: 540}}},
      '1904x2544': {min: 1.0, max: 1.5, zoomIntermediate: 1.5, 
        fov: {min: {x: 31, y: 42}, intermediate: {x: 76, y: 102}, max: {x: 231, y: 310}}, 
        offsets: {min: {x: 560, y: 0}, intermediate: {x: 800, y: 320}, max: {x: 800, y: 320}}},
      '1664x2976': {min: 1.0, max: 1.2, zoomIntermediate: 1.2, 
        fov: {min: {x: 23, y: 42}, intermediate: {x: 57, y: 102}, max: {x: 174, y: 312}}, 
        offsets: {min: {x: 776, y: 62}, intermediate: {x: 860, y: 212}, max: {x: 860, y: 212}}},
      '3824x1280': {min: 1.0, max: 1.3, zoomIntermediate: 1.3, 
        fov: {min: {x: 57, y: 19}, intermediate: {x: 136, y: 45}, max: {x: 416, y: 138}}, 
        offsets: {min: {x: 32, y: 539}, intermediate: {x: 320, y: 636}, max: {x: 320, y: 636}}},
      '1280x3824': {min: 1.0, max: 1.0, zoomIntermediate: 2.5, 
        fov: {min: {x: 14, y: 42}, intermediate: {x: 34, y: 102}, max: {x: 104, y: 312}}, 
        offsets: {min: {x: 956, y: 0}, intermediate: {x: 956, y: 0}, max: {x: 956, y: 0}}}
    },
    'working-distance': {min: 50, intermediate: 150, max: 500}
  },

  'VS-S320': {
    'sizes': {
      '2048x1536': {min: 1.0, max: 2.4, zoomIntermediate: 2.4, 
        fov: {min: {x: 57, y: 42}, intermediate: {x: 137, y: 102}, max: {x: 417, y: 310}}, 
        offsets: {min: {x: 41, y: 29}, intermediate: {x: 764, y: 572}, max: {x: 764, y: 572}}},
      '1536x2048': {min: 1.0, max: 1.8, zoomIntermediate: 2, 
        fov: {min: {x: 31, y: 42}, intermediate: {x: 76, y: 102}, max: {x: 231, y: 310}}, 
        offsets: {min: {x: 581, y: 31}, intermediate: {x: 892, y: 444}, max: {x: 892, y: 444}}},
      '1776x1776': {min: 1.0, max: 2.0, zoomIntermediate: 2, 
        fov: {min: {x: 42, y: 42}, intermediate: {x: 102, y: 102}, max: {x: 310, y: 310}}, 
        offsets: {min: {x: 384, y: 64}, intermediate: {x: 832, y: 512}, max: {x: 832, y: 512}}},
      '2368x1328': {min: 1.0, max: 2.0, zoomIntermediate: 2, 
        fov: {min: {x: 57, y: 32}, intermediate: {x: 137, y: 76}, max: {x: 417, y: 231}}, 
        offsets: {min: {x: 88, y: 288}, intermediate: {x: 684, y: 624}, max: {x: 684, y: 624}}},
      '1328x2368': {min: 1.0, max: 1.6, zoomIntermediate: 1.6, 
        fov: {min: {x: 23, y: 42}, intermediate: {x: 57, y: 102}, max: {x: 174, y: 312}}, 
        offsets: {min: {x: 742, y: 6}, intermediate: {x: 944, y: 364}, max: {x: 944, y: 364}}},
      '3072x1024': {min: 1.0, max: 1.6, zoomIntermediate: 1.6, 
        fov: {min: {x: 57, y: 19}, intermediate: {x: 136, y: 45}, max: {x: 416, y: 138}}, 
        offsets: {min: {x: 45, y: 544}, intermediate: {x: 508, y: 700}, max: {x: 508, y: 700}}},
      '1024x3072': {min: 1.0, max: 1.2, zoomIntermediate: 1.2, 
        fov: {min: {x: 14, y: 42}, intermediate: {x: 34, y: 102}, max: {x: 104, y: 312}}, 
        offsets: {min: {x: 968, y: 33}, intermediate: {x: 1020, y: 188}, max: {x: 1020, y: 188}}}
    },
    'working-distance': {min: 50, intermediate: 150, max: 500}
  },

  'VS-S160': {
    'sizes': {
      '1440x1072': {min: 1.0, max: 3.5, zoomIntermediate: 3.5, 
        fov: {min: {x: 57, y: 42}, intermediate: {x: 137, y: 102}, max: {x: 417, y: 310}}, 
        offsets: {min: {x: 6, y: 8}, intermediate: {x: 916, y: 688}, max: {x: 916, y: 688}}},
      '1072x1440': {min: 1.0, max: 2.5, zoomIntermediate: 2.5, 
        fov: {min: {x: 31, y: 42}, intermediate: {x: 76, y: 102}, max: {x: 231, y: 310}}, 
        offsets: {min: {x: 600, y: 50}, intermediate: {x: 1008, y: 596}, max: {x: 1008, y: 596}}},
      '1248x1248': {min: 1.0, max: 3.0, zoomIntermediate: 3, 
        fov: {min: {x: 42, y: 42}, intermediate: {x: 102, y: 102}, max: {x: 310, y: 310}}, 
        offsets: {min: {x: 332, y: 12}, intermediate: {x: 964, y: 644}, max: {x: 964, y: 644}}},
      '1664x928': {min: 1.0, max: 3.0, zoomIntermediate: 3, 
        fov: {min: {x: 57, y: 32}, intermediate: {x: 137, y: 76}, max: {x: 417, y: 231}}, 
        offsets: {min: {x: 20, y: 252}, intermediate: {x: 860, y: 724}, max: {x: 860, y: 724}}},
      '928x1664': {min: 1.0, max: 2.2, zoomIntermediate: 2.2, 
        fov: {min: {x: 23, y: 42}, intermediate: {x: 57, y: 102}, max: {x: 174, y: 312}}, 
        offsets: {min: {x: 761, y: 36}, intermediate: {x: 1044, y: 540}, max: {x: 1044, y: 540}}},
      '2160x720': {min: 1.0, max: 2.3, zoomIntermediate: 2.3, 
        fov: {min: {x: 57, y: 19}, intermediate: {x: 136, y: 45}, max: {x: 416, y: 138}}, 
        offsets: {min: {x: 29, y: 537}, intermediate: {x: 736, y: 776}, max: {x: 736, y: 776}}},
      '720x2160': {min: 1.0, max: 1.7, zoomIntermediate: 1.7, 
        fov: {min: {x: 14, y: 42}, intermediate: {x: 34, y: 102}, max: {x: 104, y: 312}}, 
        offsets: {min: {x: 967, y: 35}, intermediate: {x: 1086, y: 416}, max: {x: 1086, y: 416}}}
    },
    'working-distance': {min: 50, intermediate: 150, max: 500}
  }
};

const cameraSelect = document.getElementById('camera');
const imageSizeSelect = document.getElementById('image-size');
const workingDistanceInput = document.getElementById('working-distance');
const opticalZoomInput = document.getElementById('optical-zoom');
const workingDistanceValue = document.getElementById('working-distance-value');
const opticalZoomValue = document.getElementById('optical-zoom-value');
const workingDistanceMin = document.getElementById('working-distance-min');
const workingDistanceMax = document.getElementById('working-distance-max');
const opticalZoomMin = document.getElementById('optical-zoom-min');
const opticalZoomMax = document.getElementById('optical-zoom-max');
const resultDiv = document.getElementById('result');
const canvas = document.getElementById('fovGraph');
const captureButton = document.getElementById('capture-button')

function captureCalculator() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const margin = 30;
    
    canvas.width = 1200;
    canvas.height = 500;
    
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const selectedCamera = document.getElementById('camera').value;
    const selectedSize = document.getElementById('image-size').value;
    const workingDistance = document.getElementById('working-distance').value;
    const opticalZoom = document.getElementById('optical-zoom').value;
    
ctx.fillStyle = 'red';  // Rouge pour le K
ctx.font = '30px Arial';
ctx.fillText('K', margin, 40);

ctx.fillStyle = 'black';  // Noir pour le reste
ctx.fillText('EYENCE', margin + ctx.measureText('K').width, 40);
    ctx.font = '18px Arial';
    ctx.fillText('VS Calculator', margin, 70);
    
    ctx.font = '14px Arial';
    const lineHeight = 30;
    let y = 120;
    
    ctx.fillText(`VS Model: ${selectedCamera}`, margin, y);
    y += lineHeight;
    ctx.fillText(`Sensor Size: ${selectedSize}`, margin, y);
    y += lineHeight;
    ctx.fillText(`Working Distance: ${workingDistance} mm`, margin, y);
    y += lineHeight;
    ctx.fillText(`Optical Zoom: ${opticalZoom}x`, margin, y);
    y += lineHeight + 10;
    
    const fov = document.getElementById('result').innerText.split('\n');
    fov.forEach(line => {
        ctx.fillText(line, margin, y);
        y += lineHeight;
    });
    
    const fovGraph = document.getElementById('fovGraph');
    ctx.drawImage(fovGraph, 380, 0);
    
    const link = document.createElement('a');
    link.download = 'vs-calculator.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
}
captureButton.onclick = captureCalculator;

function calculateFOV(distance, zoom) {
  const selectedCamera = cameraSelect.value;
  const selectedSize = imageSizeSelect.value;
  const config = cameraConfigs[selectedCamera];
  const sizeFov = config.sizes[selectedSize].fov;
  const distances = config['working-distance'];
  let fovX, fovY;
  if (distance <= distances.intermediate) {
      const slopeX = (sizeFov.intermediate.x - sizeFov.min.x) / (distances.intermediate - distances.min);
      const bX = sizeFov.min.x - (slopeX * distances.min);
      fovX = (slopeX * distance) + bX;
      const slopeY = (sizeFov.intermediate.y - sizeFov.min.y) / (distances.intermediate - distances.min);
      const bY = sizeFov.min.y - (slopeY * distances.min);
      fovY = (slopeY * distance) + bY;
  } else {
      const slopeX = (sizeFov.max.x - sizeFov.intermediate.x) / (distances.max - distances.intermediate);
      const bX = sizeFov.intermediate.x - (slopeX * distances.intermediate);
      fovX = (slopeX * distance) + bX;
      const slopeY = (sizeFov.max.y - sizeFov.intermediate.y) / (distances.max - distances.intermediate);
      const bY = sizeFov.intermediate.y - (slopeY * distances.intermediate);
      fovY = (slopeY * distance) + bY;
  }
  return {x: fovX / zoom, y: fovY / zoom};
}


function drawFOVGraph(results) {
   

   const ctx = canvas.getContext('2d');

  if (!results) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return;
  }

   const padding = 50;
   const paddingRight = 50;
   const width = canvas.width - padding - paddingRight;
   const height = canvas.height - 2 * padding;

   ctx.clearRect(0, 0, canvas.width, canvas.height);
   
   if (cameraSelect.selectedIndex === 0 || imageSizeSelect.selectedIndex === 0) return;

   const selectedCamera = cameraSelect.value;
   const selectedSize = imageSizeSelect.value;
   const config = cameraConfigs[selectedCamera];
   const distances = config['working-distance'];
   const fovs = config.sizes[selectedSize].fov;
   const currentDistance = Number(workingDistanceInput.value);
   const currentZoom = Number(opticalZoomInput.value);
   const maxZoom = cameraConfigs[selectedCamera].sizes[selectedSize].max;

   const xScale = width / distances.max;
   const maxFOV = fovs.max.y;
   const yScale = height / maxFOV;

   // Draw axes
   ctx.beginPath();
   ctx.strokeStyle = '#000';
   ctx.moveTo(padding, canvas.height - padding);
   ctx.lineTo(canvas.width - paddingRight/2, canvas.height - padding);
   ctx.moveTo(padding, canvas.height - padding);
   ctx.lineTo(padding, padding);
   ctx.stroke();

   // Draw intermediate lines
   ctx.strokeStyle = '#999';
   ctx.setLineDash([5, 5]);
   const xIntermediate = padding + distances.intermediate * xScale;
   ctx.beginPath();
   ctx.moveTo(xIntermediate, canvas.height - padding);
   ctx.lineTo(xIntermediate, padding);
   ctx.stroke();
   ctx.textAlign = 'center';
   ctx.fillText(`${distances.intermediate} mm`, xIntermediate, canvas.height - padding + 15);
   const yIntermediate = canvas.height - padding - fovs.intermediate.y * yScale;
   ctx.beginPath();
   ctx.moveTo(padding, yIntermediate);
   ctx.lineTo(canvas.width - paddingRight/2, yIntermediate);
   ctx.stroke();
   ctx.textAlign = 'right';
   ctx.fillText(`${fovs.intermediate.y} mm`, padding - 5, yIntermediate);
   ctx.setLineDash([]);

   // Draw FOV lines
   [1, maxZoom].forEach((zoom) => {
       ctx.beginPath();
       ctx.strokeStyle = '#3498db';
       ctx.lineWidth = 2;
       ctx.globalAlpha = 1;
       ctx.moveTo(padding + distances.min * xScale, canvas.height - padding - (fovs.min.y / zoom) * yScale);
       ctx.lineTo(padding + distances.intermediate * xScale, canvas.height - padding - (fovs.intermediate.y / zoom) * yScale);
       ctx.lineTo(canvas.width - paddingRight/2, canvas.height - padding - (fovs.max.y / zoom) * yScale);
       ctx.stroke();
   });

   // Draw projection lines
   const currentFOV = calculateFOV(currentDistance, currentZoom);
   ctx.beginPath();
   ctx.strokeStyle = '#999';
   ctx.lineWidth = 1;
   ctx.setLineDash([3, 3]);

   const pointX = currentDistance <= distances.intermediate 
       ? padding + currentDistance * xScale
       : padding + distances.intermediate * xScale + ((currentDistance - distances.intermediate) * (canvas.width - paddingRight/2 - (padding + distances.intermediate * xScale))) / (distances.max - distances.intermediate);
   const pointY = canvas.height - padding - (currentFOV.y * yScale);

   ctx.moveTo(pointX, pointY);
   ctx.lineTo(padding, pointY);
   ctx.moveTo(pointX, pointY);
   ctx.lineTo(pointX, canvas.height - padding);
   ctx.stroke();
   ctx.setLineDash([]);

   // Draw current point
   ctx.beginPath();
   ctx.fillStyle = 'red';
   ctx.arc(pointX, pointY, 5, 0, 2 * Math.PI);
   ctx.fill();

   ctx.fillStyle = '#000';
   ctx.font = 'bold 11px Arial';
   ctx.textAlign = 'center';
   const textY = pointY - 25;
   ctx.fillText(`FOV: ${Math.floor(currentFOV.x)}x${Math.floor(currentFOV.y)} mm`, pointX - 20, textY);
   ctx.fillText(`WD: ${Math.round(currentDistance)} mm`, pointX - 20, textY + 15);

   // Add labels
   ctx.fillStyle = '#000';
   ctx.font = '12px Arial';
   ctx.textAlign = 'right';
   ctx.fillText(`${maxFOV} mm`, padding - 5, padding);
   ctx.fillText('0 mm', padding - 5, canvas.height - padding);
   ctx.textAlign = 'center';
   ctx.fillText('0 mm', padding, canvas.height - padding + 15);
   ctx.fillText(`${distances.max} mm`, canvas.width - paddingRight/2, canvas.height - padding + 15);
   ctx.fillText('Distance', (canvas.width - paddingRight/2 + padding) / 2, canvas.height - 10);
   ctx.save();
   ctx.translate(15, canvas.height / 2);
   ctx.rotate(-Math.PI / 2);
   ctx.fillText('FOV Y', 0, 0);
   ctx.restore();


// Dans la fonction drawFOVGraph, remplacer la partie du dessin des rectangles par :

   // Définition de la taille du schéma d'offset
   const schemeSize = 80;
   const schemePadding = 10;
   const schemeX = padding + 30;
   const schemeY = padding + 10;
   const textMargin = 20;  // Marge pour les textes

   // Taille de base maximale pour le FOV
   const maxFOVSize = 50;
   
   // Calculer l'échelle en utilisant la plus grande dimension du FOV
   const scale = maxFOVSize / Math.max(results.fov.x, results.fov.y);
   
   // Appliquer l'échelle aux dimensions du FOV
   const innerWidth = results.fov.x * scale;
   const innerHeight = results.fov.y * scale;
   
   // Appliquer la même échelle aux offsets
   const offsetX = parseFloat(results.offset.x.mm) * scale;
   const offsetY = parseFloat(results.offset.y.mm) * scale;
   
   // Calculer les dimensions totales avec les offsets
   const outerWidth = innerWidth + (2 * offsetX);
   const outerHeight = innerHeight + (2 * offsetY);
   
   // Position centrée des rectangles
   const centerX = schemeX + schemeSize/2;
   const centerY = schemeY + schemeSize/2;

   // Rectangle externe (FOV + offsets)
   ctx.strokeStyle = '#1f618d';
   ctx.setLineDash([4, 4]);
   ctx.strokeRect(
     centerX - outerWidth/2,
     centerY - outerHeight/2,
     outerWidth,
     outerHeight
   );
   
   // Rectangle interne (FOV)
   ctx.strokeStyle = '#3498db';
   ctx.setLineDash([]);
   ctx.strokeRect(
     centerX - innerWidth/2,
     centerY - innerHeight/2,
     innerWidth,
     innerHeight
   );
// Flèches horizontales
const arrowY = centerY;
ctx.strokeStyle = '#2980b9';
ctx.beginPath();
ctx.moveTo(centerX - outerWidth/2, arrowY);
ctx.lineTo(centerX - innerWidth/2, arrowY);
ctx.moveTo(centerX - outerWidth/2, arrowY);
ctx.lineTo(centerX - outerWidth/2 + 5, arrowY - 5);
ctx.lineTo(centerX - outerWidth/2 + 5, arrowY + 5);
ctx.lineTo(centerX - outerWidth/2, arrowY);
ctx.moveTo(centerX - innerWidth/2, arrowY);
ctx.lineTo(centerX - innerWidth/2 - 5, arrowY - 5);
ctx.lineTo(centerX - innerWidth/2 - 5, arrowY + 5);
ctx.lineTo(centerX - innerWidth/2, arrowY);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.moveTo(centerX + innerWidth/2, arrowY);
ctx.lineTo(centerX + outerWidth/2, arrowY);
ctx.moveTo(centerX + innerWidth/2, arrowY);
ctx.lineTo(centerX + innerWidth/2 + 5, arrowY - 5);
ctx.lineTo(centerX + innerWidth/2 + 5, arrowY + 5);
ctx.lineTo(centerX + innerWidth/2, arrowY);
ctx.moveTo(centerX + outerWidth/2, arrowY);
ctx.lineTo(centerX + outerWidth/2 - 5, arrowY - 5);
ctx.lineTo(centerX + outerWidth/2 - 5, arrowY + 5);
ctx.lineTo(centerX + outerWidth/2, arrowY);
ctx.stroke();
ctx.fill();

// Flèches verticales
const arrowX = centerX;
ctx.beginPath();
ctx.moveTo(arrowX, centerY - outerHeight/2);
ctx.lineTo(arrowX, centerY - innerHeight/2);
ctx.moveTo(arrowX, centerY - outerHeight/2);
ctx.lineTo(arrowX - 5, centerY - outerHeight/2 + 5);
ctx.lineTo(arrowX + 5, centerY - outerHeight/2 + 5);
ctx.lineTo(arrowX, centerY - outerHeight/2);
ctx.moveTo(arrowX, centerY - innerHeight/2);
ctx.lineTo(arrowX - 5, centerY - innerHeight/2 - 5);
ctx.lineTo(arrowX + 5, centerY - innerHeight/2 - 5);
ctx.lineTo(arrowX, centerY - innerHeight/2);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.moveTo(arrowX, centerY + innerHeight/2);
ctx.lineTo(arrowX, centerY + outerHeight/2);
ctx.moveTo(arrowX, centerY + innerHeight/2);
ctx.lineTo(arrowX - 5, centerY + innerHeight/2 + 5);
ctx.lineTo(arrowX + 5, centerY + innerHeight/2 + 5);
ctx.lineTo(arrowX, centerY + innerHeight/2);
ctx.moveTo(arrowX, centerY + outerHeight/2);
ctx.lineTo(arrowX - 5, centerY + outerHeight/2 - 5);
ctx.lineTo(arrowX + 5, centerY + outerHeight/2 - 5);
ctx.lineTo(arrowX, centerY + outerHeight/2);
ctx.stroke();
ctx.fill();

   // Affichage des dimensions
   ctx.fillStyle = '#000';
   ctx.font = 'bold 11px Arial';

   // FOV Y et Offset Y à droite
   //ctx.textAlign = 'left';
   //const textX = schemeX + schemeSize + 0;
   //ctx.fillText(`FOV Y: ${results.fov.y} mm`, textX, schemeY + 3*schemeSize/7);
   //ctx.fillText(`Offset Y: ±${parseFloat(results.offset.y.mm).toFixed(1)} mm`, textX, schemeY + 4*schemeSize/7);

   // FOV X et Offset X en bas
   ctx.textAlign = 'center';
   const textYBottom = schemeY + schemeSize * 1.2;
   //ctx.fillText(`FOV X: ${results.fov.x} mm`, centerX, textYBottom);
   //ctx.fillText(`Offset X: ±${parseFloat(results.offset.x.mm).toFixed(1)} mm`, centerX, textYBottom + 12);
	
//ctx.fillText(`FOV: ${results.fov.x}x${results.fov.y} mm`, centerX, textYBottom);
ctx.fillText(`Offsets: ±${parseFloat(results.offset.x.mm).toFixed(1)}x±${parseFloat(results.offset.y.mm).toFixed(1)} mm`, centerX, textYBottom);


}


function handleCanvasClick(event) {
 const rect = canvas.getBoundingClientRect();
 const padding = 50;
 const paddingRight = 50;
 const width = canvas.width - padding - paddingRight;
 const height = canvas.height - 2 * padding;
 
 const scaleX = canvas.width / rect.width;
 const scaleY = canvas.height / rect.height;
 
 const x = (event.clientX - rect.left) * scaleX - padding;
 const y = (event.clientY - rect.top) * scaleY;
 
 if (x < 0 || x > (canvas.width - paddingRight/2 - padding) || y < padding || y > canvas.height - padding) return;
 
 const selectedCamera = cameraSelect.value;
 const selectedSize = imageSizeSelect.value;
 if (!selectedCamera || !selectedSize) return;

 const distances = cameraConfigs[selectedCamera]['working-distance'];
 const xScale = width / distances.max;
 const intermediateX = distances.intermediate * xScale;
 
 let distance;
 if (x <= intermediateX) {
   distance = x / xScale;
 } else {
   const availableWidth = canvas.width - paddingRight/2 - (padding + intermediateX);
   const xAfterIntermediate = x - intermediateX;
   distance = distances.intermediate + 
             (xAfterIntermediate * (distances.max - distances.intermediate)) / availableWidth;
 }
 
 distance = Math.max(distances.min, Math.min(distances.max, distance));

 const baseFOV = calculateFOV(distance, 1.0);
 const config = cameraConfigs[selectedCamera].sizes[selectedSize].fov;
 const maxFOV = config.max.y;
 const yScale = height / maxFOV;
 const targetFOV = ((canvas.height - padding - y) / yScale);
 const zoom = Math.round((baseFOV.y / targetFOV) * 100) / 100;
 const zoomConfig = cameraConfigs[selectedCamera].sizes[selectedSize];
 const finalZoom = Math.max(zoomConfig.min, Math.min(zoomConfig.max, zoom));

 workingDistanceInput.value = Math.round(distance);
 opticalZoomInput.value = finalZoom;
 updateWorkingDistanceDisplay();
 updateOpticalZoomDisplay();
 updateAdjustmentButtons();
}

function updateImageSizes() {
  const selectedCamera = cameraSelect.value;
  imageSizeSelect.innerHTML = '<option value="">Select Sensor Size (px)</option>';


  if (selectedCamera) {
      Object.keys(cameraConfigs[selectedCamera].sizes).forEach(size => {
          const option = document.createElement('option');
          option.value = size;
          option.textContent = size;
          imageSizeSelect.appendChild(option);
      });
      imageSizeSelect.disabled = false;
  } else {
      imageSizeSelect.disabled = true;
  }
}

function updateControls() {
   const ctx = canvas.getContext('2d');
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   
   if (cameraSelect.selectedIndex === 0 || imageSizeSelect.selectedIndex === 0) {
       workingDistanceInput.disabled = true;
       opticalZoomInput.disabled = true;
       workingDistanceValue.textContent = "- mm";
       opticalZoomValue.textContent = "-x";
       workingDistanceMin.textContent = "-";
       workingDistanceMax.textContent = "-";
       opticalZoomMin.textContent = "-";
       opticalZoomMax.textContent = "-";
       resultDiv.innerHTML = "Field of View: - x - mm<br>System Resolution: - µm/px<br>Offset: - mm (- px)";

captureButton.disabled = true;

   workingDistanceInput.disabled = true;
   workingDistanceInput.value = 0;
   opticalZoomInput.disabled = true;
   opticalZoomInput.value = 0;
   document.getElementById('decrease-distance').disabled = true;
   document.getElementById('increase-distance').disabled = true;
   document.getElementById('decrease-zoom').disabled = true; 
   document.getElementById('increase-zoom').disabled = true;
       return;
   }

captureButton.disabled = false;


  const selectedCamera = cameraSelect.value;
  const selectedSize = imageSizeSelect.value;
  if (selectedCamera && selectedSize) {
      const workingDistanceConfig = cameraConfigs[selectedCamera]['working-distance'];
      const zoomConfig = cameraConfigs[selectedCamera]['sizes'][selectedSize];
      workingDistanceInput.min = workingDistanceConfig.min;
      workingDistanceInput.max = workingDistanceConfig.max;
      workingDistanceInput.value = workingDistanceConfig.min;
      workingDistanceInput.disabled = false;
      opticalZoomInput.min = zoomConfig.min;
      opticalZoomInput.max = zoomConfig.max;
      opticalZoomInput.value = zoomConfig.min;
      opticalZoomInput.step = 0.01;
      opticalZoomInput.disabled = false;
      workingDistanceValue.textContent = `${workingDistanceInput.value} mm`;
      workingDistanceMin.textContent = `${workingDistanceConfig.min} mm`;
      workingDistanceMax.textContent = `${workingDistanceConfig.max} mm`;
      opticalZoomValue.textContent = `${Number(opticalZoomInput.value).toFixed(2)}x`;
      opticalZoomMin.textContent = `${zoomConfig.min.toFixed(2)}x`;
      opticalZoomMax.textContent = `${zoomConfig.max.toFixed(2)}x`;
      //updateResults();
      //drawFOVGraph();
  }
  updateAdjustmentButtons();
  const results = updateResults();
  drawFOVGraph(results);
}

function updateWorkingDistanceDisplay() {
  workingDistanceValue.textContent = `${Number(workingDistanceInput.value)} mm`;
  const results = updateResults();
  drawFOVGraph(results);
}

function updateOpticalZoomDisplay() {
  opticalZoomValue.textContent = `${Number(opticalZoomInput.value).toFixed(2)}x`;
  const results = updateResults();
  drawFOVGraph(results);
}

function calculateOffset(camera, size, zoom) {
  const sizeConfig = cameraConfigs[camera].sizes[size];
  const offsetConfig = sizeConfig.offsets;
  const zoomIntermediate = sizeConfig.zoomIntermediate;
  
  let pixelOffset;
  // Interpolation de zoomMin à zoomIntermediate
  if (zoom <= zoomIntermediate) {
    const t = (zoom - sizeConfig.min) / (zoomIntermediate - sizeConfig.min);
    pixelOffset = {
      x: offsetConfig.min.x + t * (offsetConfig.intermediate.x - offsetConfig.min.x),
      y: offsetConfig.min.y + t * (offsetConfig.intermediate.y - offsetConfig.min.y)
    };
  } 
  // Interpolation de zoomIntermediate à zoomMax
  else {
    const t = (zoom - zoomIntermediate) / (sizeConfig.max - zoomIntermediate);
    pixelOffset = {
      x: offsetConfig.intermediate.x + t * (offsetConfig.max.x - offsetConfig.intermediate.x),
      y: offsetConfig.intermediate.y + t * (offsetConfig.max.y - offsetConfig.intermediate.y)
    };
  }
  
  return pixelOffset;
}

function updateResults() {
  if (!cameraSelect.value || !imageSizeSelect.value) return;
  const distance = Number(workingDistanceInput.value);
  const zoom = Number(opticalZoomInput.value);
  const fov = calculateFOV(distance, zoom);
  const [width] = imageSizeSelect.value.split('x').map(Number);
  const resolutionX = (fov.x * 1000) / width;
  
  const selectedCamera = cameraSelect.value;
  const selectedSize = imageSizeSelect.value;
  const pixelOffset = calculateOffset(selectedCamera, selectedSize, zoom);
  
  // Convert pixel offset to mm by multiplying with system resolution
  const offsetMmX = (pixelOffset.x * resolutionX / 1000); // Convert µm to mm
  const offsetMmY = (pixelOffset.y * resolutionX / 1000); // Convert µm to mm

  const results = {
    fov: { x: Math.floor(fov.x), y: Math.floor(fov.y) },
    resolution: Math.ceil(resolutionX),
    offset: { 
      x: { mm: offsetMmX.toFixed(2), px: Math.round(pixelOffset.x) },
      y: { mm: offsetMmY.toFixed(2), px: Math.round(pixelOffset.y) }
    }
  };

  resultDiv.innerHTML = `
    Field of View: ${Math.floor(fov.x)} x ${Math.floor(fov.y)} mm<br>
    System Resolution: ${Math.ceil(resolutionX)} µm/px<br>
    Offsets: ±${offsetMmX.toFixed(1)} x ±${offsetMmY.toFixed(1)}mm (±${Math.round(pixelOffset.x)} x ±${Math.round(pixelOffset.y)}px)
  `;

  return results;

}

function handleMouseDown(event) {
   handleCanvasClick(event);
}

function handleMouseMove(event) {
   if (event.buttons === 1) handleCanvasClick(event);
}

function handleCameraChange() {
  updateImageSizes();
  updateControls();
  const results = updateResults();
  drawFOVGraph(results);
}

function adjustWorkingDistance(increment) {
    const input = document.getElementById('working-distance');
    const currentValue = Number(input.value);
    const step = 1; // Ajustement de 1mm
    const newValue = currentValue + (increment ? step : -step);
    
    if (newValue >= Number(input.min) && newValue <= Number(input.max)) {
        input.value = newValue;
        updateWorkingDistanceDisplay();
	updateAdjustmentButtons();
    }
}

function adjustOpticalZoom(increment) {
    const input = document.getElementById('optical-zoom');
    const currentValue = Number(input.value);
    const step = 0.01; // Ajustement de 0.01x
    const newValue = Math.round((currentValue + (increment ? step : -step)) * 100) / 100;
    
    if (newValue >= Number(input.min) && newValue <= Number(input.max)) {
        input.value = newValue;
        updateOpticalZoomDisplay();
	updateAdjustmentButtons();
    }
}

function updateAdjustmentButtons() {
    const distanceButtons = {
        decrease: document.getElementById('decrease-distance'),
        increase: document.getElementById('increase-distance')
    };
    const zoomButtons = {
        decrease: document.getElementById('decrease-zoom'),
        increase: document.getElementById('increase-zoom')
    };

    const workingDistanceInput = document.getElementById('working-distance');
    const opticalZoomInput = document.getElementById('optical-zoom');

    const isEnabled = !workingDistanceInput.disabled;
    
    // Utilisation de parseFloat pour une comparaison plus précise
    const currentDistance = parseFloat(workingDistanceInput.value);
    const currentZoom = parseFloat(opticalZoomInput.value);
    
    distanceButtons.decrease.disabled = !isEnabled || currentDistance <= parseFloat(workingDistanceInput.min);
    distanceButtons.increase.disabled = !isEnabled || currentDistance >= parseFloat(workingDistanceInput.max);
    
    zoomButtons.decrease.disabled = !isEnabled || currentZoom <= parseFloat(opticalZoomInput.min);
    zoomButtons.increase.disabled = !isEnabled || currentZoom >= parseFloat(opticalZoomInput.max);
}

function addEventListeners() {
    canvas.addEventListener('mousedown', handleMouseDown);
    canvas.addEventListener('mousemove', handleMouseMove);
    cameraSelect.addEventListener('change', handleCameraChange);
    imageSizeSelect.addEventListener('change', updateControls);
    workingDistanceInput.addEventListener('input', () => {
        updateWorkingDistanceDisplay();
        updateAdjustmentButtons();
    });
    opticalZoomInput.addEventListener('input', () => {
        updateOpticalZoomDisplay();
        updateAdjustmentButtons();
    });
    
    // Événements pour les boutons d'ajustement
    document.getElementById('decrease-distance').addEventListener('click', () => adjustWorkingDistance(false));
    document.getElementById('increase-distance').addEventListener('click', () => adjustWorkingDistance(true));
    document.getElementById('decrease-zoom').addEventListener('click', () => adjustOpticalZoom(false));
    document.getElementById('increase-zoom').addEventListener('click', () => adjustOpticalZoom(true));
}

window.addEventListener('unload', removeEventListeners);

function removeEventListeners() {
   canvas.removeEventListener('mousedown', handleMouseDown);
   canvas.removeEventListener('mousemove', handleMouseMove);
   cameraSelect.removeEventListener('change', handleCameraChange);
   imageSizeSelect.removeEventListener('change', updateControls);
   workingDistanceInput.removeEventListener('input', updateWorkingDistanceDisplay);
   opticalZoomInput.removeEventListener('input', updateOpticalZoomDisplay);
}

addEventListeners();


</script>
</body>
</html>