Gestione dei template per display pubblici

I template per display pubblici sono la base delle tue visualizzazioni personalizzate. Definiscono il layout, la struttura e gli elementi visivi che verranno applicati alle tue installazioni. Questa guida completa tratta tutto, dalla creazione di template di base alle tecniche di progettazione avanzate.

📋 Panoramica

Cosa sono i template per display pubblici?

I template fungono da modelli riutilizzabili che:

• 📐 Definiscono i layout visivi per i tuoi display pubblici
• 🧩 Organizzano i blocchi di contenuto e il loro posizionamento
• 🎨 Stabiliscono la coerenza del design tra più installazioni
• ⚙️ Consentono la distribuzione rapida di visualizzazioni standardizzate
• 🔄 Supportano aggiornamenti semplici in tutte le configurazioni collegate

Vantaggi principali

🚀 Guida introduttiva

Flusso di lavoro del template

1. 📐 Progetta il layout - Pianifica la struttura visiva
2. 🎨 Crea il template - Costruiscilo utilizzando l'editor dei template
3. 💾 Salva il template - Conservalo per riutilizzarlo nelle installazioni

Prerequisiti

Prima di creare i template, assicurati di avere:

• ✅ Account SmartgridX con le autorizzazioni appropriate
• ✅ Obiettivi di design chiari per la tua visualizzazione
• ✅ Requisiti dei contenuti (immagini, punti dati, layout)

🎛️ Interfaccia di gestione dei template

Accesso al gestore dei template

Passaggi di navigazione:

1. Accedete al vostro account SmartgridX
2. Passate a 'Display pubblici' nella barra laterale principale
3. Clicca sul pulsante 'Template per display pubblici' nella pagina panoramica

Si apre l'interfaccia di gestione dei template, dove puoi visualizzare, creare, modificare ed eliminare i template.

Tabella panoramica dei template

Azioni disponibili:

• ➕ Aggiungi - Pulsante verde per avviare la creazione di un template
• ✏️ Modifica - Modifica il design di un template esistente
• 🗑️ Elimina - Rimuovi un template inutilizzato

🎨 Processo di creazione del template

Avvio di un nuovo template

Clicca sul pulsante "Crea nuovo template" per aprire l'interfaccia dell'editor dei template.

Configurazione dell'intestazione del template

Impostazioni del titolo

Titolo del template:

• Scopo: Identifica il template negli elenchi e nelle configurazioni
• Buone pratiche: Utilizza nomi descrittivi e specifici per il progetto
• Esempi: "Factory-KPI-Dashboard", "Energy-Monitoring-Layout", "Multi-Zone-Display"

Configurazione dei margini

Le impostazioni dei margini definiscono l'area sicura dai bordi del display:

Slider dei margini (0-100px):

• 📐 Intervallo: Da 0 a 100 pixel dal bordo del display
• 🎯 Scopo: Crea uno spazio sicuro per evitare il taglio dei contenuti
• 📱 Applicazione: Garantisce la visibilità su diversi tipi di display
• ⚙️ Consiglio: Utilizza 10-20px per i display standard, 30-50px per gli schermi edge-to-edge

Impatto visivo:

• Margine di 0px - Il contenuto si estende fino ai bordi del display
• Margine di 50px - Il contenuto inizia a 50 pixel da tutti i bordi
• Margine di 100px - Area sicura massima con un'ampia spaziatura dai bordi

Funzionalità di salvataggio

