Cartão de cabeçalho

Uma barra ao longo da borda superior da tela: um slot à esquerda e outro à direita, e uma mensagem que fica parada, rola ou gira por páginas.

Uma barra com largura total da tela, encostada na borda superior, reúne as pequenas coisas que uma tela precisa. Os slots esquerdo e direito mostram cada um um item: palavras, uma etiqueta, um relógio, o clima atual, um ícone, a data, um ponto de status, seu logo, uma contagem regressiva, um número, a página em que você está ou um alerta silencioso que fica quente ou vermelho. O meio carrega uma mensagem que fica parada, rola quando é longa ou gira por até oito páginas. Você define os itens e a mensagem e os altera enquanto a barra está ativa; ela mantém seu lugar em todas as telas.

Cartão ao vivo

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

Categoria: Mensagens. Etiquetas: Saguões e recepção, Escritórios e locais de trabalho, Lojas.

Layouts

Este cartão de barra é colocado como cabeçalho: uma barra de largura total, 80 de altura, alinhada à borda superior. Não usa layout nem âncora.

Layouts: cabeçalho. Formas: faixa.

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

Dados e privacidade

Feed: screenrig.weather/v1.

Documentos do feed carregam atribuição da fonte. O Player fornece o feed para o cartão.

Atribuição do clima: dados climáticos por Weatherbit, conforme nomeado no documento do feed.

Propriedades

Para tema, fundo e destaque, veja Propriedades comuns. Um cartão de barra não tem propriedade layout ou anchor: ele é sempre colocado como seu cabeçalho.

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

NomeTipoPadrãoValores e limitesDescrição
locationobjeto, nulonulladditionalProperties: falseDe onde o item do tempo lê suas condições; sem isso não há dados meteorológicos e o item fica vazio.
location.namestringmaxLength: 40; Obrigatório
location.latitudenumbermínimo: -90; máximo: 90; Obrigatório
location.longitudenumbermínimo: -180; máximo: 180; Obrigatório
timeZonestring, nulonullmaxLength: 64Zona IANA dos itens de relógio, data e contagem regressiva; nulo usa a zona da tela.
backgroundColorstring, nulonullpadrã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.
textColorstring, nulonullpadrã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

