Riferimento Widget

Le board IronFlock sono costruite con widget. Ogni tipo di widget serve a uno scopo specifico — dalla visualizzazione di dati in tempo reale all’acquisizione di input utente. Aggiungi qualsiasi widget trascinandolo dal pannello widget sul canvas della tua board, quindi configuralo tramite il pannello impostazioni.

I widget si suddividono in quattro gruppi: Visualizzazione dei Dati per grafici e display di stato, Contenuti e Media per contenuti statici e multimediali, Input e Controllo per acquisire input e inviare comandi, e Navigazione per spostarsi tra le pagine della board.

Visualizzazione dei Dati

Widget che trasformano dati in tempo reale e storici in grafici, indicatori e display di stato.

Grafico Cartesiano

Visualizza dati time-series o categoriali come grafici a linee, a barre o una combinazione. Supporta più serie di dati sullo stesso grafico.

Quando usarlo: Monitorare valori di sensori nel tempo, confrontare più segnali affiancati, mostrare totali giornalieri come barre.

Cosa configuri:

• Una o più serie di dati, ciascuna puntando a una colonna dati della tua app
• Tipo di grafico per serie: linea, barra o bolla
• Tipo di asse X: basato sul tempo o categoriale
• Etichetta asse Y e finestra temporale (es. ultimi 5 minuti aggregati per minuto)
• Colori per serie

Indicatore

Un indicatore radiale che mostra un singolo valore in tempo reale con zone di soglia colorate.

Quando usarlo: Temperatura, pressione, livello di riempimento, o qualsiasi valore per cui vuoi uno stato a colpo d’occhio con zone verde/giallo/rosso.

Cosa configuri:

• La colonna dati da leggere (mostra sempre il valore più recente)
• Unità e precisione decimale
• Limiti delle zone colorate (es. sicuro: 0–60, attenzione: 60–80, critico: 80–120)
• Opzionale: media degli ultimi N valori per smussare il rumore

Visualizzazione Valore

Mostra uno o più valori singoli con etichette e unità. Pulito e minimale — ottimo per i riquadri KPI.

Quando usarlo: Visualizzare temperatura corrente, uptime, ultimo evento, o qualsiasi metrica chiave come numero.

Cosa configuri:

• Una o più colonne dati, ciascuna con un’etichetta e un’unità
• Precisione decimale
• Colori del testo per valore

Segnale

Indicatori di stato compatti — cerchi o quadrati — che cambiano colore in base al valore corrente, offrendo una panoramica dello stato a colpo d’occhio.

Quando usarlo: Board online/offline dei dispositivi, stati OK/attenzione/errore su molti asset, spie di stato basate su soglie.

Cosa configuri:

• Uno o più segnali, ciascuno che legge una colonna dati
• Regole di mappatura colori per segnale: corrispondenze esatte (es. ONLINE) o confronti numerici (es. >=70)
• Layout (orizzontale o verticale) e forma (cerchio o quadrato)
• Titolo e sottotitolo opzionali

Grafico a Ciambella

Un grafico circolare che mostra segmenti proporzionali.

Quando usarlo: Mostrare distribuzioni — es. dispositivi online vs offline, quota di produzione per tipo di prodotto.

Cosa configuri:

• Segmenti, ciascuno con un’etichetta, colore e colonna dati (o valore fisso)
• Dimensione del ritaglio (controlla il diametro del foro interno)

Tabella

Visualizza righe di dati in formato tabulare con colonne configurabili.

Quando usarlo: Mostrare un elenco di macchine, eventi recenti, registri di ispezione, o qualsiasi dataset strutturato.

Cosa configuri:

• Colonne, ciascuna con un’intestazione, colonna dati e tipo di visualizzazione
• Altezza delle righe e dimensione del font dell’intestazione
• Numero di righe da visualizzare

Tipi di visualizzazione delle colonne: testo normale, numero, stato (mappa valori su colori), booleano, immagine o pulsante (link cliccabile).

Heatmap

Una heatmap a griglia per visualizzare l’intensità su due dimensioni.

