O elemento Ticker permite adicionar gráficos de rolagem altamente personalizados às suas Overlays . É útil para notícias, informações sobre ações, previsões meteorológicas e muito mais.
O elemento Ticker está disponível apenas para os planos Professional e Enterprise.
O Ticker permite criar diferentes modelos para exibir diferentes itens encontrados nos dados vinculados a ele. Esta é a principal diferença com o Text Crawler, que suporta apenas um modelo (ou configuração “Composição de Itens”).
Dados suportados
O Ticker precisa estar vinculado a qualquer provedor de dados que forneça uma matriz de dados.
O Ticker não suporta vinculação de uma lista de strings para os elementos
Todos os elementos da matriz de dados devem ter:
Um identifier individual, que deve ser exclusivo para cada elemento. Isso permitirá que você tenha controles de ciclo, reporte-se a um Tally ou reinicie o Ticker a partir do último item mostrado.
Um template identifier, que pode ser compartilhado entre elementos. Isto será usado para saber qual modelo usar para representar cada elemento.
Outros campos que representam o payload que será exibido. Por exemplo, sequências de texto para manchetes de notícias ou números que representam variações do mercado.
Por exemplo, aqui está o payload de um Data Connector JSON local:
Templates do Ticker
Templates são composições que podem ser mostradas condicionalmente, dependendo do valor de um campo identificador que está presente em cada elemento da matriz de dados
.
Esses modelos podem ser compostos usando elementos de texto, imagem e contêiner para obter os designs desejados.
Ter vários modelos permite diferenciar visualmente os itens mostrados, para que você possa criar um único ticker que exiba manchetes de notícias regulares, manchetes de últimas notícias e informações meteorológicas, cada uma com uma aparência diferente.
Aqui está um exemplo de modelo de manchetes de "notícias de última hora" e de manchetes "regulares", cada um com um design diferente:
Criando um Ticker
Você precisa adicionar um elemento Ticker à sua árvore. Para fazer o ticker funcionar é necessário:
Configurar templates
Vincule a origem do crawler a uma origem de dados válida
Defina o campo identifier do template
Adicionar templates
Selecione o campo que atuará como “template identifier”.
Vincule o ID do template, isso permitirá que o Ticker saiba qual template deve usar para exibir cada elemento da matriz.
Use o botão “Adicionar” para adicionar quantos templates você precisar.
Clique no nome de um template para exibir o popover de configurações do template.
Especifique o valor com o qual o campo identifier deve corresponder, para usar esse template.
Seguindo nosso exemplo, o template “Headline” será usado para todos os elementos do array cujos campos “template_id” possuem o valor “HEADLINE”:
Configurar o campo identifier dos itens
Depois que a origem do Ticker estiver vinculada a uma matriz, você poderá especificar qual campo dos elementos da matriz será usado como identifier de item.
Use o campo “Item identifier” na seção “Ticker” do painel do inspetor do ticker para selecionar o campo correspondente.
Projetar templates
Os templates do Ticker podem ser compostos apenas usando:
Contêineres
Textos
Imagens
Para fazer isso, basta arrastar esses elementos da lista Building Blocks para cada template do ticker:
Árvore de elementos e ordem de empilhamento
A ordem dos elementos na árvore dentro de um template do crawler se comporta de maneira diferente daqueles fora do ticker.
Embora a ordem dos elementos regulares represente sua profundidade visual —como camadas—, permitindo que você decida como eles se sobreporão, a ordem dos elementos dentro de um template de crawler é mapeada para a ordem de empilhamento horizontal da esquerda para a direita.
Portanto, os elementos listados acima na subárvore Template serão mostrados à esquerda dos listados abaixo. Brinque com a ordem dos elementos para compor quais coisas são colocadas primeiro e quais são colocadas por último.
Propriedades contextuais dos elementos
Os painéis do inspetor de contêineres, textos e imagens apresentam algumas propriedades diferentes quando usados dentro de um rastreador avançado, que respondem ao seu layout de “empilhamento” e permitem ajustar suas propriedades de design.
As propriedades Posição e Rotação não são configuráveis no contexto de um modelo de rastreador, pois podem ser incompatíveis com a animação de rolagem.
Contêiner
Posição, tamanho e rotação não podem ser configurados neste contexto.
O preenchimento permite definir o espaçamento entre as bordas do Contêiner e seu conteúdo.
Texto
Posição, tamanho e rotação não podem ser configurados neste contexto.
O tamanho da fonte pode ser especificado em pixels, e os “modos de recorte de texto” regulares (ajustar em uma linha, ajustar no contêiner, recortar em linhas) não estão disponíveis.
Imagem
A posição e a rotação não podem ser configuradas neste contexto.
O tamanho da imagem é definido em pixels em vez de porcentagens.
Configurações de animação e comportamento do Twitter
Delay: Em segundos, antes que o texto comece a rolar.
Tipo de animação: enquanto o ticker estiver visível, ele percorrerá os itens. Essa animação pode se comportar de duas maneiras:
Batch: Todo o grupo de itens do ticker encadeados irá rolar até o último sair antes que o primeiro apareça novamente.
Contínuous: os itens do ticker farão um loop contínuo. O último será imediatamente seguido pelo primeiro, sem espaço entre eles.
Velocidade: Define a velocidade da animação do ticker. Você pode usar um valor decimal, mas recomendamos usar números inteiros para melhor precisão do quadro na saída. Este valor representa o número de pixels por quadro a serem 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 o fps entregue.
Observe que os recursos 'Report current item to Tally' e 'Restart behavior' estão disponíveis apenas no plano enterprise.
Report current item to Tally: Quando ativado, enviará uma mensagem API com o ID do item que está entrando em cena no momento, para que você possa acompanhar quais estão sendo mostrados. Use isso para auditoria personalizada. Para obter mais informações, leia o artigo WebSocket de suporte do Tally.
Restart behavior: define como o Ticker se comportará quando oculto e mostrado novamente (ou seja: quando sua Overlay pai sai e depois entra). Você pode optar por começar novamente a partir do primeiro item ou lembrar o último item mostrado e reiniciar a partir desse ponto.
O 'Remember last shown item' só pode ser visto em ação no Output; no Editor, sempre começa do zero.
Controle de Ciclo
O Ticker exibe os itens na mesma ordem em que estão na matriz de dados.
Você pode usar o Controle de Ciclo no painel do inspetor para acionar qualquer item como o próximo a ser mostrado. O ciclo continuará a partir desse ponto em diante.
Nos casos em que há muitos itens, você pode usar a caixa de pesquisa para encontrar o que procura.
Para personalizar quais campos de dados você deseja ver na visualização do controle, use o menu de seleção de colunas próximo à caixa de pesquisa.