Update index.html
Browse files- index.html +38 -1
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>CoastKeeper Range Calculator
|
| 7 |
<style>
|
| 8 |
* {
|
| 9 |
margin: 0;
|
|
@@ -160,6 +160,15 @@
|
|
| 160 |
<h1> 📷 CoastKeeper Range Calculator</h1>
|
| 161 |
|
| 162 |
<div class="controls-grid">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 163 |
<div class="control-group">
|
| 164 |
<label for="mast">Mast height (m)</label>
|
| 165 |
<input type="number" id="mast" step="0.1" value="20.0" min="3" max="40">
|
|
@@ -510,6 +519,34 @@
|
|
| 510 |
draw();
|
| 511 |
}
|
| 512 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 513 |
document.getElementById('mast').addEventListener('input', update);
|
| 514 |
document.getElementById('tilt').addEventListener('input', update);
|
| 515 |
document.getElementById('resolution').addEventListener('change', update);
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>CoastKeeper Range Calculator</title>
|
| 7 |
<style>
|
| 8 |
* {
|
| 9 |
margin: 0;
|
|
|
|
| 160 |
<h1> 📷 CoastKeeper Range Calculator</h1>
|
| 161 |
|
| 162 |
<div class="controls-grid">
|
| 163 |
+
<div class="control-group">
|
| 164 |
+
<label for="cameraProfile">Camera Profile</label>
|
| 165 |
+
<select id="cameraProfile">
|
| 166 |
+
<option value="custom">Custom</option>
|
| 167 |
+
<option value="ir">IR: EVIDIR 640x480 - 25mm</option>
|
| 168 |
+
<option value="rgb">RGB: BASLER 3840x2160 - 7.8mm</option>
|
| 169 |
+
</select>
|
| 170 |
+
</div>
|
| 171 |
+
|
| 172 |
<div class="control-group">
|
| 173 |
<label for="mast">Mast height (m)</label>
|
| 174 |
<input type="number" id="mast" step="0.1" value="20.0" min="3" max="40">
|
|
|
|
| 519 |
draw();
|
| 520 |
}
|
| 521 |
|
| 522 |
+
// Camera profile handler
|
| 523 |
+
document.getElementById('cameraProfile').addEventListener('change', function() {
|
| 524 |
+
const profile = this.value;
|
| 525 |
+
const resolutionSelect = document.getElementById('resolution');
|
| 526 |
+
const pixelPitchInput = document.getElementById('pixelPitch');
|
| 527 |
+
const focalLengthInput = document.getElementById('focalLength');
|
| 528 |
+
|
| 529 |
+
switch(profile) {
|
| 530 |
+
case 'ir':
|
| 531 |
+
resolutionSelect.value = '640x480';
|
| 532 |
+
pixelPitchInput.value = '12.0';
|
| 533 |
+
focalLengthInput.value = '25.0';
|
| 534 |
+
break;
|
| 535 |
+
case 'rgb':
|
| 536 |
+
resolutionSelect.value = '3840x2160';
|
| 537 |
+
pixelPitchInput.value = '2.1';
|
| 538 |
+
focalLengthInput.value = '7.8';
|
| 539 |
+
break;
|
| 540 |
+
case 'custom':
|
| 541 |
+
default:
|
| 542 |
+
// For custom, let user manually adjust values
|
| 543 |
+
return;
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
// Trigger update after changing values
|
| 547 |
+
update();
|
| 548 |
+
});
|
| 549 |
+
|
| 550 |
document.getElementById('mast').addEventListener('input', update);
|
| 551 |
document.getElementById('tilt').addEventListener('input', update);
|
| 552 |
document.getElementById('resolution').addEventListener('change', update);
|