Quando usarlo: Consumo energetico per ora e giorno della settimana, utilizzo delle macchine per turno, pattern di anomalie nel tempo.

Cosa configuri:

• Colonne asse X (es. ora del giorno) e asse Y (es. giorno della settimana)
• La colonna valore per l’intensità del calore
• Scala min/max e se usare un gradiente di colore continuo o a gradini

Cronologia degli Stati

Una timeline orizzontale che mostra quando gli stati sono cambiati nel tempo, una riga per asset.

Quando usarlo: Cronologia dello stato delle macchine (in funzione / fermata / manutenzione), log dei turni, timeline degli eventi.

Cosa configuri:

• Nomi degli stati e i loro colori (es. In funzione = verde, Guasto = rosso)
• Le colonne dati per timestamp, valore dello stato e nome dell’asset

Mappa

Visualizza dati geografici su una mappa interattiva. Supporta marcatori circolari e linee di tracciamento.

Quando usarlo: Mostrare posizioni dei dispositivi, tracciamento veicoli, posizioni di asset sul campo.

Cosa configuri:

• Stile mappa (chiaro o scuro)
• Una o più serie: cerchi (marcatori di posizione più recente) o linee (tracce di movimento)
• Le colonne dati per latitudine e longitudine
• Una colonna pivot per suddividere i dati per dispositivo o asset

SCADA

Renderizza simboli SVG industriali interattivi — pompe, valvole, serbatoi, motori, tubazioni, indicatori — dalla libreria SCADA di ThingsBoard, con associazioni di dati in tempo reale e colorazione basata sullo stato.

Quando usarlo: Diagrammi di processo e mimici di impianto — mostrare lo stato in tempo reale di pompe, valvole, serbatoi e flussi su uno schema.

Cosa configuri:

• Il tipo di simbolo da visualizzare
• Associazioni di dati che guidano lo stato del simbolo (in funzione/fermo, aperto/chiuso, livelli del fluido)
• Colori di stato (in funzione, fermo, attenzione, critico) e altri stili per simbolo

Per costruire schermate di processo complete, vedi SCADA.

Contenuti e Media

Widget per contenuti statici e multimediali — immagini, testo formattato e pagine web incorporate.

Immagine

Visualizza un’immagine statica da un URL. Utile per loghi, diagrammi o grafiche istruttive.

Sovrapposizione Immagine

Posiziona valori di dati in tempo reale sopra un’immagine di sfondo — ottimo per planimetrie, diagrammi o schemi.

Quando usarlo: Sovrapporre temperature su una planimetria di una fabbrica, mostrare livelli di riempimento su un diagramma di un serbatoio.

Cosa configuri:

• URL dell’immagine di sfondo
• Pin di sovrapposizione: barre di avanzamento o etichette di testo posizionate a coordinate relative sull’immagine
• Colonna dati per ogni pin (valore in tempo reale o fisso)

Markdown

Renderizza Markdown (CommonMark e GitHub Flavored Markdown) con blocchi di codice con evidenziazione della sintassi e interpolazione di variabili in tempo reale.

Quando usarlo: Pannelli di documentazione, istruzioni o note dinamiche che combinano testo formattato con valori di dati in tempo reale.

Cosa configuri:

• Il testo sorgente Markdown
• Variabili referenziate nel testo tramite {{variableName}}, ciascuna associata a una colonna dati o a un valore fisso

Etichetta

Visualizza una singola etichetta di testo configurabile con pieno controllo su tipografia e allineamento.

Quando usarlo: Titoli di sezione, didascalie, annotazioni statiche o un singolo valore dinamico visualizzato come testo.

Cosa configuri:

• Il testo da visualizzare (le interruzioni di riga vengono preservate)
• Dimensione del font, colore, peso e stile
• Allineamento orizzontale e verticale, e colore di sfondo

Incorpora

Incorpora contenuti web esterni in un iframe isolato — una singola pagina, o più disposte in una griglia responsive.

Quando usarlo: Integrare dashboard di terze parti, documentazione, strumenti esterni o qualsiasi pagina accessibile via web all’interno di una board.

Cosa configuri:

