Overlays de Pantalla

Los overlays son elementos dinámicos que aparecen sobre tu contenido. Son perfectos para mostrar información en tiempo real como hora, clima, logos o anuncios importantes sin interrumpir tu contenido principal.

Tipos de Overlay Disponibles

Overlay de Reloj

Muestra la hora actual en tu pantalla.

Características:

Familia de fuente personalizable (12+ opciones)
Color de texto personalizado con selector de color
Detección automática de zona horaria
Diseño limpio y minimalista

Overlay de Imagen

Agrega logos, gráficos o imágenes de marca.

Características:

Selecciona desde tu biblioteca de medios
Soporta JPG, PNG y otros formatos de imagen
Arrastra para posicionar en cualquier lugar de la pantalla
Redimensiona arrastrando las esquinas
Perfecto para logos y marcas de agua

Usa overlays de imagen para tu logo de empresa en una esquina de cada pantalla para mantener una marca consistente.

Overlay de Clima

Muestra las condiciones climáticas actuales.

Características:

Muestra temperatura actual
Icono de clima (soleado, nublado, lluvia, etc.)
Detección automática de ubicación
Diseño limpio y minimalista

Overlay de Anuncio

Muestra anuncios de texto con scroll o estáticos.

Características:

Mensaje de texto personalizado
Ideal para alertas y promociones
Posición prominente
Fácil de actualizar al momento

Agregar un Overlay

Los overlays se agregan a través de la pestaña Diseño en la configuración de pantalla:

Navega a Pantallas
Haz clic en una pantalla para abrir la configuración
Ve a la pestaña Diseño
Encuentra la sección "Agregar Overlay" en la barra lateral
Arrastra un tipo de overlay al canvas de vista previa
Suéltalo donde quieras posicionarlo
Configura los ajustes del overlay en el modal que aparece
Los cambios se guardan automáticamente

El posicionamiento de overlays se hace completamente arrastrando y soltando. Simplemente arrastra un overlay al canvas y posiciónalo exactamente donde quieras.

Posicionar Overlays

Los overlays usan posicionamiento por arrastrar y soltar en el canvas:

Arrastrar para Posicionar

Agarra el overlay en el canvas
Arrastrar a tu ubicación deseada
Suelta para establecer la posición
El overlay se ajusta a su nueva ubicación

Redimensionar Overlays

Pasa el mouse sobre un overlay para ver los manejadores de redimensionado
Arrastra esquinas o bordes para redimensionar
Mantener la relación de aspecto arrastrando esquinas

Apilamiento de Overlays

Cuando los overlays se superponen:

Los overlays agregados después aparecen arriba
Haz clic en un overlay para traerlo al frente
Los overlays siempre se renderizan sobre el contenido de las zonas

Configuración de Overlays

Ajustes de Reloj

Ajuste	Opciones
Fuente	Poppins, Roboto, Inter, Open Sans, Lato, Montserrat, y más
Color de Texto	Cualquier color vía selector de color

Ajustes de Imagen

Ajuste	Descripción
Imagen	Selecciona desde tu biblioteca de medios
Posición	Arrastra en el canvas para posicionar
Tamaño	Arrastra esquinas para redimensionar

Ajustes de Clima

Ajuste	Descripción
Ubicación	Auto-detectada basada en ubicación de pantalla
Visualización	Temperatura e icono de clima

Ajustes de Anuncio

Ajuste	Descripción
Mensaje	Tu texto personalizado
Visualización	Overlay de texto prominente

Editar Overlays

Clic para Editar

Haz clic en cualquier overlay en el canvas
Aparece un menú contextual o modal
Modifica los ajustes según sea necesario
Los cambios se guardan automáticamente

Eliminar Overlay

Haz clic en el overlay
Haz clic en el icono eliminar/papelera
Confirma la eliminación
El overlay se elimina inmediatamente

Mejores Prácticas

Ubicación

No obscurezcas contenido importante
Considera la distancia de visualización
Usa esquinas para información persistente (reloj, logo)
Usa el área inferior para anuncios

Balance de Contenido

Limita a 2-3 overlays por pantalla
Asegura que el texto sea legible
Combina con colores de marca
Prueba desde la distancia real de visualización

Layouts Comunes

Pantalla de Recepción:

+--------------------------------+
| [Reloj]              [Logo]    |
|                                |
|       Contenido Principal      |
|                                |
|                     [Clima]    |
+--------------------------------+

Menú:

+--------------------------------+
|          Items del Menú        |
|                                |
|   Item 1    Item 2             |
|   Item 3    Item 4             |
|                                |
| [Anuncio: Especial del Día!]   |
+--------------------------------+

Pantalla Corporativa:

+--------------------------------+
| [Logo]                         |
|                                |
|       Presentación             |
|                                |
|               [Reloj]          |
+--------------------------------+

Solución de Problemas

Overlay No Se Muestra

Verifica que la pantalla esté en línea
Comprueba que el overlay se guardó
Refresca la configuración de la pantalla
Asegúrate de que el overlay no esté oculto detrás del contenido

Clima No Se Muestra

Verifica la conexión a internet
La detección de ubicación puede estar bloqueada
Espera la carga inicial de datos

Reloj con Hora Incorrecta

Revisa la configuración de zona horaria de la pantalla
Verifica la hora del sistema del dispositivo físico

Imagen No Carga

Verifica que la imagen existe en la biblioteca de medios
Comprueba que el formato de archivo sea soportado (JPG, PNG)
Asegúrate de que el archivo no esté corrupto

Siguientes Pasos

Crea Listas de Reproducción para tu contenido principal
Aprende sobre la Biblioteca de Medios
Configura Horarios para programación de contenido