Merge branch 'release-0.3' into main

Author: Rolgim

README.md

@@ -19,6 +19,8 @@
   Web interface for <a href="https://github.com/kabasset/azulero">Azulero</a> by A. Basset and <a href="https://github.com/schirmermischa/eummy">Eummy</a> by M. Schirmer - two pipelines designed to produce color images from <a href="https://www.esa.int/Science_Exploration/Space_Science/Euclid">Euclid</a> space telescope data.
 </p>
 
+<img width="1845" height="953" alt="image" src="https://github.com/user-attachments/assets/d83d007b-47cc-4c2a-b7b8-7a6ab46c00ae" />
+
 ## Overview
 
 Azumy wraps the `azul` and `eummy` command-line pipelines into a browser-based interface. It covers the full workflow:

frontend/index.html

@@ -57,24 +57,40 @@ export async function loadCropPreview(tile) {
 }
 
 function initDraw(canvas, ctx, img) {
+  // Function to convert mouse event coordinates to canvas coordinates, accounting for CSS scaling
+  const getCanvasCoords = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    
+    // 1. compute scale factors between canvas size and displayed size
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    
+    // 2. apply inverse of CSS transform to mouse coordinates
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  };
+
   canvas.onmousedown = e => {
-    const r = canvas.getBoundingClientRect();
-    startX = e.clientX - r.left;
-    startY = e.clientY - r.top;
+    const coords = getCanvasCoords(e);
+    startX = coords.x;
+    startY = coords.y;
     drawing = true;
   };
 
   canvas.onmousemove = e => {
     if (!drawing) return;
-    const r = canvas.getBoundingClientRect();
-    endX = e.clientX - r.left;
-    endY = e.clientY - r.top;
+    const coords = getCanvasCoords(e);
+    endX = coords.x;
+    endY = coords.y;
+
     // Redraw
     ctx.drawImage(img, 0, 0);
     ctx.strokeStyle = '#4ec9b0';
-    ctx.lineWidth   = 2;
+    ctx.lineWidth = 2 * (canvas.width / 1000); 
     ctx.strokeRect(startX, startY, endX - startX, endY - startY);
-    ctx.fillStyle = 'rgba(78,201,176,0.08)';
+    ctx.fillStyle = 'rgba(78,201,176,0.15)';
     ctx.fillRect(startX, startY, endX - startX, endY - startY);
   };
 
