Print Designer & Modelli Stampa

Il Print Designer è un editor visuale WYSIWYG che consente di creare e personalizzare i modelli di stampa per ogni tipo di documento gestito da NOX: fatture, DDT, preventivi, ricette, parcelle, note di credito e documenti generici.

Il sistema è composto da due schermate:

• Archivio Modelli (/print-templates): lista dei template salvati con azioni di gestione (duplica, elimina, imposta default, esporta, apri nel designer)
• Designer Visuale (/print-designer): editor drag-and-drop con canvas WYSIWYG, palette campi, pannello proprietà

Ogni modello è associato a un tipo documento e a un formato carta. Nel modulo Documenti, il selettore stampa mostra solo i modelli compatibili con il tipo di documento aperto.

La schermata Modelli Stampa mostra tutti i template disponibili in una tabella con le seguenti informazioni:

• Nome: nome identificativo del modello
• Tipo documento: fattura, DDT, preventivo, ricetta, parcella, nota credito, ecc.
• Formato: A4 Verticale, A4 Orizzontale, A5 Verticale, A5 Orizzontale
• Default: stella dorata se è il modello predefinito per quel tipo documento
• Ultima modifica: data e ora dell'ultimo salvataggio

Azioni disponibili

Importare un modello

Premere Importa Template per caricare un file .json o .nox-tpl.json precedentemente esportato. Il sistema mostra un'anteprima prima del salvataggio.

Creare un modello nuovo

Premere Apri Designer senza selezionare alcun template per aprire l'editor con un foglio vuoto.

Il Designer è diviso in cinque aree:

1. Barra strumenti (in alto)

Contiene: badge “NOX PRINT DESIGNER”, pulsanti strumento (Riquadro, Label, Sfondo, Marchio, Griglia, Pulisci, Apri, Salva), controlli zoom e rapporto font.

2. Palette campi (pannello sinistro, 220px)

Elenco di tutti i campi disponibili organizzati in 9 categorie espandibili. Ogni campo è colorato per categoria. I campi già posizionati appaiono in tono attenuato.

3. Canvas / Foglio (area centrale)

Il foglio di lavoro bianco con griglia di sfondo a 24px. Mostra la pagina nel formato selezionato con ombra. I campi posizionati sono visualizzati con bordo, label e contenuto di esempio.

4. Pannello proprietà (pannello destro, 210px)

Mostra le proprietà del campo selezionato: posizione (mm), dimensioni (mm), tipografia, bordi, sfondo, colore testo, opzioni specifiche per campo.

5. Barra di stato (in basso)

Mostra: numero di campi posizionati, posizione del cursore in mm, formato pagina corrente e promemoria shortcut.

