Apps Personalizadas de Señalización Digital

Una app personalizada es un sitio web completo y autónomo que empaquetas como un archivo .zip y reproduces en tus pantallas como cualquier otro medio. Todo se almacena en el dispositivo, así que la app sigue reproduciéndose cuando se cae internet. Las apps personalizadas se llamaban antes HTML sin conexión.

EasySignage entrega a cada app personalizada un conjunto de atributos del reproductor: la identidad y el contexto de la pantalla en la que se ejecuta, incluyendo el ID del reproductor, el nombre de la pantalla, el ID de la pantalla o unidad de visualización, la resolución, la ubicación y tus etiquetas personalizadas. Tu app lee esos valores y cambia lo que muestra, así que un mismo paquete se comporta de forma distinta en cada pantalla. Los atributos también usan nombres de clave compatibles con Broadsign, así que un creativo migrado desde Broadsign puede conservar sus nombres de campo.

Con las apps personalizadas puedes:

• Mostrar el contenido correcto por pantalla, tienda, zona, piso, región o idioma
• Personalizar solicitudes de API y datos usando el ID o las etiquetas de la pantalla
• Seguir reproduciendo de forma confiable sin conexión, sin ida y vuelta al servidor en cada cuadro
• Reutilizar un paquete en cientos de pantallas en lugar de crear uno para cada una

¿Es nuevo para ti? No necesitas escribir código para probarlo. Descarga el paquete de muestra ya preparado y súbelo, y la página muestra cada valor que entregó tu pantalla. Los desarrolladores pueden luego copiar un archivo en su propio proyecto para leer los mismos valores.

Descargar la muestra

Para ver cómo funcionan las apps personalizadas, ejecuta el paquete de muestra. Muestra cada atributo que entregó el dispositivo, en vivo en la pantalla.

El .zip contiene tres archivos:

Obligatorio: el punto de entrada de cada app personalizada debe llamarse index.html y estar en el nivel superior del .zip. Mantén todos los recursos, imágenes, CSS, JS y fuentes dentro del mismo paquete y referéncialos con rutas relativas para que la app funcione sin conexión a internet.

Más apps listas para usar

Nuestro kit de Digital Signage Custom Apps, gratuito y de código abierto en GitHub, incluye más apps que puedes subir tal cual o adaptar:

Inicio rápido sin programar

1. Sube el .zip de una de estas dos formas:
   • En una lista de reproducción: abre la lista de reproducción, haz clic en la capa, después en Añadir nuevo > Subir medios, y elige el .zip. Se añade a la capa al momento. Consulta Subir medios.
   • En Activos de medios: ve a Activos de medios, haz clic en Añadir medios > Cargar activos multimedia y elige el .zip. Después añádelo a una lista de reproducción con Añadir nuevo > Activos de medios. Consulta Activos de medios.
2. Haz clic en Publicar los cambios de esta lista de reproducción y asigna la lista de reproducción a una pantalla.

La app aparece en la capa. En el CMS, la vista previa muestra valores vacíos, porque solo una pantalla envía sus atributos.

La página de muestra aparece en la pantalla y lista cada atributo que envió la pantalla, con un banner que indica qué canal de entrega está activo. Eso confirma que la integración funciona de principio a fin.

Da a cada pantalla sus etiquetas

Las apps que muestran contenido distinto por pantalla leen las etiquetas de la pantalla. Añade las etiquetas como clave:valor, por ejemplo zone:north o menu:lunch: abre la pantalla, haz clic en More (Más) > Etiquetas, escribe cada etiqueta y pulsa Intro, y haz clic en Guardar. Consulta Acciones de la pantalla, o cómo etiquetar varias pantallas a la vez.

Solo las etiquetas escritas como clave:valor llegan a tu app como valores con nombre (tags.zone). Una etiqueta sin dos puntos, como lobby, solo se incluye en tags.all.

Crear una app personalizada con IA

Puedes crear una app personalizada sin programar: describe la pantalla que quieres a una herramienta de IA y ella escribe la app por ti. El kit de Digital Signage Custom Apps le da a la IA las reglas que necesitan las pantallas de señalización, como funcionar sin conexión, ejecutarse en reproductores antiguos, leer etiquetas y no incluir secretos en el código, para que lo que cree funcione en pantallas reales.

Para una guía más completa con ejemplos de instrucciones, consulta el artículo del blog How to Build a Custom Digital Signage App with AI (en inglés).

Paso 1: Conecta el kit a tu herramienta de IA

Paso 2: Describe la pantalla

Di qué muestra la pantalla, su orientación, qué cambia en cada pantalla (serán las etiquetas), los colores y el logotipo de tu marca, y de dónde sale el contenido. Por ejemplo:

