Stile e Temi

Ogni board in IronFlock ha un aspetto predefinito, ma hai il pieno controllo sulla sua apparenza. Le impostazioni di stile del dashboard ti permettono di applicare un tema, regolare il layout della griglia e controllare l’aspetto dei widget — tutto da un unico pannello di impostazioni. Per i singoli widget che necessitano di un aspetto diverso, puoi sovrascrivere lo stile globale direttamente nell’editor del widget.

Temi

Un tema imposta il tono visivo generale del board con un solo clic. IronFlock include una serie di temi predefiniti — ognuno definisce una palette coordinata di colori, sfondi e valori di stile predefiniti applicati all’intero dashboard.

Per applicare un tema:

1. Apri il pannello Board Settings (icona a forma di ingranaggio nella barra degli strumenti superiore).
2. Vai alla sezione Theme.
3. Scegli un tema dall’elenco.

Tutti i widget, gli sfondi e i colori del testo si aggiornano immediatamente per corrispondere al tema selezionato.

I temi sono un punto di partenza — non una scelta definitiva. Dopo aver scelto un tema, puoi sovrascrivere qualsiasi impostazione individuale (colori, bordi, sfondi) e tali sostituzioni avranno priorità sui valori predefiniti del tema.

Layout

Il canvas del board ha diverse proprietà di layout che controllano il posizionamento dei widget, il comportamento del canvas a diverse dimensioni dello schermo e se il board scorre o si ridimensiona. Queste proprietà lavorano insieme per definire il comportamento spaziale del dashboard.

Aggancio alla Griglia (Grid Snap)

Quando Grid Snap è abilitato, i widget si agganciano alla cella della griglia più vicina quando vengono posizionati o spostati. La griglia divide il canvas in una matrice di righe e colonne — i widget si allineano sempre ai bordi delle celle, mantenendo il layout strutturato e ordinato.

Quando Grid Snap è disabilitato, i widget possono essere posizionati liberamente ovunque sul canvas con precisione al pixel. Questa è la modalità da usare per i layout in stile SCADA dove i simboli devono essere posizionati con esattezza per corrispondere a un diagramma di processo, una planimetria o uno schema di attrezzature.

Proprietà di Grid Snap:

• Columns — Il numero di divisioni verticali sul canvas. Un numero maggiore di colonne offre un posizionamento orizzontale più preciso. Un numero minore aggancia i widget a posizioni più ampie.
• Rows — Il numero di divisioni orizzontali. Più righe significa un controllo verticale più preciso; meno righe significa un aggancio verticale più grossolano.

Suggerimento: Per i board SCADA con Grid Snap, configura un numero elevato di righe e colonne (ad es. 48×32 o più) per ottenere un controllo preciso sul posizionamento dei simboli beneficiando comunque dell’allineamento alla griglia.

Overflow X / Overflow Y

Queste proprietà controllano se il canvas si estende oltre il viewport visibile.

• Overflow X — Quando abilitato, il canvas può estendersi oltre il bordo destro dello schermo. Appare una barra di scorrimento orizzontale per consentire agli utenti di scorrere verso i contenuti posizionati fuori dalla larghezza iniziale del viewport. I widget non si ridimensionano orizzontalmente quando lo schermo viene ridimensionato.
• Overflow Y — Quando abilitato, il canvas può estendersi oltre il bordo inferiore dello schermo. Appare una barra di scorrimento verticale per i contenuti posizionati sotto l’altezza iniziale del viewport. I widget non si ridimensionano verticalmente quando lo schermo viene ridimensionato.

L’overflow funziona sia con Grid Snap attivo che disattivo. Quando l’overflow è attivo in una direzione, il layout diventa non reattivo in quella direzione — i widget mantengono le loro dimensioni invece di allungarsi o restringersi con la finestra. Questo è utile per grandi diagrammi SCADA, flussi di processo estesi o schemi di attrezzature verticali dove il layout completo non deve essere compresso per adattarsi alla finestra.

Quando entrambi gli overflow sono disabilitati, i widget sono vincolati all’area visibile e si ridimensionano in modo reattivo con lo schermo.

Adatta alla Schermata (Scale to Fit)

Scale to Fit fa sì che l’intero board si ridimensioni proporzionalmente per riempire lo spazio disponibile sullo schermo. Definisci un rapporto d’aspetto fisso per il canvas e il board si ridimensiona verso l’alto o verso il basso per adattarsi alla finestra del browser mantenendo quel rapporto.

Proprietà di Scale to Fit:

• Aspect Ratio — Il rapporto larghezza-altezza del canvas (ad es. 16:9, 4:3 o un valore personalizzato). Il board manterrà sempre questo rapporto indipendentemente dalle dimensioni effettive dello schermo. Appare spazio vuoto (letterboxing) ai lati o in alto/basso se il rapporto d’aspetto dello schermo non corrisponde.

Scale to Fit funziona sia con Grid Snap attivo che disattivo. È mutuamente esclusivo con Overflow — quando Scale to Fit è attivo, il canvas non scorre perché l’intero layout è sempre visibile.

Questa modalità è ideale per:

