Wizard DXF: anteprima dell'immagine del pezzo #102

Closed
opened 2026-10-25 15:08:48 +00:00 by Adriano · 2 comments
Owner

Richiesta Adriano 25/10: oltre all'anteprima DXF, anteprima dell'immagine (file o camera) con W×H px e campo in mm se c'è la scala.

Richiesta Adriano 25/10: oltre all'anteprima DXF, anteprima dell'immagine (file o camera) con W×H px e campo in mm se c'è la scala.
Adriano added the sviluppo label 2026-10-25 15:08:48 +00:00
Author
Owner

ESITO: richiesta
COSA: anteprima dell'immagine nel wizard «Crea ricetta da DXF» (editor task, tipo dxf_compare), accanto all'anteprima DXF di #101.

Richiesta di Adriano 25/10/2026: «oltre a anteprima dxf metti anteprima immagine».

STATO OGGI (base 4791c34, ramo lavoro/daitarn-tmf-dxfcal): src/frontend/flask_app/templates/maker/task_editor.html ~righe 700-712, blocco «Immagine del pezzo»: bottoni «Acquisisci dalla camera» (grab()) e «Carica immagine» (onImage($event)), poi solo <p x-text="imageName">. In static/js/dxf_recipe_wizard.js l'immagine scelta finisce in this.imageFile tramite _setImage(file) (sia da file sia da camera, riga ~106). Sotto «Disegno (.dxf)» c'è già l'anteprima SVG di #101 (stile da imitare: riquadro bordato, max-height 240 px, riga di testo sotto).