Crea una app de EasySignage con el menú de mi cafetería, con menús de desayuno y almuerzo elegidos por pantalla con una etiqueta menu. Que funcione en vertical y en horizontal. Empaquétala en un zip y dime qué etiquetas poner en cada pantalla.

Un agente de programación crea los archivos por ti. Con un asistente de chat, guarda en una carpeta los archivos que te dé.

Paso 3: Previsualiza en tu navegador

Abre el index.html de la app en un navegador y añade valores de prueba a la dirección para ver lo que mostraría una pantalla:

index.html?name=Lobby&resolution=1920x1080&tags.menu=lunch

Cambia los valores y recarga para revisar cada versión. Pide a la IA los cambios que quieras, por ejemplo “haz los precios más grandes”.

Paso 4: Revisa y empaqueta la app

Con un agente de programación en la carpeta del kit, pídele que “revise y empaquete la app”. Ejecuta las comprobaciones del kit para los problemas que rompen las apps en los reproductores de señalización y crea un .zip en la carpeta dist con index.html en el nivel superior. También puedes ejecutarlo tú:

./scripts/package.sh my-app

Con un asistente de chat, comprime el contenido de la carpeta de la app, no la carpeta.

Paso 5: Súbela y pon las etiquetas

Sube el .zip y añádelo a una lista de reproducción como en el inicio rápido, y pon a cada pantalla las etiquetas que indicó la IA.

Revisa lo que creó la IA. Comprueba con cuidado el texto en pantalla y prueba en una pantalla de cada modelo de reproductor antes de usarla en todas. Nunca des a la IA claves de API ni contraseñas reales para incluir en la app: la app se copia en cada pantalla.

Créala tú desde la plantilla inicial

Si prefieres programarla tú, empieza con la plantilla inicial del kit:

git clone https://github.com/easysignage/Digital-Signage-Custom-Apps.git
cd Digital-Signage-Custom-Apps
cp -R templates/starter my-app       # 1. copia la plantilla
                                     # 2. edita my-app/app.js y style.css
./scripts/package.sh my-app          # 3. revísala y comprímela -> dist/my-app.zip

La guía de inicio del kit (en inglés) explica cada paso.

Cómo llegan los datos a tu app

EasySignage entrega los mismos atributos del reproductor a través de dos canales, así que tu app sigue funcionando sin importar cómo esté construida o protegida la creatividad:

No eliges un canal, easysignage.js lee el que esté disponible.

1. Un objeto global de JavaScript

EasySignage inyecta un pequeño script en tu index.html que define un objeto global antes de que se ejecute cualquiera de tus propios scripts:

window.easysignage        // el objeto del reproductor, p. ej. { player_id: "...", tags: { zone: "north" }, ... }

2. Una cadena de consulta en la URL

Los mismos valores también se agregan a la URL de la página en cada renderizado:

index.html?player_id=PL-abc123&name=Main%20Lobby&display_unit_id=SC-9&tags.zone=north&...

La cadena de consulta siempre está presente. Si una política de seguridad estricta en tu creatividad bloquea el script inyectado y falta el global, tu app aún lee los valores desde la URL. Las claves que empiezan con tags. (por ejemplo, tags.zone) se reconstruyen en un objeto tags.

Normalmente no eliges entre ambos. El lector easysignage.js usa el global cuando está disponible y recurre a la URL automáticamente. Tú llamas a una sola función.

Para desarrolladores: leer los atributos

Copia easysignage.js desde la muestra a tu proyecto y cárgalo con una etiqueta script normal antes de tu propio código:

<!-- index.html -->
<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();          // el objeto del reproductor (global o URL, gestionado por ti)

  var playerId = panel.player_id || "";
  var screen   = panel.name || "";
  var zone     = (panel.tags && panel.tags.zone) || "";

  // ...usa estos valores para impulsar tu creatividad.
</script>

Esa es toda la integración. EasySignage.read() devuelve el objeto del reproductor. También puedes leer window.easysignage directamente.

Migrando desde Broadsign:
EasySignage usa los mismos nombres de clave de Broadsign (display_unit_id, display_unit_resolution, frame_resolution, campaign_id, display_unit_lat_long), así que tus nombres de campo se mantienen. Léelos desde el objeto del reproductor de EasySignage:

var panelVariables = EasySignage.read();
if (panelVariables) {
  this.playerId  = panelVariables.player_id || "";
  this.screenId  = panelVariables.display_unit_id || "";
  this.latLong   = panelVariables.display_unit_lat_long || "";
}

