Cartão de progresso para telas de sinalização digital

Um valor grande ou percentual fica ao lado de um anel, barra ou termômetro de arrecadação, com o que falta e os dias restantes claramente visíveis. Ele preenche a tela inteira, cabe em qualquer retângulo, fica no meio, se encaixa em um canto, corre como uma linha em um canto ou se estende como uma faixa ao longo de uma borda. Você define o título, valor atual e meta, adiciona um prazo e marcos, e escolhe um anel, barra ou termômetro para tela cheia.

Cartão ao vivo

Este cartão é desenhado no seu navegador pelo mesmo código que os Players executam, com dados de exemplo.

Categoria: Operações. Tags: Números e métricas, Gráficos e medidores.

Layouts

Este cartão principal se encaixa em qualquer layout: tela cheia, centro, largo, canto, chip, faixa ou qualquer retângulo livre.

Layouts: cheio, livre, centro, largo, canto, chip, faixa. Formas: paisagem, retrato.

Layouts, temas e publicação de cartões. Veja os cartões.

Dados e privacidade

Este cartão usa suas propriedades configuradas e dados ao vivo do cartão.

Propriedades

Para tema, fundo, destaque e posição, veja Propriedades comuns.

Defina as propriedades estáticas nos params do cartão ao criá-lo. O documento de dados dele contém apenas propriedades dinâmicas. Linhas aninhadas descrevem o conteúdo da propriedade pai.

Propriedades estáticas

Nome	Tipo	Padrão	Valores e limites	Descrição
`title`	string	`""`	maxLength: `60`
`prefix`	string	`""`	maxLength: `3`	Antes de cada valor, por exemplo $.
`unit`	string	`""`	maxLength: `12`	Após cada quantidade, por exemplo kg ou ' refeições'.
`decimals`	integer	`0`	mínimo: `0`; máximo: `2`
`style`	string		`"ring"`, `"bar"`, `"thermometer"`	O gráfico de uma tela cheia: um anel (quando não definido), uma barra ou um termômetro. Centro, faixa e chip sempre desenham uma barra. Um canto desenha a porcentagem sobre uma barra, ou um anel quando este é anel.
`timeZone`	string, nulo	`null`
`hero`	string	`"amount"`	`"amount"`, `"percent"`	A figura grande: o valor arrecadado ou a porcentagem. O outro é o pequeno.
`presence`	string	`"always"`	`"always"`, `"milestone"`, `"deadline-soon"`	marco: o cartão aparece por presenceWindow minutos após uma mudança que atinge um marco ou a meta. prazo próximo: somente enquanto o prazo estiver a soonDays dias ou menos.
`presenceWindow`	integer	`10`	mínimo: `1`; máximo: `1440`	Minutos que o cartão permanece ativo após um marco ou a meta ser ultrapassada (marco de presença).
`soonDays`	integer	`3`	mínimo: `0`; máximo: `60`	Dias antes do prazo em que o cartão aparece (prazo de presença próximo).
`backgroundColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui o fundo e a placa do cartão por uma cor plana ordenada por CSS. #RRGGBBAA fornece opacidade. background none tem precedência.
`textColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui as cores do texto principal e secundário. As cores de destaque e status semântico mantêm seus papéis.

Propriedades dinâmicas

Nome	Tipo	Padrão	Valores e limites	Descrição
`value`	number		Obrigatório
`goal`	number		mínimo: `1e-06`; Obrigatório
`deadline`	string, nulo	`null`		Data ou instante ISO 8601; datas locais estão na zona.
`milestones`	array	`[]`	maxItems: `8`
`previous`	número, nulo	`null`		O valor antes de mudar em `changedAt`; o preenchimento vai dele até o valor atual.
`changedAt`	string, nulo	`null`		Instante ISO 8601 em que o valor mudou. Em poucos segundos, o cartão reproduz seu momento: o preenchimento corre a partir de `previous`, marcos ultrapassados piscam e uma meta alcançada gera uma explosão.

Exemplo de tela

Salve as propriedades estáticas como params.json e crie o cartão. O resultado traz o id crd_ dele.

{
  "theme": "neomustard"
}

screenrig card create --type progress --major 1 --file params.json

Adicione este item aos primitives de uma página da playlist, com esse id no lugar do id do exemplo. Publique a playlist e atribua uma tela.

{
  "id": "progress",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "full",
  "content_fit": "fill"
}

Escrever dados ao vivo

Escreva o documento no cartão depois de criá-lo e depois substitua-o para atualizar a tela sem republicar. O cartão verifica cada gravação contra suas propriedades dinâmicas e recusa um documento que ele rejeita. Use o mesmo projeto da playlist.

Salve o documento como card-data.json. O CLI lê o documento em si, sem invólucro:

{
  "value": 1,
  "goal": 1,
  "deadline": null,
  "milestones": [],
  "previous": null,
  "changedAt": null
}

screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json

Ou chame a API diretamente. A API envolve o mesmo documento em um campo document. Um token de agente já nomeia seu projeto, então nenhum cabeçalho de projeto é enviado; se você enviar ScreenRig-Project, ele deve corresponder ao projeto do token. Forneça sua autorização de API pelo ambiente; veja Autenticação da API.

curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"document":{"value":1,"goal":1,"deadline":null,"milestones":[],"previous":null,"changedAt":null}}'