Lingua:Italiano

Blog · Custom Web Controls

Le 10 migliori card KPI e indicatori di stato Custom Web Control per WinCC Unified e WinCC V8 (gratis)

A inizio novembre 2026 abbiamo aperto ogni card KPI, ogni contatore e ogni indicatore di stato Custom Web Control del catalogo HMIx, diciassette candidati, guardato ogni anteprima da vicino, letto ogni scheda prodotto e tenuto i dieci che metteremmo volentieri in una schermata di panoramica WinCC Unified o WinCC V8. Tutti gratis, tutti in un pacchetto CWC ZIP e ognuno il migliore in un lavoro diverso: dalla singola tile KPI alla colonna luminosa.

A cura del team HMIx12 min di letturaAggiornato
  • Custom Web Control
  • CWC
  • WinCC Unified
  • WinCC V8
  • TIA Portal
  • Card KPI
  • Indicatore di stato
  • Widget SCADA
Quattro Custom Web Control KPI e di stato del catalogo HMIx in griglia: una dashboard KPI scura per la logistica di una gru con tempi ciclo, sparkline e un grafico di distribuzione dei carichi, una tile KPI verde scuro con Pressure 1285 PSI in salita del 12,5 %, una panoramica di reparto con nove macchine e lampade di stato verdi, gialle e rosse e una timeline di stato con segmenti verdi, rossi e grigi
La formazione titolare: anteprime reali di quattro controlli di questo articolo, esattamente come le hanno pubblicate i loro autori. Noi ci siamo limitati a metterle una accanto all'altra.

Perché una card KPI Custom Web Control vale la pena

Ogni schermata di panoramica finisce per rispondere alle stesse poche domande. La linea sta girando? Quanto manca all'obiettivo? Quanti pezzi abbiamo scartato in questo turno? Quante ore ha fatto quel robot dall'ultima manutenzione? Un trend risponde a "come ci siamo arrivati"; una card KPI o un indicatore di stato risponde a "dove siamo adesso", con un numero o un colore, leggibile dall'altra parte della sala controllo.

Si può costruire tutto con rettangoli, campi I/O e un bel po' di dinamizzazioni, e quasi tutti lo abbiamo fatto. Una card KPI Custom Web Control (CWC) racchiude numero, unità, freccia di tendenza, limiti e colori di stato in un unico oggetto da trascinare nella schermata e collegare. Un CWC è una piccola applicazione web, HTML, CSS e JavaScript in un pacchetto ZIP, che WinCC Unified (TIA Portal) e WinCC V8 eseguono dentro la schermata. Le sue proprietà compaiono nell'elenco Interfaccia come tutte le altre, quindi una variabile come rejectCount o isActive lo pilota direttamente, e i suoi eventi, come Clicked, permettono ai tuoi script HMI di aprire un faceplate o una schermata di dettaglio.

Cosa rende una card KPI o un indicatore di stato degno di essere scaricato

Prima della lista, il metro di giudizio. Ecco cosa abbiamo cercato, più o meno in ordine di quanto ci dà fastidio quando manca:

  • Leggibile a tre metri. Un numero grande, un'unità chiara e un'etichetta a parole semplici. Se l'operatore deve avvicinarsi, la card ha fallito.
  • Colori che vogliono dire qualcosa. Verde, ambra e rosso legati a uno stato, a un limite o a una soglia, non alla decorazione. Un indicatore di stato sempre dello stesso colore è solo un adesivo.
  • Contesto dentro la card. Una freccia di tendenza, un setpoint, limiti di avviso e di allarme o un piccolo storico trasformano un numero in un'informazione.
  • Un'interfaccia pulita. Proprietà con nomi chiari nella scheda prodotto, così sai cosa piloterà ogni variabile, più un evento o due per l'approfondimento.
  • L'indicatore giusto per ogni lavoro. Una tile KPI, una dashboard KPI, un valore di processo con limiti, un contatore scarti, un contaore, una panoramica di reparto, una timeline di stato, una colonna luminosa, una card minimale e un LED: abbiamo scelto un campione per ogni lavoro.

Come li abbiamo scelti (e cosa non abbiamo fatto)

