Idioma:Español

Blog · Custom Web Controls

Las 10 mejores tarjetas KPI e indicadores de estado Custom Web Control para WinCC Unified y WinCC V8 (gratis)

A principios de noviembre de 2026 abrimos todas las tarjetas KPI, contadores e indicadores de estado Custom Web Control del catálogo de HMIx, diecisiete candidatos, miramos cada vista previa de cerca, leímos todas las fichas y nos quedamos con los diez que pondríamos sin dudar en una pantalla de resumen de WinCC Unified o WinCC V8. Todos gratis, todos empaquetados como ZIP de CWC y cada uno el mejor en un trabajo distinto: de una simple tarjeta KPI a una columna de señalización.

Por el equipo de HMIx12 min de lecturaActualizado el
  • Custom Web Control
  • CWC
  • WinCC Unified
  • WinCC V8
  • TIA Portal
  • Tarjeta KPI
  • Indicador de estado
  • Widgets SCADA
Cuatro Custom Web Controls de KPI y estado del catálogo de HMIx en mosaico: un dashboard oscuro de KPI logísticos de grúa con tiempos de ciclo, sparklines y un gráfico de distribución de cargas, una tarjeta KPI verde oscuro con Pressure 1285 PSI y una subida del 12.5 %, una vista general de planta con nueve máquinas y pilotos verdes, amarillos y rojos y una línea de tiempo de estados con tramos verdes, rojos y grises
La alineación: vistas previas reales de cuatro controles de este artículo, tal como las publicaron sus creadores. Solo los hemos enmarcado juntos.

Por qué merece la pena una tarjeta KPI Custom Web Control

Toda pantalla de resumen acaba respondiendo a las mismas cuatro preguntas. ¿La línea está en marcha? ¿Cuánto nos falta para el objetivo? ¿Cuántas piezas hemos rechazado este turno? ¿Cuántas horas lleva ese robot desde el último mantenimiento? Una tendencia responde a «cómo hemos llegado aquí»; una tarjeta KPI o un indicador de estado responde a «dónde estamos ahora», con un número o un color que se lee desde el otro lado de la sala de control.

Puedes montarlo con rectángulos, campos E/S y mucha dinamización, y casi todos lo hemos hecho. Una tarjeta KPI Custom Web Control (CWC) mete el número, la unidad, la flecha de tendencia, los límites y los colores de estado en un solo objeto que arrastras a la pantalla y enlazas. Un CWC es una pequeña aplicación web, HTML, CSS y JavaScript empaquetados en un ZIP, que WinCC Unified (TIA Portal) y WinCC V8 ejecutan dentro de la pantalla. Sus propiedades aparecen en la lista Interfaz como cualquier otra, así que una variable como rejectCount o isActive lo mueve directamente, y sus eventos, como Clicked, permiten a tus scripts HMI abrir un faceplate o una pantalla de detalle.

Qué hace que una tarjeta KPI o un indicador de estado merezca la descarga

Antes de la lista, la vara de medir. Esto es lo que buscamos, más o menos en el orden en que nos molesta que falte:

  • Legible a tres metros. Un número grande, una unidad clara y una etiqueta con palabras normales. Si el operador tiene que acercarse, la tarjeta ha fallado.
  • Colores que significan algo. Verde, ámbar y rojo ligados a un estado, un límite o un umbral, no a la decoración. Un indicador de estado que siempre tiene el mismo color es una pegatina.
  • Contexto dentro de la tarjeta. Una flecha de tendencia, una consigna, límites de aviso y alarma o un pequeño histórico convierten un número en información.
  • Una interfaz limpia. Propiedades con nombres claros en la ficha, para saber qué moverá cada variable, más un evento o dos para profundizar.
  • El indicador adecuado para cada trabajo. Una tarjeta KPI, un dashboard de KPI, un valor de proceso con límites, un contador de rechazos, un contador de horas, una vista de planta, una línea de tiempo de estados, una columna de señalización, una tarjeta mínima y un LED: elegimos un campeón por trabajo.

Cómo los elegimos (y qué no hicimos)

