Passar para o conteúdo principal
Todas as coleçõesViz FlowicsBuilding Blocks
Usando o Ticker Building Block
Usando o Ticker Building Block
Atualizado há mais de uma semana

O elemento Ticker permite adicionar gráficos de rolagem personalizados aos seus Overlays.

É útil para tickers de notícias, informações de mercado, previsão do tempo e mais.

O elemento Ticker está disponível apenas nos planos Professional e Enterprise.

O Ticker também permite projetar diferentes modelos para mostrar diferentes elementos encontrados nos dados vinculados a ele. Esta é a principal diferença em relação ao Text Crawler, que suporta apenas um modelo (ou configuração de "Composição de elementos").


Dados suportados

O Ticker precisa estar vinculado a qualquer provedor de dados que forneça uma matriz de dados.

Caso tenha um Provedor que forneça uma matriz de dados, todos os elementos na matriz de dados devem ter:

  1. Um identificador individual, que deve ser único para cada elemento. Isso permitirá que você tenha controles cíclicos, informe a um Tally ou reinicie o Ticker a partir do último item mostrado.

  2. Um identificador de modelo que pode ser compartilhado entre elementos. Isso será usado para saber qual modelo usar para representar cada elemento.

  3. Outros campos que representam o payload atual a ser exibido. Por exemplo, strings de texto para manchetes de notícias ou números que representam variações de mercado.

Por exemplo, aqui está o payload de um Conector de Dados JSON local:


Configurando o campo Item Identifier

Depois que a fonte do Ticker estiver vinculada a uma matriz, você pode especificar qual campo dos elementos da matriz será usado como Item Identifier.

O Item Identifier deve ser único para cada elemento. Isso permitirá que você tenha controles cíclicos, informe a um Tally ou reinicie o Ticker a partir do último item mostrado.

Use o campo "Item Identifier" na seção "Configurações do Ticker" do painel do inspetor do Ticker para selecionar o campo correspondente.


Modelos do Ticker

Os modelos são composições usadas pelo Ticker para renderizar os elementos da fonte de dados à qual está vinculado. Os modelos do Ticker só podem ser compostos usando:

  • Contêineres

  • Textos

  • Imagens

  • Post Content para associar o conteúdo das redes sociais ao Ticker.

Para fazer isso, simplesmente arraste esses elementos da lista de Blocos de construção para cada Modelo do Ticker.

Ter vários Modelos permite diferenciar visualmente os elementos, de modo que você pode ter um único Ticker que exibe manchetes regulares, manchetes de última hora e informações meteorológicas, cada um com uma aparência diferente.

Para exibir Modelos diferentes, cada elemento nos dados deve ter um campo de Identificador do Item, conforme descrito anteriormente.

Se a sua fonte de dados não tiver um Identificador do Item, você não poderá renderizar Modelos diferentes. Nestes casos, você poderá usar um único Default Template.

A seguir, temos um exemplo de um modelo de manchetes "de última hora" e um de manchetes "normais", cada um com um design diferente:

Breaking News

Regular


Configuração de Modelos

  • Vincule o Ticker a uma fonte de dados válida.

  • Estabeleça o Template Identifier do Modelo.


Adicionando templates

  1. Selecione o campo que atuará como "Template Identifier".

  2. Vincule o ID do modelo, isso permitirá que o ticker saiba qual modelo usar para mostrar cada elemento da matriz.

  3. Use o botão "Add" para adicionar quantos modelos forem necessários.

  4. Clique no nome de um modelo para exibir a janela de configuração do template.

  5. Especifique o valor a ser comparado com o campo de identificação para poder usar esse modelo.

Seguindo nosso exemplo, o modelo "Manchete" será usado para todos os elementos da matriz cujos campos "template_id" tenham o valor "HEADLINE":


Uso do Default Template

O Default template é utilizado quando na sua API não há Template Identifiers disponíveis, ou para renderizar itens que não correspondem a outros IDs de Modelo.

O Default Template também é benéfico em casos em que você não pode modificar a API para adicionar um ID ou TemplateID. Por exemplo, se você tiver um provedor de dados de terceiros que entrega dados com uma estrutura fixa que não pode ser facilmente modificada, então você usaria o default template. Isso se aplicaria, por exemplo, se você conectar qualquer um de nossos conectores de dados personalizados ao Ticker.

Quando o Default Template está configurado no Ticker, qualquer item nos dados que não tenha um identificador de modelo correspondente usará automaticamente o default template para renderização.