A inizio novembre 2026 abbiamo cercato nel catalogo HMIx tutti i Custom Web Control gratuiti costruiti per mostrare un valore o uno stato a colpo d'occhio: card e tile KPI, contatori, card di stato, luci di stato, LED e panoramiche di stato. Gauge, grafici a barre, trend e tabelle dati hanno già i loro articoli, quindi le tile con sparkline che abbiamo trattato insieme ai grafici di trend qui sono rimaste fuori. Per ogni candidato abbiamo guardato l'anteprima reale (non la copertina del catalogo con il titolone sopra) e letto la scheda prodotto per capire quali proprietà, eventi e metodi documenta. I download sono serviti solo per gli spareggi.

Due controlli sono finiti nelle menzioni d'onore, e due Motor Status Card sono stati scartati perché le loro gallerie mostrano solo l'icona del controllo, quindi non c'è niente da giudicare. Quando una galleria pubblicava una card piccola in mezzo a una tela enorme e vuota, per questo articolo abbiamo ritagliato lo sfondo vuoto, senza toccare il disegno. E un avvertimento onesto: abbiamo giudicato anteprime e documentazione; non abbiamo fatto girare questi controlli in un Runtime vero. Sono stati generati con l'IA e ogni pagina prodotto ricorda di provarli nel proprio progetto TIA Portal prima di andare in produzione.

Le 10 migliori card KPI e indicatori di stato Custom Web Control, uno per uno

Per ogni voce trovi l'anteprima reale, cosa ci è piaciuto, cosa tenere presente e le proprietà nominate nella sua scheda prodotto, seguite dalla miniatura del catalogo: fai clic per aprire la pagina del prodotto e scaricare il controllo gratis.

01Il migliore in assoluto: la classica tile KPI

KPI Indicator

KPI Indicator Custom Web Control: una tile verde scuro con una barra di accento ciano a sinistra, l'etichetta Pressure, il valore 1285 PSI in grandi cifre bianche e una freccia verso l'alto con 12.5 %
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Se potessimo tenerne uno solo, sarebbe questo. Una tile larga con una barra di accento colorata sul bordo sinistro, una piccola etichetta grigia («PRESSURE»), un valore bianco enorme («1285») con l'unità accanto («PSI») e, sotto, una freccia con una percentuale («▲ 12.5%»). È esattamente quello che dovrebbe essere una card KPI: un numero leggibile da un capo all'altro della sala e una riga di contesto. Con 9 download e una recensione a cinque stelle a novembre 2026, è anche uno dei controlli più popolari di questa lista.

La sua galleria mostra tre look dello stesso controllo: verde scuro con barra ciano, grigio scuro con barra gialla e freccia arancione in discesa, e blu notte senza nessuna riga di tendenza. È l'interfaccia al lavoro. label e unit danno un nome al valore, decimalPlaces imposta la risoluzione, trendValue e trendDirection pilotano la freccia, showTrend la nasconde, e accentColor, trendColor e backgroundColor portano i tuoi colori di stato. Un evento Clicked è pronto per l'approfondimento verso un faceplate o una schermata di trend.

Cosa ci piace

  • Valore enorme e leggibile con la sua unità: la tile KPI da manuale
  • Freccia di tendenza e percentuale che puoi disattivare
  • Colori di accento e di tendenza collegabili a uno stato

Da tenere presente

  • La sua scheda conta 10 proprietà e ne nomina nove: controlla l'elenco Interfaccia in TIA Portal per trovare quella che porta il valore
  • Un valore per tile: per una riga KPI completa, mettine diverse

Proprietà collegabili

  • label
  • unit
  • decimalPlaces
  • trendValue
  • trendDirection
  • showTrend
  • accentColor
  • trendColor
  • backgroundColor
KPI Indicator: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

KPI Indicator

Gratis · WinCC Unified & V8 · CWC (.zip)

02La migliore dashboard KPI completa (tempi ciclo e produttività)

Crane Logistics KPI

Crane Logistics KPI Custom Web Control: una dashboard scura intitolata Crane Logistics Monitor con un orologio, card per sollevamento in corso 00:45 e tempo tra carichi 02:12 con sparkline arancione e ciano, sollevamenti all'ora 24 con obiettivo 30, un grafico a barre della distribuzione per tipo di carico tra container, pallet, sacchi e coil, e ciclo medio 01:30 e durata di picco 03:45
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Per quando una card non basta. «CRANE LOGISTICS MONITOR» in arancione apre una dashboard completa con un orologio nell'angolo: «Current lifting» a 00:45 con una sparkline arancione, «Inter-load» a 02:12 con una ciano, «Lifts per hour» a 24 contro un obiettivo di 30, un grafico a barre orizzontali dei tipi di carico (container, pallet, sacchi e coil) e una colonna di statistiche di ciclo: media 01:30, picco 03:45 e minimo. È il controllo più scaricato di questo articolo, con 12 download e una recensione a cinque stelle a novembre 2026.