@@ -88,11 +104,11 @@ function initDraw(canvas, ctx, img) {
 }
 
 async function computeSlicing(canvas) {
-  // Convertir les coords canvas → coords image originale
+  // convert coords canvas → coords image
   const scaleX = tileWidth  / canvas.width;
   const scaleY = tileHeight / canvas.height;
 
-  // L'image est flipud donc y est inversé
+  // normalize to top-left origin and ensure x0 < x1, y0 < y1
   const x0 = Math.min(startX, endX) * scaleX;
   const x1 = Math.max(startX, endX) * scaleX;
   const y0 = (canvas.height - Math.max(startY, endY)) * scaleY;
@@ -119,6 +135,10 @@ function clearSelection() {
 export function sendCropToProcess() {
   const slicing = document.getElementById('cropSlicing').textContent;
   if (!slicing) return;
+  const details = document.getElementById('detailsProcess');
+  if (details) {
+    details.open = true;
+  }
   document.getElementById('processTile').value = slicing;
-  document.getElementById('termProcess').scrollIntoView({ behavior: 'smooth' });
+  document.getElementById('btnProcess').scrollIntoView({ behavior: 'smooth' });
 }

frontend/js/crop.js

@@ -6,31 +6,43 @@
 import { termClear, termLine, termClassFromMessage } from './terminal.js';
 import { progShow, progSet } from './progress.js';
 import { openWS, API } from './websocket.js';
-import { initMap, goTo, loadTiling } from './map.js';
+import { initMap, goTo, loadTiling, drawCircle } from './map.js';
 
 export let foundTiles    = [];
 export let selectedTiles = [];
 
 let selectedRa  = null;
 let selectedDec = null;
+let selectedRadius = null;
 
 export async function initFind() {
   await initMap('aladinMap');
   initUI();
 }
 
 function initUI() {
-  // Map → fill fields
+  // Map → fill fields without radius
   document.addEventListener('sky:select', ({ detail: { ra, dec } }) => {
     selectedRa  = ra;
     selectedDec = dec;
     document.getElementById('findRa').value  = ra.toFixed(6);
     document.getElementById('findDec').value = dec.toFixed(6);
   });
 
+    // Map → fill fields with radius
+  document.addEventListener('sky:region', ({ detail: { ra, dec, radius } }) => {
+    selectedRa  = ra;
+    selectedDec = dec;
+    selectedRadius = radius;
+    document.getElementById('findRa').value  = ra.toFixed(6);
+    document.getElementById('findDec').value = dec.toFixed(6);
+    document.getElementById('findRadius').value = radius.toFixed(6);
+  });
+
   // Manual fields → map
   document.getElementById('findRa')?.addEventListener('change', syncFieldsToMap);
   document.getElementById('findDec')?.addEventListener('change', syncFieldsToMap);
+  document.getElementById('findRadius')?.addEventListener('change', syncFieldsToMap);
 
   // Tiling input → update map overlay
   document.getElementById('findTiling')?.addEventListener('change', e => loadTiling(e.target.value.trim()));
@@ -78,10 +90,13 @@ function syncFieldsToMap() {
   if (isNaN(ra) || isNaN(dec)) return;
   selectedRa = ra; selectedDec = dec;
   goTo(ra, dec);
+  const radius = parseFloat(document.getElementById('findRadius').value);
+  selectedRadius = isNaN(radius) ? null : radius;
+  drawCircle(ra, dec, selectedRadius);
 }
 
 export function runFind() {
-  termClear('Find');
+  termClear('Global');
   document.getElementById('tilesResult').innerHTML = '';
   document.getElementById('sendRetrieve').style.display = 'none';
   foundTiles = []; selectedTiles = [];
@@ -103,9 +118,9 @@ export function runFind() {
   let progress = 0;
 
   openWS('/find/ws', payload, {
-    cmd:  m => termLine('Find', 'c-cmd', '$ ' + m.message),
+    cmd:  m => termLine('Global', 'c-cmd', '$ ' + m.message),
     log:  m => {
-      termLine('Find', termClassFromMessage(m.message), m.message);
+      termLine('Global', termClassFromMessage(m.message), m.message);
       const coordMatch = m.message.match(/Coordinates:\s*([\d.]+)\s*deg[^,]*,\s*([\d.]+)/);
       if (coordMatch) goTo(parseFloat(coordMatch[1]), parseFloat(coordMatch[2]));
       progress = Math.min(progress + 10, 90);
@@ -116,9 +131,9 @@ export function runFind() {
       addTileChip(m.data);
       document.getElementById('sendRetrieve').style.display = 'block';
     },
-    exit:  m => { if (m.code !== 0) termLine('Find', 'c-err', `exit ${m.code}`); },
+    exit:  m => { if (m.code !== 0) termLine('Global', 'c-err', `exit ${m.code}`); },
     done:  () => { progSet('Find', 100); btn.disabled = false; },
-    error: m => { termLine('Find', 'c-err', m.message); btn.disabled = false; },
+    error: m => { termLine('Global', 'c-err', m.message); btn.disabled = false; },
   });
 }
 
@@ -140,6 +155,10 @@ export function sendToRetrieve() {
   const toAdd   = selectedTiles.length ? selectedTiles : foundTiles.map(t => t.index);
   const all     = [...new Set([...current.split(/\s+/).filter(Boolean), ...toAdd])];
   document.getElementById('retrieveTiles').value = all.join(' ');
-  document.getElementById('termRetrieve').innerHTML = '';
-  document.getElementById('termRetrieve').scrollIntoView({ behavior: 'smooth' });
+  const details = document.getElementById('detailsRetrieve');
+  if (details) {
+    details.open = true;
+  }
+  document.getElementById('termGlobal').innerHTML = '';
+  document.getElementById('btnRetrieve').scrollIntoView({ behavior: 'smooth' });
 }

frontend/js/find.js

@@ -1,16 +1,19 @@
 /**
  * SPDX-FileCopyrightText: Copyright (C) 2026, CNES (Rollin Gimenez)
  * SPDX-License-Identifier: Apache-2.0
- * 
+ *
  * map.js — Aladin Lite v3 sky map
- * Click on the sky → dispatches "sky:select" with { ra, dec }
  */
 
 import { API } from './websocket.js';
 
-let aladin      = null;
-let markerLayer = null;
-let tilingOverlay = null;
+let aladin         = null;
+let markerLayer    = null;
+let tilingOverlay  = null;
+let circleOverlay  = null;
+let previewOverlay = null;
+let firstClick     = null;
+
 
 export async function initMap(containerId) {
   await loadAladinScript();
@@ -22,26 +25,83 @@ export async function initMap(containerId) {
     target:                '0 0',
     cooFrame:              'ICRSd',
     showReticle:           false,
+    showProjectionControl: false,
     showZoomControl:       true,
     showFullscreenControl: true,
     showLayersControl:     true,
-    showGotoControl:       true,
+    showGotoControl:       false,
     showShareControl:      true,
-    showCooLocation:       true,
+    showCooLocation:       false,
   });
-  
+
   markerLayer = A.catalog({ shape: 'circle', color: '#4ec9b0', sourceSize: 12 });
   aladin.addCatalog(markerLayer);
 
+  circleOverlay  = A.graphicOverlay({ color: '#8066be', lineWidth: 2 });
+  previewOverlay = A.graphicOverlay({ color: '#8066be', lineWidth: 1, lineDash: [4, 4] });
+  aladin.addOverlay(circleOverlay);
+  aladin.addOverlay(previewOverlay);
+
+  // Clic
   aladin.on('click', (raOrObj, decArg) => {
+
     const ra  = (raOrObj !== null && typeof raOrObj === 'object') ? raOrObj.ra  : raOrObj;
     const dec = (raOrObj !== null && typeof raOrObj === 'object') ? raOrObj.dec : decArg;
     if (ra == null || dec == null) return;
-    placeMarker(ra, dec);
-    document.dispatchEvent(new CustomEvent('sky:select', { detail: { ra, dec } }));
+
+    if (!firstClick) {
+      // 1st clic → center
+      firstClick = { ra, dec };
+      placeMarker(ra, dec);
+      circleOverlay.removeAll();
+      previewOverlay.removeAll();
+      document.dispatchEvent(new CustomEvent('sky:select', { detail: { ra, dec } }));
+    } else {
+      // 2nd clic → radius
+      const radius = angularDistance(firstClick.ra, firstClick.dec, ra, dec);
+      previewOverlay.removeAll();
+      drawCircleOn(circleOverlay, firstClick.ra, firstClick.dec, radius);
+      document.dispatchEvent(new CustomEvent('sky:region', {
+        detail: { ra: firstClick.ra, dec: firstClick.dec, radius }
+      }));
+      firstClick = null;
+    }
+  });
+
+  // Mousemove → circle preview
+  const aladinDiv = document.getElementById(containerId);
+  aladinDiv.addEventListener('mousemove', e => {
+    if (!firstClick || !aladin.pix2world) return;
+
+    const rect = aladinDiv.getBoundingClientRect();
+    const x    = e.clientX - rect.left;
+    const y    = e.clientY - rect.top;
+
+    // pix2world returns [ra, dec] in degrees
+    const skyCoords = aladin.pix2world(x, y);
+    if (!skyCoords || skyCoords[0] == null) return;
+
+    const [raMouse, decMouse] = skyCoords;
+    const radius = angularDistance(firstClick.ra, firstClick.dec, raMouse, decMouse);
+
+    previewOverlay.removeAll();
+    if (radius > 0) {
+      drawCircleOn(previewOverlay, firstClick.ra, firstClick.dec, radius);
+    }
+  });
+
+  // cancel with escape
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape' && firstClick) {
+      firstClick = null;
+      previewOverlay.removeAll();
+      markerLayer.clear();
+    }
   });
 }
 
+// Helpers
+
 function placeMarker(ra, dec) {
   markerLayer.clear();
   markerLayer.addSources([A.source(ra, dec)]);
@@ -51,15 +111,44 @@ export function goTo(ra, dec) {
   if (!aladin) return;
   aladin.gotoRaDec(ra, dec);
   placeMarker(ra, dec);
+  firstClick = null;
+  circleOverlay?.removeAll();
+  previewOverlay?.removeAll();
 }
 
-/**
- * Load tiling polygons from the backend and display them as an overlay on the map.
- */
+function drawCircleOn(overlay, ra, dec, radiusDeg, steps = 64) {
+  const points  = [];
+  const decRad  = dec * Math.PI / 180;
+  for (let i = 0; i < steps; i++) {
+    const angle = (i / steps) * 2 * Math.PI;
+    const dRa   = (radiusDeg * Math.cos(angle)) / Math.cos(decRad);
+    const dDec  = radiusDeg * Math.sin(angle);
+    points.push([ra + dRa, dec + dDec]);
+  }
+  overlay.removeAll();
+  overlay.add(A.polygon(points));
+}
+
+export function drawCircle(ra, dec, radius) {
+  if (!aladin || !circleOverlay) return;
+  circleOverlay.removeAll();
+  if (radius == null) return;
+  drawCircleOn(circleOverlay, ra, dec, radius);
+}
+
+function angularDistance(ra1, dec1, ra2, dec2) {
+  const toRad = d => d * Math.PI / 180;
+  const cos   =
+    Math.sin(toRad(dec1)) * Math.sin(toRad(dec2)) +
+    Math.cos(toRad(dec1)) * Math.cos(toRad(dec2)) * Math.cos(toRad(ra1 - ra2));
+  return Math.acos(Math.min(1, Math.max(-1, cos))) * 180 / Math.PI;
+}
+
+// Tiling
+
 export async function loadTiling(filename) {
   if (!aladin || !filename) return;
 
-  // Remove existing tiling overlay if any
   if (tilingOverlay) {
     aladin.removeOverlay(tilingOverlay);
     tilingOverlay = null;
@@ -79,14 +168,13 @@ export async function loadTiling(filename) {
   aladin.addOverlay(tilingOverlay);
 
   for (const tile of data.tiles) {
-    // coords GeoJSON : [[ra, dec], ...] - Aladin [[ra, dec], ...]
-    const footprint = A.polygon(tile.coords.map(([ra, dec]) => [ra, dec]));
-    tilingOverlay.add(footprint);
+    tilingOverlay.add(A.polygon(tile.coords.map(([ra, dec]) => [ra, dec])));
   }
-
   console.log(`Loaded ${data.tiles.length} tile polygons`);
 }
 
+// Aladin loader
+
 function loadAladinScript() {
   return new Promise((resolve, reject) => {
     if (window.A) { resolve(); return; }