Tarjeta de pie de página

Una barra a lo largo del borde inferior de la pantalla: una ranura izquierda y una derecha, y un mensaje que permanece fijo, se desplaza o pasa por páginas.

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

Esta tarjeta se dibuja en su navegador con el mismo código que ejecutan los Players, con datos de ejemplo.

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

NombreTipoPredeterminadoValores y límitesDescripción
locationobjeto, nulonulladditionalProperties: falseDónde el elemento meteorológico lee sus condiciones; sin esto no hay datos meteorológicos y el elemento permanece vacío.
location.namestringmaxLength: 40; Requerido
location.latitudenumbermínimo: -90; máximo: 90; Requerido
location.longitudenumbermínimo: -180; máximo: 180; Requerido
timeZonecadena, nulonullmaxLength: 64Zona IANA de los elementos de reloj, fecha y cuenta regresiva; null usa la zona de la pantalla.
backgroundColorcadena, nulonullpatró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.
textColorcadena, nulonullpatró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

NombreTipoPredeterminadoValores y límitesDescripción
leftobjeto, nulonulladditionalProperties: falseLa 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.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; RequeridoLo que muestra el espacio.
left.textstring""maxLength: 60Las palabras de un texto, etiqueta, estado o elemento de alerta.
left.sizestring"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.colorcadena, nulonullpatró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.fillcadena, nulonullpatró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.iconnulo, cadenanullnull, "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.tonestring"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.pulsebooleanfalseUn punto de estado que respira una vez por segundo.
left.hourCyclestring"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.timeZonecadena, nulonullmaxLength: 64Zona IANA de un reloj, fecha o cuenta regresiva; null toma la zona de la barra, si no la de la pantalla.
left.dateStylestring"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.atcadena, nulonullmaxLength: 40Instante ISO 8601 a que corre una cuenta regresiva; sin compensación es la hora de pared en la zona del elemento.
left.labelstring""maxLength: 24La 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.valuestring""maxLength: 16El valor de un número, formateado como desea que se lea (1,284 o 98%).
left.mediastring""maxLength: 200La imagen de un elemento de logo: una referencia de contenido multimedia de proyecto (media:<id>), ajustada completamente a 240 x 70.
left.pageinteger1mínimo: 1; máximo: 999La página actual de un elemento de página, desde 1.
left.ofinteger1mínimo: 1; máximo: 999El recuento de páginas de un elemento de página.
left.stylestring"numbers""dots", "numbers"Un elemento de página como 3 / 8 o como puntos (los puntos se mantienen hasta doce páginas).
left.activebooleanfalseUn elemento de alerta: falso es una marca de verificación silenciosa, verdadero toma el color de severidad y sus palabras.
left.severitystring"warm""warm", "danger"El color de un elemento de alerta activo: cálido para vigilancia, peligro para alarma.
left.unitstring"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.
rightobjeto, nulonulladditionalProperties: falseLa 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.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; RequeridoLo que muestra el espacio.
right.textstring""maxLength: 60Las palabras de un texto, etiqueta, estado o elemento de alerta.
right.sizestring"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.colorcadena, nulonullpatró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.fillcadena, nulonullpatró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.iconnulo, cadenanullnull, "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.tonestring"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.pulsebooleanfalseUn punto de estado que respira una vez por segundo.
right.hourCyclestring"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.timeZonecadena, nulonullmaxLength: 64Zona IANA de un reloj, fecha o cuenta regresiva; null toma la zona de la barra, si no la de la pantalla.
right.dateStylestring"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.atcadena, nulonullmaxLength: 40Instante ISO 8601 a que corre una cuenta regresiva; sin compensación es la hora de pared en la zona del elemento.
right.labelstring""maxLength: 24La 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.valuestring""maxLength: 16El valor de un número, formateado como desea que se lea (1,284 o 98%).
right.mediastring""maxLength: 200La imagen de un elemento de logo: una referencia de contenido multimedia de proyecto (media:<id>), ajustada completamente a 240 x 70.
right.pageinteger1mínimo: 1; máximo: 999La página actual de un elemento de página, desde 1.
right.ofinteger1mínimo: 1; máximo: 999El recuento de páginas de un elemento de página.
right.stylestring"numbers""dots", "numbers"Un elemento de página como 3 / 8 o como puntos (los puntos se mantienen hasta doce páginas).
right.activebooleanfalseUn elemento de alerta: falso es una marca de verificación silenciosa, verdadero toma el color de severidad y sus palabras.
right.severitystring"warm""warm", "danger"El color de un elemento de alerta activo: cálido para vigilancia, peligro para alarma.
right.unitstring"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.
middleobjeto, nulonulladditionalProperties: falseEl 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.textstring""maxLength: 160Las palabras de un mensaje estático o en desplazamiento.
middle.sizestring"small""small", "medium", "large"28 px con hasta dos líneas, 38 px o 52 px en una línea, a 1080p.
middle.alignstring"center""start", "center", "end"Dónde se sitúan las palabras en el centro.
middle.colorcadena, nulonullpatró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.modestring"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.pagesarray[]maxItems: 8Los mensajes del modo páginas, en orden.
middle.pageSecondsinteger8mínimo: 3; máximo: 60Segundos 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}}'