• Monitor di sale controllo — Il dashboard riempie qualsiasi monitor in modo pulito senza scorrimento o distorsione
• Schermi kiosk — Un layout fisso che si adatta automaticamente a diverse dimensioni dello schermo
• Dashboard di presentazione — Aspetto coerente su laptop, proiettori e schermi a parete

Dimensioni Fisse del Widget (Widget Fixed Size)

Ogni widget ha le proprietà opzionali Fixed Width e Fixed Height che possono essere attivate individualmente. Quando attivate, il widget non si ridimensionerà in quella direzione quando lo schermo viene ridimensionato — diventa non reattivo in quell’asse mentre il resto del layout del board rimane fluido.

Questo è utile quando certi elementi devono avere una dimensione stabile indipendentemente dalle dimensioni dello schermo. Ad esempio, una barra laterale di navigazione contenente etichette di testo dovrebbe mantenere una larghezza fissa affinché il testo rimanga leggibile, anche quando il resto del board si ridimensiona in modo reattivo.

Per impostare le dimensioni fisse su un widget:

1. Seleziona il widget sul canvas.
2. Apri il Widget Editor.
3. Abilita Fixed Width e/o Fixed Height.

Simboli SCADA e Dimensioni Fisse

Quando i simboli SCADA vengono inseriti in un board, ottengono sia Fixed Width che Fixed Height attivati per impostazione predefinita. Le icone evidenziate nella barra degli strumenti del widget indicano i vincoli di dimensioni fisse attivi:

I simboli SCADA rappresentano attrezzature fisiche ed elementi di processo — devono mantenere le loro proporzioni e posizioni relative per rappresentare accuratamente un layout del mondo reale. In una modalità Grid Snap reattiva, questo è possibile solo quando le dimensioni dei simboli sono fisse. Senza dimensioni fisse, il ridimensionamento reattivo distorcerebbe i simboli e li sposterebbe fuori allineamento.

Consulta le Opzioni di Layout del Board SCADA per una panoramica di come queste modalità di layout si applicano specificatamente ai dashboard SCADA.

Riepilogo delle Modalità di Layout

Per configurare le proprietà del layout:

1. Apri il pannello Board Settings.
2. Trova la sezione Layout.
3. Attiva/disattiva Grid Snap e imposta righe/colonne, oppure disabilitalo e configura Overflow o Scale to Fit con il rapporto d’aspetto desiderato.

Stile Globale dei Widget

Oltre al tema, puoi perfezionare l’aspetto di tutti i widget dalle impostazioni di stile del dashboard. Queste impostazioni si applicano globalmente — ogni widget sul board le eredita a meno che non vengano sovrascritte individualmente.

Cosa puoi personalizzare:

• Borders — Controlla la larghezza e il colore del bordo attorno ai widget. Impostali a zero per un aspetto senza bordi, o rendili evidenti per separare visivamente i widget.
• Corner rounding — Regola il raggio del bordo per passare da angoli rettangolari netti a card completamente arrotondate.
• Backgrounds — Imposta il colore di sfondo del widget o rendi i widget trasparenti per far trasparire lo sfondo del board.

Per impostare gli stili globali dei widget:

1. Apri il pannello Board Settings.
2. Vai alla sezione Style.
3. Regola le impostazioni di bordi, arrotondamento degli angoli e sfondo secondo necessità.

Queste modifiche si applicano immediatamente a tutti i widget del board.

Sovrascritture di Stile per Widget Singoli

A volte un singolo widget deve distinguersi — un indicatore di stato con uno sfondo colorato, una card di intestazione senza bordi, o un grafico con spazio extra. Invece di modificare lo stile globale, puoi sovrascriverlo per quel widget specifico.

Per sovrascrivere gli stili su un singolo widget:

1. Fai clic sul widget sul canvas per selezionarlo.
2. Apri il Widget Editor (il pannello delle impostazioni del widget).
3. Trova le impostazioni di stile o aspetto nell’editor del widget.
4. Regola bordi, arrotondamento degli angoli o sfondo solo per quel widget.

Le impostazioni per widget singolo hanno priorità sullo stile globale del dashboard. Se successivamente modifichi lo stile globale o cambi tema, i widget con sovrascritture mantengono il loro aspetto personalizzato.

Suggerimento: Usa gli stili globali per impostare una base coerente, poi usa le sovrascritture per widget singolo con parsimonia per gli elementi che necessitano di un trattamento speciale.

Mettere Tutto Insieme

Un tipico flusso di lavoro per lo stile è il seguente:

1. Scegli un tema che si adatti all’identità visiva del tuo progetto.
2. Regola la griglia se hai bisogno di un controllo più preciso sul posizionamento dei widget.
3. Imposta gli stili globali dei widget per bordi, angoli e sfondi per perfezionare il tema.
4. Sovrascrivi i singoli widget nell’editor del widget dove elementi specifici necessitano di un aspetto diverso.

Questo approccio a strati — tema → stili globali → sovrascritture per widget singolo — mantiene i tuoi board coerenti offrendo al contempo piena flessibilità dove conta.