La sua scheda è insolitamente completa: 30 proprietà. liftingTimeSeconds e interLoadTimeSeconds alimentano le card live, il controllo tiene traccia di averageCycleSeconds, maxCycleSeconds e minCycleSeconds, liftingHistory disegna le sparkline e loadTypes la distribuzione. Ogni didascalia ha la sua proprietà, da labelLiftsPerHour a labelDistribution, e da accentColor1 ad accentColor3 si imposta la palette. Gli eventi CycleCompleted, ThresholdAlert e TargetReached, e i metodi exportLogisticsData e resetStatistics, completano il quadro.

Cosa ci piace

  • Sei KPI, due sparkline e un grafico a barre in un solo oggetto
  • Ogni etichetta si può rinominare, quindi si adatta anche oltre le gru
  • Eventi per allarmi e obiettivi, più esportazione e reset

Da tenere presente

  • Costruita attorno ai cicli di una gru: per altre macchine devi rinominare quasi tutto
  • Nell'anteprima la barra di avanzamento verso l'obiettivo di 30 non mostra alcun riempimento visibile, e la card in basso è tagliata

Proprietà collegabili

  • liftingTimeSeconds
  • interLoadTimeSeconds
  • averageCycleSeconds
  • maxCycleSeconds
  • minCycleSeconds
  • liftingHistory
  • loadTypes
  • labelLiftsPerHour
  • labelDistribution
  • accentColor1
  • accentColor2
  • accentColor3
  • backgroundColor
Crane Logistics KPI: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Crane Logistics KPI

Gratis · WinCC Unified & V8 · CWC (.zip)

03Il migliore per un valore di processo con setpoint e limiti di allarme

Process Status Indicator

Process Status Indicator Custom Web Control: una card scura per PT-104 Discharge Pressure con un campo da 0.0 a 100.0 bar, il valore 76.6 bar, un setpoint di 70.0 bar, una barra orizzontale arancione con un indicatore di setpoint e zone di avviso e allarme, e riquadri per limite inferiore 0.0, avviso alto 80.0 e allarme alto 90.0 bar
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Quello che ragiona come un ingegnere della strumentazione. L'intestazione riporta «PT-104 Discharge Pressure» con un badge del campo di misura («0.0 – 100.0 bar»). Sotto, il valore 76.6 bar in cifre grandi e, a destra, «Setpoint 70.0 bar» in arancione. Una barra orizzontale si riempie di arancione fino al valore, con un triangolo che segna il setpoint e zone ambra e rosse più scure alla fine della scala. Tre riquadri in basso esplicitano i limiti: limite inferiore 0.0 bar, avviso alto 80.0 bar in ambra e allarme alto 90.0 bar in rosso.

La sua scheda nomina nove delle sue 11 proprietà: tagId e descriptor identificano la misura, unit, minValue e maxValue definiscono la scala, warningThreshold e alarmThreshold fissano i limiti, decimalPlaces la risoluzione e backgroundColor il tema. L'evento AlarmTriggered scatta al superamento di un limite, e i metodi setValue e setSetpoint permettono a uno script di aggiornarlo. In breve, un mini faceplate per qualsiasi misura analogica, con lo scostamento dal setpoint visibile a colpo d'occhio.

Cosa ci piace

  • Valore, setpoint e limiti insieme, con tag e descrittore in stile ISA
  • Zone di avviso e di allarme disegnate sulla barra
  • Un evento di allarme che i tuoi script possono usare

Da tenere presente

  • Nell'anteprima un contorno blu tratteggiato incornicia la riga del valore e attraversa il testo «Setpoint 70.0 bar»
  • La scheda non nomina le proprietà per il valore e il setpoint (ci sono i metodi setValue e setSetpoint): controlla l'elenco Interfaccia prima di collegarlo

Proprietà collegabili

  • tagId
  • descriptor
  • unit
  • minValue
  • maxValue
  • warningThreshold
  • alarmThreshold
  • decimalPlaces
  • backgroundColor
Process Status Indicator: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Process Status Indicator

Gratis · WinCC Unified & V8 · CWC (.zip)

