maker: wizard DXF con anteprime sotto le scelte, mm/px solo da file, risultato su due colonne con zoom e Fit (Refs #104)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jbf7qKuxsnAVjxthRy7dnB
This commit is contained in:
@@ -662,7 +662,7 @@
|
||||
<!-- ========== Crea ricetta da DXF (#83): solo dxf_compare ========== -->
|
||||
<template x-if="task.task_type === 'dxf_compare'">
|
||||
<div class="mt-4 pt-3 border-t border-[var(--border-color)]"
|
||||
x-data="dxfRecipeWizard(task.id, () => csrfToken(), {{ {'requestFailed': _('Richiesta non riuscita'), 'saved': _('Ricetta salvata'), 'dxfEntities': _('entità'), 'imageField': _('campo')}|tojson_attr }})">
|
||||
x-data="dxfRecipeWizard(task.id, () => csrfToken(), {{ {'requestFailed': _('Richiesta non riuscita'), 'saved': _('Ricetta salvata'), 'dxfEntities': _('entità'), 'imageField': _('campo'), 'pointsInBand': _('Punti in banda'), 'distAvg': _('Distanza media'), 'distMin': _('Distanza minima'), 'distMax': _('Distanza massima'), 'outcomePass': _('Conforme'), 'outcomeWarning': _('Con avvisi'), 'outcomeFail': _('Non conforme'), 'scaleManual': _('mm/px a mano'), 'scaleStation': _('calibrazione stazione')}|tojson_attr }})">{# #104: etichette del risultato della Prova #}
|
||||
<button type="button" class="btn btn-secondary text-xs" @click="toggle()">
|
||||
{{ _('Crea ricetta da DXF') }}
|
||||
</button>
|
||||
@@ -680,24 +680,14 @@
|
||||
<p x-show="stationId && calibrated" class="mt-1 text-xs text-emerald-600">
|
||||
{{ _('Calibrazione') }}: <span x-text="calLabel"></span>
|
||||
</p>
|
||||
<p x-show="stationId && calState && !calibrated && manualPxMm === null" class="mt-1 text-xs text-amber-600">{# #98: nascosto con mm/px valido #}
|
||||
<p x-show="stationId && calState && !calibrated && !useManualScale" class="mt-1 text-xs text-amber-600">{# #98: nascosto con mm/px valido (#104: solo per immagine da file) #}
|
||||
<span x-text="calState === 'uncalibrated' ? {{ _('Stazione non calibrata: calibrala prima di creare la ricetta.')|tojson_attr }} : {{ _('Acquisitore non raggiungibile: impossibile leggere la calibrazione.')|tojson_attr }}"></span>
|
||||
<a :href="calUrl" target="_blank" rel="noopener" x-show="calUrl"
|
||||
class="font-medium text-primary hover:underline">{{ _('Calibra') }}</a>
|
||||
<span class="text-[var(--text-muted)]">({{ _('oppure vedi la pagina Stazioni') }})</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- #98: mm/px a mano per immagini da file, sostituisce la calibrazione della stazione -->
|
||||
<div>
|
||||
<label class="tmf-label text-xs">{{ _('mm/px (immagine da file)') }}</label>
|
||||
<input type="text" inputmode="decimal" class="tmf-input text-xs" x-model="mmPx" placeholder="0,01406">
|
||||
<p x-show="manualPxMm !== null" class="mt-1 text-xs text-emerald-600">
|
||||
= <span x-text="fmt(manualPxMm)"></span> px/mm
|
||||
</p>
|
||||
<p x-show="mmPxInvalid" class="mt-1 text-xs text-amber-600">{{ _('mm/px non valido') }}</p>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]">{{ _('Se compilato sostituisce la calibrazione della stazione; la scala resta salvata nella ricetta.') }}</p>
|
||||
</div>
|
||||
<!-- Immagine: camera o file -->
|
||||
<!-- Immagine: camera o file. #104: prima le scelte, poi le anteprime affiancate -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="tmf-label text-xs">{{ _('Immagine del pezzo') }}</label>
|
||||
@@ -710,33 +700,46 @@
|
||||
</label>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]" x-text="imageName"></p>
|
||||
<!-- #102: anteprima dell'immagine, affiancata a quella del DXF (#101) -->
|
||||
<div x-show="imagePreviewUrl" class="mt-2">
|
||||
<img x-show="!imageBroken" :src="imagePreviewUrl" alt=""
|
||||
@load="onImagePreviewLoad($event.target)" @error="onImagePreviewError()"
|
||||
class="block w-full rounded border border-[var(--border-color)]"
|
||||
style="max-height: 240px; object-fit: contain; background: var(--bg-primary);">
|
||||
<p x-show="imageBroken" class="text-xs text-amber-600">{{ _('Anteprima non disponibile per questo formato') }}</p>
|
||||
<p x-show="imagePreviewSummary" class="mt-1 text-xs text-[var(--text-muted)]" x-text="imagePreviewSummary"></p>
|
||||
<!-- #98: mm/px a mano, #104: solo per un'immagine da file; sostituisce la calibrazione della stazione -->
|
||||
<div x-show="imageSource === 'file'" class="mt-2">
|
||||
<label class="tmf-label text-xs">{{ _('mm/px (immagine da file)') }}</label>
|
||||
<input type="text" inputmode="decimal" class="tmf-input text-xs" x-model="mmPx" placeholder="0,01406">
|
||||
<p x-show="manualPxMm !== null" class="mt-1 text-xs text-emerald-600">
|
||||
= <span x-text="fmt(manualPxMm)"></span> px/mm
|
||||
</p>
|
||||
<p x-show="mmPxInvalid" class="mt-1 text-xs text-amber-600">{{ _('mm/px non valido') }}</p>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]">{{ _('Se compilato sostituisce la calibrazione della stazione; la scala resta salvata nella ricetta.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="tmf-label text-xs">{{ _('Disegno (.dxf)') }}</label>
|
||||
<input type="file" accept=".dxf" class="tmf-input text-xs" @change="onDxf($event)">
|
||||
<!-- #101: anteprima del disegno appena scelto il .dxf -->
|
||||
<!-- #101: lettura del disegno appena scelto il .dxf -->
|
||||
<p x-show="dxfPreviewBusy" class="mt-1 text-xs text-[var(--text-muted)]">{{ _('Lettura DXF…') }}</p>
|
||||
<p x-show="dxfPreviewError" class="mt-1 text-xs text-red-500" x-text="dxfPreviewError"></p>
|
||||
<div x-show="dxfPreview" class="mt-2">
|
||||
<svg x-bind:view-box.camel="dxfPreviewViewBox()" preserveAspectRatio="xMidYMid meet"
|
||||
class="block w-full rounded border border-[var(--border-color)]"
|
||||
style="max-height: 240px; background: var(--bg-primary);">
|
||||
<!-- #101: un solo path (x-for/template non funziona nel namespace SVG); view-box.camel perche' il parser HTML abbassa viewBox -->
|
||||
<path :d="dxfPreviewD()" fill="none" stroke="var(--color-primary, #2563eb)"
|
||||
stroke-width="1.5" vector-effect="non-scaling-stroke"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]" x-text="dxfPreviewSummary"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #104: anteprime sotto le scelte, scatole alte uguali (240px) per stare allineate -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 items-start">
|
||||
<div x-show="imagePreviewUrl">
|
||||
<!-- #102: anteprima dell'immagine -->
|
||||
<img x-show="!imageBroken" :src="imagePreviewUrl" alt=""
|
||||
@load="onImagePreviewLoad($event.target)" @error="onImagePreviewError()"
|
||||
class="block w-full rounded border border-[var(--border-color)]"
|
||||
style="height: 240px; object-fit: contain; background: var(--bg-primary);">
|
||||
<p x-show="imageBroken" class="text-xs text-amber-600">{{ _('Anteprima non disponibile per questo formato') }}</p>
|
||||
<p x-show="imagePreviewSummary" class="mt-1 text-xs text-[var(--text-muted)]" x-text="imagePreviewSummary"></p>
|
||||
</div>
|
||||
<div x-show="dxfPreview">
|
||||
<svg x-bind:view-box.camel="dxfPreviewViewBox()" preserveAspectRatio="xMidYMid meet"
|
||||
class="block w-full rounded border border-[var(--border-color)]"
|
||||
style="height: 240px; background: var(--bg-primary);">
|
||||
<!-- #101: un solo path (x-for/template non funziona nel namespace SVG); view-box.camel perche' il parser HTML abbassa viewBox -->
|
||||
<path :d="dxfPreviewD()" fill="none" stroke="var(--color-primary, #2563eb)"
|
||||
stroke-width="1.5" vector-effect="non-scaling-stroke"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<p class="mt-1 text-xs text-[var(--text-muted)]" x-text="dxfPreviewSummary"></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pochi parametri -->
|
||||
@@ -761,21 +764,50 @@
|
||||
<button type="button" class="btn btn-primary text-xs" @click="run(true)"
|
||||
:disabled="!canRun || !result">{{ _('Salva ricetta') }}</button>
|
||||
</div>
|
||||
<p x-show="error" class="text-xs text-red-500" x-text="error"></p>
|
||||
<p x-show="notice" class="text-xs text-emerald-600" x-text="notice"></p>
|
||||
<!-- Anteprima con overlay e quattro valori -->
|
||||
<div x-show="imageSrc" class="relative">
|
||||
<img x-ref="img" :src="imageSrc" alt="" class="block w-full rounded border border-[var(--border-color)]"
|
||||
@load="drawOverlay()">
|
||||
<canvas x-ref="overlay" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
|
||||
<!-- #104: errore di acquisizione prima di una Prova (dopo, sta nella colonna dei dati) -->
|
||||
<p x-show="error && !tested" class="text-xs text-red-500" x-text="error"></p>
|
||||
<!-- #104: risultato della Prova su due colonne: immagine con zoom a sinistra, dati ed errori a destra -->
|
||||
<div x-show="tested" class="grid grid-cols-1 lg:grid-cols-2 gap-3 items-start">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<button type="button" class="btn btn-secondary text-xs" @click="zoomBy(1 / 1.25)" title="{{ _('Riduci') }}">−</button>
|
||||
<button type="button" class="btn btn-secondary text-xs" @click="zoomBy(1.25)" title="{{ _('Ingrandisci') }}">+</button>
|
||||
<button type="button" class="btn btn-secondary text-xs" @click="fit()">{{ _('Adatta') }}</button>
|
||||
<span class="text-xs text-[var(--text-muted)]" x-text="zoomPct"></span>
|
||||
</div>
|
||||
<div x-ref="viewport" @wheel="onWheel($event)"
|
||||
class="rounded border border-[var(--border-color)]"
|
||||
style="overflow: auto; height: min(70vh, 520px); background: var(--bg-primary);">
|
||||
<div class="relative" :style="zoomW ? ('width:' + zoomW + 'px;height:' + zoomH + 'px') : 'width:100%'">
|
||||
<img x-ref="img" :src="imageSrc" alt="" class="block" style="width: 100%; height: 100%;"
|
||||
@load="onResultImgLoad()">
|
||||
<canvas x-ref="overlay" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<p x-show="error" class="text-xs text-red-500" x-text="error"></p>
|
||||
<p x-show="notice" class="text-xs text-emerald-600" x-text="notice"></p>
|
||||
<div x-show="result" class="space-y-2">
|
||||
<p class="text-xs">{{ _('Esito') }}: <span class="font-semibold" :class="outcomeClass" x-text="outcomeLabel"></span></p>
|
||||
<table class="tmf-table text-xs">
|
||||
<tbody>
|
||||
<template x-for="v in values" :key="v.key">
|
||||
<tr>
|
||||
<td :title="v.key" x-text="v.label"></td>
|
||||
<td class="text-right"><span x-text="fmt(v.value)"></span> <span class="text-[var(--text-muted)]" x-text="v.unit"></span></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="text-xs text-[var(--text-muted)] space-y-0.5">
|
||||
<li>{{ _('Scala') }}: <span x-text="scaleSummary"></span></li>
|
||||
<li>{{ _('Banda ± mm') }}: <span x-text="fmt(runBandMm)"></span></li>
|
||||
<li>{{ _('Soglia punti in banda %%') }}: <span x-text="fmt(runMinPointsPct)"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table x-show="result" class="tmf-table text-xs">
|
||||
<tbody>
|
||||
<template x-for="v in values" :key="v.key">
|
||||
<tr><td class="font-mono" x-text="v.key"></td><td class="text-right" x-text="fmt(v.value)"></td></tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user