A principios de noviembre de 2026 buscamos en el catálogo de HMIx todos los Custom Web Control gratuitos pensados para mostrar un valor o un estado de un vistazo: tarjetas y mosaicos KPI, contadores, tarjetas de estado, balizas, LED y vistas de estado. Los gauges, los gráficos de barras, las tendencias y las tablas de datos ya tienen su propio artículo, así que las tarjetas con sparkline que vimos con los gráficos de tendencia se quedan fuera. De cada candidato miramos su vista previa real (no la portada del catálogo con el título enorme encima) y leímos su ficha para ver qué propiedades, eventos y métodos documenta. Las descargas solo sirvieron para desempatar.

Dos controles pasaron a las menciones de honor, y descartamos dos Motor Status Card porque su galería solo muestra el icono del control, así que no hay nada que juzgar. Cuando una galería publicaba una tarjeta pequeña en mitad de un lienzo enorme y vacío, recortamos el fondo vacío para este artículo, sin tocar el dibujo. Y un aviso honesto: juzgamos vistas previas y documentación; no ejecutamos estos controles en un Runtime real. Se generaron con IA y cada ficha recuerda que hay que probarlos en tu propio proyecto de TIA Portal antes de llevarlos a producción.

Las 10 mejores tarjetas KPI e indicadores de estado Custom Web Control, uno a uno

Cada entrada muestra la vista previa real, lo que nos gustó, lo que conviene saber y las propiedades que nombra su ficha, seguido de la miniatura del catálogo: haz clic en ella para abrir la ficha y descargar el control gratis.

01El mejor en general: la tarjeta KPI clásica

KPI Indicator

KPI Indicator Custom Web Control: una tarjeta verde oscuro con una franja cian a la izquierda, la etiqueta Pressure, el valor 1285 PSI en grandes cifras blancas y una flecha hacia arriba con 12.5 %
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Si solo pudiéramos quedarnos con uno, sería este. Una tarjeta apaisada con una franja de color en el borde izquierdo, una pequeña etiqueta gris («PRESSURE»), un valor enorme en blanco («1285») con su unidad al lado («PSI») y, debajo, una flecha con un porcentaje («▲ 12.5%»). Es exactamente lo que debe ser una tarjeta KPI: un número que se lee desde la otra punta de la sala y una línea de contexto. Con 9 descargas y una reseña de cinco estrellas en noviembre de 2026, es además de los controles más populares de la lista.

Su galería enseña tres aspectos del mismo control: verde oscuro con franja cian, gris oscuro con franja amarilla y una flecha naranja de bajada, y azul marino sin línea de tendencia. Es la interfaz en acción. label y unit dan nombre al valor, decimalPlaces fija la resolución, trendValue y trendDirection mueven la flecha, showTrend la oculta, y accentColor, trendColor y backgroundColor llevan tus colores de estado. Un evento Clicked está listo para saltar a un faceplate o a una pantalla de tendencias.

Lo que nos gusta

  • Valor enorme y legible con su unidad: la tarjeta KPI de manual
  • Flecha de tendencia y porcentaje que puedes desactivar
  • Colores de franja y de tendencia que puedes ligar a un estado

A tener en cuenta

  • Su ficha cuenta 10 propiedades y nombra nueve: busca en la lista Interfaz de TIA Portal la que lleva el valor
  • Un valor por tarjeta: para una fila de KPI, coloca varias

Propiedades enlazables

  • label
  • unit
  • decimalPlaces
  • trendValue
  • trendDirection
  • showTrend
  • accentColor
  • trendColor
  • backgroundColor
KPI Indicator: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

KPI Indicator

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

02El mejor dashboard de KPI completo (tiempos de ciclo y productividad)

Crane Logistics KPI

Crane Logistics KPI Custom Web Control: un dashboard oscuro titulado Crane Logistics Monitor con reloj, tarjetas de elevación actual 00:45 y tiempo entre cargas 02:12 con sparklines naranja y cian, 24 elevaciones por hora frente a un objetivo de 30, un gráfico de barras de distribución de cargas para contenedores, palés, sacos y bobinas, y ciclo medio 01:30 y duración máxima 03:45
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Para cuando una tarjeta no basta. «CRANE LOGISTICS MONITOR» en naranja encabeza un dashboard completo con un reloj en la esquina: «Current lifting» en 00:45 con un sparkline naranja, «Inter-load» en 02:12 con uno cian, «Lifts per hour» en 24 frente a un objetivo de 30, un gráfico de barras horizontales por tipo de carga (contenedores, palés, sacos y bobinas) y una columna de estadísticas de ciclo: media 01:30, pico 03:45 y mínimo. Es el control más descargado de este artículo, con 12 descargas y una reseña de cinco estrellas en noviembre de 2026.

