|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CoastKeeper Range Calculator</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 100%; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
padding: 20px; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
padding: 25px; |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
color: #667eea; |
|
|
margin-bottom: 20px; |
|
|
font-size: 28px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.controls-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 15px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.control-group { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.control-group label { |
|
|
margin-bottom: 6px; |
|
|
color: #333; |
|
|
font-weight: 500; |
|
|
font-size: 13px; |
|
|
} |
|
|
|
|
|
.control-group input, |
|
|
.control-group select { |
|
|
padding: 10px; |
|
|
border: 2px solid #e0e0e0; |
|
|
border-radius: 10px; |
|
|
font-size: 14px; |
|
|
transition: border-color 0.3s; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.control-group input:focus, |
|
|
.control-group select:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.computed-fov { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 15px; |
|
|
border-radius: 12px; |
|
|
margin-top: 10px; |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.result-banner { |
|
|
background: linear-gradient(135deg, #00c853 0%, #00e676 100%); |
|
|
color: white; |
|
|
padding: 15px 20px; |
|
|
border-radius: 12px; |
|
|
margin-top: 10px; |
|
|
text-align: center; |
|
|
box-shadow: 0 4px 15px rgba(0, 200, 83, 0.3); |
|
|
} |
|
|
|
|
|
.result-banner .label { |
|
|
font-size: 14px; |
|
|
opacity: 0.9; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.result-banner .value { |
|
|
font-size: 24px; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
padding: 20px; |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
position: relative; |
|
|
background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #4A90A4 100%); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1); |
|
|
flex: 1; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
#canvas { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
margin-top: 15px; |
|
|
padding: 12px; |
|
|
background: #f8f9fa; |
|
|
border-radius: 10px; |
|
|
font-size: 12px; |
|
|
color: #666; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.controls-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1> 📷 CoastKeeper Range Calculator</h1> |
|
|
|
|
|
<div class="controls-grid"> |
|
|
<div class="control-group"> |
|
|
<label for="cameraProfile">Camera Profile</label> |
|
|
<select id="cameraProfile"> |
|
|
<option value="custom">Custom</option> |
|
|
<option value="ir">IR: EVIDIR 640x480 - 25mm</option> |
|
|
<option value="rgb">RGB: BASLER 3840x2160 - 7.8mm</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="mast">Mast height (m)</label> |
|
|
<input type="number" id="mast" step="0.1" value="20.0" min="3" max="40"> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="tilt">Tilt ° (down +)</label> |
|
|
<input type="number" id="tilt" step="0.1" value="5.0" min="0" max="15"> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="resolution">Sensor resolution (px)</label> |
|
|
<select id="resolution"> |
|
|
<option value="320x240">320x240</option> |
|
|
<option value="384x288">384x288</option> |
|
|
<option value="640x480" selected>640x480</option> |
|
|
<option value="640x512">640x512</option> |
|
|
<option value="1280x1024">1280x1024</option> |
|
|
<option value="1920x1080">1920x1080</option> |
|
|
<option value="3840x2160">3840x2160</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="pixelPitch">Pixel pitch (µm)</label> |
|
|
<input type="number" id="pixelPitch" step="0.1" value="12.0"> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="focalLength">Lens focal length (mm)</label> |
|
|
<input type="number" id="focalLength" step="0.1" value="25.0"> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<label for="seaDist">Distance to sea (m)</label> |
|
|
<input type="number" id="seaDist" step="1" value="50" min="0" max="500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="computed-fov" id="computedFov"> |
|
|
<strong>Computed FoVs:</strong> Horizontal = 0.00°, Vertical = 0.00° |
|
|
</div> |
|
|
|
|
|
<div class="result-banner"> |
|
|
<div class="label">Valid Range</div> |
|
|
<div class="value" id="validRange">0 m - 0 m</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="main-content"> |
|
|
<div class="chart-container"> |
|
|
<canvas id="canvas"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="info-box"> |
|
|
📊 <strong>Side View Visualization:</strong> Thermal camera mounted on mast. |
|
|
VFOV computed from sensor parameters and lens. Beach (sandy) and sea (blue) zones shown. |
|
|
FOV rays show upper/lower limits and center. Valid range indicates where objects can be detected. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const canvas = document.getElementById('canvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
function resizeCanvas() { |
|
|
const container = canvas.parentElement; |
|
|
const dpr = window.devicePixelRatio || 1; |
|
|
const rect = container.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
canvas.width = rect.width * dpr; |
|
|
canvas.height = rect.height * dpr; |
|
|
|
|
|
|
|
|
canvas.style.width = rect.width + 'px'; |
|
|
canvas.style.height = rect.height + 'px'; |
|
|
|
|
|
|
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0); |
|
|
} |
|
|
|
|
|
function distGround(angleDeg, h) { |
|
|
if (angleDeg <= 0) return Infinity; |
|
|
if (angleDeg >= 90) return 0; |
|
|
return h / Math.tan(angleDeg * Math.PI / 180); |
|
|
} |
|
|
|
|
|
function computeFOVs() { |
|
|
const resolution = document.getElementById('resolution').value; |
|
|
const [resX, resY] = resolution.split('x').map(Number); |
|
|
const pixelPitch = parseFloat(document.getElementById('pixelPitch').value); |
|
|
const focalLength = parseFloat(document.getElementById('focalLength').value); |
|
|
|
|
|
const pixelPitchMm = pixelPitch / 1000; |
|
|
const hFOV = 2 * Math.atan((resX * pixelPitchMm) / (2 * focalLength)) * 180 / Math.PI; |
|
|
const vFOV = 2 * Math.atan((resY * pixelPitchMm) / (2 * focalLength)) * 180 / Math.PI; |
|
|
|
|
|
return { hFOV, vFOV }; |
|
|
} |
|
|
|
|
|
function draw() { |
|
|
const mast = parseFloat(document.getElementById('mast').value); |
|
|
const tilt = parseFloat(document.getElementById('tilt').value); |
|
|
const seaDist = parseFloat(document.getElementById('seaDist').value); |
|
|
|
|
|
const { hFOV, vFOV } = computeFOVs(); |
|
|
|
|
|
document.getElementById('computedFov').innerHTML = |
|
|
`<strong>Computed FoVs:</strong> Horizontal = ${hFOV.toFixed(2)}°, Vertical = ${vFOV.toFixed(2)}°`; |
|
|
|
|
|
const lowerAng = tilt + vFOV / 2; |
|
|
const upperAng = tilt - vFOV / 2; |
|
|
const centerAng = tilt; |
|
|
|
|
|
const lowerDist = distGround(lowerAng, mast); |
|
|
const upperDist = distGround(upperAng, mast); |
|
|
|
|
|
const minRange = Math.min(lowerDist, upperDist); |
|
|
const maxRange = Math.max(lowerDist, upperDist); |
|
|
|
|
|
let rangeText; |
|
|
if (maxRange === Infinity) { |
|
|
rangeText = `${minRange.toFixed(0)} m - horizon`; |
|
|
} else { |
|
|
rangeText = `${minRange.toFixed(0)} m - ${maxRange.toFixed(0)} m`; |
|
|
} |
|
|
|
|
|
document.getElementById('validRange').textContent = rangeText; |
|
|
|
|
|
const w = canvas.width / (window.devicePixelRatio || 1); |
|
|
const h = canvas.height / (window.devicePixelRatio || 1); |
|
|
|
|
|
const viewDistanceMax = 500; |
|
|
const viewHeightMax = 60; |
|
|
|
|
|
|
|
|
const labelAreaHeight = 25; |
|
|
|
|
|
const margin = 40; |
|
|
const scaleX = (w - 2 * margin) / viewDistanceMax; |
|
|
const scaleY = (h - 2 * margin - labelAreaHeight) / viewHeightMax; |
|
|
const scale = Math.min(scaleX, scaleY); |
|
|
|
|
|
const groundY = h - margin - labelAreaHeight; |
|
|
|
|
|
function toX(dist) { |
|
|
return margin + dist * scale; |
|
|
} |
|
|
|
|
|
function toY(height) { |
|
|
return groundY - height * scale; |
|
|
} |
|
|
|
|
|
|
|
|
const skyGradient = ctx.createLinearGradient(0, 0, 0, groundY); |
|
|
skyGradient.addColorStop(0, '#87CEEB'); |
|
|
skyGradient.addColorStop(0.7, '#B0D9E8'); |
|
|
skyGradient.addColorStop(1, '#D4E8F0'); |
|
|
ctx.fillStyle = skyGradient; |
|
|
ctx.fillRect(0, 0, w, h); |
|
|
|
|
|
|
|
|
const beachGradient = ctx.createLinearGradient(0, groundY, 0, h); |
|
|
beachGradient.addColorStop(0, '#F4D03F'); |
|
|
beachGradient.addColorStop(1, '#D4A017'); |
|
|
ctx.fillStyle = beachGradient; |
|
|
ctx.fillRect(toX(0), groundY, toX(seaDist) - toX(0), h - groundY - labelAreaHeight); |
|
|
|
|
|
|
|
|
const seaGradient = ctx.createLinearGradient(0, groundY, 0, h); |
|
|
seaGradient.addColorStop(0, '#1E90FF'); |
|
|
seaGradient.addColorStop(1, '#0066CC'); |
|
|
ctx.fillStyle = seaGradient; |
|
|
ctx.fillRect(toX(seaDist), groundY, toX(viewDistanceMax) - toX(seaDist), h - groundY - labelAreaHeight); |
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; |
|
|
ctx.lineWidth = 2; |
|
|
for (let i = 0; i < 5; i++) { |
|
|
ctx.beginPath(); |
|
|
const waveY = groundY + 5 + i * 3; |
|
|
for (let x = toX(seaDist); x < toX(viewDistanceMax); x += 10) { |
|
|
const y = waveY + Math.sin((x - toX(seaDist)) / 10 + i) * 2; |
|
|
if (x === toX(seaDist)) { |
|
|
ctx.moveTo(x, y); |
|
|
} else { |
|
|
ctx.lineTo(x, y); |
|
|
} |
|
|
} |
|
|
ctx.stroke(); |
|
|
} |
|
|
|
|
|
const mastX = toX(0); |
|
|
const mastTopY = toY(mast); |
|
|
|
|
|
function getRayPoints(angle, maxDist) { |
|
|
const points = []; |
|
|
const angleRad = angle * Math.PI / 180; |
|
|
|
|
|
for (let d = 0; d <= maxDist; d += 1) { |
|
|
const height = mast - d * Math.tan(angleRad); |
|
|
if (height < 0) break; |
|
|
points.push({ x: toX(d), y: toY(height) }); |
|
|
} |
|
|
|
|
|
const groundDist = distGround(angle, mast); |
|
|
if (groundDist < maxDist && groundDist !== Infinity) { |
|
|
points.push({ x: toX(groundDist), y: groundY }); |
|
|
} else if (points.length > 0) { |
|
|
points.push({ x: toX(maxDist), y: toY(mast - maxDist * Math.tan(angleRad)) }); |
|
|
} |
|
|
|
|
|
return points; |
|
|
} |
|
|
|
|
|
const upperPoints = getRayPoints(upperAng, viewDistanceMax); |
|
|
const lowerPoints = getRayPoints(lowerAng, viewDistanceMax); |
|
|
const centerPoints = getRayPoints(centerAng, viewDistanceMax); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'rgba(0, 200, 83, 0.25)'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(mastX, mastTopY); |
|
|
|
|
|
|
|
|
upperPoints.forEach(p => ctx.lineTo(p.x, p.y)); |
|
|
|
|
|
|
|
|
const lastUpper = upperPoints[upperPoints.length - 1]; |
|
|
ctx.lineTo(lastUpper.x, groundY); |
|
|
|
|
|
|
|
|
const lastLower = lowerPoints[lowerPoints.length - 1]; |
|
|
ctx.lineTo(lastLower.x, groundY); |
|
|
|
|
|
|
|
|
for (let i = lowerPoints.length - 1; i >= 0; i--) { |
|
|
ctx.lineTo(lowerPoints[i].x, lowerPoints[i].y); |
|
|
} |
|
|
|
|
|
ctx.closePath(); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.strokeStyle = '#00c853'; |
|
|
ctx.lineWidth = 2; |
|
|
ctx.setLineDash([8, 4]); |
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(mastX, mastTopY); |
|
|
upperPoints.forEach(p => ctx.lineTo(p.x, p.y)); |
|
|
ctx.stroke(); |
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(mastX, mastTopY); |
|
|
lowerPoints.forEach(p => ctx.lineTo(p.x, p.y)); |
|
|
ctx.stroke(); |
|
|
|
|
|
ctx.setLineDash([4, 4]); |
|
|
ctx.strokeStyle = '#666'; |
|
|
ctx.lineWidth = 1.5; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(mastX, mastTopY); |
|
|
centerPoints.forEach(p => ctx.lineTo(p.x, p.y)); |
|
|
ctx.stroke(); |
|
|
ctx.setLineDash([]); |
|
|
|
|
|
|
|
|
const mastWidth = 8; |
|
|
const mastGradient = ctx.createLinearGradient(mastX - mastWidth/2, 0, mastX + mastWidth/2, 0); |
|
|
mastGradient.addColorStop(0, '#999'); |
|
|
mastGradient.addColorStop(0.5, '#CCC'); |
|
|
mastGradient.addColorStop(1, '#999'); |
|
|
ctx.fillStyle = mastGradient; |
|
|
ctx.fillRect(mastX - mastWidth/2, toY(mast), mastWidth, groundY - toY(mast)); |
|
|
|
|
|
ctx.fillStyle = '#666'; |
|
|
ctx.fillRect(mastX - mastWidth, groundY, mastWidth * 2, 8); |
|
|
|
|
|
|
|
|
const camSize = 12; |
|
|
ctx.fillStyle = '#333'; |
|
|
ctx.fillRect(mastX - camSize/2, mastTopY - camSize/2, camSize, camSize); |
|
|
|
|
|
ctx.fillStyle = '#1a1a1a'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(mastX + camSize/2, mastTopY, 4, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
ctx.fillStyle = '#00FF00'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(mastX - camSize/3, mastTopY - camSize/3, 2, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = '#333'; |
|
|
ctx.font = '11px Arial'; |
|
|
ctx.textAlign = 'center'; |
|
|
for (let d = 50; d <= viewDistanceMax; d += 50) { |
|
|
const x = toX(d); |
|
|
|
|
|
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; |
|
|
ctx.lineWidth = 1; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(x, h - labelAreaHeight); |
|
|
ctx.lineTo(x, h - labelAreaHeight + 8); |
|
|
ctx.stroke(); |
|
|
|
|
|
ctx.fillText(d + 'm', x, h - labelAreaHeight/2 + 4); |
|
|
} |
|
|
|
|
|
|
|
|
ctx.textAlign = 'right'; |
|
|
for (let height = 0; height <= viewHeightMax; height += 10) { |
|
|
const y = toY(height); |
|
|
|
|
|
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)'; |
|
|
ctx.lineWidth = 1; |
|
|
ctx.setLineDash([2, 2]); |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(margin, y); |
|
|
ctx.lineTo(margin - 5, y); |
|
|
ctx.stroke(); |
|
|
ctx.setLineDash([]); |
|
|
|
|
|
ctx.fillText(height + 'm', margin - 8, y + 4); |
|
|
} |
|
|
|
|
|
|
|
|
ctx.font = 'bold 13px Arial'; |
|
|
ctx.fillStyle = '#00c853'; |
|
|
ctx.textAlign = 'left'; |
|
|
|
|
|
if (upperPoints.length > 20) { |
|
|
const p = upperPoints[20]; |
|
|
ctx.fillText(`${upperAng.toFixed(1)}°`, p.x + 5, p.y - 5); |
|
|
} |
|
|
|
|
|
if (lowerPoints.length > 20) { |
|
|
const p = lowerPoints[20]; |
|
|
ctx.fillText(`${lowerAng.toFixed(1)}°`, p.x + 5, p.y + 15); |
|
|
} |
|
|
} |
|
|
|
|
|
function update() { |
|
|
draw(); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('cameraProfile').addEventListener('change', function() { |
|
|
const profile = this.value; |
|
|
const resolutionSelect = document.getElementById('resolution'); |
|
|
const pixelPitchInput = document.getElementById('pixelPitch'); |
|
|
const focalLengthInput = document.getElementById('focalLength'); |
|
|
|
|
|
switch(profile) { |
|
|
case 'ir': |
|
|
resolutionSelect.value = '640x480'; |
|
|
pixelPitchInput.value = '12.0'; |
|
|
focalLengthInput.value = '25.0'; |
|
|
break; |
|
|
case 'rgb': |
|
|
resolutionSelect.value = '3840x2160'; |
|
|
pixelPitchInput.value = '2.1'; |
|
|
focalLengthInput.value = '7.8'; |
|
|
break; |
|
|
case 'custom': |
|
|
default: |
|
|
|
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
update(); |
|
|
}); |
|
|
|
|
|
document.getElementById('mast').addEventListener('input', update); |
|
|
document.getElementById('tilt').addEventListener('input', update); |
|
|
document.getElementById('resolution').addEventListener('change', update); |
|
|
document.getElementById('pixelPitch').addEventListener('input', update); |
|
|
document.getElementById('focalLength').addEventListener('input', update); |
|
|
document.getElementById('seaDist').addEventListener('input', update); |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
resizeCanvas(); |
|
|
draw(); |
|
|
}); |
|
|
|
|
|
resizeCanvas(); |
|
|
draw(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