04Il migliore per contatori di scarti e pezzi rifiutati

Rejected Parts Counter

Rejected Parts Counter Custom Web Control: una card scura color ambra per la stazione REJ-MONITOR-04 con un badge PCS, 142 scarti cumulati, un chip con più 4 pezzi ogni 5 minuti e un trend di accumulo a gradini che sale da 124 a 142 tra le 18:33 e le 18:42
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Un contatore che racconta una storia. La card, in toni scuri e caldi con un accento ambra, nomina la sua stazione («REJ-MONITOR-04»), mostra un badge di unità «PCS», il conteggio cumulato degli scarti in grandi cifre ambra (142) e un piccolo chip con il ritmo recente («+4 pcs/5m»). Sotto, un grafico a gradini intitolato «Accumulation Trend (Step)» sale da 124 a 142 tra le 18:33 e le 18:42. Basta un'occhiata per sapere non solo quanti pezzi sono finiti negli scarti, ma anche se la situazione sta peggiorando.

La sua scheda conta 11 proprietà e ne nomina dieci. rejectCount è il valore principale e deltaRate l'incremento recente, stationTag identifica la stazione, maxHistoryPoints stabilisce la profondità del buffer del trend, metricLabel, unitText e chartCaption rinominano i testi, e accentColor, panelColor e backgroundColor impostano la palette. È alta e stretta, perfetta per la colonna laterale di una schermata di qualità o di fine linea.

Cosa ci piace

  • Conteggio, ritmo e storico in una sola card
  • Grafico a gradini adatto ai contatori (niente pendenze finte)
  • Ogni testo rinominabile per pezzi buoni, fermate o allarmi

Da tenere presente

  • Nell'anteprima il nome della stazione va a capo su due righe e la didascalia del grafico si sovrappone al valore in cima all'asse
  • Formato alto: serve una colonna, non una riga

Proprietà collegabili

  • rejectCount
  • deltaRate
  • stationTag
  • maxHistoryPoints
  • metricLabel
  • unitText
  • chartCaption
  • accentColor
  • panelColor
  • backgroundColor
Rejected Parts Counter: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Rejected Parts Counter

Gratis · WinCC Unified & V8 · CWC (.zip)

05Il migliore per ore di funzionamento e manutenzione

Machine Hour Counter Card

Machine Hour Counter Card Custom Web Control: una card bianca per l'apparecchiatura Robot CRX10 Fanuc con un'icona a forma di robot, ore accumulate 12477 h, il commento Check joint 3 lubrication e un pulsante Reset
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Per il team di manutenzione. Una card bianca e pulita nomina l'apparecchiatura («Robot CRX10 Fanuc») accanto a un'icona a forma di robot, mostra «Accumulated hours» in grandi cifre scure (12477 h) e, in basso, un commento di stato («Check joint 3 lubrication») accanto a un pulsante «Reset». È il contaore che stamperesti sulla macchina, con una nota per il turno successivo.

Secondo la sua scheda, le ore arrivano direttamente da un valore DINT del PLC, e isRunning accende un bagliore sfumato animato sul bordo della card mentre la macchina è in marcia. iconType sceglie il simbolo dell'apparecchiatura, resetButtonLabel rinomina il pulsante, che genera l'evento OnReset, darkMode passa da scuro a chiaro e backgroundColor si adatta alla tua schermata. Anche il metodo triggerReset permette a uno script di azzerarlo. Usalo nelle schermate di manutenzione preventiva per motori, pompe, compressori o robot.

Cosa ci piace

  • Contaore chiaro con nome dell'apparecchiatura e nota di manutenzione
  • Pulsante di reset con il suo evento, pronto per la tua logica PLC
  • Modalità scura e chiara

Da tenere presente

  • La scheda non dà il nome esatto delle proprietà per ore, titolo e commento: controlla l'elenco Interfaccia, e disattiva Sola lettura sulle variabili che il reset scrive
  • Il bagliore di isRunning non si vede nell'anteprima pubblicata

Proprietà collegabili

  • isRunning
  • iconType
  • resetButtonLabel
  • darkMode
  • backgroundColor
Machine Hour Counter Card: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Machine Hour Counter Card

Gratis · WinCC Unified & V8 · CWC (.zip)

06La migliore panoramica di reparto

Machine Status Grid