Su ficha es especialmente completa: 30 propiedades. liftingTimeSeconds e interLoadTimeSeconds alimentan las tarjetas en vivo, el control calcula averageCycleSeconds, maxCycleSeconds y minCycleSeconds, liftingHistory dibuja los sparklines y loadTypes la distribución. Cada rótulo tiene su propiedad, de labelLiftsPerHour a labelDistribution, y accentColor1 a accentColor3 fijan la paleta. Los eventos CycleCompleted, ThresholdAlert y TargetReached y los métodos exportLogisticsData y resetStatistics lo completan.

Lo que nos gusta

  • Seis KPI, dos sparklines y un gráfico de barras en un solo objeto
  • Todos los rótulos renombrables, así que sirve más allá de las grúas
  • Eventos de alertas y objetivos, más exportación y puesta a cero

A tener en cuenta

  • Pensado para ciclos de grúa: para otras máquinas hay que renombrar casi todo
  • En la vista previa la barra de progreso hacia el objetivo de 30 no muestra relleno visible, y la tarjeta inferior sale cortada

Propiedades enlazables

  • liftingTimeSeconds
  • interLoadTimeSeconds
  • averageCycleSeconds
  • maxCycleSeconds
  • minCycleSeconds
  • liftingHistory
  • loadTypes
  • labelLiftsPerHour
  • labelDistribution
  • accentColor1
  • accentColor2
  • accentColor3
  • backgroundColor
Crane Logistics KPI: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Crane Logistics KPI

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

03El mejor para un valor de proceso con consigna y límites de alarma

Process Status Indicator

Process Status Indicator Custom Web Control: una tarjeta oscura de PT-104 Discharge Pressure con rango de 0.0 a 100.0 bar, el valor 76.6 bar, una consigna de 70.0 bar, una barra horizontal naranja con marca de consigna y zonas de aviso y alarma, y casillas de límite inferior 0.0, aviso alto 80.0 y alarma alta 90.0 bar
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

El que piensa como un ingeniero de instrumentación. La cabecera dice «PT-104 Discharge Pressure» junto a una etiqueta de rango («0.0 – 100.0 bar»). Debajo, el valor 76.6 bar en cifras grandes y, a la derecha, «Setpoint 70.0 bar» en naranja. Una barra horizontal se rellena en naranja hasta el valor, con un triángulo que marca la consigna y zonas ámbar y roja más oscuras al final de la escala. Tres casillas abajo detallan los límites: límite inferior 0.0 bar, aviso alto 80.0 bar en ámbar y alarma alta 90.0 bar en rojo.

Su ficha nombra nueve de sus 11 propiedades: tagId y descriptor identifican la medida, unit, minValue y maxValue definen la escala, warningThreshold y alarmThreshold fijan los límites, decimalPlaces la resolución y backgroundColor el tema. El evento AlarmTriggered salta al salirse de un límite, y los métodos setValue y setSetpoint permiten actualizarlo desde un script. En resumen, un mini faceplate para cualquier medida analógica, con la desviación respecto a la consigna a la vista.

Lo que nos gusta

  • Valor, consigna y límites juntos, con tag y descriptor al estilo ISA
  • Zonas de aviso y alarma dibujadas sobre la barra
  • Un evento de alarma que tus scripts pueden usar

A tener en cuenta

  • En la vista previa un contorno azul discontinuo enmarca la fila del valor y atraviesa el texto «Setpoint 70.0 bar»
  • La ficha no nombra las propiedades del valor y de la consigna (hay métodos setValue y setSetpoint): revisa la lista Interfaz antes de enlazar

Propiedades enlazables

  • tagId
  • descriptor
  • unit
  • minValue
  • maxValue
  • warningThreshold
  • alarmThreshold
  • decimalPlaces
  • backgroundColor
