Blog · Custom Web Controls
Los 6 mejores gauges Custom Web Control para WinCC Unified y WinCC V8 (gratis)
En octubre de 2026 abrimos todos los gauges Custom Web Control del catálogo de HMIx, nueve indicadores de aguja y un par de medidores digitales, miramos cada vista previa de cerca, leímos todas las fichas y nos quedamos con los seis que pondríamos sin dudar en una pantalla de WinCC Unified o WinCC V8. Todos gratis, todos empaquetados como ZIP de CWC y todos con propiedades que puedes enlazar a tus variables.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Gauge
- Dashboard HMI
- Widgets SCADA
Elección rápida
¿Vas con prisa? Salta directamente al gauge que necesitas.
- 01El mejor en conjuntoCircular Analog Gauge
- 02El gauge más configurableGeneric Gauge
- 03El mejor para velocidad y rpmSpeedometer Gauge
- 04El mejor para valores de proceso por zonas de colorGauge
- 05El mejor con marcas de consigna y límite altoPressure Gauge
- 06El mejor gauge minimalista para paneles pequeñosGauge
Por qué merece la pena un gauge Custom Web Control
El gauge es el truco más viejo de la instrumentación, y sigue funcionando. Un operador ve dónde está la aguja dentro de una banda verde, ámbar o roja mucho antes de leer el número, y por eso la presión, la velocidad, la corriente y la temperatura siguen acabando en un indicador de aguja en las pantallas de WinCC Unified.
Un gauge Custom Web Control (CWC) lleva esa idea más allá que un dibujo estático. 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. Expone una interfaz de propiedades como minValue, maxValue o warnThreshold que enlazas a variables HMI y, a diferencia de un SVG dinámico, puede dibujar el número en vivo, animar la aguja y disparar eventos, por ejemplo cuando se supera un límite.
Qué hace que un gauge Custom Web Control 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:
- Un valor legible. La aguja es estupenda para ver tendencias, pero el operador sigue queriendo el número. Los mejores gauges acompañan la escala con una lectura digital clara y su unidad.
- Zonas y límites configurables. Umbrales de aviso y alarma, marcas de consigna o zonas de color convierten un dial bonito en un instrumento que le dice al operador cuándo preocuparse.
- Una interfaz documentada. Propiedades con nombre en la ficha, para saber qué vas a enlazar antes de abrir TIA Portal. Las fichas que solo dicen «nueve propiedades» no entraron entre los seis mejores.
- Un aspecto sereno. Fondos oscuros y planos, escalas legibles y colores que puedas apagar para pantallas de alto rendimiento en la línea de ISA-101.
- Variedad. En lugar de seis copias del mismo dial, elegimos un campeón para cada trabajo: todoterreno, muy configurable, velocidad, valores de proceso por zonas, presión con consigna y un gauge minimalista para paneles pequeños.
Cómo los elegimos (y qué no hicimos)
Buscamos en el catálogo de HMIx todos los gauges, medidores e indicadores gratuitos publicados como Custom Web Control en octubre de 2026. De cada uno 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 y las valoraciones solo sirvieron para desempatar, porque un gauge publicado el mes pasado no ha tenido tiempo de acumular ni unas ni otras.
Los gauges cuya ficha no nombra sus propiedades pasaron a las menciones de honor, aunque sean populares, porque nos negamos a decirte que enlaces propiedades que no podemos nombrar. Otra cosa: el Gauge del arco minimalista está publicado en un lienzo alto y casi vacío, así que para esta página recortamos el fondo vacío 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.
Los 6 mejores gauges 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 gauge gratis.
01El mejor en conjunto
Circular Analog Gauge
Si solo pudiéramos quedarnos con uno, sería este. Un instrumento redondo con bisel oscuro, una escala de 240 grados de 0 a 100 pintada en verde, ámbar y rojo, una aguja metálica con su buen eje y, debajo, una lectura digital tabular que muestra 64.5 en ámbar sobre la unidad «BAR», flanqueada por MIN y MAX. Parece un instrumento de panel de verdad, no un gráfico web.
Lo que lo hace ganador es que su interfaz se lee como la hoja de datos de un instrumento: value para el valor de proceso, minValue y maxValue para el rango, warnThreshold y alarmThreshold para los límites, y safeZoneColor, warnZoneColor, alarmZoneColor y backgroundColor para adaptarlo a tu paleta, oscura o clara. El evento ThresholdExceeded salta cuando el valor cruza un límite, y tienes setValue y resetLimits si quieres manejarlo desde scripts.
Es también el gauge más reciente de la lista, publicado en septiembre de 2026, así que sus descargas aún son modestas. Que eso no te engañe.
Lo que nos gusta
- Aguja analógica y lectura digital en un solo instrumento
- Umbrales de aviso y alarma con evento
- Colores de zona adaptables a una paleta gris al estilo ISA-101
A tener en cuenta
- El bisel redondo necesita un hueco cuadrado: desperdicia espacio en huecos anchos y bajos
- Su ficha menciona un texto de unidad personalizable sin nombrar la propiedad: búscala en la lista Interfaz de TIA Portal
Propiedades enlazables
- value
- minValue
- maxValue
- warnThreshold
- alarmThreshold
- safeZoneColor
- warnZoneColor
- alarmZoneColor
- backgroundColor
02El gauge más configurable
Generic Gauge
Si te gusta ajustar cada marca de la escala, este es tu gauge. Un arco cian contundente crece sobre una escala de 0 a 8000 con números grandes y legibles, el final del rango se vuelve rojo y dos pequeños triángulos, uno amarillo y otro rojo, marcan la consigna y el límite. Parece el tacómetro de una máquina bien diseñada.
Tiene 40 propiedades y su ficha nombra casi todas. minScale y maxScale fijan el rango, minAngle y maxAngle el barrido, setpointValue y limitValue colocan las marcas, y setpointVisible y limitVisible las muestran u ocultan. tickWidth y tickLength te llevan de un instrumento delicado a uno robusto, puede girar en sentido horario o antihorario y el evento LimitExceeded puede lanzar un script HMI cuando el valor se pasa de la raya.
Lo que nos gusta
- Marcas de consigna y límite que puedes mostrar u ocultar
- Números de escala grandes y muy legibles
- Tipografía, marcas y disposición totalmente ajustables
A tener en cuenta
- En la vista previa publicada la etiqueta «PRESSURE» queda cortada abajo y no se ve el valor digital: ajusta las propiedades de margen y compruébalo en tu proyecto
- Cuarenta propiedades llevan su tiempo la primera vez
Propiedades enlazables
- minScale
- maxScale
- minAngle
- maxAngle
- setpointValue
- limitValue
- setpointVisible
- limitVisible
- tickWidth
- tickLength
03El mejor para velocidad y rpm
Speedometer Gauge
El salpicadero de coche de la lista. Un dial oscuro con una escala densa de 0 a 220, un arco de progreso que cambia de color a medida que sube el valor, una aguja blanca y una gran lectura digital bajo la etiqueta «SPEED km/h». Sabes lo que mide antes de leer una sola palabra.
Su ficha documenta 23 propiedades. currentValue mueve la aguja, startAngle y endAngle dan forma a la escala, el array zones la divide en regiones de color y unitText cambia km/h por rpm, m/min o lo que hable tu transportador. showGlassEffect añade un reflejo de cristal radial, y para scripts tienes el evento HighLimitReached y los métodos setValue y resetToZero.
Lo que nos gusta
- Se reconoce al instante como indicador de velocidad o rpm
- Valor digital grande y legible
- Zonas y texto de unidad configurables
A tener en cuenta
- El arco en degradado de colores grita en una pantalla gris al estilo ISA-101
- Su ficha nombra el máximo (
maxValue) pero ninguna propiedad de mínimo: revisa la interfaz completa en TIA Portal
Propiedades enlazables
- currentValue
- maxValue
- startAngle
- endAngle
- zones
- progressColor
- showGlassEffect
- unitText
- valueFontSize
04El mejor para valores de proceso por zonas de color
Gauge
Un dial limpio y moderno para cualquier valor de proceso. Una escala azul de 0 a 100 da paso a bandas verde, ámbar y roja cerca del final, una aguja roja y fina señala el valor y el centro muestra «PRESSURE» con una lectura de 65,5 bar. Sobrio, ordenado y muy a gusto en una pantalla oscura de sala de control.
Con 36 propiedades, es el que eliges cuando quieres zonas sin complicaciones. currentValue, minValue y maxValue fijan el rango, progressColor y pointerColor mantienen el valor legible, y splitNumber y subdivisionCount deciden lo densa que es la escala. Su ficha también lista los eventos ValueChanged y HighLimitReached y los métodos setValue y resetToZero.
Lo que nos gusta
- Zonas de varios colores claras desde el primer momento
- Control fino de la densidad de la escala
- Aspecto contenido que encaja en temas HMI oscuros
A tener en cuenta
- Los números de la escala se ven pequeños en la vista previa: compruébalos al tamaño real de tu pantalla
- Su ficha describe las zonas pero no nombra la propiedad que las define
Propiedades enlazables
- currentValue
- minValue
- maxValue
- startAngle
- endAngle
- progressColor
- pointerColor
- showGlassEffect
- splitNumber
- subdivisionCount
05El mejor con marcas de consigna y límite alto
Pressure Gauge
El pensado para hidráulica y neumática. Una aguja blanca recorre un arco cian sobre un fondo de cristal elíptico, un triángulo verde marca la consigna en 120, otro rojo marca el límite alto y la lectura inferior dice «PRESSURE 145.5 BAR». Cualquiera que haya vigilado una prueba de presión sabe exactamente qué significan esas dos marcas.
Su ficha documenta 40 propiedades, con currentValue para el valor y startAngle, endAngle y splitNumber para la escala. Es además el gauge con más eventos de la lista: HighLimitReached, LimitExceeded y SetpointReached, más un método setLimit para mover el umbral en Runtime. Desplazamientos radiales como setpointPadding colocan cada marca justo donde la quieres.
Lo que nos gusta
- Marcas de consigna y límite con sus propios eventos
setLimitcambia el umbral sobre la marcha- Mucho control del diseño para dashboards cargados
A tener en cuenta
- Los números de la escala apenas se ven en la vista previa: sube su contraste antes de usarlo en un panel
- El fondo elíptico es más ancho que el dial; desactiva
showGlassEffecto cambiabackgroundColorsi no encaja con tu estilo
Propiedades enlazables
- currentValue
- startAngle
- endAngle
- splitNumber
- showGlassEffect
- pointerColor
- backgroundColor
- setpointPadding
06El mejor gauge minimalista para paneles pequeños
Gauge
A veces menos es más. Este es un semicírculo cian grueso con un gran «72» en el centro, la etiqueta «Gauge» debajo y los extremos del rango, 0 y 100, abajo. Sin marcas, sin cristal, nada que distraiga: el tipo de tarjeta que queda cómoda en una fila de KPI de un Unified Comfort Panel.
Sus ocho propiedades se enlazan en un minuto: gaugeValue, minValue y maxValue para los datos, gaugeLabel y unitText para los textos, zones para segmentos de color, más backgroundColor y needleColor. El evento ThresholdExceeded salta cuando el valor cambia de zona y resetValue lo devuelve a su estado inicial.
Lo que nos gusta
- Valor enorme y legible: perfecto para filas de KPI
- Solo ocho propiedades
- Su ficha dice que está optimizado para paneles HMI de escritorio y móviles
A tener en cuenta
- En la vista previa el arco parece completamente lleno con 72 y no se ve ninguna aguja, aunque existe la propiedad
needleColor: prueba cómo se comporta el relleno antes de confiar en él - Las etiquetas 0 y 100 se pierden sobre el fondo oscuro
Propiedades enlazables
- gaugeValue
- minValue
- maxValue
- gaugeLabel
- unitText
- zones
- backgroundColor
- needleColor
Menciones de honor: 5 gauges y medidores más que merecen un vistazo
Controles vistosos que no entraron entre los seis mejores, sobre todo porque sus fichas no nombran las propiedades que enlazarías. Haz clic en cualquier miniatura para abrir su ficha.
Cyan Gauge
El gauge más descargado del catálogo en octubre de 2026, y bien valorado. Degradados cian, reflejo de cristal y umbrales de aviso; su ficha cuenta nueve propiedades, dos eventos y dos métodos sin nombrarlos.
Ver producto
Gradient Gauge
Un arco cian luminoso alrededor de una gran lectura en porcentaje (70 % en la vista previa), con degradados y umbrales de color configurables según su ficha. Muy bonito; la ficha es escueta.
Ver producto
Ampere Meter
Un amperímetro analógico de panel con tornillos en las esquinas, zonas ámbar y roja y lectura digital en amperios. Diez propiedades según su ficha.
Ver producto
Power Meter
No es un dial sino el frontal digital de un analizador trifásico con teclas de función. Su ficha dice que está inspirado en el SENTRON PAC3200 y que la marca y el modelo se pueden cambiar; 20 propiedades.
Ver producto
Industrial Flowmeter
Un cabezal de transmisor redondo con una pantalla LCD que muestra caudal, temperatura y presión, más indicadores de estado. Dieciséis propiedades según su ficha.
Ver producto
¿No encuentras tu gauge? Créalo (o modifica uno) con IA, gratis
Una confesión: todos los gauges de este artículo se crearon con el generador IA de HMIx. Por eso podemos decirlo sin ponernos colorados: si ninguno es exactamente lo que necesita tu proceso, puedes generar el tuyo en minutos.
Describe el instrumento con palabras normales (por ejemplo, «manómetro de 270 grados de 0 a 16 bar, paleta gris ISA-101, marca de límite alto y valor digital con un decimal») 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 gauge 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 «quita el efecto cristal», «muestra el valor con dos decimales» o «añade una marca de límite bajo». 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 gauge de esta página.
Cómo usar un gauge Custom Web Control en WinCC Unified (y WinCC V8)
La versión corta, para cuando ya has elegido tu gauge. 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 gauge. 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 gauge aparece en la lista: arrástralo a tu pantalla y dale un tamaño razonable.
Enlaza y prueba las propiedades
Selecciona el control y abre ventana de inspección → Propiedades → Propiedades → Interfaz. Enlaza la propiedad del valor (
value,currentValue,gaugeValue… cada gauge la llama a su manera) a una variable interna, añade un campo E/S para esa variable y arranca el Runtime: escribe unos cuantos valores y mira la aguja. Solo entonces cámbiala por la variable real 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: un gauge solo muestra datos, así que deja activada la opción Solo lectura (Read only) al enlazar el valor. Desactívala únicamente en una propiedad que el propio control tenga que escribir en una variable, como recuerdan las fichas. Y ajusta las propiedades de rango al alcance real del instrumento: un 0–100 por defecto en un transmisor de 0–16 bar pone la aguja donde no toca.
Leer la guía completa de Custom Web ControlsPreguntas frecuentes
¿De verdad son gratis estos gauges Custom Web Control?
Sí. Todos los gauges de este artículo están publicados como productos gratuitos en HMIx. Solo necesitas una cuenta gratuita para descargarlos.
¿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.
¿Por qué usar un gauge Custom Web Control en lugar de un SVG dinámico?
Un SVG dinámico es un dibujo ligero cuyas propiedades enlazas a variables, pero no puede cambiar sus textos en Runtime, así que no puede mostrar un número en vivo junto a la aguja. Un Custom Web Control es una pequeña aplicación web: puede dibujar el valor, animar la aguja, reaccionar a umbrales y disparar eventos hacia tus scripts HMI. Para un gauge con valor legible y límites, el CWC es la opción natural.
¿Dónde copio el ZIP en mi proyecto de TIA Portal?
Copia el archivo interior {GUID}.zip, sin descomprimirlo, en UserFiles\CustomControls de la carpeta de tu proyecto. Después pulsa Actualizar en Controles propios, dentro de la task card Herramientas, y arrastra el control a tu pantalla.
¿Puedo cambiar colores y zonas para seguir una paleta HMI de alto rendimiento?
Sí. Los seis elegidos exponen propiedades de color y la mayoría tiene zonas o umbrales. Usa fondos grises y reserva los colores fuertes para los rangos de aviso y alarma, para que el color signifique algo para el operador.
¿Puedo modificar uno de estos gauges?
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 Circular Analog Gauge: aguja, valor digital y umbrales de alarma en un único instrumento de aspecto honesto. Para velocidad o rpm, el Speedometer Gauge; para pruebas de presión con consigna, el Pressure Gauge; si te encanta ajustar cada marca, el Generic Gauge; para valores de proceso por zonas, el Gauge de escala azul; y para filas compactas de KPI, el Gauge minimalista.
Y si tu instrumento es más raro que todos estos (siempre lo es), recuerda que el generador que los creó está a un clic.