NomeTipoPadrãoValores e limitesDescrição
leftobjeto, nulonulladditionalProperties: falseO slot esquerdo, com 250 px de largura (240 x 70 dentro dele), conteúdo no início, a 24 px da borda da tela. null o deixa vazio; ele mantém seu espaço. O que kind lê: texto e etiqueta text; relógio hourCycle e timeZone; clima unit (do feed de clima); ícone icon; data dateStyle e timeZone; status text, tone e pulse; logo media; contagem regressiva at e label; número label e value; página page, of e style; alerta active, severity e text. O hourCycle de um relógio, o unit de um item de clima e a ordem de uma data seguem o local do Player, a menos que o item os defina.
left.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; ObrigatórioO que o slot mostra.
left.textstring""maxLength: 60As palavras de um texto, etiqueta, status ou item de alerta.
left.sizestring"small""small", "medium", "large"Tamanho da fonte dos itens de texto, etiqueta, status e alerta (24, 32 e 44 px em 1080p; um texto pequeno ocupa duas linhas, os outros uma), de uma data (32, 44 e 56 px, uma linha) e dos números de um item de relógio, clima, contagem regressiva, página e ícone.
left.colorstring, nulonullpadrão: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Cor do texto ou ícone #RRGGBB ou #RRGGBBAA; null usa a cor do texto do tema.
left.fillstring, nulonullpadrão: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Um retângulo arredondado de uma tag: #RRGGBB ou #RRGGBBAA; nulo é a cor do texto com meia intensidade (um contorno nos temas Clear).
left.iconnulo, stringnullnull, "activity-01", "air-vent", "airplane-01", "alert-01", "alert-02", "american-football", "analytics-up", "apple", "arrow-down-01", "arrow-down-right-01", "arrow-up-01", "arrow-up-right-01", "award-01", "baseball", "basketball-01", "battery-full", "bell-ring", "bicycle", "birthday-cake", "bitcoin", "bus-01", "calendar-03", "calendar-04", "calendar-add-01", "calendar-check", "call-02", "camera-01", "cancel-circle", "car-01", "champion", "chart-decrease", "chart-increase", "checkmark-circle-02", "clock-01", "clock-02", "cloud", "cloud-angled-rain", "cloud-angled-zap", "cloud-big-rain", "cloud-drizzle", "cloud-fog", "cloud-hailstone", "cloud-snow", "coffee-01", "coffee-02", "contact-01", "container-truck-01", "cricket-bat", "crown", "delivery-truck-01", "dices", "discord", "discount-tag-01", "dollar-02", "door-closed-locked", "door-open", "drink", "droplet", "ethereum", "euro", "exchange-01", "facebook-01", "factory", "fast-wind", "favourite", "ferry-boat", "fire", "fire-02", "first-aid-kit", "flag-01", "flag-02", "flash", "flower-01", "football", "gauge", "gift", "git-branch", "globe-02", "google", "hand-prayer", "heart", "help-circle", "home-01", "hourglass", "humidity", "ice-hockey", "information-circle", "instagram", "lamp-01", "lantern", "leaf-01", "leaf-02", "lightbulb", "link-01", "linkedin-01", "litecoin", "location-01", "location-04", "mail-01", "medal-first-place", "medical-mask", "meeting-room", "megaphone-01", "message-01", "money-exchange-02", "moon-02", "moon-cloud", "moon-star", "music-note-01", "navigation-03", "new-releases", "new-twitter", "news", "news-01", "noodles", "package-delivered", "parking-area-square", "party", "party-popper", "pause-circle", "percent-circle", "pinterest", "pizza-01", "play-circle", "play-store", "podium", "pound", "pumpkin", "qr-code", "qr-code-01", "queue-01", "quote-down", "quote-up", "ranking", "restaurant-01", "rocket-01", "rss", "running-shoes", "sale-tag-01", "security-check", "shop-sign", "shopping-bag-01", "siren", "smart-phone-01", "snapchat", "snowflake", "sparkles", "spotify", "star", "star-half", "star-off", "stop-circle", "store-01", "sun-03", "sun-cloud-02", "sunrise", "sunset", "swimming", "tag-01", "target-02", "temperature", "tennis-ball", "thermometer", "thermometer-cold", "thermometer-warm", "threads", "ticket-01", "tiktok", "time-quarter-pass", "timer-01", "tornado-02", "train-01", "tram", "trophy", "tropical-storm", "tsunami", "user-02", "user-group", "user-love-01", "vegetarian-food", "volleyball", "volume-high", "vote", "walking", "warehouse", "waves", "whatsapp", "wheat-off", "wifi-01", "wifi-full-signal", "wifi-lock", "wrench-01", "yen", "youtube"O ícone de um item de ícone.
left.tonestring"cool"padrão: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$"A cor de um ponto de status: uma chave de paleta (sucesso é ok ou aberto, alerta quente ou em breve, perigo alarme ou fechado, informação fria) ou #RRGGBB.
left.pulsebooleanfalseUm ponto de status que pulsa uma vez por segundo.
left.hourCyclestring"auto""auto", "12", "24"As horas de um relógio: auto segue o local do Player (14:05 onde normalmente usa relógio de 24 horas, senão 2:05 PM); 12 é 2:05 PM e 24 é 14:05 em qualquer local.
left.timeZonestring, nulonullmaxLength: 64Zona IANA de um relógio, data ou contagem regressiva; nulo usa a zona da barra, senão a da tela.
left.dateStylestring"short""short", "long"Um item de data: curto é Qua 21 Out e longo Quarta-feira 21 de Outubro; no local dos EUA o mês vem primeiro (Qua 21 Out, Quarta-feira, 21 de Outubro). Nomes de dias da semana e meses são em inglês; uma data longa que não cabe passa para a forma curta.
left.atstring, nulonullmaxLength: 40Instante ISO 8601 para o qual a contagem regressiva corre; sem deslocamento é o horário local na zona do item.
left.labelstring""maxLength: 24O rótulo de um número acima do seu valor; o rótulo de uma contagem regressiva acima dos seus algarismos enquanto ela conta (omitido quando não cabe inteiro) e as palavras que ela mostra quando o seu instante chega.
left.valuestring""maxLength: 16O valor de um número, formatado como você deseja que seja lido (1.284 ou 98%).
left.mediastring""maxLength: 200Imagem de um item de logotipo: uma referência de mídia do projeto (media:<id>), ajustada inteira em 240 x 70.
left.pageinteger1mínimo: 1; máximo: 999A página atual de um item de página, começando em 1.
left.ofinteger1mínimo: 1; máximo: 999A contagem de páginas de um item de página.
left.stylestring"numbers""dots", "numbers"Um item de página como 3 / 8 ou como pontos (pontos limitados a doze páginas).
left.activebooleanfalseUm item de alerta: falso é uma marca de verificação silenciosa, verdadeiro assume a cor da gravidade e suas palavras.
left.severitystring"warm""warm", "danger"A cor de um item de alerta ativo: quente para aviso, perigo para alarme.
left.unitstring"auto""auto", "c", "f"A escala de temperatura de um item do tempo: auto é Fahrenheit onde a região do Player usa (US PR GU VI AS MP BS BZ KY PW LR) e Celsius em todos os outros lugares; c e f forçam Celsius ou Fahrenheit em todas as regiões.
rightobjeto, nulonulladditionalProperties: falseO slot direito, com 250 px de largura (240 x 70 dentro dele), conteúdo no final, a 24 px da borda da tela. Os mesmos itens do slot esquerdo, com as mesmas regras de localidade.
right.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; ObrigatórioO que o slot mostra.
right.textstring""maxLength: 60As palavras de um texto, etiqueta, status ou item de alerta.
right.sizestring"small""small", "medium", "large"Tamanho da fonte dos itens de texto, etiqueta, status e alerta (24, 32 e 44 px em 1080p; um texto pequeno ocupa duas linhas, os outros uma), de uma data (32, 44 e 56 px, uma linha) e dos números de um item de relógio, clima, contagem regressiva, página e ícone.
right.colorstring, nulonullpadrão: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Cor do texto ou ícone #RRGGBB ou #RRGGBBAA; null usa a cor do texto do tema.
right.fillstring, nulonullpadrão: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Um retângulo arredondado de uma tag: #RRGGBB ou #RRGGBBAA; nulo é a cor do texto com meia intensidade (um contorno nos temas Clear).
right.iconnulo, stringnullnull, "activity-01", "air-vent", "airplane-01", "alert-01", "alert-02", "american-football", "analytics-up", "apple", "arrow-down-01", "arrow-down-right-01", "arrow-up-01", "arrow-up-right-01", "award-01", "baseball", "basketball-01", "battery-full", "bell-ring", "bicycle", "birthday-cake", "bitcoin", "bus-01", "calendar-03", "calendar-04", "calendar-add-01", "calendar-check", "call-02", "camera-01", "cancel-circle", "car-01", "champion", "chart-decrease", "chart-increase", "checkmark-circle-02", "clock-01", "clock-02", "cloud", "cloud-angled-rain", "cloud-angled-zap", "cloud-big-rain", "cloud-drizzle", "cloud-fog", "cloud-hailstone", "cloud-snow", "coffee-01", "coffee-02", "contact-01", "container-truck-01", "cricket-bat", "crown", "delivery-truck-01", "dices", "discord", "discount-tag-01", "dollar-02", "door-closed-locked", "door-open", "drink", "droplet", "ethereum", "euro", "exchange-01", "facebook-01", "factory", "fast-wind", "favourite", "ferry-boat", "fire", "fire-02", "first-aid-kit", "flag-01", "flag-02", "flash", "flower-01", "football", "gauge", "gift", "git-branch", "globe-02", "google", "hand-prayer", "heart", "help-circle", "home-01", "hourglass", "humidity", "ice-hockey", "information-circle", "instagram", "lamp-01", "lantern", "leaf-01", "leaf-02", "lightbulb", "link-01", "linkedin-01", "litecoin", "location-01", "location-04", "mail-01", "medal-first-place", "medical-mask", "meeting-room", "megaphone-01", "message-01", "money-exchange-02", "moon-02", "moon-cloud", "moon-star", "music-note-01", "navigation-03", "new-releases", "new-twitter", "news", "news-01", "noodles", "package-delivered", "parking-area-square", "party", "party-popper", "pause-circle", "percent-circle", "pinterest", "pizza-01", "play-circle", "play-store", "podium", "pound", "pumpkin", "qr-code", "qr-code-01", "queue-01", "quote-down", "quote-up", "ranking", "restaurant-01", "rocket-01", "rss", "running-shoes", "sale-tag-01", "security-check", "shop-sign", "shopping-bag-01", "siren", "smart-phone-01", "snapchat", "snowflake", "sparkles", "spotify", "star", "star-half", "star-off", "stop-circle", "store-01", "sun-03", "sun-cloud-02", "sunrise", "sunset", "swimming", "tag-01", "target-02", "temperature", "tennis-ball", "thermometer", "thermometer-cold", "thermometer-warm", "threads", "ticket-01", "tiktok", "time-quarter-pass", "timer-01", "tornado-02", "train-01", "tram", "trophy", "tropical-storm", "tsunami", "user-02", "user-group", "user-love-01", "vegetarian-food", "volleyball", "volume-high", "vote", "walking", "warehouse", "waves", "whatsapp", "wheat-off", "wifi-01", "wifi-full-signal", "wifi-lock", "wrench-01", "yen", "youtube"O ícone de um item de ícone.
right.tonestring"cool"padrão: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$"A cor de um ponto de status: uma chave de paleta (sucesso é ok ou aberto, alerta quente ou em breve, perigo alarme ou fechado, informação fria) ou #RRGGBB.
right.pulsebooleanfalseUm ponto de status que pulsa uma vez por segundo.
right.hourCyclestring"auto""auto", "12", "24"As horas de um relógio: auto segue o local do Player (14:05 onde normalmente usa relógio de 24 horas, senão 2:05 PM); 12 é 2:05 PM e 24 é 14:05 em qualquer local.
right.timeZonestring, nulonullmaxLength: 64Zona IANA de um relógio, data ou contagem regressiva; nulo usa a zona da barra, senão a da tela.
right.dateStylestring"short""short", "long"Um item de data: curto é Qua 21 Out e longo Quarta-feira 21 de Outubro; no local dos EUA o mês vem primeiro (Qua 21 Out, Quarta-feira, 21 de Outubro). Nomes de dias da semana e meses são em inglês; uma data longa que não cabe passa para a forma curta.
right.atstring, nulonullmaxLength: 40Instante ISO 8601 para o qual a contagem regressiva corre; sem deslocamento é o horário local na zona do item.
right.labelstring""maxLength: 24O rótulo de um número acima do seu valor; o rótulo de uma contagem regressiva acima dos seus algarismos enquanto ela conta (omitido quando não cabe inteiro) e as palavras que ela mostra quando o seu instante chega.
right.valuestring""maxLength: 16O valor de um número, formatado como você deseja que seja lido (1.284 ou 98%).
right.mediastring""maxLength: 200Imagem de um item de logotipo: uma referência de mídia do projeto (media:<id>), ajustada inteira em 240 x 70.
right.pageinteger1mínimo: 1; máximo: 999A página atual de um item de página, começando em 1.
right.ofinteger1mínimo: 1; máximo: 999A contagem de páginas de um item de página.
right.stylestring"numbers""dots", "numbers"Um item de página como 3 / 8 ou como pontos (pontos limitados a doze páginas).
right.activebooleanfalseUm item de alerta: falso é uma marca de verificação silenciosa, verdadeiro assume a cor da gravidade e suas palavras.
right.severitystring"warm""warm", "danger"A cor de um item de alerta ativo: quente para aviso, perigo para alarme.
right.unitstring"auto""auto", "c", "f"A escala de temperatura de um item do tempo: auto é Fahrenheit onde a região do Player usa (US PR GU VI AS MP BS BZ KY PW LR) e Celsius em todos os outros lugares; c e f forçam Celsius ou Fahrenheit em todas as regiões.
middleobjeto, nulonulladditionalProperties: falseA mensagem entre os slots. Sem texto (ou páginas) o meio fica vazio e mantém seu espaço; é ocultado quando ficaria com menos de 100 px de largura.
middle.textstring""maxLength: 160As palavras de uma mensagem estática ou rolante.
middle.sizestring"small""small", "medium", "large"28 px com até duas linhas, 38 px ou 52 px em uma linha, em 1080p.
middle.alignstring"center""start", "center", "end"Onde as palavras ficam no meio.
middle.colorstring, nulonullpadrão: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Cor do texto #RRGGBB ou #RRGGBBAA; null usa a cor do texto do tema.
middle.modestring"static""static", "crawl", "pages"static mostra uma mensagem que não cabe, em frases inteiras, uma após a outra; crawl a faz rolar pelo meio enquanto o movimento está ativo (fica parada quando cabe e mostra frases inteiras em um quadro estático ou com movimento reduzido); pages mostra os textos de pages um após o outro.
middle.pagesarray[]maxItems: 8As mensagens do modo páginas, em ordem.
middle.pageSecondsinteger8mínimo: 3; máximo: 60Segundos que cada página permanece exibida; a página exibida segue o relógio, então todas as telas mostram a mesma.

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",
  "location": {
    "name": "Vancouver",
    "latitude": 49.25,
    "longitude": -123.0
  }
}
screenrig card create --type header --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": "header",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "header",
  "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:

{
  "left": null,
  "right": null,
  "middle": 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":{"left":null,"right":null,"middle":null}}'