Process Status Indicator: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Process Status Indicator

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

04El mejor para contar rechazos y chatarra

Rejected Parts Counter

Rejected Parts Counter Custom Web Control: una tarjeta oscura en tonos ámbar de la estación REJ-MONITOR-04 con etiqueta PCS, 142 piezas rechazadas acumuladas, un chip con más 4 piezas cada 5 minutos y una tendencia escalonada que sube de 124 a 142 entre las 18:33 y las 18:42
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Un contador que cuenta una historia. La tarjeta, en tonos oscuros cálidos con acento ámbar, nombra su estación («REJ-MONITOR-04»), muestra una etiqueta de unidad «PCS», el total acumulado de rechazos en grandes cifras ámbar (142) y un pequeño chip con el ritmo reciente («+4 pcs/5m»). Debajo, un gráfico escalonado titulado «Accumulation Trend (Step)» sube de 124 a 142 entre las 18:33 y las 18:42. De un vistazo sabes no solo cuántas piezas han ido a chatarra, sino si la cosa va a peor.

Su ficha cuenta 11 propiedades y nombra diez. rejectCount es el valor principal y deltaRate el incremento reciente, stationTag identifica la estación, maxHistoryPoints fija la profundidad del histórico, metricLabel, unitText y chartCaption cambian los textos, y accentColor, panelColor y backgroundColor la paleta. Es alto y estrecho, ideal para la columna lateral de una pantalla de calidad o de final de línea.

Lo que nos gusta

  • Total, ritmo e histórico en una sola tarjeta
  • Gráfico escalonado que encaja con un contador (sin pendientes inventadas)
  • Todos los textos renombrables para piezas buenas, paradas o alarmas

A tener en cuenta

  • En la vista previa el nombre de la estación se parte en dos líneas y el título del gráfico se pega al valor superior del eje
  • Formato alto: necesita una columna, no una fila

Propiedades enlazables

  • rejectCount
  • deltaRate
  • stationTag
  • maxHistoryPoints
  • metricLabel
  • unitText
  • chartCaption
  • accentColor
  • panelColor
  • backgroundColor
Rejected Parts Counter: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Rejected Parts Counter

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

05El mejor para horas de funcionamiento y mantenimiento

Machine Hour Counter Card

Machine Hour Counter Card Custom Web Control: una tarjeta blanca del equipo Robot CRX10 Fanuc con icono de robot, 12477 h de horas acumuladas, el comentario Check joint 3 lubrication y un botón Reset
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Para el equipo de mantenimiento. Una tarjeta blanca y limpia nombra el equipo («Robot CRX10 Fanuc») junto a un icono de robot, muestra «Accumulated hours» en grandes cifras oscuras (12477 h) y, abajo, un comentario de estado («Check joint 3 lubrication») junto a un botón «Reset». Es el horómetro que pegarías en la máquina, con una nota para el siguiente turno.

Según su ficha, las horas llegan directamente de un valor DINT del PLC, e isRunning enciende un brillo degradado animado en el borde de la tarjeta mientras la máquina funciona. iconType elige el símbolo del equipo, resetButtonLabel renombra el botón, que dispara el evento OnReset, darkMode cambia entre modo oscuro y claro, y backgroundColor la adapta a tu pantalla. El método triggerReset permite ponerla a cero también desde un script. Úsala en pantallas de mantenimiento preventivo de motores, bombas, compresores o robots.

Lo que nos gusta

  • Horómetro claro con nombre del equipo y nota de mantenimiento
  • Botón de puesta a cero con su propio evento, listo para tu lógica de PLC
  • Modos oscuro y claro

A tener en cuenta

  • La ficha no da el nombre exacto de las propiedades de horas, título y comentario: revisa la lista Interfaz y desmarca «Solo lectura» en las variables que escribe la puesta a cero
  • El brillo de isRunning no se ve en la vista previa publicada

Propiedades enlazables

  • isRunning
  • iconType
  • resetButtonLabel
  • darkMode
  • backgroundColor
Machine Hour Counter Card: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Machine Hour Counter Card

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

06La mejor vista general de planta

Machine Status Grid