Machine Status Grid Custom Web Control: una Plant Floor Overview scura con nove tile, sei macchine come Extruder 01 e Robotic Arm 06 in marcia con lampade verdi, Pump Station 07 e Cooling Tower 08 in avviso con lampade gialle e Main Generator 09 fermo con una lampada rossa
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Tutto l'impianto in una schermata. Sotto il titolo «PLANT FLOOR OVERVIEW», una griglia tre per tre di tile, ognuna con una lampada lucida, un ID (da M01 a M09), un nome e uno stato: sei macchine da «Extruder 01» a «Robotic Arm 06» sono RUNNING in verde, «Pump Station 07» e «Cooling Tower 08» mostrano WARNING in giallo, e «Main Generator 09» è STOPPED in rosso. Ogni tile ha anche il bordo sinistro colorato, così quella fuori posto salta all'occhio anche su un videowall.

La sua scheda si concentra sul layout. Machine Count stabilisce quante tile vengono mostrate, Title Size, Element Size, Indicator Size e ID Label Size regolano tipografia e lampade, e Background Color lo adatta al tuo tema. È il tipo di controllo che metti nella schermata iniziale di una macchina OEM o di una linea, così l'operatore sa dove guardare prima di aprire qualsiasi altra cosa.

Cosa ci piace

  • Quadro immediato rosso-giallo-verde di un'intera linea
  • Numero di macchine e dimensioni regolabili
  • Design scuro, sobrio e ad alto contrasto

Da tenere presente

  • La scheda nomina solo proprietà di layout: non descrive come si alimentano nome e stato di ogni macchina, quindi leggi la documentazione inclusa prima di pianificare le variabili
  • Nell'anteprima il testo è piccolo e gran parte di ogni tile è spazio vuoto

Proprietà collegabili

  • Machine Count
  • Title Size
  • Element Size
  • Indicator Size
  • ID Label Size
  • Background Color
Machine Status Grid: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Machine Status Grid

Gratis · WinCC Unified & V8 · CWC (.zip)

07Il migliore per lo storico degli stati (timeline di disponibilità)

Status Bar

Status Bar Custom Web Control: una Process State Timeline scura con orologio, una finestra di 45 minuti e 4 eventi, il testo State 1 active for 01:36 e un'ampia timeline di segmenti verdi, rossi, grigi e verdi con una legenda per marcia, allarme o arresto, inattivo o manuale e sconosciuto
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Un indicatore di stato con la memoria. Intitolato «Status Bar – Process State Timeline», mostra nell'intestazione un orologio, una finestra di 45 minuti e un conteggio degli eventi, un chip con «State 1 – Active for 01:36» e, sotto, un'ampia timeline di blocchi colorati: verde, un lungo tratto rosso, grigio e di nuovo verde, ciascuno con la sua durata. Una legenda spiega i colori: State 1 marcia/OK, State 2 allarme/arresto, State 3 inattivo/manuale e Unknown.

Secondo la sua scheda, aggiunge un nuovo segmento ogni volta che cambia la proprietà status, mantiene una finestra mobile impostata da maxHistoryMinutes e fa crescere in modo fluido il segmento attivo a ogni updateInterval. showTooltips mostra al passaggio del mouse inizio, fine e durata di ogni blocco, da state1Label a unknownStateLabel si rinominano gli stati, barHeight e borderRadius ne definiscono la forma e backgroundColor si adatta al tuo tema. OnStatusChanged e OnHistoryCleared parlano con i tuoi script, e resetHistory ed exportHistoryJson gestiscono la registrazione.

Cosa ci piace

  • Mostra quanto tempo la macchina è rimasta in ogni stato, non solo quello attuale
  • Tooltip al passaggio del mouse con inizio, fine e durata
  • Esportazione JSON dello storico per i report

Da tenere presente

  • La sua scheda descrive una timeline costruita dai cambi che riceve in una finestra mobile; non parla di lettura dell'archivio di WinCC
  • Nell'anteprima le etichette di durata dentro i segmenti sono minuscole

Proprietà collegabili

  • status
  • maxHistoryMinutes
  • updateInterval
  • showTooltips
  • state1Label
  • unknownStateLabel
  • barHeight
  • borderRadius
  • backgroundColor
Status Bar: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Status Bar

Gratis · WinCC Unified & V8 · CWC (.zip)

08La migliore colonna luminosa (torretta di segnalazione)

Status Lights