Il designer supporta quattro formati carta. La selezione avviene nella barra di intestazione (sopra il designer, nell'area Angular).

Il canvas si adatta automaticamente al formato scelto. Cambiare formato non sposta i campi già posizionati: verificare che rientrino nel nuovo foglio.

Il pannello sinistro contiene 82 campi organizzati in 9 categorie espandibili. Ogni categoria ha un colore identificativo:

Fare clic sul nome della categoria per espandere/comprimere l'elenco campi. I campi già presenti sul foglio appaiono attenuati.

1. Nella palette a sinistra, fare clic sul campo desiderato (es. “Ragione Sociale”).
2. Il cursore cambia in mirino (+) e appare il messaggio “Clicca sul foglio per posizionare il campo”.
3. Fare clic nel punto del foglio dove si desidera posizionare il campo. Il campo viene creato con dimensioni predefinite centrate sul punto di clic.
4. Il campo appare immediatamente sul foglio con bordo e label. Il pannello proprietà a destra mostra le opzioni.

Per annullare il posizionamento, premere Esc.

Dimensioni predefinite per tipo di campo

Selezione singola

Fare clic su un campo nel foglio. Il campo selezionato mostra un bordo tratteggiato blu con 8 maniglie di ridimensionamento. Il pannello proprietà a destra si aggiorna.

Selezione multipla

Tenere premuto Ctrl (o Cmd su Mac) e fare clic su più campi. I campi multi-selezionati mostrano un bordo rosso. Con la selezione multipla si attivano i pulsanti di allineamento.

Spostare un campo

• Con il mouse: trascinare il campo dal suo bordo (non dalle maniglie). Il campo segue il cursore.
• Con la tastiera: selezionare il campo, poi usare i tasti freccia per spostarlo di 1mm alla volta. Con Shift + freccia si sposta di 5mm.
• Con il pannello: modificare i valori X e Y nel pannello proprietà (passo 0.5mm).

Premere Esc per deselezionare tutti i campi.

Quando un campo è selezionato, mostra 8 maniglie ai bordi e agli angoli:

In alternativa, modificare i valori Larghezza e Altezza nel pannello proprietà (passo 0.5mm, valori in millimetri).

Il pannello destro mostra le proprietà del campo selezionato, organizzate in sezioni:

Campo

• ID Campo: identificativo univoco (sola lettura, es. az_nome)
• Label: etichetta visualizzata sopra al campo nel designer e opzionalmente in stampa

Posizione (mm)

• X: distanza orizzontale dal bordo sinistro del foglio
• Y: distanza verticale dal bordo superiore del foglio
• Larghezza: larghezza del campo
• Altezza: altezza del campo
• Tutti i valori hanno passo 0.5mm e si esprimono in millimetri

Testo

Vedere sezione 10 (Tipografia) per i dettagli completi.

Visualizzazione

Vedere sezione 11 (Bordi e sfondo) per i dettagli completi.

Colonne Tabella Righe

Visibile solo per il campo righe_area. Vedere sezione 13.

Allineamento multiplo

Visibile solo con selezione multipla. Vedere sezione 16.

Elimina

Pulsante rosso Elimina campo per rimuovere il campo selezionato dal foglio. Equivalente al tasto Canc.

La sezione Testo del pannello proprietà controlla l'aspetto del testo nel campo:

Font

11 font disponibili:

• Helvetica (default) — sans-serif professionale
• Arial — sans-serif universale
• Times New Roman — serif classico
• Courier — monospace, ideale per codici e importi
• Georgia — serif elegante
• Verdana — sans-serif leggibile
• Comic Sans — informale
• Trebuchet — sans-serif moderno
• Impact — grassetto condensato
• DM Sans — sans-serif geometrico
• IBM Plex Mono — monospace moderno

Dimensione

Da 5pt a 72pt, passo 0.5pt. Le dimensioni tipiche: 7-8pt per note e campi piccoli, 10-11pt per il corpo, 14-16pt per titoli, 20-28pt per il totale documento.

Allineamento

Quattro opzioni: Sinistra, Centro, Destra, Giustificato. Consigliato: sinistra per testi, destra per importi, centro per titoli.

Stile

• Grassetto (B): toggle per il peso bold
• Corsivo (I): toggle per lo stile italic

Colore testo

10 colori preimpostati (nero, bianco, grigio scuro, grigio, rosso, blu, verde, arancione, viola, oro) più un selettore colore personalizzato per qualsiasi tinta.

La sezione Visualizzazione del pannello proprietà controlla l'aspetto grafico del riquadro:

Bordo visibile

• Checkbox “Bordo visibile”: attiva/disattiva il bordo del campo in stampa
• Spessore bordo: da 0.1mm a 5mm
• Colore bordo: selettore colore

I bordi sono utili per creare riquadri attorno ai dati azienda, riquadri indirizzo cliente, box totali, ecc.

Sfondo chiaro

La checkbox “Sfondo chiaro” aggiunge un riempimento colorato al campo, utile per evidenziare sezioni come l'intestazione o i totali.

Mostra label

La checkbox “Mostra label” controlla se l'etichetta del campo (es. “P.IVA”, “Totale”) viene stampata sopra al valore. Utile per campi che necessitano di un'intestazione visibile.

Solo testo fisso

La checkbox “Solo testo fisso” trasforma il campo da dinamico a statico: invece di stampare il valore dal documento, stampa un testo personalizzato inserito nel campo sottostante “Valore statico”.

Usi tipici:

• Diciture obbligatorie fisse (es. “Regime forfettario art.1 c.54-89 L.190/2014”)
• Informazioni bancarie fisse
• Avvertenze legali
• Clausole contrattuali sui preventivi

Label libere

Il pulsante “Label” nella barra strumenti crea un campo di testo completamente libero (non associato a nessun dato dinamico). Ideale per etichette descrittive, titoli di sezione, testi decorativi.

Il campo righe_area (Tabella Righe) è un campo speciale che rappresenta l'area dove vengono stampate le righe del documento. Ha dimensione predefinita 170×110mm.

Colonne configurabili

Quando si seleziona il campo righe_area, nel pannello proprietà appare la sezione “Colonne Tabella Righe” con checkbox per ogni colonna:

Disattivare le colonne non necessarie per il tipo di documento (es. per una ricetta servono solo Descrizione e Note).

Immagine di sfondo

Il pulsante “Sfondo” nella barra strumenti permette di caricare un'immagine (JPG, PNG) che viene visualizzata come sfondo del foglio al 35% di opacità. Usi tipici:

• Carta intestata digitalizzata come base di riferimento
• Filigrana o watermark aziendale
• Layout grafico di sfondo pre-stampato

Lo sfondo serve come riferimento visivo durante il posizionamento dei campi. Può essere rimosso indipendentemente dai campi tramite “Pulisci → Solo sfondo”.

Logo aziendale (Marchio)

Il pulsante “Marchio” carica il logo aziendale come elemento separato posizionabile:

• Trascinabile: spostare il logo liberamente sul foglio
• Ridimensionabile: maniglia nell'angolo inferiore destro
• Posizione e dimensioni salvate nel template
• L'immagine viene incorporata nel JSON del template (base64)

Riquadro (Box)

Il pulsante “Riquadro” crea un rettangolo decorativo senza dati associati. Si posiziona con un clic sul foglio come qualsiasi campo. Usi tipici:

• Creare riquadri attorno a gruppi di campi (es. box indirizzo cliente)
• Separatori grafici tra sezioni
• Aree colorate di sfondo

Personalizzabile: bordo (spessore, colore), sfondo, dimensioni libere.

Label (Etichetta libera)

Il pulsante “Label” crea un campo di testo completamente libero. A differenza dei campi dinamici, una label non è collegata a nessun dato del documento. Si posiziona con un clic.

Personalizzabile: testo, font, dimensione, stile, colore, allineamento, bordi, sfondo. Utile per titoli, intestazioni di sezione, annotazioni fisse.

Griglia (Snap to Grid)

Il pulsante “Griglia” nella barra strumenti attiva/disattiva l'aggancio alla griglia. Quando attivo:

• Lo spostamento dei campi si aggancia a incrementi di 5mm
• Il ridimensionamento si aggancia alla stessa griglia
• Facilita l'allineamento preciso dei campi tra loro

La griglia visuale di sfondo (24px) è sempre visibile indipendentemente dallo stato dello snap.

Allineamento multiplo

Con 2 o più campi selezionati (Ctrl+Clic), nel pannello proprietà appaiono 8 pulsanti di allineamento:

Zoom

I pulsanti − e + nella barra strumenti regolano lo zoom del canvas:

• Range: 30% – 200%
• Passo: ±10% per clic
• La percentuale corrente è mostrata tra i due pulsanti
• Lo zoom non influenza le dimensioni in stampa, solo la visualizzazione a video

Rapporto Font (Font Ratio)

Il controllo “Font Ratio” regola il rapporto tra la dimensione del testo a video e quella in stampa (default: 1.19). Serve per compensare la differenza tra la resa dei font su schermo e su carta.

• Valore più alto: testo più grande a video (ma la stampa resta invariata)
• Valore più basso: testo più piccolo a video
• Regolare fino a quando l'anteprima a video corrisponde visivamente al risultato stampato

Salvare il template

1. Nella barra di intestazione (sopra il designer), verificare che Nome, Tipo documento e Formato siano corretti.
2. Premere il pulsante “Salva” nella barra strumenti del designer.
3. Il sistema salva il template sul server. Un messaggio di conferma appare in basso.

Il template viene salvato come oggetto JSON contenente: versione, nome, tipo, formato, dimensioni pagina, immagine sfondo, logo (posizione e immagine), elenco campi con tutte le proprietà.

Aprire un template esistente

Due modi:

• Dall'archivio modelli: premere ✎ sul template desiderato. Il designer si apre con il template già caricato.
• Da file locale: nel designer, premere “Apri” e selezionare un file .json o .nox-tpl.json.

Il pulsante “Anteprima” nella barra di intestazione genera un PDF di prova:

1. Il sistema richiede il template corrente dal designer.
2. Il template viene inviato al backend con dati di esempio.
3. Il backend genera un PDF con i campi popolati da dati fittizi (ragione sociale di esempio, righe di test, importi simulati).
4. Il PDF si apre in una nuova finestra del browser.

L'anteprima permette di verificare il layout finale prima di usare il template sui documenti reali.

Esportare

Dall'archivio modelli, premere l'icona Scarica (📥) su un template. Viene scaricato un file {nome}.nox-tpl.json in formato JSON leggibile.

Il file contiene tutto il necessario per ricreare il template: layout, campi, stili, immagini (sfondo e logo in base64).

Importare

1. Nell'archivio modelli, premere “Importa Template”.
2. Selezionare un file .json o .nox-tpl.json.
3. Il sistema mostra un'anteprima con nome, tipo e formato.
4. Premere “Salva” per importare definitivamente.

Casi d'uso

• Backup: esportare tutti i template prima di un aggiornamento
• Condivisione: inviare template a colleghi o sedi diverse
• Multi-workspace: usare lo stesso template su workspace diversi
• Versionamento: mantenere versioni precedenti di un template

NOX include 10 modelli di sistema preinstallati che coprono i principali tipi documento:

I modelli di sistema:

• Non possono essere eliminati
• Possono essere aperti nel designer per studio o come base
• Possono essere duplicati per creare varianti personalizzate
• Sono sempre disponibili come riferimento

Intestazione Azienda (11 campi)

Dati Documento (9 campi)

Cliente / Fornitore (15 campi)

Corpo / Righe (10 campi)

Totali & Riepilogo IVA (10 campi)

Pagamento (5 campi)

Spedizione / DDT (11 campi)

Note & Testi (5 campi)

Linee & Separatori (6 campi)

Feature #12 del pacchetto FATTURAZIONE v 2.2: introduce una nuova tabella template_stampa_documento che affianca il Print Designer per gestire layout configurabili per tipo di documento. Il modello è semplice e basato su JSON/CSS, utile per stampanti termiche, lettere accompagnatorie, duplicati e casi dove il Print Designer risulta sovradimensionato.

Schema tabella

• nome (VARCHAR 100) — nome visualizzato nel selettore
• tipo_documento (VARCHAR 20) — TD01, TD04, DDT, PRV, … oppure NULL per template universale
• layout_json (TEXT) — configurazione layout: lista di blocchi (es. intestazione_azienda, tabella_righe, totali, scadenze, iban_note, firma)
• css_personalizzato (TEXT) — CSS libero per override (font, margini, colori brand)
• default_per_tipo (BOOLEAN) — template predefinito per il tipo documento
• attivo (BOOLEAN) — soft-delete tramite flag (non hard-delete per tracciabilità)

Seed iniziale (creato dalla migrazione v 2.2)

• Fattura standard (TD01): blocchi intestazione_azienda, intestazione_cliente, tabella_righe, totali, scadenze, iban_note
• Nota di credito standard (TD04): include riferimento_fattura e motivazione
• DDT standard (DDT): mittente, destinatario, trasporto, firma
• Preventivo standard (PRV): validita + condizioni_accettazione

Endpoint CRUD

• GET /api/fatturazione/template-stampa?tipoDocumento=TD01 — elenco template attivi (universali + per tipo richiesto, ordinati per default)
• POST /api/fatturazione/template-stampa [ADMIN] body {nome, tipoDocumento, layoutJson, cssPersonalizzato, defaultPerTipo}
• PUT /api/fatturazione/template-stampa/:id [ADMIN]
• DELETE /api/fatturazione/template-stampa/:id [ADMIN] — disattiva (attivo=false) senza cancellazione fisica

Differenze vs Print Designer completo