Machine Status Grid Custom Web Control: una vista oscura Plant Floor Overview con nueve mosaicos, seis máquinas como Extruder 01 y Robotic Arm 06 en marcha con pilotos verdes, Pump Station 07 y Cooling Tower 08 en aviso con pilotos amarillos y Main Generator 09 parado con piloto rojo
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Toda la planta en una pantalla. Bajo el título «PLANT FLOOR OVERVIEW», una rejilla de tres por tres mosaicos, cada uno con un piloto brillante, un identificador (M01 a M09), un nombre y un estado: seis máquinas, de «Extruder 01» a «Robotic Arm 06», están en RUNNING en verde, «Pump Station 07» y «Cooling Tower 08» muestran WARNING en amarillo y «Main Generator 09» está STOPPED en rojo. Cada mosaico tiene además el borde izquierdo de color, así que la oveja negra salta a la vista incluso en un videowall.

Su ficha se centra en la maquetación. Machine Count fija cuántos mosaicos se muestran, Title Size, Element Size, Indicator Size e ID Label Size ajustan la tipografía y los pilotos, y Background Color lo adapta a tu tema. Es el tipo de control que pones en la pantalla de inicio de una máquina OEM o de una línea, para que el operador sepa adónde mirar antes de abrir nada más.

Lo que nos gusta

  • Foto instantánea en rojo, amarillo y verde de toda una línea
  • Número de máquinas y tamaños ajustables
  • Diseño oscuro tranquilo y de alto contraste

A tener en cuenta

  • La ficha solo nombra propiedades de maquetación: no explica cómo llegan el nombre y el estado de cada máquina, así que lee la documentación incluida antes de planificar variables
  • El texto es pequeño y la mayor parte de cada mosaico es espacio vacío en la vista previa

Propiedades enlazables

  • Machine Count
  • Title Size
  • Element Size
  • Indicator Size
  • ID Label Size
  • Background Color
Machine Status Grid: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Machine Status Grid

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

07El mejor para el histórico de estados (línea de tiempo de disponibilidad)

Status Bar

Status Bar Custom Web Control: una Process State Timeline oscura con reloj, ventana de 45 minutos y 4 eventos, el texto State 1 activo desde hace 01:36 y una línea de tiempo ancha con tramos verde, rojo, gris y verde y una leyenda de marcha, alarma o paro, reposo o manual y desconocido
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

Un indicador de estado con memoria. Titulado «Status Bar – Process State Timeline», muestra en la cabecera un reloj, una ventana de 45 minutos y un contador de eventos, un chip que dice «State 1 – Active for 01:36» y, debajo, una línea de tiempo ancha de bloques de color: verde, un largo tramo rojo, gris y otra vez verde, cada uno con su duración. Una leyenda explica los colores: State 1 marcha/OK, State 2 alarma/paro, State 3 reposo/manual y Unknown.

Según su ficha, añade un tramo nuevo cada vez que cambia la propiedad status, mantiene una ventana deslizante fijada por maxHistoryMinutes y hace crecer el tramo activo cada updateInterval. showTooltips muestra el inicio, el fin y la duración de cada bloque al pasar el ratón, de state1Label a unknownStateLabel se renombran los estados, barHeight y borderRadius le dan forma y backgroundColor lo adapta a tu tema. OnStatusChanged y OnHistoryCleared hablan con tus scripts, y resetHistory y exportHistoryJson gestionan el registro.

Lo que nos gusta

  • Muestra cuánto tiempo pasó la máquina en cada estado, no solo el actual
  • Tooltips con inicio, fin y duración
  • Exportación del histórico en JSON para informes

A tener en cuenta

  • Su ficha describe una línea de tiempo construida con los cambios que recibe en una ventana deslizante; no menciona leer el archivo de WinCC
  • Las duraciones dentro de los tramos son diminutas en la vista previa

Propiedades enlazables

  • status
  • maxHistoryMinutes
  • updateInterval
  • showTooltips
  • state1Label
  • unknownStateLabel
  • barHeight
  • borderRadius
  • backgroundColor
Status Bar: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Status Bar

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

08La mejor columna de señalización (baliza)

Status Lights

Status Lights Custom Web Control: una columna de señalización de cinco segmentos sobre un mástil con fondo verde oscuro, con el segmento blanco superior y el verde central encendidos y los segmentos azul, ámbar y rojo atenuados
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

