Una barra de ancho completo en la pantalla, alineada al borde inferior, reúne los pequeños elementos que una pantalla necesita. Las ranuras izquierda y derecha muestran cada una un elemento: palabras, una etiqueta, un reloj, el clima actual, un ícono, la fecha, un punto de estado, su logotipo, una cuenta regresiva, un número, la página en la que está o una alerta discreta que se vuelve cálida o roja. El centro lleva un mensaje que permanece fijo, se desplaza cuando es largo o pasa por hasta ocho páginas. Usted configura los elementos y el mensaje y los puede cambiar mientras la barra se reproduce; mantiene su lugar en cada pantalla.
Tarjeta en vivo
Categoría: Mensajes. Etiquetas: Vestíbulos y recepción, Oficinas y lugares de trabajo, Tiendas.
Diseños
Esta tarjeta de barra se coloca como pie de página: una barra de ancho completo, 80 de alto, alineada al borde inferior. No toma diseño ni anclaje.
Diseños: pie de página. Formularios: tira.
Diseños, temas y publicación de tarjetas. Explorar las tarjetas.
Datos y privacidad
Feed: screenrig.weather/v1.
Los documentos del feed llevan atribución de la fuente. El Player suministra el feed a la tarjeta.
Atribución del clima: datos meteorológicos por Weatherbit, según se indica en el documento del feed.
Propiedades
Para tema, fondo y acento, consulte Propiedades comunes. Una tarjeta de barra no tiene propiedad layout ni anchor: siempre se coloca como su pie de página.
Establezca las propiedades estáticas en los params de la tarjeta al crearla. Su documento de datos solo contiene propiedades dinámicas. Las filas anidadas describen el contenido de su propiedad principal.
Propiedades estáticas
| Nombre | Tipo | Predeterminado | Valores y límites | Descripción |
|---|---|---|---|---|
location | objeto, nulo | null | additionalProperties: false | Dónde el elemento meteorológico lee sus condiciones; sin esto no hay datos meteorológicos y el elemento permanece vacío. |
location.name | string | maxLength: 40; Requerido | ||
location.latitude | number | mínimo: -90; máximo: 90; Requerido | ||
location.longitude | number | mínimo: -180; máximo: 180; Requerido | ||
timeZone | cadena, nulo | null | maxLength: 64 | Zona IANA de los elementos de reloj, fecha y cuenta regresiva; null usa la zona de la pantalla. |
backgroundColor | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Sobrescribe el fondo y la placa de la tarjeta con un color plano ordenado por CSS. #RRGGBBAA suministra opacidad. background none tiene prioridad. |
textColor | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Sobrescribe los colores de texto principal y secundario. Los colores de acento y estado semántico mantienen sus roles. |
Propiedades dinámicas
| Nombre | Tipo | Predeterminado | Valores y límites | Descripción |
|---|---|---|---|---|
left | objeto, nulo | null | additionalProperties: false | La ranura izquierda, de 250 px de ancho (240 x 70 dentro), con el contenido al inicio, a 24 px del borde de la pantalla. null la deja vacía; mantiene su espacio. Lo que kind lee: texto y etiqueta text; reloj hourCycle y timeZone; clima unit (de la fuente meteorológica); icono icon; fecha dateStyle y timeZone; estado text, tone y pulse; logo media; cuenta regresiva at y label; número label y value; página page, of y style; alerta active, severity y text. El hourCycle de un reloj, el unit de un ítem meteorológico y el orden de una fecha siguen la configuración regional del Player a menos que el ítem los establezca. |
left.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; Requerido | Lo que muestra el espacio. | |
left.text | string | "" | maxLength: 60 | Las palabras de un texto, etiqueta, estado o elemento de alerta. |
left.size | string | "small" | "small", "medium", "large" | Tamaño de letra de los elementos de texto, etiqueta, estado y alerta (24, 32 y 44 px a 1080p; un texto pequeño ocupa dos líneas, los demás una), de una fecha (32, 44 y 56 px, una línea) y de las cifras de un elemento de reloj, clima, cuenta regresiva, página e icono. |
left.color | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Color de texto o icono #RRGGBB o #RRGGBBAA; null toma el color de texto del tema. |
left.fill | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | El rectángulo redondeado de una etiqueta: #RRGGBB o #RRGGBBAA; nulo es el color del texto a media intensidad (un contorno en los temas Clear). |
left.icon | nulo, cadena | 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" | El ícono de un elemento ícono. |
left.tone | string | "cool" | patrón: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$" | El color de un punto de estado: una clave de paleta (éxito es ok o abierto, advertencia cálida o pronto, peligro alarma o cerrado, información fría) o #RRGGBB. |
left.pulse | boolean | false | Un punto de estado que respira una vez por segundo. | |
left.hourCycle | string | "auto" | "auto", "12", "24" | Las horas de un reloj: auto sigue la configuración regional del Player (2:05 PM donde usualmente usa reloj de 12 horas, de lo contrario 14:05); 12 es 2:05 PM y 24 es 14:05 en todas las regiones. |
left.timeZone | cadena, nulo | null | maxLength: 64 | Zona IANA de un reloj, fecha o cuenta regresiva; null toma la zona de la barra, si no la de la pantalla. |
left.dateStyle | string | "short" | "short", "long" | Un elemento de fecha: corto es Mié 21 Oct y largo Miércoles 21 de octubre; en la configuración regional de EE. UU. el mes va primero (Wed Oct 21, Wednesday, October 21). Los nombres de días y meses están en inglés; una fecha larga que no cabe pasa a la forma corta. |
left.at | cadena, nulo | null | maxLength: 40 | Instante ISO 8601 a que corre una cuenta regresiva; sin compensación es la hora de pared en la zona del elemento. |
left.label | string | "" | maxLength: 24 | La etiqueta de un número encima de su valor; la etiqueta de una cuenta regresiva encima de sus cifras mientras cuenta (se omite si no cabe entera) y las palabras que muestra una vez que llega su instante. |
left.value | string | "" | maxLength: 16 | El valor de un número, formateado como desea que se lea (1,284 o 98%). |
left.media | string | "" | maxLength: 200 | La imagen de un elemento de logo: una referencia de contenido multimedia de proyecto (media:<id>), ajustada completamente a 240 x 70. |
left.page | integer | 1 | mínimo: 1; máximo: 999 | La página actual de un elemento de página, desde 1. |
left.of | integer | 1 | mínimo: 1; máximo: 999 | El recuento de páginas de un elemento de página. |
left.style | string | "numbers" | "dots", "numbers" | Un elemento de página como 3 / 8 o como puntos (los puntos se mantienen hasta doce páginas). |
left.active | boolean | false | Un elemento de alerta: falso es una marca de verificación silenciosa, verdadero toma el color de severidad y sus palabras. | |
left.severity | string | "warm" | "warm", "danger" | El color de un elemento de alerta activo: cálido para vigilancia, peligro para alarma. |
left.unit | string | "auto" | "auto", "c", "f" | La escala de temperatura de un elemento meteorológico: auto es Fahrenheit donde la región local del Player lo usa (US PR GU VI AS MP BS BZ KY PW LR) y Celsius en todas partes; c y f fuerzan Celsius o Fahrenheit en cualquier región. |
right | objeto, nulo | null | additionalProperties: false | La ranura derecha, de 250 px de ancho (240 x 70 dentro), con el contenido al final, a 24 px del borde de la pantalla. Los mismos elementos que la ranura izquierda, con las mismas reglas de configuración regional. |
right.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; Requerido | Lo que muestra el espacio. | |
right.text | string | "" | maxLength: 60 | Las palabras de un texto, etiqueta, estado o elemento de alerta. |
right.size | string | "small" | "small", "medium", "large" | Tamaño de letra de los elementos de texto, etiqueta, estado y alerta (24, 32 y 44 px a 1080p; un texto pequeño ocupa dos líneas, los demás una), de una fecha (32, 44 y 56 px, una línea) y de las cifras de un elemento de reloj, clima, cuenta regresiva, página e icono. |
right.color | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Color de texto o icono #RRGGBB o #RRGGBBAA; null toma el color de texto del tema. |
right.fill | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | El rectángulo redondeado de una etiqueta: #RRGGBB o #RRGGBBAA; nulo es el color del texto a media intensidad (un contorno en los temas Clear). |
right.icon | nulo, cadena | 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" | El ícono de un elemento ícono. |
right.tone | string | "cool" | patrón: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$" | El color de un punto de estado: una clave de paleta (éxito es ok o abierto, advertencia cálida o pronto, peligro alarma o cerrado, información fría) o #RRGGBB. |
right.pulse | boolean | false | Un punto de estado que respira una vez por segundo. | |
right.hourCycle | string | "auto" | "auto", "12", "24" | Las horas de un reloj: auto sigue la configuración regional del Player (2:05 PM donde usualmente usa reloj de 12 horas, de lo contrario 14:05); 12 es 2:05 PM y 24 es 14:05 en todas las regiones. |
right.timeZone | cadena, nulo | null | maxLength: 64 | Zona IANA de un reloj, fecha o cuenta regresiva; null toma la zona de la barra, si no la de la pantalla. |
right.dateStyle | string | "short" | "short", "long" | Un elemento de fecha: corto es Mié 21 Oct y largo Miércoles 21 de octubre; en la configuración regional de EE. UU. el mes va primero (Wed Oct 21, Wednesday, October 21). Los nombres de días y meses están en inglés; una fecha larga que no cabe pasa a la forma corta. |
right.at | cadena, nulo | null | maxLength: 40 | Instante ISO 8601 a que corre una cuenta regresiva; sin compensación es la hora de pared en la zona del elemento. |
right.label | string | "" | maxLength: 24 | La etiqueta de un número encima de su valor; la etiqueta de una cuenta regresiva encima de sus cifras mientras cuenta (se omite si no cabe entera) y las palabras que muestra una vez que llega su instante. |
right.value | string | "" | maxLength: 16 | El valor de un número, formateado como desea que se lea (1,284 o 98%). |
right.media | string | "" | maxLength: 200 | La imagen de un elemento de logo: una referencia de contenido multimedia de proyecto (media:<id>), ajustada completamente a 240 x 70. |
right.page | integer | 1 | mínimo: 1; máximo: 999 | La página actual de un elemento de página, desde 1. |
right.of | integer | 1 | mínimo: 1; máximo: 999 | El recuento de páginas de un elemento de página. |
right.style | string | "numbers" | "dots", "numbers" | Un elemento de página como 3 / 8 o como puntos (los puntos se mantienen hasta doce páginas). |
right.active | boolean | false | Un elemento de alerta: falso es una marca de verificación silenciosa, verdadero toma el color de severidad y sus palabras. | |
right.severity | string | "warm" | "warm", "danger" | El color de un elemento de alerta activo: cálido para vigilancia, peligro para alarma. |
right.unit | string | "auto" | "auto", "c", "f" | La escala de temperatura de un elemento meteorológico: auto es Fahrenheit donde la región local del Player lo usa (US PR GU VI AS MP BS BZ KY PW LR) y Celsius en todas partes; c y f fuerzan Celsius o Fahrenheit en cualquier región. |
middle | objeto, nulo | null | additionalProperties: false | El mensaje entre las ranuras. Sin texto (o páginas) el medio queda vacío y mantiene su espacio; se oculta cuando sería menor a 100 px de ancho. |
middle.text | string | "" | maxLength: 160 | Las palabras de un mensaje estático o en desplazamiento. |
middle.size | string | "small" | "small", "medium", "large" | 28 px con hasta dos líneas, 38 px o 52 px en una línea, a 1080p. |
middle.align | string | "center" | "start", "center", "end" | Dónde se sitúan las palabras en el centro. |
middle.color | cadena, nulo | null | patrón: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Color de texto #RRGGBB o #RRGGBBAA; null toma el color de texto del tema. |
middle.mode | string | "static" | "static", "crawl", "pages" | static muestra un mensaje que no cabe por frases enteras, una tras otra; crawl lo desplaza por el centro mientras hay movimiento (se queda quieto si cabe, y muestra frases enteras en una imagen fija o con movimiento reducido); pages muestra las cadenas de pages una tras otra. |
middle.pages | array | [] | maxItems: 8 | Los mensajes del modo páginas, en orden. |
middle.pageSeconds | integer | 8 | mínimo: 3; máximo: 60 | Segundos que cada página permanece visible; la página mostrada sigue el reloj, por lo que todas las pantallas muestran la misma. |
Ejemplo de lienzo
Guarde las propiedades estáticas como params.json y cree la tarjeta. El resultado incluye su id crd_.
{
"theme": "neomustard",
"location": {
"name": "Vancouver",
"latitude": 49.25,
"longitude": -123.0
}
}
screenrig card create --type footer --major 1 --file params.json
Agregue este elemento a los primitives de una página de la lista de reproducción, con ese id en lugar del del ejemplo. Publique la lista de reproducción y asigne una pantalla.
{
"id": "footer",
"primitive": "card",
"card": "crd_01EXAMPLECARD000000000",
"layout": "footer",
"content_fit": "fill"
}
Escribir datos en vivo
Escriba el documento en la tarjeta después de crearla y luego reemplácelo para actualizar la pantalla sin republicar. La tarjeta verifica cada escritura contra sus propiedades dinámicas y rechaza un documento que no acepta. Use el mismo proyecto que la lista de reproducción.
Guarde el documento como card-data.json. La CLI lee el documento en sí, sin envoltorio:
{
"left": null,
"right": null,
"middle": null
}
screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json
O llame a la API directamente. La API envuelve el mismo documento en un campo document. Un token de agente ya nombra su proyecto, por lo que no se envía encabezado de proyecto; si envía ScreenRig-Project, debe coincidir con el proyecto del token. Proporcione su autorización API a través del entorno; vea Autenticación 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}}'