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
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
| Nome | Tipo | Padrão | Valores e limites | Descrição |
|---|---|---|---|---|
location | objeto, nulo | null | additionalProperties: false | De onde o item do tempo lê suas condições; sem isso não há dados meteorológicos e o item fica vazio. |
location.name | string | maxLength: 40; Obrigatório | ||
location.latitude | number | mínimo: -90; máximo: 90; Obrigatório | ||
location.longitude | number | mínimo: -180; máximo: 180; Obrigatório | ||
timeZone | string, nulo | null | maxLength: 64 | Zona IANA dos itens de relógio, data e contagem regressiva; nulo usa a zona da tela. |
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 |
|---|---|---|---|---|
left | objeto, nulo | null | additionalProperties: false | O 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.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; Obrigatório | O que o slot mostra. | |
left.text | string | "" | maxLength: 60 | As palavras de um texto, etiqueta, status ou item de alerta. |
left.size | string | "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.color | string, nulo | null | padrã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.fill | string, nulo | null | padrã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.icon | nulo, string | null | null, "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.tone | string | "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.pulse | boolean | false | Um ponto de status que pulsa uma vez por segundo. | |
left.hourCycle | string | "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.timeZone | string, nulo | null | maxLength: 64 | Zona IANA de um relógio, data ou contagem regressiva; nulo usa a zona da barra, senão a da tela. |
left.dateStyle | string | "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.at | string, nulo | null | maxLength: 40 | Instante ISO 8601 para o qual a contagem regressiva corre; sem deslocamento é o horário local na zona do item. |
left.label | string | "" | maxLength: 24 | O 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.value | string | "" | maxLength: 16 | O valor de um número, formatado como você deseja que seja lido (1.284 ou 98%). |
left.media | string | "" | maxLength: 200 | Imagem de um item de logotipo: uma referência de mídia do projeto (media:<id>), ajustada inteira em 240 x 70. |
left.page | integer | 1 | mínimo: 1; máximo: 999 | A página atual de um item de página, começando em 1. |
left.of | integer | 1 | mínimo: 1; máximo: 999 | A contagem de páginas de um item de página. |
left.style | string | "numbers" | "dots", "numbers" | Um item de página como 3 / 8 ou como pontos (pontos limitados a doze páginas). |
left.active | boolean | false | Um item de alerta: falso é uma marca de verificação silenciosa, verdadeiro assume a cor da gravidade e suas palavras. | |
left.severity | string | "warm" | "warm", "danger" | A cor de um item de alerta ativo: quente para aviso, perigo para alarme. |
left.unit | string | "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. |
right | objeto, nulo | null | additionalProperties: false | O 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.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; Obrigatório | O que o slot mostra. | |
right.text | string | "" | maxLength: 60 | As palavras de um texto, etiqueta, status ou item de alerta. |
right.size | string | "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.color | string, nulo | null | padrã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.fill | string, nulo | null | padrã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.icon | nulo, string | null | null, "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.tone | string | "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.pulse | boolean | false | Um ponto de status que pulsa uma vez por segundo. | |
right.hourCycle | string | "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.timeZone | string, nulo | null | maxLength: 64 | Zona IANA de um relógio, data ou contagem regressiva; nulo usa a zona da barra, senão a da tela. |
right.dateStyle | string | "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.at | string, nulo | null | maxLength: 40 | Instante ISO 8601 para o qual a contagem regressiva corre; sem deslocamento é o horário local na zona do item. |
right.label | string | "" | maxLength: 24 | O 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.value | string | "" | maxLength: 16 | O valor de um número, formatado como você deseja que seja lido (1.284 ou 98%). |
right.media | string | "" | maxLength: 200 | Imagem de um item de logotipo: uma referência de mídia do projeto (media:<id>), ajustada inteira em 240 x 70. |
right.page | integer | 1 | mínimo: 1; máximo: 999 | A página atual de um item de página, começando em 1. |
right.of | integer | 1 | mínimo: 1; máximo: 999 | A contagem de páginas de um item de página. |
right.style | string | "numbers" | "dots", "numbers" | Um item de página como 3 / 8 ou como pontos (pontos limitados a doze páginas). |
right.active | boolean | false | Um item de alerta: falso é uma marca de verificação silenciosa, verdadeiro assume a cor da gravidade e suas palavras. | |
right.severity | string | "warm" | "warm", "danger" | A cor de um item de alerta ativo: quente para aviso, perigo para alarme. |
right.unit | string | "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. |
middle | objeto, nulo | null | additionalProperties: false | A 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.text | string | "" | maxLength: 160 | As palavras de uma mensagem estática ou rolante. |
middle.size | string | "small" | "small", "medium", "large" | 28 px com até duas linhas, 38 px ou 52 px em uma linha, em 1080p. |
middle.align | string | "center" | "start", "center", "end" | Onde as palavras ficam no meio. |
middle.color | string, nulo | null | padrã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.mode | string | "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.pages | array | [] | maxItems: 8 | As mensagens do modo páginas, em ordem. |
middle.pageSeconds | integer | 8 | mínimo: 3; máximo: 60 | Segundos 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}}'