El gemelo digital de la baliza que corona cada máquina. Una columna esbelta sobre un mástil metálico con cinco segmentos, blanco, azul, verde, ámbar y rojo de arriba abajo, en la que los encendidos brillan y el resto se queda atenuado. En la vista previa están encendidos el blanco y el verde. El operador la entiende al instante, porque ve la de verdad todos los días. Tiene 9 descargas y una reseña de cinco estrellas en noviembre de 2026.

Su ficha describe un número ilimitado de niveles definidos en el array segments. opacityInactive fija lo atenuados que se ven los segmentos apagados, showLabels añade un texto a cada nivel, y borderWidth, borderColor y backgroundColor ajustan el marco. Los métodos setSegmentState, setSegmentColor y setSegmentStatus encienden segmentos y parpadeos desde tus scripts, y el evento SegmentClicked puede disparar un acuse.

Lo que nos gusta

  • Familiar al instante para cualquiera en planta
  • Tantos segmentos como necesites, con parpadeo
  • Evento de clic por segmento

A tener en cuenta

  • La primera imagen de la galería muestra la columna con todo apagado; la segunda, encendida, es la que enseñamos
  • Se maneja con un array y métodos en lugar de un booleano por piloto: prevé un pequeño script

Propiedades enlazables

  • segments
  • showLabels
  • opacityInactive
  • borderWidth
  • borderColor
  • backgroundColor
Status Lights: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Status Lights

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

09La mejor tarjeta mínima de un valor

Square Info Card

Square Info Card Custom Web Control: una tarjeta cuadrada azul oscuro con Temperature 78.3 °C y, debajo, un panel de demostración para simular cambios de propiedades de WinCC de motor, estado, temperatura, nivel de tanque y presión
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

A veces menos es más. Una tarjeta cuadrada azul oscuro con esquinas redondeadas muestra una pequeña etiqueta («TEMPERATURE») y un valor («78.3 °C») en el centro. Nada más. Su ficha promete que mantiene la forma 1:1 a cualquier tamaño y añade una animación suave al pasar el ratón, lo que la convierte en una pieza ordenada para una rejilla de mosaicos iguales.

Su ficha cuenta 8 propiedades y las nombra todas: title y value llevan el contenido, accentColor colorea la barra de realce de arriba, cardColor y backgroundColor dan profundidad, titleColor y valueColor el texto, y borderRadius suaviza o afila las esquinas. OnCardClicked abre un pop-up de detalle y updateDisplay permite refrescarla desde un script.

Lo que nos gusta

  • Formato cuadrado y limpio que se alinea bien en rejillas
  • Interfaz corta, con sus ocho propiedades nombradas
  • Evento de clic para navegar

A tener en cuenta

  • La vista previa incluye un panel de demostración para simular valores, así que la tarjeta se ve pequeña
  • La barra de realce superior es una línea casi invisible en la vista previa

Propiedades enlazables

  • title
  • value
  • accentColor
  • cardColor
  • titleColor
  • valueColor
  • borderRadius
  • backgroundColor
Square Info Card: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Square Info Card

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

10El mejor LED de estado individual

Status LED

Status LED Custom Web Control: un LED circular verde y brillante con un halo suave sobre fondo blanco y la etiqueta Stopped debajo
La vista previa real del control, tal como se publicó en el catálogo. Haz clic para abrir la ficha.

El control más pequeño de la lista y el más útil en pantallas densas. Un LED redondo y brillante con un halo suave y una etiqueta debajo. Hace una sola cosa: decirle al operador si algo está encendido o apagado, sin obligarle a leer.

Su ficha nombra sus 7 propiedades. isActive cambia el estado, activeLabel e inactiveLabel fijan el texto de cada uno, glowEnabled añade un pulso rítmico y glowIntensity lo hace visible en salas de control con reflejos, mientras que borderThickness y backgroundColor ajustan el aspecto. Los métodos toggleState y setState y el evento StateChanged cubren la parte de scripts.

Lo que nos gusta

  • Entra un booleano, sale una señal clara
  • Pulso opcional para los estados que piden atención
  • Ocupa muy poco en pantallas de resumen y sinópticos