MODIFICHE (solo frontend):

  1. dxf_recipe_wizard.js: stato imagePreviewUrl: '', imagePx: null ({w, h}). In _setImage(file): revoca l'URL precedente (URL.revokeObjectURL), crea URL.createObjectURL(file); con file null azzera. imagePx si legge dall'evento @load dell'<img> (naturalWidth/naturalHeight).
    Getter imagePreviewSummary: «W × H px»; se c'è una scala (mm/px a mano valido → manualPxMm, altrimenti la calibrazione della stazione già nota al wizard, vedi come calibrated la ricava) aggiunge « · campo ≈ L × H mm» con 2 decimali e virgola secondo la lingua pagina (stessa funzione di formato di dxfPreviewSummary).
  2. task_editor.html: sotto imageName, <img x-show="imagePreviewUrl" :src="imagePreviewUrl" @load="..."> con class="block w-full rounded border ..." style="max-height: 240px; object-fit: contain; background: var(--bg-primary);" e sotto la riga imagePreviewSummary. BMP: i browser lo mostrano; se l'<img> va in errore (@error) mostrare «Anteprima non disponibile per questo formato» e lasciare il file valido per l'invio.
  3. Layout: oggi immagine e DXF sono su due colonne (grid sm:grid-cols-2): le due anteprime stanno ciascuna nella sua colonna, stessa altezza massima.
  4. Testi nuovi con _() e voci in translations/en/LC_MESSAGES/messages.po e translations/it/LC_MESSAGES/messages.po (come ha fatto #101), niente .mo nel commit.
  5. Commento breve «#102» su ogni modifica.

TEST: test JS con node sullo schema di src/frontend/flask_app/tests/js/test_dxf_preview.js (+ il runner pytest tests/test_dxf_preview_js.py): imagePreviewSummary con e senza scala; _setImage(null) azzera. Asserzione in tests/test_dxf_recipe_routes.py che la pagina contenga imagePreviewUrl. Suite da src/frontend/flask_app: C:/Users/Adriano/lavoro/TieMeasureFlow-dxfcal-frontend/.venv/Scripts/python.exe -m pytest tests -q -p no:cacheprovider; base 9 fallimenti noti, nessuno nuovo.
NON TOCCARE: src/backend/, src/vision/, src/vision_worker/, blocco anteprima DXF di #101 (solo affiancarlo), templates/statistics/.
PROVA (Opus): headless Edge, task 8 ricetta 3: carica C:/Users/Adriano/Desktop/Sider foto e DXF/Foto/sider_2_1.bmp con mm/px 0,01406 → immagine visibile, «W × H px · campo ≈ … mm».

ESITO: richiesta COSA: anteprima dell'immagine nel wizard «Crea ricetta da DXF» (editor task, tipo dxf_compare), accanto all'anteprima DXF di #101. Richiesta di Adriano 25/10/2026: «oltre a anteprima dxf metti anteprima immagine». STATO OGGI (base 4791c34, ramo lavoro/daitarn-tmf-dxfcal): `src/frontend/flask_app/templates/maker/task_editor.html` ~righe 700-712, blocco «Immagine del pezzo»: bottoni «Acquisisci dalla camera» (`grab()`) e «Carica immagine» (`onImage($event)`), poi solo `<p x-text="imageName">`. In `static/js/dxf_recipe_wizard.js` l'immagine scelta finisce in `this.imageFile` tramite `_setImage(file)` (sia da file sia da camera, riga ~106). Sotto «Disegno (.dxf)» c'è già l'anteprima SVG di #101 (stile da imitare: riquadro bordato, max-height 240 px, riga di testo sotto). MODIFICHE (solo frontend): 1. dxf_recipe_wizard.js: stato `imagePreviewUrl: ''`, `imagePx: null` ({w, h}). In `_setImage(file)`: revoca l'URL precedente (`URL.revokeObjectURL`), crea `URL.createObjectURL(file)`; con file null azzera. `imagePx` si legge dall'evento `@load` dell'`<img>` (`naturalWidth`/`naturalHeight`). Getter `imagePreviewSummary`: «W × H px»; se c'è una scala (mm/px a mano valido → `manualPxMm`, altrimenti la calibrazione della stazione già nota al wizard, vedi come `calibrated` la ricava) aggiunge « · campo ≈ L × H mm» con 2 decimali e virgola secondo la lingua pagina (stessa funzione di formato di `dxfPreviewSummary`). 2. task_editor.html: sotto `imageName`, `<img x-show="imagePreviewUrl" :src="imagePreviewUrl" @load="...">` con `class="block w-full rounded border ..." style="max-height: 240px; object-fit: contain; background: var(--bg-primary);"` e sotto la riga `imagePreviewSummary`. BMP: i browser lo mostrano; se l'`<img>` va in errore (`@error`) mostrare «Anteprima non disponibile per questo formato» e lasciare il file valido per l'invio. 3. Layout: oggi immagine e DXF sono su due colonne (`grid sm:grid-cols-2`): le due anteprime stanno ciascuna nella sua colonna, stessa altezza massima. 4. Testi nuovi con `_()` e voci in `translations/en/LC_MESSAGES/messages.po` e `translations/it/LC_MESSAGES/messages.po` (come ha fatto #101), niente .mo nel commit. 5. Commento breve «#102» su ogni modifica. TEST: test JS con node sullo schema di `src/frontend/flask_app/tests/js/test_dxf_preview.js` (+ il runner pytest `tests/test_dxf_preview_js.py`): `imagePreviewSummary` con e senza scala; `_setImage(null)` azzera. Asserzione in `tests/test_dxf_recipe_routes.py` che la pagina contenga `imagePreviewUrl`. Suite da `src/frontend/flask_app`: `C:/Users/Adriano/lavoro/TieMeasureFlow-dxfcal-frontend/.venv/Scripts/python.exe -m pytest tests -q -p no:cacheprovider`; base 9 fallimenti noti, nessuno nuovo. NON TOCCARE: src/backend/**, src/vision/**, src/vision_worker/**, blocco anteprima DXF di #101 (solo affiancarlo), templates/statistics/**. PROVA (Opus): headless Edge, task 8 ricetta 3: carica `C:/Users/Adriano/Desktop/Sider foto e DXF/Foto/sider_2_1.bmp` con mm/px 0,01406 → immagine visibile, «W × H px · campo ≈ … mm».
Author
Owner

Soluzione

ESITO: fatto. Ramo lavoro/daitarn-tmf-dxfcal (push 08616aa). FILE: src/frontend/flask_app/static/js/dxf_recipe_wizard.js (imagePx, imageBroken, calPxMm, imagePreviewSummary, onImagePreviewLoad/Error), templates/maker/task_editor.html (anteprima img 240px sotto la scelta), messages.po it/en. Commit 20f3323, merge d5db5f3. PROVA: headless Edge task 8 ricetta 3, sider_2_1.bmp + mm/px 0,014 → anteprima visibile, «2464 × 2056 px · campo ≈ 34,50 × 28,78 mm»; node test_dxf_preview.js ok; suite frontend senza fallimenti nuovi.

**Soluzione** ESITO: fatto. Ramo lavoro/daitarn-tmf-dxfcal (push 08616aa). FILE: src/frontend/flask_app/static/js/dxf_recipe_wizard.js (imagePx, imageBroken, calPxMm, imagePreviewSummary, onImagePreviewLoad/Error), templates/maker/task_editor.html (anteprima img 240px sotto la scelta), messages.po it/en. Commit 20f3323, merge d5db5f3. PROVA: headless Edge task 8 ricetta 3, sider_2_1.bmp + mm/px 0,014 → anteprima visibile, «2464 × 2056 px · campo ≈ 34,50 × 28,78 mm»; node test_dxf_preview.js ok; suite frontend senza fallimenti nuovi.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Adriano/TieMeasureFlow#102