Usando el Ticker Building Block
Actualizado hace más de una semana

El elemento Ticker te permite agregar gráficos de desplazamiento personalizados a tus Overlays . Es útil para tickers de noticias, información bursátil, pronósticos del tiempo y más.

El elemento Ticker esta unicamente disponible para los planes Professional y Enterprise.

El Ticker te permite también diseñar diferentes plantillas para mostrar distintos elementos que se encuentran en los datos vinculados a él. Esta es la principal diferencia con el Text Crawler, que solamente admite una plantilla (o configuración de “Composición de elementos”).


Datos soportados

El Ticker necesita estar vinculado a cualquier proveedor de datos que entregue un arreglo de datos.

El Ticker no admite la vinculación de una lista de strings para los elementos.

Todos los elementos del arreglo de datos deben tener:

  1. Un identifier individual, que debe ser único para cada elemento. Esto te permitirá tener controles cíclicos, informar a un Tally o reiniciar el Ticker desde el último elemento mostrado.

  2. Un template identifier que se puede compartir entre elementos. Esto se utilizará para saber qué plantilla utilizar para representar cada elemento.

  3. Otros campos que representan el payload actual que se mostrará. Por ejemplo, cadenas de texto para titulares de noticias o números que representan variaciones del mercado.

Por ejemplo, aquí está el payload de un Data Connector JSON local:


Templates del Ticker

Los templates son composiciones que se pueden mostrar condicionalmente, dependiendo del valor de un campo identifier que está presente en cada elemento del arreglo de datos.

Estos templates se pueden componer utilizando elementos de Texto, Imagen y Contenedores para lograr los diseños deseados.

Tener varios templates te permite diferenciar visualmente los elementos que se muestran, de modo que puedas crear un único ticker que muestre titulares de noticias regulares, titulares de noticias de última hora e información del tiempo, cada uno con una apariencia diferente.

A continuación se muestra un ejemplo de un template de titulares de "noticias de última hora" y uno de titulares "normales", cada una con un diseño diferente:


Creando un Ticker

Necesitas agregar un elemento de Ticker a tu árbol. Para que el crawler funcione es necesario:

Configurar templates

  • Vincular la fuente del ticker a una fuente de datos válida

  • Establecer el campo de identifier del template

Agregar templates

  1. Selecciona el campo que actuará como "template identifier".

  2. Vincula el ID del template, esto permitirá que el ticker sepa qué template debe usar para mostrar cada elemento del arreglo.

  3. Utiliza el botón "Agregar" para agregar tantos templates como necesites.

  4. Haz clic en el nombre de un template para mostrar la ventana emergente de configuración del template.

  5. Especifica el valor con el que debe compararse el campo identifier para poder utilizar ese template.

Siguiendo nuestro ejemplo, el template “Headline” se utilizará para todos los elementos del arreglo cuyos campos “template_id” tengan el valor “HEADLINE”:

Configurar el campo identifier

Una vez que la fuente del ticker está vinculada a un arreglo, puedes especificar qué campo de los elementos de la matriz se utilizará como identificador de elemento.

Utiliza el campo "item identifier" en la sección "Ticker" del panel del inspector del Ticker para seleccionar el campo correspondiente.

Diseñar templates

Los templates del Ticker se pueden componer únicamente usando:

  • Contenedores

  • Textos

  • Imágenes

Para hacerlo, arrastra esos elementos de la lista de building blocks a cada template del ticker:

Árbol de elementos y orden de apilamiento.

El orden de los elementos en el árbol dentro de un template del ticker se comporta de manera diferente que aquellos fuera del ticker.

Mientras que el orden de los elementos regulares representa su profundidad visual —como capas—, lo que te permite decidir cómo se superpondrán, el orden de los elementos dentro de un template se asigna al orden de apilamiento horizontal de izquierda a derecha.

Por lo tanto, los elementos enumerados arriba en el template se mostrarán a la izquierda de los que se enumeran a continuación. Juega con el orden de los elementos para componer qué cosas se colocan primero y cuáles al final.


Propiedades contextuales de los elementos

Los paneles de inspección de contenedores, textos e imágenes presentan un par de propiedades diferentes cuando se usan dentro de un Ticker, que responden a su diseño de "apilamiento" y te permiten ajustar sus propiedades de diseño.

Las propiedades de Posición y Rotación no se pueden configurar en el contexto de unn template, ya que podrían ser incompatibles con la animación de desplazamiento.

Container

  • La posición, el tamaño y la rotación no se pueden configurar en este contexto.

  • El relleno te permite establecer el espacio entre los bordes del Contenedor y su contenido.

Texto

  • La posición, el tamaño y la rotación no se pueden configurar en este contexto.

  • El tamaño de fuente se puede especificar en píxeles y los “modos de recorte de texto” habituales (ajustar en una línea, ajustar en un contenedor, recortar en líneas) no están disponibles.

Imagen

  • En este contexto no se pueden configurar la posición ni la rotación.

  • El tamaño de la imagen se establece en píxeles en lugar de porcentajes.


Configuración de comportamiento y animación del Ticker

  • Delay: En segundos, antes de que el texto comience a desplazarse.

  • Tipo de animación: siempre que el ticker esté visible, recorrerá los elementos. Esa animación puede comportarse de dos maneras:

    • Batch: todo el grupo de elementos del ticker encadenados se desplazará hasta que el último salga antes de que el primero vuelva a aparecer.

    • Continuous: los elementos del ticker se repetirán continuamente. Al último irá inmediatamente seguido del primero, sin espacio entre ellos.

  • Speed: establece la velocidad de la animación del ticker. Puedes utilizar un valor decimal, pero recomendamos utilizar números enteros para una mejor precisión de fotogramas en la salida. Este valor representa el número de píxeles por cuadro que se desplazarán, en una salida ideal de 60 fps. Ten en cuenta que las especificaciones de hardware y la carga de memoria del navegador afectan los fps entregados.

    Ten en cuenta que las funciones 'Report Current item to Tally' y 'Restart behavior' solo están disponibles con el plan enterprise.

  • Report current item to Tally: cuando esté habilitado, enviará un mensaje API con el ID del elemento que ingresa actualmente a la escena, para que pueda realizar un seguimiento de cuáles se muestran. Utiliza esto para auditorías personalizadas. Para obtener más información, consulta el artículo WebSocket de soporte de Tally.

  • Restart behavior: define cómo se comportará el ticker cuando se oculte y se muestre nuevamente (es decir, cuando tu Overlay principal salga y luego entre). Puedes elegir comenzar de nuevo desde el primer elemento o recordar el último elemento mostrado y reiniciar desde ese punto en adelante.

    El 'Remember last shown item' sólo se puede ver en acción en el Output; en el Editor, siempre comienza desde cero.


Control de ciclado

El Ticker muestra elementos en el mismo orden en que están en el arreglo de datos.

Puedes utilizar el control cíclico en el panel del inspector para activar cualquier elemento como el siguiente que se mostrará. El ciclo continuará a partir de ese momento.

En los casos en que haya muchos artículos, puede utilizar el cuadro de búsqueda para encontrar el que busca.

Para personalizar qué campos de datos deseas ver en la vista previa del control, usa el menú de selección de columnas al lado del cuadro de búsqueda.


¿Ha quedado contestada tu pregunta?