As linhas em ordem ficam sob um título opcional, cada uma com uma marca ou ícone e qualquer valor alinhado à direita, para que se leia de relance do outro lado da sala. Preenche toda a tela, encaixa-se em qualquer retângulo, fica no meio, se esconde em um canto, mostra uma linha por vez em uma linha no canto ou se move como uma faixa ao longo de uma borda. Você escolhe o título, as linhas com seu texto, valores e ícones, a marca antes de cada linha como ponto, traço, número, caixa de seleção ou nada e se uma linha marcada está concluída, quanto tempo cada página ou linha única permanece e se o cartão está elevado ou abaixado.
Cartão ao vivo
Categoria: Mensagens. Etiquetas: Escritórios e locais de trabalho, Saguões e recepção.
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, quadrado, faixa.
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 |
|---|---|---|---|---|
bullet | string | "dot" | "dot", "dash", "number", "check", "none" | A marca antes de cada linha: um ponto, um traço, seu número, uma caixa de seleção (marcada a menos que uma linha diga feito falso) ou nada. |
pageSeconds | integer | 8 | mínimo: 3; máximo: 60 | Uma lista que não cabe mostra uma página, ou em um chip uma linha, por este número de segundos. |
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 |
|---|---|---|---|---|
title | string | "" | maxLength: 60 | Um cabeçalho opcional acima das linhas. |
rows | array | [] | minItems: 0; maxItems: 40 | As linhas, em ordem. Cada uma é um texto com um valor opcional alinhado à direita, um ícone que substitui seu marcador e, para o marcador de verificação, se está concluído. |
rows[].text | string | minLength: 1; maxLength: 120; Obrigatório | ||
rows[].value | string | "" | maxLength: 24 | |
rows[].done | boolean | true | ||
rows[].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" | |
active | boolean | true | Falso abaixa o cartão: ele sai e não desenha nada até ser levantado novamente. | |
since | string, nulo | null | Instante ISO 8601 active última alteração. Elevado, o cartão espera por ele quando ainda está à frente; abaixado, o cartão permanece visível por alguns segundos depois dele. |
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 list --major 1 --file params.jsonAdicione 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": "list",
"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:
{
"title": "",
"rows": [],
"active": true,
"since": null
}screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.jsonOu 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":{"title":"","rows":[],"active":true,"since":null}}'