Widgets HMI
El editor HMI ofrece 18 widgets LVGL estándar y 2 faceplates especializados para control de motores. Todos los widgets se arrastran desde la paleta al canvas de diseño.
Propiedades comunes
Todos los widgets comparten estas propiedades:
- Posición: X, Y (snap a grid de 10px).
- Tamaño: Ancho, Alto (redimensionable con handles).
- Estilo: Color de fondo, opacidad, borde, radio de esquinas, color de texto, tamaño de fuente, alineación, padding, sombra.
- Estilo nombrado: Referencia a un estilo reutilizable definido en el editor de estilos.
- Binding: Enlace a variable PLC (ver Variables HMI).
- Eventos: Acciones que se disparan al interactuar (ej: navegar a otra pantalla).
Widgets de visualización
| Widget | Tamaño por defecto | Descripción |
|---|---|---|
| Label | 100 × 30 | Texto estático o dinámico. Modos: wrap, scroll, dot (truncar con …), clip. Soporta recolor (tags de color en texto). |
| Bar | 150 × 20 | Barra de progreso. Propiedades: min, max, value. Ideal para niveles, porcentajes. |
| LED | 30 × 30 | Indicador luminoso. Propiedades: color, brightness. Eventos: value_changed, led_on, led_off. |
| Meter | 150 × 150 | Indicador tipo galvanómetro con aguja. Propiedades: min, max, value. |
| Chart | 200 × 150 | Gráfica de tendencia en tiempo real. Propiedades: tag_line1, y_min, y_max, x_time_range (s), sample_interval, line_color. |
| Arc | 100 × 100 | Arco indicador circular. Propiedades: min, max, value, ángulos de inicio/fin. También puede usarse como entrada. |
| Image | 100 × 100 | Imagen PNG importada (almacenada como base64 en el proyecto). |
| Table | 220 × 120 | Tabla de datos. Columnas, filas, ancho de columnas configurable. Cada celda puede vincularse a un tag independiente. |
| Line | 100 × 2 | Línea decorativa. Propiedades: points, line_width, line_color. |
Widgets de entrada
| Widget | Tamaño por defecto | Descripción |
|---|---|---|
| Button | 100 × 40 | Botón pulsable. Propiedades: text, checkable. Eventos: pressed, long_pressed, released. |
| Switch | 50 × 25 | Interruptor ON/OFF. Propiedad: checked. Evento: value_changed. |
| Slider | 150 × 20 | Deslizador. Propiedades: min, max, value, mode (normal/symmetrical/range). Evento: value_changed. |
| Checkbox | 120 × 25 | Casilla de verificación. Propiedades: text, checked. Evento: value_changed. |
| Dropdown | 120 × 35 | Lista desplegable. Propiedades: options[], selected. Evento: value_changed. |
| Roller | 80 × 100 | Selector tipo rueda. Propiedades: options[], selected, visible_rows. Evento: value_changed. |
| Spinbox | 100 × 35 | Entrada numérica con botones +/−. Propiedades: min, max, value, step, digit_count, decimal_count. |
| TextArea | 150 × 80 | Área de texto editable. Propiedades: text, placeholder, one_line, max_length. |
Contenedores
| Widget | Tamaño por defecto | Descripción |
|---|---|---|
| TabView | 300 × 200 | Panel con pestañas. Propiedades: tabs[] (nombres), tab_pos (top/bottom/left/right). Permite organizar widgets en pestañas. |
Faceplates
Los faceplates son widgets compuestos prediseñados que encapsulan la visualización y control de bloques de función del PLC:
Motor Dir (Arranque directo)
Widget visual para el bloque MTR_DIR. Muestra el estado del motor con indicación de color (verde=marcha, rojo=alarma, gris=parado) y botones de control.
- Configuración: Nombre del motor, DB de instancia, PLC destino.
- Variables auto-generadas (7): OUT, AEP, ACM (lectura) + OMM, OPM, RST, AUT (lectura/escritura).
- Indicadores: Badge MAN/AUT, barra de alarma, botones MARCHA/PARO/RESET.
Motor Inv (Inversor doble canal)
Widget visual para el bloque MTR_INV. Control de motor con dos sentidos de giro.
- Configuración: Nombre del motor, DB de instancia, PLC destino.
- Variables auto-generadas (9): OUT1, OUT2, AEP, ACM (lectura) + OMM1, OMM2, OPM, RST, AUT (lectura/escritura).
- Botones: IZQ, DER, PARO, RESET en cuadrícula 2×2.
Consejo: Los faceplates generan automáticamente las variables de comunicación en el driver del PLC. Al eliminar un faceplate, las variables huérfanas se limpian automáticamente durante la compilación.