Il pulsante Salva 💾 (nell'angolo in alto a destra) consente di salvare il template corrente.

🧩 Sistema di layout a blocchi

Comprendere il sistema a griglia

Fondamenti della griglia

L'editor dei template utilizza un sistema a griglia basato su percentuali 100×100:

Proprietà della griglia:

• 📐 Dimensioni: 100 unità di larghezza × 100 unità di altezza
• 📊 Unità: Valori percentuali (1 unità = 1% della dimensione totale)
• 🎯 Precisione: Consente un posizionamento e un ridimensionamento precisi
• 📱 Responsive: Si adatta automaticamente a schermi di dimensioni diverse

Esempi di layout a blocchi

┌─────────────────────────────────┐
│                                 │
│         FULL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│                 │               │
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
│                 │               │
└─────────────────┴───────────────┘

┌─────────────────────────────────┐
│            BLOCK 1              │
│                                 │
├─────────────────────────────────┤
│            BLOCK 2              │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
├─────────────────┼───────────────┤
│    BLOCK 3      │   BLOCK 4     │
│                 │               │
└─────────────────┴───────────────┘

Manipolazione dei blocchi

Aggiunta di blocchi

Metodo: Clicca sul pulsante "Aggiungi blocco" (in alto a destra nell'editor)
Risultato: Viene visualizzato un nuovo blocco con dimensioni predefinite
Passaggi successivi: Posizionalo e ridimensionalo secondo necessità

Posizionamento dei blocchi

Trascinamento:

• 🖱️ Fai clic e tieni premuto su un blocco qualsiasi per spostarlo
• 📍 Anteprima in tempo reale mostra la posizione durante il trascinamento
• 🧲 Allineamento alla griglia aiuta a ottenere un allineamento preciso
• 👁️ Guide visive vengono visualizzate per facilitare l'allineamento

Ridimensionamento dei blocchi

Maniglia di ridimensionamento:

• 📐 L'angolo in basso a destra mostra la maniglia di ridimensionamento quando il blocco è selezionato
• 🔧 Trascina per ridimensionare contemporaneamente larghezza e altezza
• 📊 I valori in tempo reale mostrano le dimensioni attuali

Controlli di precisione

Pannello di posizionamento laterale destro

Quando un blocco è selezionato, il pannello di destra fornisce:

Controlli di posizionamento:

• 📍 Posizione X - Offset orizzontale dal bordo sinistro (0-100)
• 📍 Posizione Y - Offset verticale dal bordo superiore (0-100)
• 🎨 Z-Index - Ordine dei livelli per i blocchi sovrapposti
• 📏 Larghezza - Percentuale di larghezza del blocco (1-100)
• 📏 Altezza - Percentuale di altezza del blocco (1-100)

⚙️ Configurazione dei blocchi

Tipi e proprietà dei blocchi

Accesso alla configurazione dei blocchi

Metodo:

1. Seleziona un blocco nell'area di lavoro dell'editor
2. Il pannello di configurazione viene visualizzato nella parte inferiore dello schermo
3. Il menu a discesa del tipo di blocco è l'opzione di configurazione principale

Nota: Non tutti i blocchi sono attualmente configurabili. La situazione cambierà con il proseguire dello sviluppo. In futuro verranno aggiunti altri tipi di blocco.

Tipi di blocco disponibili

Esempi di template

Questo esempio mostra un template ben strutturato con:

• 📊 Organizzazione chiara dei blocchi con etichette descrittive
• 📐 Spaziatura e allineamento appropriati
• 🎯 Tipi di blocco funzionali per esigenze di contenuto diverse

Denominazione dei blocchi in questo esempio:

• Ogni blocco mostra il proprio scopo previsto
• Le etichette chiare facilitano la configurazione
• L'organizzazione logica facilita la manutenzione

📚 Documentazione correlata

Passaggi successivi

Dopo aver creato il template:

1. ⚙️ Configura le installazioni - Applica i template a installazioni specifiche
2. 🎛️ Collega i Controller - Connetti l'hardware del display
3. 🚀 Guida introduttiva - Panoramica completa del flusso di lavoro

Argomenti avanzati

• 🎨 Tecniche di progettazione avanzate
• 📊 Integrazione di dati personalizzati
• 🔄 Aggiornamenti automatici dei template
• 👥 Collaborazione multiutente sui template

💡 Riepilogo delle best practice

Progettazione dei template

✅ Principi di progettazione:

• 🎯 Mantieni la semplicità - Concentrati sulle informazioni essenziali
• 📱 Progetta in modo responsivo - Esegui test su schermi di dimensioni diverse
• 🎨 Mantieni la coerenza - Usa colori e layout standardizzati

Gestione dei template

✅ Suggerimenti per l'organizzazione:

• 📝 Usa nomi descrittivi - Rendi i template facili da trovare
• 🔄 Manutenzione regolare - Rimuovi i template inutilizzati
• 👥 Condividi gli standard - Assicura la coerenza del team

🎨 Pronto per progettare? Dopo aver creato e configurato il tuo template, sei pronto a distribuire visualizzazioni straordinarie nelle tue installazioni SmartgridX!