diff --git a/scripts/calibrazione_pagina.py b/scripts/calibrazione_pagina.py index 842f0cc..dab1a15 100644 --- a/scripts/calibrazione_pagina.py +++ b/scripts/calibrazione_pagina.py @@ -17,7 +17,9 @@ un'opzione della calibrazione: la calibrazione usa sempre il frame grezzo della scelta nella tab Acquisizione. Sorgente in cima alla tab; riquadri «Immagine» (grezza) e, con la casella, «Calibrata» (/camera/anteprima/calibrata) affiancati; il ciclo anteprima si sospende mentre la tab Calibrazione e' aperta. -Dipende da: niente. E' una stringa, cosi' il pacchetto compilato non ha file dati. +#122: i quattro visori sono tmf-viewer; i tre file JS del frontend (vision_overlay, save_image, image_viewer) +li serve camera_service su /visore/. +Dipende da: i tre file JS su /visore/ (camera_service). E' una stringa, cosi' il pacchetto compilato non ha file dati. """ PAGINA = r""" @@ -66,9 +68,7 @@ PAGINA = r""" /* anteprima */ .palco { background: #020617; border: 1px solid var(--bordo); border-radius: 6px; min-height: 340px; display: flex; align-items: center; justify-content: center; margin-top: 10px; overflow: hidden; } - .cornice { position: relative; display: inline-block; line-height: 0; max-width: 100%; } - .cornice img { max-width: 100%; max-height: calc(100vh - 330px); min-height: 200px; border: 0; margin: 0; } - .mirino { position: absolute; inset: 0; pointer-events: none; /* #92: classe, vale per i due riquadri */ + .mirino { position: absolute; inset: 0; pointer-events: none; /* #92: classe, vale per i due riquadri; #122: sta dentro lo stage del tmf-viewer */ background: linear-gradient(#fbbf24, #fbbf24) center / 2px 100% no-repeat, linear-gradient(#fbbf24, #fbbf24) center / 100% 2px no-repeat; opacity: .85; } #vuoto, #vuotoCal, #vuotoCalTab { padding: 30px 16px; color: var(--secondario); text-align: center; } @@ -78,21 +78,10 @@ PAGINA = r""" .riquadro .titolo { font-size: .88rem; font-weight: 600; } .riquadro .titolo span { font-weight: 400; font-size: .78rem; color: var(--secondario); margin-left: 6px; } .riquadro .palco { margin-top: 4px; } - /* #111: visore zoom. .visore (position:relative) NON scorre: la barra e' sua figlia e resta ferma; a scorrere e' il .palco da zoomato */ - .visore { position: relative; margin-top: 10px; } - .riquadro .visore { margin-top: 4px; } - .visore > .palco { margin-top: 0; } - .barraZoom { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 4px; - padding: 3px 5px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .8rem; } - .barraZoom button { padding: 2px 9px; font-size: .85rem; background: rgba(255, 255, 255, .15); color: #fff; } - .barraZoom span { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; } - .palco.zoomata + .barraZoom { right: 26px; } /* #111: lascia libera la barra di scorrimento verticale */ - .visore:has(.cornice[hidden]) .barraZoom { display: none; } /* #111: barra nascosta finche' la cornice e' nascosta */ - /* #111: stato zoomato: palco ad altezza fissa che scorre, cornice a dimensioni esplicite (impostate da JS); centrata con margin:auto solo se piu' piccola */ - .palco.zoomata { display: flex; align-items: flex-start; justify-content: flex-start; overflow: auto; cursor: grab; touch-action: none; } - .palco.zoomata.panning { cursor: grabbing; } - .palco.zoomata .cornice { display: block; flex: none; margin: auto; max-width: none; } - .palco.zoomata .cornice img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; } + /* #122: i visori sono tmf-viewer (static/js/image_viewer.js servito su /visore/): barra, zoom e pan vengono dal componente. + Altezza data dalla pagina (come l'altezza massima che avevano le immagini); [hidden] vale gia' sopra */ + .palco tmf-viewer { width: 100%; height: max(340px, calc(100vh - 330px)); } + .angoli { display: block; width: 100%; margin-top: 8px; border: 1px solid var(--bordo); border-radius: 6px; } /* #122: immagine degli angoli, alta quanto serve (fit-height) */ .sorgente-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .sorgente-riga .campo-sorgente { flex: 1 1 260px; min-width: 0; } .sorgente-riga select { width: 100%; } @@ -128,7 +117,7 @@ PAGINA = r""" @media (max-width: 900px) { .griglia { grid-template-columns: minmax(0, 1fr); } .riquadri.doppio { grid-template-columns: minmax(0, 1fr); } /* #92: in colonna */ - .cornice img { max-height: 60vh; } + .palco tmf-viewer { height: max(340px, 60vh); } /* #122: era max-height delle immagini */ } @media (max-width: 500px) { /* #91: utilizzabile anche stretta (400 px) */ main { padding: 8px; } @@ -179,28 +168,18 @@ PAGINA = r"""
Immaginegrezza, senza correzione
-
-
+
Anteprima ferma. Premere «Avvia anteprima» o «Scatta».
- -
-
100 %
+ +