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.

Inicio rápido sin programar

1. Ve a Media (Medios) y sube el paquete .zip (consulta Subir Medios ).
2. Agrega el elemento multimedia a una lista de reproducción.
3. Asigna la lista de reproducción a una pantalla.

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

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.

• 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.