Ir al contenido principal
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.

En caso de que tengas un Proveedor que entrega una matriz de datos, todos los elementos en la matriz 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:


Configurando el campo Item Identifier

Una vez que la fuente del Ticker está vinculada a una matriz, puedes especificar qué campo de los elementos de la matriz se utilizará como Item Identifier.

El Item Identifier debe ser único para cada elemento. Esto te permitirá tener controles de ciclismo, reportar a un recuento, o reiniciar el Ticker desde el último elemento mostrado.

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


Templates del Ticker

Las plantillas son composiciones utilizadas por el Ticker para renderizar los elementos de la fuente de datos a la que está vinculado. Las plantillas del Ticker solo pueden componerse utilizando:

  • Contenedores

  • Textos

  • Imágenes

  • Post Content para asociar el contenido de Redes Sociales al Ticker.

Para hacerlo, simplemente arrastra esos elementos de la lista de Bloques de construcción dentro de cada Plantilla del Ticker.

Tener múltiples Plantillas te permite diferenciar visualmente los elementos, de modo que puedes tener un solo Ticker que muestre titulares de noticias regulares, titulares de noticias de última hora e información meteorológica, cada uno con un aspecto y sensación diferentes.

Para mostrar diferentes Plantillas, cada elemento en los datos debe tener un campo de Item Identifier, como se describe anteriormente.

En caso de que tu fuente de datos no tenga Item Identifier, no podrás renderizar diferentes Plantillas. En esos casos, podrás usar una única Default Template.

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:

Breaking News

Regular


Configuración de Templates

  • Vincula el Ticker a una fuente de datos válida.

  • Establece el campo de Template Identifier.


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”:


Uso del Default Template

El Default Template se utiliza cuando en tu API no hay Template Identifiers disponibles, o para renderizar elementos que no coinciden con otros Identificadores de Plantilla.

El Default Template también es optima en casos donde no puedes modificar la API para agregar un ID o un TemplateID. Por ejemplo, si tienes un proveedor de datos de terceros que entrega datos con una estructura fija que no puede modificarse fácilmente, entonces usarías el default template. Esto se aplicaría, por ejemplo, si conectas cualquiera de nuestros conectores de datos personalizados al Ticker.

Cuando el default template está configurado en el Ticker, cualquier elemento en los datos que carezca de un identificador de plantilla coincidente utilizará automáticamente el default template para su renderización.

En caso de que no necesites este comportamiento, puedes optar por no utilizarlo seleccionando "Use no default template". De esta manera, los elementos que no coincidan con ningún Template IDs simplemente se ignorarán y no se renderizarán.

Para usar el Deafult Template:

  • Vincula el Ticker a un Proveedor de Datos.

  • Por defecto, se seleccionará una "Plantilla Predeterminada", sin embargo, puedes optar por no usarla.


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

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


Vinculando el contenido de redes sociales al Ticker

Con el elemento Ticker puedes visualizar el contenido de tus colecciones, las cuales contienen comentarios recolectados de redes sociales mediante el uso del elemento Post Content Element. A continuación, se encuentran los pasos para conectar el contenido social a su Ticker:

1. Agregue un Proveedor de Colección (Recomendamos usarlo de forma Global).

2.Asigne una Colección. Si aún no ha creado su Colección, navegue hasta la Bandeja de Contenidos, créela y comience a agregar contenido utilizando las publicaciones sociales recopiladas de Descubrir Contenido o Flujos.

3. Agregue un elemento Ticker al árbol.

4. Vincule la lista de "Posts".


5. Agregue un elemento "Post Content" como hijo de la plantilla del Ticker.

6. Haga clic en el botón azul y luego seleccione "Posts" para vincular la publicación de redes sociales al Ticker.

Para vincular otras variables de la publicación en redes sociales (como el usuario, nombre de usuario, fecha de creación, fuente, etc.), agregue un elemento de texto para cada una. Tenga en cuenta que el elemento Contenido de Publicación es específicamente para mostrar el contenido de la publicación.

¿Ha quedado contestada tu pregunta?