A tener en cuenta

  • La vista previa muestra un LED verde con la etiqueta «STOPPED»: comprueba qué color usa cada estado antes de fiarte del valor por defecto
  • Fondo blanco en la vista previa: ajusta backgroundColor para pantallas oscuras

Propiedades enlazables

  • isActive
  • activeLabel
  • inactiveLabel
  • glowEnabled
  • glowIntensity
  • borderThickness
  • backgroundColor
Status LED: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

Status LED

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

Menciones de honor: dos indicadores más que merecen un vistazo

Dos controles que no entraron entre los diez mejores por culpa de su vista previa. Haz clic en la miniatura para abrir su ficha.

  • State List Indicator: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

    State List Indicator

    Una lista clara titulada «System Status» con System Ready, Process Running, Emergency Stop y Cooling Active, cada uno con su insignia de estado, un contador de estados activos y un evento StateClicked. La vista previa es una lista pequeña en un lienzo grande y casi vacío.

    Ver producto
  • Sensor Status Card: tarjeta KPI e indicador de estado Custom Web Control gratis para WinCC Unified y WinCC V8, miniatura del catálogo

    Sensor Status Card

    Una tarjeta compacta de sensor de luz con un anillo de luminosidad en %, un estado con su icono, una insignia de modo automático y un temporizador de funcionamiento con método resetTimer. Los textos de la vista previa están en parte en español y la tarjeta es diminuta.

    Ver producto

¿No encuentras tu indicador? Créalo (o modifica uno) con IA, gratis

Una confesión: todas las tarjetas KPI e indicadores de estado de este artículo se crearon con el generador IA de HMIx. Por eso podemos decirlo sin ponernos colorados: si ninguno muestra tu KPI como lo necesitas, puedes generar el tuyo en minutos.

Describe la tarjeta con palabras normales (por ejemplo, «tarjeta de OEE con el porcentaje en cifras grandes, disponibilidad, rendimiento y calidad debajo, verde por encima del 85 %, ámbar por encima del 65 % y rojo por debajo, y un evento al hacer clic») y el generador te guía paso a paso: el diseño, las propiedades, eventos y métodos que usarás en WinCC, una simulación para probar valores y el paquete Custom Web Control final para WinCC Unified y WinCC V8. La misma herramienta crea también SVG dinámicos cuando te basta con un dibujo ligero.

  • Modifica cualquier control de esta lista: en su ficha, el botón «Editar en el generador IA» lo abre directamente en el generador, listo para que pidas cambios como «pon el LED en rojo cuando esté inactivo», «añade un objetivo a la tarjeta» o «muestra ocho máquinas en lugar de nueve». Los enlaces «Editarlo con IA» de este artículo hacen lo mismo.
  • Gratis para probar: puedes empezar sin cuenta, con una pequeña asignación diaria de créditos, y el plan Community es gratuito.
  • El resultado es tuyo: descarga el paquete y añádelo a tu proyecto de TIA Portal como cualquier otro control de esta página.

Cómo usar una tarjeta KPI Custom Web Control en WinCC Unified (y WinCC V8)

La versión corta, para cuando ya has elegido tu tarjeta. Nuestra guía de Custom Web Controls cubre cada paso con esquemas y capturas.

  1. Descarga el ZIP

    Abre la ficha, inicia sesión con tu cuenta gratuita y descarga el control. El ZIP descargado contiene la documentación y, dentro, el paquete del control llamado {GUID}.zip: ese archivo interior es el que necesitas.

  2. Cópialo en tu proyecto de TIA Portal

    Copia el archivo {GUID}.zip, sin descomprimir, en la carpeta de tu proyecto dentro de UserFiles\CustomControls (crea ambas carpetas si no existen). No lo extraigas.

  3. Actualiza Controles propios y arrástralo

    En TIA Portal, abre la task card Herramientas, despliega la paleta Controles propios (My controls) y pulsa Actualizar. El control aparece en la lista: arrástralo a tu pantalla y dale tamaño.

  4. Enlaza y prueba las propiedades

    Selecciona el control y abre ventana de inspección → Propiedades → Propiedades → Interfaz. Enlaza primero el valor principal (rejectCount, isActive, status…) a una variable interna, añade un campo E/S que escriba esa misma variable y arranca el Runtime: cambia el valor y mira cómo reaccionan la tarjeta, los colores y los límites. Desmarca «Solo lectura» en las variables que el control escribe de vuelta, como una puesta a cero. Cuando se comporte bien, pasa a tus variables reales del PLC.

  5. En WinCC V8

    Todos los elegidos de este artículo están etiquetados como compatibles con WinCC V8 en su ficha. El paquete es el mismo; sigue la documentación de WinCC V8 para importar y configurar Custom Web Controls en ese entorno.