• L’URL da incorporare (il sito di destinazione deve consentire l’incorporamento in iframe)
• Un titolo opzionale mostrato sopra il contenuto
• Modalità multi-incorpora: più URL disposte in una griglia, con un gap configurabile

Input e Controllo

Widget che acquisiscono input utente o inviano comandi e filtri alla piattaforma.

Modulo

Un modulo di inserimento dati configurabile che scrive l’input utente nel backend dati della tua app.

Quando usarlo: Acquisizione manuale dei dati — registri di ispezione, log di manutenzione, input operatore, setpoint dei parametri.

Cosa configuri:

• Campi del modulo di vari tipi: testo, numero, checkbox, area di testo, menu a discesa, data/ora
• Opzioni per campo: etichetta, obbligatorio, valore predefinito, validazione, min/max e colonna dati di destinazione
• Titolo, sottotitolo opzionali e se il modulo si apre in una finestra di dialogo

Interruttore

Uno o più interruttori a levetta Material Design che riflettono un valore in tempo reale e attivano un’azione del dispositivo quando vengono commutati.

Quando usarlo: Accendere/spegnere apparecchiature, attivare/disattivare impostazioni binarie del dispositivo, inviare comandi di controllo dalla dashboard.

Cosa configuri:

• Uno o più interruttori, ciascuno che legge una colonna dati
• Mappatura degli stati per ON/OFF: valori esatti o confronti numerici (es. >50)
• L’app, il dispositivo e l’argomento dell’azione di destinazione invocati al momento della commutazione
• Etichetta e colori dei valori per interruttore

Filtro a Discesa

Un menu a discesa di opzioni predefinite che pubblica il valore selezionato come parametro di filtro che altri widget possono utilizzare.

Quando usarlo: Permettere agli utenti di filtrare un’intera board per tipo di dispositivo, linea, posizione o qualsiasi categoria.

Cosa configuri:

• L’etichetta mostrata sopra il menu a discesa
• La chiave del parametro a cui altri widget fanno riferimento nelle loro query di dati
• L’elenco delle opzioni, ciascuna con un’etichetta e un valore

Filtro Calendario

Un selettore di intervallo data/ora — data singola o intervallo — che memorizza i timestamp selezionati come parametri di filtro per altri widget.

Quando usarlo: Dashboard time-series, analisi storica e report con una finestra temporale selezionabile dall’utente.

Cosa configuri:

• Le chiavi dei parametri di inizio e fine (usa uno per la modalità data singola, entrambi per un intervallo)
• Il numero di mesi mostrati contemporaneamente (1–3)
• L’etichetta dell’input

Navigazione

Widget per spostarsi tra le pagine e le sezioni di una board multipagina.

Barra di Navigazione

Una barra di navigazione superiore orizzontale con un titolo o brand cliccabile e più elementi con routing.

Quando usarlo: Navigazione di primo livello tra le pagine di una board multipagina.

Cosa configuri:

• Il testo del titolo/brand e il suo route di destinazione
• Elementi di navigazione, ciascuno con un’etichetta, icona Material e route
• Dimensione del font, peso e colori
• Segmenti di route dinamici tramite sostituzione {{variable}}

Pulsante di Navigazione

Un singolo pulsante cliccabile che indirizza a un’altra pagina o esegue la navigazione indietro del browser.

Quando usarlo: Pulsanti indietro, link call-to-action o salto a una vista specifica della board.

Cosa configuri:

• L’etichetta del pulsante e un’icona Material opzionale
• Il route di destinazione (lasciare vuoto per la navigazione indietro automatica)
• Dimensione del font e colori
• Segmenti di route dinamici tramite sostituzione {{variable}}

Navigazione Laterale

Un menu laterale verticale con icone Material e evidenziazione basata sul route dell’elemento attivo.

Quando usarlo: Navigazione laterale persistente per dashboard con più sezioni o viste.

Cosa configuri:

• Un titolo con un route opzionale
• Elementi di navigazione, ciascuno con un’etichetta, icona Material e route
• Evidenziazione dell’elemento attivo basata sul route corrente
• Dimensione del font, peso e colori