Status Lights Custom Web Control: una colonna luminosa a cinque segmenti su un'asta su sfondo verde scuro, con il segmento bianco in alto e quello verde centrale accesi e i segmenti blu, ambra e rosso spenti
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Il gemello digitale della colonna luminosa che sta sopra ogni macchina. Una torretta sottile su un'asta metallica con cinque segmenti, bianco, blu, verde, ambra e rosso dall'alto verso il basso, dove quelli accesi brillano e gli altri restano attenuati. Nell'anteprima sono accesi il bianco e il verde. Gli operatori la capiscono al volo, perché quella vera la vedono tutti i giorni. Ha 9 download e una recensione a cinque stelle a novembre 2026.

La sua scheda descrive un numero illimitato di livelli definiti nell'array segments. opacityInactive stabilisce quanto appaiono attenuati i segmenti spenti, showLabels aggiunge un testo a ogni livello, e borderWidth, borderColor e backgroundColor regolano la cornice. I metodi setSegmentState, setSegmentColor e setSegmentStatus accendono i segmenti e il lampeggio dai tuoi script, e l'evento SegmentClicked può avviare una tacitazione.

Cosa ci piace

  • Familiare all'istante per chiunque lavori in reparto
  • Tutti i segmenti che ti servono, con lampeggio
  • Evento di clic per ogni segmento

Da tenere presente

  • La prima immagine della galleria mostra la torretta con tutti i segmenti spenti; la seconda, con le luci accese, è quella che mostriamo
  • Si pilota con un array e dei metodi invece che con un booleano per lampada: mettiti in conto un piccolo script

Proprietà collegabili

  • segments
  • showLabels
  • opacityInactive
  • borderWidth
  • borderColor
  • backgroundColor
Status Lights: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Status Lights

Gratis · WinCC Unified & V8 · CWC (.zip)

09La migliore card minimale per un valore

Square Info Card

Square Info Card Custom Web Control: una card quadrata blu scuro con Temperature 78.3 °C, con sotto un pannello demo per simulare gli aggiornamenti delle proprietà WinCC di motore, stato, temperatura, livello serbatoio e pressione
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

A volte meno è meglio. Una card quadrata blu scuro con gli angoli arrotondati mostra al centro una piccola etichetta («TEMPERATURE») e un solo valore («78.3 °C»). Nient'altro. La sua scheda promette che mantiene la forma 1:1 a qualsiasi dimensione e aggiunge un'animazione fluida al passaggio del mouse, il che la rende un mattoncino ordinato per una griglia di tile identiche.

La sua scheda conta 8 proprietà e le nomina tutte: title e value portano il contenuto, accentColor colora la barra di evidenziazione in alto, cardColor e backgroundColor danno profondità, titleColor e valueColor il testo, e borderRadius ammorbidisce o squadra gli angoli. OnCardClicked apre un pop-up di dettaglio e updateDisplay permette a uno script di aggiornarla.

Cosa ci piace

  • Formato quadrato e pulito che si allinea bene in griglia
  • Interfaccia corta, tutte e otto le proprietà nominate
  • Evento di clic per la navigazione

Da tenere presente

  • L'anteprima include un pannello demo per simulare i valori, quindi la card in sé sembra piccola
  • Nell'anteprima la barra di accento in alto è una linea appena visibile

Proprietà collegabili

  • title
  • value
  • accentColor
  • cardColor
  • titleColor
  • valueColor
  • borderRadius
  • backgroundColor
Square Info Card: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Square Info Card

Gratis · WinCC Unified & V8 · CWC (.zip)

10Il miglior LED di stato singolo

Status LED

Status LED Custom Web Control: un LED circolare verde e lucido con un bagliore morbido su sfondo bianco e l'etichetta Stopped sotto
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

Il controllo più piccolo della lista, e il più utile nelle schermate dense. Un LED rotondo e lucido con un bagliore morbido e un'etichetta sotto. Fa una cosa sola: dire all'operatore se qualcosa è acceso o spento, senza costringerlo a leggere.

La sua scheda nomina tutte e 7 le proprietà. isActive cambia lo stato, activeLabel e inactiveLabel impostano il testo di ciascuno, glowEnabled aggiunge una pulsazione ritmica e glowIntensity lo rende visibile nelle sale controllo con molti riflessi, mentre borderThickness e backgroundColor ne regolano l'aspetto. I metodi toggleState e setState e l'evento StateChanged coprono il lato scripting.

