Le grafiche sono disegni SVG collegati all'installazione: una planimetria le cui luci si accendono, uno schema termico con pompe in movimento, un flusso di energia le cui frecce scorrono in base alla potenza, un piano di sicurezza i cui contatti porta diventano rossi. Si configurano nella pagina Grafica del pannello di amministrazione; gli utenti le posizionano sulle proprie viste (vedere «Grafiche sulle viste»). La pagina Grafica è una voce dedicata del gruppo EDIFICIO nella barra laterale, accanto a Logica.
Una grafica è composta da quattro elementi:
| Elemento | Descrizione |
|---|---|
| Il disegno | Un documento SVG: un disegno personale o esportato, un'immagine di sfondo o un'area di disegno vuota da riempire con simboli |
| Simboli | Forme pronte all'uso dalla libreria (lampada, tapparella, pompa, badge con valore…) collocate sul disegno, con associazioni e azioni preconfigurate |
| Associazioni | Regole che modificano una forma al variare di un valore: colore, testo, classe, posizione, animazione |
| Azioni | Operazione eseguita al tocco, doppio tocco o pressione prolungata su una forma: commutare un dispositivo, eseguire uno scenario, aprire un locale, passare a una vista |
La pagina Grafica. La tabella elenca ogni grafica con il numero di associazioni e azioni e lo stato di collocazione (Posizionato: «2 vista/e» o «non posizionato»). Ogni riga include Modifica, Duplica, Esporta ed Elimina. Sopra la tabella: Nuova grafica e Importa bundle.
⚠️ Attenzione: L'eliminazione di una grafica posizionata su una o più viste rimuove anche tali posizionamenti; la finestra di dialogo specifica quante viste sono interessate.
Creazione di una grafica
Fare clic su Nuova grafica. La prima schermata richiede come impostare il disegno di partenza:
| Origine | Funzionamento | Dimensioni della grafica |
|---|---|---|
| Da un file SVG | Il proprio disegno diventa la grafica. I simboli vengono aggiunti sopra ed è possibile associare le forme già presenti nel file. | Dimensioni originali del file |
| Da un'immagine di sfondo | Una foto, una planimetria scansionata o uno scenario generato fungono da sfondo. La grafica viene creata e salvata subito, con l'immagine salvata sul server. I simboli vanno sopra. | Dimensioni dell'immagine |
| Composizione vuota | Un'area di disegno vuota per soli simboli o loghi. Scegliere Panoramico 16:10, Classico 4:3, Quadrato o specificare larghezza e altezza in Personalizzato. | Dimensioni scelte |
| Esempi | Due grafiche complete fornite con il server: Flusso di energia e Stazione di pompaggio. Vengono importate come copie modificabili; i riferimenti ai dispositivi corrispondono per nome. | Dimensioni dell'esempio |
Le dimensioni di una grafica corrispondono al suo spazio di coordinate, visualizzato nella scheda Sorgente come Dimensioni grafica. Possono essere modificate in seguito; l'intero disegno viene ridimensionato proporzionalmente. Un'immagine di sfondo imposta sempre le dimensioni su quelle del file immagine.
💡 Suggerimento: Un'immagine chiara (carta bianca) richiede tratti scuri indipendentemente dal tema dell'app. Quando si parte da un'immagine di sfondo chiara, l'impostazione Colori passa automaticamente a Disegno chiaro (vedere la sezione Test, impostazioni ed esportazione).
L'editor
L'editor è suddiviso in due colonne. A sinistra, l'Anteprima mostra la grafica esattamente come apparirà nelle app, accompagnata da una barra degli strumenti:
| Pulsante | Funzione |
|---|---|
| Inserisci simbolo | Apre la libreria dei simboli (vedere la sezione Simboli) |
| Sposta | Modalità composizione: trascinare un simbolo per spostarlo, tirare il punto arancione sull'angolo per ridimensionarlo, fare clic per modificarne le associazioni, premere Canc per rimuoverlo, Esc per deselezionare |
| Seleziona elemento | Fare clic su qualsiasi forma del disegno per selezionarla e modificarne le associazioni (per elementi disegnati a mano libera anziché simboli) |
| Pan, Riduci zoom, Ingrandisci zoom | Spostarsi e ingrandire l'anteprima; lo zoom funziona anche con la rotellina del mouse; fare clic sulla percentuale per tornare al 100%. Lo zoom riguarda solo la visualizzazione di lavoro. |
A destra sono presenti quattro schede:
- Sorgente — il nome, Carica SVG, le Dimensioni grafica e il testo SVG modificabile direttamente. Sotto compare l'esito del controllo di sicurezza: «Il disegno supera il controllo di sicurezza senza modifiche» oppure l'elenco degli elementi rimossi.
- Simboli (n) — tutti i simboli posizionati sul disegno, più Altri elementi per le forme native del disegno (vedere la sezione Simboli).
- Valori di prova — invio di valori di test all'anteprima (vedere la sezione Test, impostazioni ed esportazione).
- Impostazioni — descrizione, colori, adattamento, sfondo, CSS aggiuntivo e risorse immagine (vedere la sezione Test, impostazioni ed esportazione).
Controllo di sicurezza del codice SVG. Il server ripulisce ogni disegno al momento del salvataggio: script, gestori di eventi, link e immagini esterne vengono rimossi, mentre le animazioni sono limitate ad attributi sicuri. La dimensione massima consentita per un disegno è 2 MB. Tutte le modifiche applicate dal filtro di sicurezza vengono elencate sotto il codice sorgente.
Salvataggio. Nessuna modifica viene trasferita alle app finché non si fa clic su Salva. Se un'associazione o un'azione risulta incompleta (un simbolo senza dispositivo, un selettore non corrispondente a nessun elemento), il salvataggio viene bloccato e l'editor evidenzia la riga interessata indicando il motivo.
Simboli
I simboli consentono di comporre una grafica rapidamente: ciascuno include le associazioni e le azioni necessarie, per cui è sufficiente posizionare una lampada e selezionare il punto luce per renderla operativa.
La libreria. Fare clic su Inserisci simbolo. Gli elementi sono raggruppati per categoria con una casella di ricerca.
| Categoria | Simbolo | Visualizzazione e comportamento |
|---|---|---|
| Illuminazione | Lampada | La lampadina si illumina ed emette un bagliore quando la luce è accesa; il tocco ne commuta lo stato |
| Climatizzazione | Radiatore | Radiatore con indicazione della temperatura; il tocco apre il locale |
| Climatizzazione | Ventilatore | Ruota quando è in funzione; il tocco ne commuta lo stato |
| Serramenti | Tapparella | Finestra con telo che segue la posizione della tapparella |
| Centrale termica | Pompa | Verde e in rotazione quando è attiva; il tocco ne commuta lo stato dopo richiesta di conferma |
| Centrale termica | Valvola | Valvola a due vie con evidenziazione del lato aperto; il tocco ne commuta lo stato |
| Centrale termica | Serbatoio | Serbatoio con livello di riempimento e percentuale corrispondente |
| Energia | Pannello solare | Impianto fotovoltaico con indicazione della potenza prodotta |
| Energia | Batteria | Batteria con livello di riempimento proporzionale allo stato di carica |
| Energia | Rete elettrica | Connessione di rete, verde in fase di immissione, con indicazione della potenza |
| Energia | Stazione di ricarica EV | Veicolo che si illumina durante la carica, con potenza di ricarica |
| Etichette e linee | Linea di flusso | Freccia tratteggiata i cui trattini scorrono con il passaggio di potenza, più veloci all'aumentare della potenza e a ritroso se il segno si inverte |
| Etichette e linee | Valore analogico | Badge che mostra qualsiasi lettura con unità di misura; il tocco apre il dispositivo |
| Etichette e linee | Testo | Etichetta di testo libera; scalabile e ruotabile come qualsiasi simbolo |
| Etichette e linee | Indicatore di stato | Punto colorato con testo di stato per ingressi digitali — aperto / chiuso, acceso / spento |
| Navigazione | Hotspot, Hotspot (largo) | Area sensibile al tocco trasparente da sovrapporre a un locale in planimetria; apre un locale, una categoria, una vista o un dispositivo. Visibile solo nell'editor |
| I miei simboli | personalizzati | Icone caricate dall'utente (vedere sotto) |
Hotspot. Un Hotspot è un simbolo privo di grafica propria: un rettangolo trasparente la cui intera area risponde al tocco. Posizionandone uno su ciascun locale di una planimetria, se ne regolano le dimensioni con il punto d'angolo per poi assegnare l'azione desiderata (Apri locale è preimpostata). Durante la composizione viene mostrato con una tinta blu per facilitarne l'individuazione; gli utenti finali non lo visualizzano.
Posizionamento e spostamento. La selezione di un simbolo lo inserisce al centro del disegno, attiva la modalità Sposta nell'anteprima e apre il pannello del simbolo. È possibile trascinarlo nella posizione corretta, ridimensionarlo agendo sul punto arancione o digitarne i valori in Posizionamento: X, Y, Scala e Rotazione. Adatta all'area di disegno scala e centra il simbolo per coprire l'intera grafica (ideale per loghi singoli). Un rettangolo tratteggiato delimita i bordi dell'area di disegno durante lo spostamento: gli elementi esterni al perimetro vengono ritagliati nelle app.
Il pannello del simbolo. In alto, il campo Dispositivo collega con un'unica selezione tutte le associazioni e le azioni del simbolo a un solo dispositivo; per la maggior parte dei simboli è l'unico parametro richiesto. Sotto il posizionamento, tre schede secondarie elencano Associazioni, Azioni e Animazioni del simbolo, tutte modificabili come descritto di seguito. Rimuovi simbolo elimina l'elemento insieme a tutte le relative righe di configurazione.
Testo. Il simbolo Testo mostra la stringa digitata nel campo Testo. Può essere ridimensionato tramite la scala e modificato nel colore o nella visibilità come qualsiasi altra forma.
Altri elementi. Le forme native del file SVG sono elencate in Altri elementi in base al rispettivo ID (una forma priva di ID non può essere associata). È possibile assegnare gli ID direttamente nella scheda Sorgente oppure selezionare gli elementi con Seleziona elemento per aggiungere associazioni e azioni. Le righe con selettori basati su classi o percorsi anziché su ID sono raggruppate in Righe su altri selettori.
I miei simboli. Nella categoria I miei simboli, la funzione Carica simbolo permette di aggiungere icone SVG personalizzate (telecamere, loghi, apparecchiature non presenti nella libreria):
| Campo | Descrizione |
|---|---|
| File SVG | L'icona, con peso massimo di 256 KB. Viene sottoposta al medesimo controllo di sicurezza dei disegni |
| Nome | Nome visualizzato nella libreria |
| Colori | Monocromatico ricolora l'icona con il colore del testo della grafica, consentendo a un'associazione di variarlo (es. verde/rosso). Mantieni colori preserva la grafica originale consentendo solo mostra/nascondi |
| Parole chiave | Termini di ricerca per individuare il simbolo |
Un simbolo personalizzato non include righe preconfigurate: associazioni e azioni vanno aggiunte manualmente dopo il posizionamento. Ciascuna grafica che lo utilizza ne conserva una copia locale autonoma; rinominare o eliminare il simbolo dalla libreria non altera le grafiche esistenti.
Associazioni
Un'associazione modifica una forma al variare di un valore. Aprire un simbolo (o un elemento in Altri elementi), quindi la scheda secondaria Associazioni. Ogni riga si articola in quattro sezioni:
Selettore — la forma controllata dall'associazione. Per i simboli della libreria è precompilato (#lamp_1 .body); per forme disegnate a mano corrisponde all'ID della forma.
Sorgente — l'origine del valore:
| Sorgente | Campi |
|---|---|
| Dispositivo | Un dispositivo e uno dei suoi oggetti: stato di commutazione, potenza del contatore, valore del sensore |
| Funzione | Una funzione del motore logico e una delle sue uscite (vedere «Configurazione funzioni e uscite») |
| Costante | Un valore fisso digitato manualmente — utile per testare regole o forzare uno stato |
Tipo di modifica — l'effetto applicato alla forma dal valore:
| Tipo | Effetto | Campi aggiuntivi |
|---|---|---|
| Attributo | Imposta un attributo SVG (fill, stroke, opacity, width…) | nome dell'attributo |
| Stile | Imposta una proprietà CSS | nome della proprietà |
| Testo | Sostituisce il testo della forma con il valore | cifre decimali, unità e modello come {value} {unit} |
| Classe | Aggiunge una classe quando il valore è attivo/on, la rimuove altrimenti | nome della classe — da abbinare a CSS aggiuntivo |
| Visibilità | Mostra la forma quando il valore è attivo/on, la nasconde altrimenti | — |
| Trasformazione | Ruota, sposta o scala la forma in base al valore | operazione di trasformazione |
| Animazione | Controlla una riga di animazione (vedere Animazioni): esegui quando attivo, velocità (dur) o direzione per segno | animazione e modalità |
| Simbolo (href) | Sostituisce la forma con un altro #symbol presente nel disegno | — |
Mappatura — modalità di conversione del valore per la forma:
| Mappatura | Funzionamento | Esempio |
|---|---|---|
| Diretta | Il valore viene utilizzato senza modifiche | una temperatura inserita in un Testo |
| On / off | Un risultato quando on, un altro quando off | #facc15 quando on, #64748b quando off, per una lampada |
| Intervallo | Scala un intervallo di valori in ingresso su uno in uscita; Limita all'intervallo blocca agli estremi, Valore assoluto ignora il segno | 0–100% convertito in spostamento del telo da −28 a 0 |
| Soglie | A scaglioni: fino a un valore produce un risultato, poi il successivo, infine la condizione altrimenti | fino a 15 rosso, fino a 30 arancione, altrimenti verde |
| Tabella | Tabella di valori esatti, con clausola altrimenti per qualsiasi altro valore | 1 → Aperto, 0 → Chiuso, per uno stato |
💡 Suggerimento: Le righe dei simboli standard offrono esempi pratici immediati: inserendo un Indicatore di stato è possibile esaminarne le tre associazioni: riempimento del punto (On / off), alone (On / off) e testo di stato (Tabella). Modificando le due parole nella Tabella si possono impostare «Aperto» e «Chiuso», oppure «Inserito» e «Disinserito».
Azioni
Un'azione esegue un comando al tocco di una forma. Aprire la scheda secondaria Azioni di un simbolo o aggiungerne una a una forma disegnata a mano.
| Campo | Opzioni |
|---|---|
| Selettore | La forma che riceve l'interazione touch — solitamente l'intero simbolo |
| Gesto | Tocco, Doppio tocco, Pressione prolungata |
| Esegue | Imposta valore dispositivo (con il Valore da inviare) · Commuta dispositivo · Incrementa/decrementa valore · Apri locale del dispositivo · Apri dettaglio dispositivo (la pagina aperta dal riquadro) · Esegui scenario · Esegui automazione · Comando globale (luci o tapparelle, per l'intero edificio, un locale o una categoria) · Vai a una vista · Vai a un locale · Vai a una categoria |
| Richiedi conferma | Messaggio visualizzato prima dell'esecuzione dell'azione, ad esempio Avviare la pompa?. Se lasciato vuoto, l'azione viene eseguita immediatamente |
La stessa forma può gestire più azioni associate a gesti diversi: nell'esempio Stazione di pompaggio, una pompa commuta stato al tocco (previa conferma) e apre la scheda del dispositivo con una pressione prolungata.
📘 Nota: I comandi ai dispositivi, gli scenari e le automazioni vengono eseguiti sul server, a prescindere dall'app utilizzata. Le azioni Apri locale del dispositivo, Apri dettaglio dispositivo, Comando globale, Vai a una vista, Vai a un locale e Vai a una categoria hanno effetto solo all'interno dell'app in uso; l'anteprima di amministrazione ne registra la chiamata senza eseguirla.
📘 Nota: Gli utenti possono eseguire solo le azioni permesse dal rispettivo account. Un simbolo associato a un dispositivo esterno ai locali o alle categorie autorizzati per un utente si comporta come un disegno statico; i comandi globali sull'intero edificio sono riservati agli amministratori.
Animazioni
Una riga di animazione assegna un movimento continuo a una forma (rotore in funzione, tratteggio in scorrimento lungo una linea, lampada lampeggiante) che le associazioni possono avviare, arrestare, accelerare o invertire.
| Campo | Descrizione |
|---|---|
| Destinazione | La forma sottoposta ad animazione (#pump_1 .rotor) |
| Attributo | Parametro animato: transform per i movimenti, o un attributo come stroke-dashoffset o opacity |
| Trasformazione | Per transform: rotate, scale, translate, skewX, skewY — le rotazioni avvengono attorno al centro del simbolo |
| Da, A | Valori di inizio e fine corsa |
| Durata | Durata di un singolo ciclo, ad esempio 1s |
| Ripetizione | Numero di cicli oppure indefinite |
| Inizio | indefinite se avviata da associazione, load per l'avvio immediato all'apertura, o elenco SMIL come pump1.click; spin.end+1s |
| Fine, Fill | Condizione di arresto SMIL standard e stato finale della forma al termine dell'animazione |
Per collegare un'animazione allo stato dell'installazione, aggiungere un'associazione con Tipo di modifica impostato su Animazione: esegui quando attivo avvia e arresta il movimento in base allo stato, velocità (dur) ne regola il ciclo da un valore (mappatura Intervallo da watt a secondi), direzione per segno ne inverte lo scorrimento con valori negativi — la Linea di flusso sfrutta contemporaneamente queste tre opzioni.
Test, impostazioni ed esportazione
Valori di prova. La scheda propone un campo di inserimento per ogni valore associato, consentendo di digitare una lettura e verificare la reattività dell'anteprima. Attivando Valori in tempo reale, l'anteprima riceve i valori effettivi rilevati dall'installazione. L'opzione Testa azioni (che richiede Valori in tempo reale) fa sì che i clic nell'anteprima eseguano le relative azioni direttamente sul server (commutazione carichi, esecuzione scenari e automazioni), permettendo di validare la grafica prima della messa a disposizione degli utenti. Le azioni interne all'app (apertura locali, comandi globali, passaggio tra viste) vengono segnalate a video senza essere eseguite.
Impostazioni.
| Impostazione | Descrizione |
|---|---|
| Descrizione | Nota descrittiva visualizzata nell'elenco |
| Colori | Segui il tema dell'app — simboli ed etichette ereditano il colore del testo dell'app; Disegno chiaro — tratti scuri indipendentemente dal tema, per immagini di sfondo bianche; Disegno scuro — tratti chiari indipendentemente dal tema |
| Adattamento | Modalità di riempimento della scheda: contain mostra il disegno per intero, cover riempie la scheda ritagliando le parti eccedenti |
| Sfondo | Colore posizionato dietro al disegno, oppure transparent |
| Altezza min. (px) | Altezza minima garantita per la scheda |
| CSS aggiuntivo | Foglio di stile applicato al disegno — classi per associazioni di tipo Classe, keyframe, transizioni |
| Risorse immagine | File immagine di riferimento per il disegno (PNG, JPEG, WebP). Carica immagine ne aggiunge una; Usa come sfondo la imposta come sfondo ridimensionando la grafica sulle sue coordinate. Un'immagine in uso è contrassegnata come in uso e non può essere eliminata; sostituendo lo sfondo, l'editor propone l'eliminazione del file precedente |
Esportazione e importazione. Il comando Esporta scarica la grafica come pacchetto bundle: disegno, righe di configurazione, impostazioni e immagini in un unico file. Importa bundle nella pagina Grafica consente di ripristinare o creare una grafica da tale file. I riferimenti a dispositivi, funzioni, scenari e viste vengono associati per nome; i riferimenti non trovati vengono rimossi e il resoconto di importazione ne segnala la quantità. Questo meccanismo gestisce il trasferimento degli esempi e la migrazione di grafiche tra impianti diversi.
Backup. Le grafiche e i simboli personalizzati risiedono nel database del server, rientrando a tutti gli effetti nel backup di sistema (vedere «Backup e ripristino»). I file immagine a cui la grafica fa riferimento sono memorizzati sul filesystem e non sono inclusi nel backup del database: esportare la grafica in formato bundle per conservare disegno e immagini insieme.