Gestión de pantallas
Un proyecto HMI puede contener múltiples pantallas. Cada pantalla es un canvas independiente con sus propios widgets, fondo y tema.
Navegador de pantallas
El panel lateral izquierdo muestra la lista de todas las pantallas del proyecto:
- Añadir (+): Crea una nueva pantalla vacía.
- Eliminar (−): Elimina la pantalla seleccionada y todos sus widgets.
- Renombrar: Clic derecho → Renombrar para cambiar el nombre de la pantalla.
- Seleccionar: Clic en la lista para abrir la pantalla en el canvas de edición.
Propiedades de pantalla
| Propiedad | Descripción |
|---|---|
| Nombre | Identificador de la pantalla (ej: Screen 1, Alarmas, Configuración). |
| Color de fondo | Color del canvas de la pantalla. |
| Tema | Dark o Light. Define los colores predeterminados de los widgets. |
| Resolución | Ancho × Alto en píxeles. Depende del dispositivo destino (480×272 para 4.3", 800×480 para 7.0"). |
Navegación entre pantallas
Para permitir al usuario del HMI cambiar de pantalla, use eventos de navegación en los widgets:
- Seleccione un widget (normalmente un Button).
- En la sección Eventos del panel de propiedades, añada un evento:
- Trigger:
pressed - Action:
navigate - Target: Nombre de la pantalla destino (ej:
Screen 2)
- Trigger:
Consejo: Diseñe una barra de navegación con botones en la parte superior o inferior de cada pantalla. Copie los botones de navegación entre pantallas para mantener la consistencia.
Canvas de diseño
El canvas muestra la pantalla activa a escala real. Las interacciones disponibles:
- Arrastrar widgets: Mueva widgets libremente (snap a grid de 10px).
- Redimensionar: Use los handles de las esquinas y bordes del widget seleccionado.
- Selección múltiple: Ctrl+clic para seleccionar varios widgets.
- Copiar/Pegar: Ctrl+C / Ctrl+V.
- Eliminar: Supr.
- Orden Z: Clic derecho → Traer al frente / Enviar al fondo.
Estilos reutilizables
El Editor de estilos permite definir estilos con nombre (Named Styles) que se aplican a varios widgets:
- Abra Ver → Editor de estilos.
- Cree un nuevo estilo (ej:
Boton_Azul). - Configure: color de fondo, borde, radio, tipografía, padding, sombra.
- Asigne el estilo a widgets desde la propiedad Estilo nombrado.
Al modificar un estilo nombrado, todos los widgets que lo usan se actualizan automáticamente.
Simulador HMI
El simulador interactivo permite probar el proyecto HMI sin necesidad de hardware:
- Renderiza todas las pantallas con interactividad completa.
- Los widgets de entrada (botones, switches, sliders, spinbox) son funcionales.
- Si hay un PLC conectado en la red, el simulador se conecta en tiempo real para lectura/escritura de variables.
- Los faceplates funcionan con el PLC real (visualización de estado y envío de órdenes).