Cosa ci piace

  • Un booleano in ingresso, un segnale chiaro in uscita
  • Pulsazione opzionale per gli stati che richiedono attenzione
  • Ingombro minimo per schermate di panoramica e sinottici

Da tenere presente

  • L'anteprima mostra un LED verde con l'etichetta «STOPPED»: verifica quale colore usa ogni stato prima di fidarti del default
  • Sfondo bianco nell'anteprima: imposta backgroundColor per le schermate scure

Proprietà collegabili

  • isActive
  • activeLabel
  • inactiveLabel
  • glowEnabled
  • glowIntensity
  • borderThickness
  • backgroundColor
Status LED: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Status LED

Gratis · WinCC Unified & V8 · CWC (.zip)

Menzioni d'onore: altri due indicatori che meritano un'occhiata

Due controlli rimasti fuori dalla top 10 per via delle loro anteprime. Fai clic sulla miniatura per aprire la pagina del prodotto.

  • State List Indicator: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    State List Indicator

    Un elenco chiaro intitolato «System Status» con System Ready, Process Running, Emergency Stop e Cooling Active, ciascuno con un badge di stato, un contatore degli stati attivi e un evento StateClicked. L'anteprima è un piccolo elenco in una tela grande e quasi vuota.

    Vedi prodotto
  • Sensor Status Card: card KPI e indicatore di stato Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    Sensor Status Card

    Una card compatta e chiara per un sensore, con un anello che mostra la luminosità in %, uno stato con la sua icona, un badge auto e un timer di funzionamento con un metodo resetTimer. I testi dell'anteprima sono in parte in spagnolo e la card è minuscola.

    Vedi prodotto

Non hai trovato il tuo indicatore? Creane uno (o remixane uno) con l'IA, gratis

Una confessione: tutte le card KPI e gli indicatori di stato di questo articolo sono stati creati con il generatore IA di HMIx. Per questo possiamo dirlo senza arrossire: se nessuno mostra il tuo KPI come serve a te, puoi generare il tuo in pochi minuti.

