File size: 2,517 Bytes
6989a67 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
document.getElementById('lbw-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('/analyze', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('decision').textContent = `Decision: ${data.decision} (Confidence: ${data.confidence})`;
drawPitch(data.actual_path, data.projected_path, data.pitching, data.impact);
});
});
function drawPitch(actualPath, projectedPath, pitching, impact) {
const canvas = document.getElementById('pitchCanvas');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw pitch (22 yards scaled to 600px height, 10 feet scaled to 400px width)
ctx.fillStyle = '#90EE90'; // Light green for pitch
ctx.fillRect(50, 50, 300, 500);
// Draw stumps (at y=1, scaled to canvas)
ctx.fillStyle = '#FFF';
ctx.fillRect(190, 50, 20, 10); // Top stumps
// Draw creases
ctx.strokeStyle = '#000';
ctx.beginPath();
ctx.moveTo(50, 150); ctx.lineTo(350, 150); // Popping crease
ctx.moveTo(200, 50); ctx.lineTo(200, 150); // Middle stump line
ctx.stroke();
// Scale coordinates (x: 0-1 to 50-350, y: 0-1 to 550-50)
function scalePoint(point) {
return {
x: 50 + point.x * 300,
y: 550 - point.y * 500
};
}
// Draw actual path (red arc)
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
const actualScaled = actualPath.map(scalePoint);
ctx.moveTo(actualScaled[0].x, actualScaled[0].y);
for (let i = 1; i < actualScaled.length; i++) {
ctx.lineTo(actualScaled[i].x, actualScaled[i].y);
}
ctx.stroke();
// Draw projected path (blue line)
ctx.strokeStyle = 'blue';
ctx.beginPath();
const projectedScaled = projectedPath.map(scalePoint);
ctx.moveTo(projectedScaled[0].x, projectedScaled[0].y);
ctx.lineTo(projectedScaled[1].x, projectedScaled[1].y);
ctx.stroke();
// Draw pitching point
const pitchPt = scalePoint(pitching);
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(pitchPt.x, pitchPt.y, 5, 0, 2 * Math.PI);
ctx.fill();
// Draw impact point
const impactPt = scalePoint(impact);
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.arc(impactPt.x, impactPt.y, 5, 0, 2 * Math.PI);
ctx.fill();
} |