document.addEventListener('alpine:initializing', () => { Alpine.data('fovComparator', (config) => ({ // --- DATA --- dso: config.initial.dso || null, userTelescopes: config.userTelescopes, userCameras: config.userCameras, translations: config.translations, selectedTelescopes: [], selectedCameras: [], rotation: 0, imageSize: 1000, // SVG viewBox size colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#8BC34A', '#F44336', '#2196F3', '#FFEB3B'], // --- INIT --- init() { if (this.dso) { if (this.userTelescopes.length > 0) this.selectedTelescopes.push(this.userTelescopes[0].id); if (this.userCameras.length > 0) this.selectedCameras.push(this.userCameras[0].id); } window.addEventListener('dso-selected', event => { this.dso = event.detail; }); }, // --- GETTERS --- get fovs() { if (!this.dso || this.selectedTelescopes.length === 0 || this.selectedCameras.length === 0) { return []; } let colorIndex = 0; const rawFovs = []; // 1. First pass: Calculate raw FOV in arcminutes for all combinations this.selectedTelescopes.forEach(telId => { this.selectedCameras.forEach(camId => { const telescope = this.userTelescopes.find(t => t.id == telId); const camera = this.userCameras.find(c => c.id == camId); if (telescope && camera) { const fovArcmin = this.calculateFov(telescope, camera); if (fovArcmin) { rawFovs.push({ telescope, camera, fovArcmin }); } } }); }); if (rawFovs.length === 0) return []; // 2. Find the largest dimension (width or height) among all combinations const maxFovDimension = rawFovs.reduce((max, item) => { return Math.max(max, item.fovArcmin.width, item.fovArcmin.height); }, 0); if (maxFovDimension === 0) return []; // 3. Calculate scale based on the largest dimension const scale = this.imageSize / maxFovDimension; // pixels per arcminute // 4. Second pass: Build the final objects with pixel dimensions return rawFovs.map(item => { const fov = { telescope: { name: item.telescope.name }, camera: { name: item.camera.name }, width: item.fovArcmin.width * scale, height: item.fovArcmin.height * scale, color: this.colors[colorIndex % this.colors.length] }; colorIndex++; return fov; }); }, // --- METHODS --- calculateFov(telescope, camera) { const fl = parseFloat(telescope.focal_length); const sensorW = parseFloat(camera.sensor_width); const sensorH = parseFloat(camera.sensor_height); if (!fl || !sensorW || !sensorH || fl <= 0) return null; const fovWidth = (sensorW / fl) * (180 / Math.PI) * 60; const fovHeight = (sensorH / fl) * (180 / Math.PI) * 60; return { width: fovWidth, height: fovHeight }; } })); });