Caso você não precise desse comportamento, você pode optar por não utilizá-lo selecionando "Use no default template". Dessa forma, os itens que não correspondem a nenhum Template IDs serão simplesmente ignorados e não renderizados.

Para usar o Deafult Template:

  • Vincule o Ticker a um Provedor de Dados.

  • Por padrão, um "Deafult Template" será selecionado, no entanto, você pode optar por não usá-lo.


Árvore de elementos e ordem de empilhamento.

A ordem dos elementos na árvore dentro de um modelo do ticker se comporta de maneira diferente daqueles fora do ticker.

Enquanto a ordem dos elementos regulares representa sua profundidade visual - como camadas - permitindo que você decida como eles serão sobrepostos, a ordem dos elementos dentro de um modelo é atribuída à ordem de empilhamento horizontal da esquerda para a direita.

Portanto, os elementos listados acima no modelo serão exibidos à esquerda daqueles listados abaixo. Brinque com a ordem dos elementos para compor quais coisas são colocadas primeiro e quais por último.


Propriedades contextuais dos elementos

Os painéis de inspeção de contêineres, textos e imagens apresentam um par de propriedades diferentes quando usados dentro de um Ticker, respondendo ao seu design de "empilhamento" e permitindo que você ajuste suas propriedades de design.

As propriedades de Posição e Rotação não podem ser configuradas no contexto de um modelo, pois podem ser incompatíveis com a animação de rolagem.

Container

  • A posição, o tamanho e a rotação não podem ser configurados neste contexto.

  • O preenchimento permite que você defina o espaço entre as bordas do Contêiner e seu conteúdo.

Texto

  • A posição, o tamanho e a rotação não podem ser configurados neste contexto.

  • O tamanho da fonte pode ser especificado em pixels e os "modos de corte de texto" habituais (ajustar em uma linha, ajustar em um contêiner, cortar em linhas) não estão disponíveis.

Imagen

  • Neste contexto, a posição e a rotação não podem ser configuradas.

  • O tamanho da imagem é definido em pixels em vez de porcentagens.


Configuração de comportamento e animação do Ticker

  • Delay: Em segundos, antes que o texto comece a deslocar-se.

  • Tipo de animación: sempre que o ticker estiver visível, percorrerá os elementos. Essa animação pode se comportar de duas maneiras:

    • Batch: Todo o grupo de elementos encadeados do ticker se deslocará até que o último saia antes que o primeiro volte a aparecer.

    • Continuous: Os elementos do ticker se repetirão continuamente. O último será imediatamente seguido do primeiro, sem espaço entre eles.

  • Speed: Define a velocidade da animação do ticker. Você pode usar um valor decimal, mas recomendamos usar números inteiros para uma melhor precisão de quadros na saída. Este valor representa o número de pixels por quadro que serão deslocados, em uma saída ideal de 60 fps. Tenha em mente que as especificações de hardware e a carga de memória do navegador afetam os fps entregues.

    Observe que as funções 'Report Current item to Tally' e 'Restart behavior' só estão disponíveis com o plano 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 como o ticker se comportará quando for ocultado e exibido novamente (ou seja, quando seu Overlay principal sair e depois entrar novamente). Você pode escolher começar de novo desde o primeiro elemento ou lembrar o último elemento mostrado e reiniciar a partir desse ponto em diante.

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

O 'Remember last shown item' só pode ser visto em ação na Saída; no Editor, sempre começa do zero.


Vinculando conteúdo de mídia social ao Ticker

Com o elemento Ticker, você pode visualizar o conteúdo das suas coleções, que contêm comentários coletados das redes sociais através do uso desse elemento Post Content. Abaixo estão os passos para conectar o conteúdo social ao seu Ticker:

  1. Adicione um Provedor de Coleção (Recomendamos usá-lo com escopo Global).

  2. Atribua uma Coleção. Se você ainda não criou sua Coleção, navegue até a Caixa de Entrada de Conteúdo, crie-a e comece a adicionar conteúdo a ela usando as postagens sociais coletadas do Descobrir Conteúdo ou Fluxos.

3. Adicione um elemento Ticker à árvore.

4. Vincule a lista de "Posts".

5. Adicione um elemento "Conteúdo da Postagem" como filho do modelo Ticker.

6. Clique no botão azul e depois selecione "Postagem" para vincular a postagem de mídia social ao Ticker.

Para vincular outras variáveis da postagem de mídia social (como usuário, nome de usuário, data de criação, fonte, etc.), adicione um elemento de texto para cada uma. Observe que o elemento Conteúdo da Postagem é especificamente para exibir o conteúdo da postagem.

Respondeu à sua pergunta?