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.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Tarjeta KPI
- Indicador de estado
- Widgets SCADA

Elección rápida
¿Vas con prisa? Salta directamente a la tarjeta o al indicador que necesitas.
- 01El mejor en general: la tarjeta KPI clásicaKPI Indicator
- 02El mejor dashboard de KPI completo (tiempos de ciclo y productividad)Crane Logistics KPI
- 03El mejor para un valor de proceso con consigna y límites de alarmaProcess Status Indicator
- 04El mejor para contar rechazos y chatarraRejected Parts Counter
- 05El mejor para horas de funcionamiento y mantenimientoMachine Hour Counter Card
- 06La mejor vista general de plantaMachine Status Grid
- 07El mejor para el histórico de estados (línea de tiempo de disponibilidad)Status Bar
- 08La mejor columna de señalización (baliza)Status Lights
- 09La mejor tarjeta mínima de un valorSquare Info Card
- 10El mejor LED de estado individualStatus LED
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

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
02El mejor dashboard de KPI completo (tiempos de ciclo y productividad)
Crane Logistics KPI

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
03El mejor para un valor de proceso con consigna y límites de alarma
Process Status Indicator

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
setValueysetSetpoint): revisa la lista Interfaz antes de enlazar
Propiedades enlazables
- tagId
- descriptor
- unit
- minValue
- maxValue
- warningThreshold
- alarmThreshold
- decimalPlaces
- backgroundColor
04El mejor para contar rechazos y chatarra
Rejected Parts Counter

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
05El mejor para horas de funcionamiento y mantenimiento
Machine Hour Counter Card

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
isRunningno se ve en la vista previa publicada
Propiedades enlazables
- isRunning
- iconType
- resetButtonLabel
- darkMode
- backgroundColor
06La mejor vista general de planta
Machine Status Grid

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
07El mejor para el histórico de estados (línea de tiempo de disponibilidad)
Status Bar

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
08La mejor columna de señalización (baliza)
Status Lights

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
09La mejor tarjeta mínima de un valor
Square Info Card

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
10El mejor LED de estado individual
Status LED

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
backgroundColorpara pantallas oscuras
Propiedades enlazables
- isActive
- activeLabel
- inactiveLabel
- glowEnabled
- glowIntensity
- borderThickness
- backgroundColor
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
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
Ver productoStateClicked. La vista previa es una lista pequeña en un lienzo grande y casi vacío.
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
Ver productoresetTimer. Los textos de la vista previa están en parte en español y la tarjeta es diminuta.
¿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.
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.Cópialo en tu proyecto de TIA Portal
Copia el archivo
{GUID}.zip, sin descomprimir, en la carpeta de tu proyecto dentro deUserFiles\CustomControls(crea ambas carpetas si no existen). No lo extraigas.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.
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.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.
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.