Consejo de experto: decide una vez qué significa cada color y úsalo en todas partes. Si el verde significa «en marcha» en la Machine Status Grid, debe significar lo mismo en el Status LED y en las Status Lights, y una tarjeta ámbar siempre debe significar aviso. Liga las propiedades de color (accentColor, trendColor…) a la misma lógica de estados en toda la pantalla y reserva los colores vivos para lo que pide atención, como recomienda ISA-101.

Leer la guía completa de Custom Web Controls

Preguntas frecuentes

¿De verdad son gratis estas tarjetas KPI e indicadores de estado Custom Web Control?

Sí. Todos los controles de este artículo están publicados como productos gratuitos en HMIx. Solo necesitas una cuenta gratuita para descargarlos.

¿Por qué usar un Custom Web Control para una tarjeta KPI en WinCC Unified?

Puedes montar una tarjeta KPI con objetos básicos, campos E/S y dinamizaciones, pero una tarjeta KPI Custom Web Control reúne el valor, la unidad, la flecha de tendencia, los límites y los colores de estado en un solo objeto con propiedades y eventos con nombre. Enlazas unas pocas variables en lugar de animar una docena de formas, y todas las tarjetas de la pantalla se ven y se comportan igual.

¿Qué diferencia hay entre una tarjeta KPI y un indicador de estado?

Una tarjeta KPI muestra un valor, como presión, rechazos, tiempo de ciclo u horas de funcionamiento, normalmente con unidad, tendencia o límites. Un indicador de estado muestra un estado, como en marcha, aviso, parado o alarma, con un color o un piloto. Este artículo incluye ambos, además de combinaciones como el Process Status Indicator, que muestra un valor con su consigna y sus límites de alarma.

¿Cómo muestro el estado de varias máquinas en una sola pantalla?

Usa un control de vista general como la Machine Status Grid para tener la foto en rojo, amarillo y verde de toda la línea, la Status Bar para ver cuánto tiempo pasó una máquina en cada estado, o varios Status LED o Status Lights colocados sobre un sinóptico de planta. Comprueba en la documentación de cada control cómo recibe los estados, porque unos usan una propiedad por estado y otros un array o métodos.

¿Funcionan en los Unified Comfort Panels de WinCC y en WinCC V8?

Sus fichas indican compatibilidad con WinCC Unified, incluidos los Unified Comfort Panels, y con WinCC V8. Como con cualquier control generado con IA, prueba su comportamiento en tu propio proyecto y en tu dispositivo de destino antes de pasar a producción.

¿Puedo modificar una de estas tarjetas?

Por supuesto. Puedes editar tú mismo el HTML, el CSS y el JavaScript del control, o pulsar «Editar en el generador IA» en la ficha y pedir los cambios con palabras normales. La segunda opción suele ser más rápida, porque el generador se encarga de la interfaz y del empaquetado.

Nuestro veredicto

Si solo descargas uno, que sea el KPI Indicator: un valor grande, una unidad y una flecha de tendencia en una tarjeta que tendrás enlazada en minutos. Para un dashboard de KPI completo, el Crane Logistics KPI; para una medida con consigna y límites, el Process Status Indicator; para la chatarra, el Rejected Parts Counter; para mantenimiento, la Machine Hour Counter Card; para ver toda la planta de un vistazo, la Machine Status Grid; para la disponibilidad a lo largo del tiempo, la Status Bar; para una baliza, las Status Lights; para una tarjeta mínima, la Square Info Card; y para una simple señal de encendido y apagado, el Status LED.

Y si tu KPI necesita una tarjeta que ninguno dibuja (siempre pasa), recuerda que el generador que los creó está a un solo clic.