Advertencia: window.BroadSignObject fue eliminado. Una creatividad que lea ese global ya no recibe atributos del reproductor. Actualízala para usar EasySignage.read() o window.easysignage.

Carga easysignage.js como un script clásico (<script src="...">), no como type="module". Un script externo clásico también se ejecuta bajo una Content-Security-Policy estricta (script-src 'self') que bloquearía scripts en línea, y funciona en webviews más antiguos de Tizen, webOS y BrightSign bajo file://.

Atributos disponibles

EasySignage entrega un conjunto reducido y compatible con Broadsign de atributos. El mismo valor se expone tanto bajo la clave nativa de EasySignage como bajo su alias de Broadsign, así que una creatividad escrita para cualquiera de las dos plataformas puede conservar sus nombres de campo.

Los valores son cadenas de texto y normalmente están presentes como "" cuando se desconocen. La única excepción es display_unit_lat_long, que está presente solo cuando se conoce la ubicación del dispositivo.

Minimización de datos:
Las apps personalizadas son código de terceros, así que EasySignage solo expone los campos de la tabla anterior. Los identificadores del dispositivo (número de serie, ID del dispositivo), el sistema operativo, el fabricante y los detalles de versión, las coordenadas precisas por separado, la orientación, y los nombres de la lista de reproducción y del medio no se pasan a tu app.

Etiquetas

Las etiquetas son las etiquetas personalizadas clave:valor que asignas a tus pantallas, por ejemplo zone:north, store:42 o lang:es. Úsalas para impulsar tu propia lógica de negocio. Llegan como un objeto, más una cadena unida:

var panel = EasySignage.read();

panel.tags.zone;     // "north"
panel.tags.store;    // "42"
panel.tags.all;      // "zone:north,store:42"   (separado por comas, clave:valor)

Las etiquetas distinguen mayúsculas de minúsculas; prefiere claves en minúsculas. Se llevan hasta 20 etiquetas al dispositivo. El conjunto completo siempre existe en tu cuenta de EasySignage.

Reglas de los valores

• Cada campo entregado es una cadena de texto.

• Los valores desconocidos están presentes como una cadena vacía "". La clave nunca falta, así que puedes leer panel.name sin verificar antes que exista. La única excepción es display_unit_lat_long, que está presente solo cuando se conoce la ubicación del dispositivo.

• tags siempre es un objeto, posiblemente vacío. tags.all es la cadena separada por comas.

• Mantén el paquete autónomo y usa rutas relativas para que funcione completamente sin conexión.

Ejemplo: mostrar contenido distinto por pantalla

<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();
  var zone  = (panel.tags && panel.tags.zone) || "default";

  // elige el contenido según la etiqueta de zona de la pantalla
  var banners = {
    north: "north-promo.jpg",
    south: "south-promo.jpg",
    default: "generic-promo.jpg",
  };
  document.getElementById("hero").src = banners[zone] || banners.default;

  // rota el diseño para pantallas en vertical (la resolución es "ANCHOxALTO")
  var res = (panel.resolution || "").split("x");
  if (res.length === 2 && Number(res[1]) > Number(res[0])) {
    document.body.classList.add("portrait");
  }
</script>

Solución de problemas

• No aparece nada: confirma que el archivo de entrada se llame index.html y esté en el nivel superior del .zip, y que cada recurso use una ruta relativa.

• Falta el global inyectado: una Content-Security-Policy estricta en tu página puede bloquear el script inyectado. Usa el lector easysignage.js, o lee la cadena de consulta de la URL, y tu app sigue obteniendo los valores.

• La app falla en dispositivos más antiguos: mantén tus scripts como scripts clásicos, sin type="module", para que se ejecuten en webviews más antiguos de Tizen, webOS y BrightSign.

• Una etiqueta no funciona: sube player-info.zip a la pantalla para ver todos los valores que envía. Los nombres de las etiquetas distinguen mayúsculas y minúsculas, y solo las etiquetas clave:valor llegan como valores con nombre.

• Prueba localmente primero: abre index.html en un navegador con una cadena de consulta agregada, por ejemplo index.html?player_id=TEST&display_unit_id=SC-1&resolution=1080x1920&tags.zone=north, para previsualizar cómo reacciona tu app antes de subirla.

Artículos relacionados

• Variables de URL Dinámicas del Sitio Web: pasa los mismos atributos del reproductor a una URL en línea.
• Subir Medios: cómo agregar medios a EasySignage.
• Pantallas: cómo añadir etiquetas a una pantalla.
• Kit de Digital Signage Custom Apps: ejemplos, la plantilla inicial y las skills para agentes de IA en GitHub.
• How to Build a Custom Digital Signage App with AI: guía paso a paso con ejemplos de instrucciones (en inglés).