Descrivi la card a parole semplici (per esempio «tile OEE con la percentuale in cifre grandi, disponibilità, prestazioni e qualità sotto, verde sopra l'85 %, ambra sopra il 65 % e rosso sotto, e un evento di clic») e il generatore ti accompagna passo dopo passo: il design, le proprietà, gli eventi e i metodi che userai in WinCC, una simulazione per provare i valori e il pacchetto Custom Web Control finale per WinCC Unified e WinCC V8. Lo stesso strumento crea anche SVG dinamici quando ti basta un disegno leggero.

  • Remixa qualsiasi controllo di questa lista: nella sua pagina prodotto, il pulsante «Modifica nel generatore IA» lo apre direttamente nel generatore, pronto per chiedere modifiche come «fai il LED rosso quando è inattivo», «aggiungi un obiettivo alla card» o «mostra otto macchine invece di nove». I link «Modificalo con l'IA» di questo articolo fanno lo stesso.
  • Provarlo è gratis: puoi iniziare senza account, con una piccola dotazione giornaliera di crediti, e il piano Community è gratuito.
  • Il risultato è tuo e lo usi come vuoi: scarica il pacchetto e aggiungilo al tuo progetto TIA Portal come qualsiasi altro controllo di questa pagina.

Come usare una card KPI Custom Web Control in WinCC Unified (e WinCC V8)

La versione breve, per quando hai già scelto la tua card. La nostra guida ai Custom Web Control copre ogni passaggio con schemi e screenshot.

  1. Scarica lo ZIP

    Apri la pagina del prodotto, accedi con il tuo account gratuito e scarica il controllo. Lo ZIP scaricato contiene la documentazione e, al suo interno, il pacchetto del controllo chiamato {GUID}.zip: è quel file interno che ti serve.

  2. Copialo nel tuo progetto TIA Portal

    Copia il file {GUID}.zip, ancora compresso, nella cartella del progetto sotto UserFiles\CustomControls (crea entrambe le cartelle se non esistono). Non estrarlo.

  3. Aggiorna I miei controlli e trascinalo

    In TIA Portal apri la task card Tool, espandi la tavolozza I miei controlli e fai clic su Aggiorna. Il controllo compare nell'elenco: trascinalo nella schermata e dimensionalo.

  4. Collega e prova le proprietà

    Seleziona il controllo e apri Finestra di ispezione → Proprietà → Proprietà → Interfaccia. Collega prima il valore principale (rejectCount, isActive, status…) a una variabile interna, aggiungi un campo I/O che scriva la stessa variabile e avvia Runtime: cambia il valore e guarda reagire card, colori e limiti. Disattiva Sola lettura sulle variabili che il controllo riscrive, come un reset. Quando si comporta come previsto, passa alle tue variabili PLC reali.

  5. Su WinCC V8

    Ogni controllo della top di questo articolo è indicato come compatibile con WinCC V8 nella sua pagina prodotto. Il pacchetto è lo stesso; per importare e configurare i Custom Web Control in quell'ambiente segui la documentazione di WinCC V8.

Dritta del mestiere: decidi una volta per tutte il significato di ogni colore e usalo ovunque. Se il verde vuol dire in marcia sulla Machine Status Grid, deve voler dire in marcia anche sullo Status LED e sulle Status Lights, e una tile ambra deve sempre voler dire avviso. Collega le proprietà di colore (accentColor, trendColor…) alla stessa logica di stato in tutta la schermata, e tieni i colori vivaci per ciò che richiede attenzione, come raccomanda la ISA-101.

Leggi la guida completa ai Custom Web Control

Domande frequenti

Queste card KPI e questi indicatori di stato Custom Web Control sono davvero gratis?

Sì. Ogni controllo di questo articolo è pubblicato come prodotto gratuito su HMIx. Per scaricarli ti basta un account gratuito.

Perché usare un Custom Web Control per una card KPI in WinCC Unified?

Puoi costruire una card KPI con oggetti di base, campi I/O e dinamizzazioni, ma una card KPI Custom Web Control racchiude valore, unità, freccia di tendenza, limiti e colori di stato in un unico oggetto con proprietà ed eventi nominati. Colleghi poche variabili invece di animare una dozzina di forme, e ogni card della schermata ha lo stesso aspetto e lo stesso comportamento.

Qual è la differenza tra una card KPI e un indicatore di stato?

Una card KPI mostra un valore, come pressione, scarti, tempo ciclo o ore di funzionamento, di solito con un'unità, una tendenza o dei limiti. Un indicatore di stato mostra uno stato, come in marcia, avviso, fermo o allarme, con un colore o una lampada. Questo articolo li include entrambi, più combinazioni come il Process Status Indicator, che mostra un valore con il suo setpoint e i limiti di allarme.

Come mostro lo stato di più macchine in una sola schermata?

Usa un controllo di panoramica come la Machine Status Grid per un quadro rosso-giallo-verde di tutta la linea, la Status Bar per vedere quanto tempo una macchina è rimasta in ogni stato, oppure diversi Status LED o Status Lights posizionati su un sinottico d'impianto. Controlla nella documentazione di ogni controllo come si alimentano gli stati, perché alcuni usano una proprietà per stato e altri un array o dei metodi.

Funzionano sugli Unified Comfort Panel di WinCC Unified e su WinCC V8?

Le loro pagine prodotto indicano la compatibilità con WinCC Unified, Unified Comfort Panel compresi, e con WinCC V8. Come per qualsiasi controllo generato con l'IA, prova il comportamento nel tuo progetto e sul dispositivo di destinazione prima di andare in produzione.

Posso modificare una di queste card?

Certo. Puoi modificare tu stesso l'HTML, il CSS e il JavaScript del controllo, oppure premere «Modifica nel generatore IA» nella pagina del prodotto e chiedere le modifiche a parole tue. La seconda strada di solito è più veloce, perché il generatore si occupa dell'interfaccia e del pacchetto.

Il nostro verdetto

Se ne scarichi uno solo, che sia il KPI Indicator: un valore grande, un'unità e una freccia di tendenza in una tile che avrai collegato in pochi minuti. Per una dashboard KPI completa, il Crane Logistics KPI; per una misura con setpoint e limiti, il Process Status Indicator; per gli scarti, il Rejected Parts Counter; per la manutenzione, la Machine Hour Counter Card; per tutto l'impianto a colpo d'occhio, la Machine Status Grid; per la disponibilità nel tempo, la Status Bar; per una colonna luminosa, le Status Lights; per una tile minimale, la Square Info Card; e per un semplice segnale acceso/spento, lo Status LED.

E se il tuo KPI ha bisogno di una card che nessuno di questi disegna (succede sempre), ricorda che il generatore che li ha creati è a un clic di distanza.