Scheda Piè di pagina

Una barra lungo il bordo inferiore dello schermo: uno spazio a sinistra, uno a destra e un messaggio fisso, scorrevole o suddiviso in pagine alternate.

Una barra a tutta larghezza, allineata al bordo inferiore dello schermo, raccoglie le piccole informazioni utili. Gli spazi a sinistra e a destra mostrano ciascuno un elemento: testo, un tag, un orologio, il meteo attuale, un’icona, la data, un indicatore di stato, il tuo logo, un conto alla rovescia, un numero, la pagina attuale o un avviso discreto che assume una tonalità calda o rossa. Al centro appare un messaggio fisso, scorrevole quando è lungo oppure suddiviso in un massimo di otto pagine alternate. Imposti gli elementi e il messaggio e li modifichi durante la riproduzione della barra, che mantiene la propria posizione su ogni schermo.

Live card

Questa scheda viene disegnata nel browser con lo stesso codice usato dai Player, con dati di esempio.

Categoria: Messaggi. Tag: Sale d’attesa e reception, Uffici e luoghi di lavoro, Negozi.

Layout

Questa scheda barra è posizionata come piè di pagina: una barra a tutta larghezza, alta 80, aderente al bordo inferiore. Non usa layout né ancoraggio.

Layout: piè di pagina. Moduli: striscia.

Layout, temi e pubblicazione delle schede. Esplora le schede.

Dati e privacy

Feed: screenrig.weather/v1.

I documenti del feed riportano l’attribuzione della fonte. Il Player fornisce il feed alla scheda.

Attribuzione meteo: dati meteo di Weatherbit, come indicato nel documento del feed.

Proprietà

Per tema, sfondo e accento, vedi Proprietà comuni. Una scheda barra non ha proprietà layout o anchor: è sempre posizionata come piè di pagina.

Imposta le proprietà statiche nei params della scheda quando la crei. Il suo documento dati contiene solo proprietà dinamiche. Le righe annidate descrivono il contenuto della proprietà genitore.

Proprietà statiche

NomeTipoPredefinitoValori e limitiDescrizione
locationoggetto, nullnulladditionalProperties: falseDove l’elemento meteo legge le sue condizioni; senza di esso non ci sono dati meteo e l’elemento resta vuoto.
location.namestringmaxLength: 40; Obbligatorio
location.latitudenumberminimo: -90; massimo: 90; Obbligatorio
location.longitudenumberminimo: -180; massimo: 180; Obbligatorio
timeZonestringa, nullonullmaxLength: 64Zona IANA degli elementi orologio, data e conto alla rovescia; null usa la zona dello schermo.
backgroundColorstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Sovrascrive il colore di sfondo e della piastra della scheda con un colore piatto ordinato in CSS. #RRGGBBAA fornisce l’opacità. background none ha la precedenza.
textColorstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Sovrascrive i colori del testo principale e secondario. I colori di accento e di stato semantico mantengono i loro ruoli.

Proprietà dinamiche

NomeTipoPredefinitoValori e limitiDescrizione
leftoggetto, nullnulladditionalProperties: falseLo slot sinistro, largo 250 px (240 x 70 al suo interno), contenuto all’inizio, a 24 px dal bordo dello schermo. null lo lascia vuoto; mantiene il suo spazio. Cosa legge kind: testo e tag text; orologio hourCycle e timeZone; meteo unit (dal feed meteo); icona icon; data dateStyle e timeZone; stato text, tone e pulse; logo media; conto alla rovescia at e label; numero label e value; pagina page, of e style; allarme active, severity e text. L’orologio hourCycle, l’elemento meteo unit e l’ordine di una data seguono la localizzazione del Player a meno che l’elemento non li imposti.
left.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; ObbligatorioCosa mostra lo slot.
left.textstring""maxLength: 60Le parole di un testo, tag, stato o elemento di avviso.
left.sizestring"small""small", "medium", "large"Dimensione del carattere degli elementi testo, tag, stato e allarme (24, 32 e 44 px a 1080p; un testo piccolo occupa due righe, gli altri una), di una data (32, 44 e 56 px, una riga) e delle cifre di un elemento orologio, meteo, conto alla rovescia, pagina e icona.
left.colorstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Colore del testo o dell’icona #RRGGBB o #RRGGBBAA; null usa il colore del testo del tema.
left.fillstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Un rettangolo arrotondato di un tag: #RRGGBB o #RRGGBBAA; null è il colore del testo a metà intensità (un contorno nei temi Clear).
left.iconnull, stringanullnull, "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"L’icona di un elemento icona.
left.tonestring"cool"modello: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$"Il colore di un punto di stato: una chiave della palette (successo è ok o aperto, caldo attenzione o presto, pericolo allarme o chiuso, freddo informazione) o #RRGGBB.
left.pulsebooleanfalseUn punto di stato che pulsa una volta al secondo.
left.hourCyclestring"auto""auto", "12", "24"Le ore di un orologio: auto segue la localizzazione del Player (14:05 dove di solito usa un orologio a 12 ore, altrimenti 14:05); 12 è 2:05 PM e 24 è 14:05 in ogni localizzazione.
left.timeZonestringa, nullonullmaxLength: 64Zona IANA di un orologio, data o conto alla rovescia; null prende la zona della barra, altrimenti quella dello schermo.
left.dateStylestring"short""short", "long"Un elemento data: breve è Mer 21 Ott e lungo Mercoledì 21 Ottobre; nella localizzazione US il mese viene prima (Wed Oct 21, Wednesday, October 21). I nomi di giorni e mesi sono in inglese; una data lunga che non entra scende alla forma breve.
left.atstringa, nullonullmaxLength: 40Istante ISO 8601 a cui arriva un conto alla rovescia; senza offset è l’ora reale nella zona dell’elemento.
left.labelstring""maxLength: 24L’etichetta di un numero sopra il suo valore; l’etichetta di un conto alla rovescia sopra le sue cifre mentre conta (omessa se non entra per intero) e le parole che mostra una volta arrivato il suo momento.
left.valuestring""maxLength: 16Il valore di un numero, formattato come desideri che venga letto (1.284 o 98%).
left.mediastring""maxLength: 200Immagine di un elemento logo: un riferimento media progetto (media:<id>), adattato interamente in 240 x 70.
left.pageinteger1minimo: 1; massimo: 999La pagina corrente di un elemento di pagina, a partire da 1.
left.ofinteger1minimo: 1; massimo: 999Il numero di pagine di un elemento di pagina.
left.stylestring"numbers""dots", "numbers"Un elemento di pagina come 3 / 8 o come puntini (puntini fino a dodici pagine).
left.activebooleanfalseUn elemento di allerta: falso è un segno di spunta silenzioso, vero prende il colore di gravità e le sue parole.
left.severitystring"warm""warm", "danger"Il colore di un elemento di allerta attivo: caldo per attenzione, pericolo per allarme.
left.unitstring"auto""auto", "c", "f"La scala di temperatura di un elemento meteo: auto è Fahrenheit dove la regione della locale del Player lo usa (US PR GU VI AS MP BS BZ KY PW LR) e Celsius ovunque altrove; c e f forzano Celsius o Fahrenheit in ogni locale.
rightoggetto, nullnulladditionalProperties: falseLo slot destro, largo 250 px (240 x 70 al suo interno), contenuto alla fine, a 24 px dal bordo dello schermo. Gli stessi elementi dello slot sinistro, con le stesse regole di localizzazione.
right.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert"; ObbligatorioCosa mostra lo slot.
right.textstring""maxLength: 60Le parole di un testo, tag, stato o elemento di avviso.
right.sizestring"small""small", "medium", "large"Dimensione del carattere degli elementi testo, tag, stato e allarme (24, 32 e 44 px a 1080p; un testo piccolo occupa due righe, gli altri una), di una data (32, 44 e 56 px, una riga) e delle cifre di un elemento orologio, meteo, conto alla rovescia, pagina e icona.
right.colorstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Colore del testo o dell’icona #RRGGBB o #RRGGBBAA; null usa il colore del testo del tema.
right.fillstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Un rettangolo arrotondato di un tag: #RRGGBB o #RRGGBBAA; null è il colore del testo a metà intensità (un contorno nei temi Clear).
right.iconnull, stringanullnull, "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"L’icona di un elemento icona.
right.tonestring"cool"modello: "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$"Il colore di un punto di stato: una chiave della palette (successo è ok o aperto, caldo attenzione o presto, pericolo allarme o chiuso, freddo informazione) o #RRGGBB.
right.pulsebooleanfalseUn punto di stato che pulsa una volta al secondo.
right.hourCyclestring"auto""auto", "12", "24"Le ore di un orologio: auto segue la localizzazione del Player (14:05 dove di solito usa un orologio a 12 ore, altrimenti 14:05); 12 è 2:05 PM e 24 è 14:05 in ogni localizzazione.
right.timeZonestringa, nullonullmaxLength: 64Zona IANA di un orologio, data o conto alla rovescia; null prende la zona della barra, altrimenti quella dello schermo.
right.dateStylestring"short""short", "long"Un elemento data: breve è Mer 21 Ott e lungo Mercoledì 21 Ottobre; nella localizzazione US il mese viene prima (Wed Oct 21, Wednesday, October 21). I nomi di giorni e mesi sono in inglese; una data lunga che non entra scende alla forma breve.
right.atstringa, nullonullmaxLength: 40Istante ISO 8601 a cui arriva un conto alla rovescia; senza offset è l’ora reale nella zona dell’elemento.
right.labelstring""maxLength: 24L’etichetta di un numero sopra il suo valore; l’etichetta di un conto alla rovescia sopra le sue cifre mentre conta (omessa se non entra per intero) e le parole che mostra una volta arrivato il suo momento.
right.valuestring""maxLength: 16Il valore di un numero, formattato come desideri che venga letto (1.284 o 98%).
right.mediastring""maxLength: 200Immagine di un elemento logo: un riferimento media progetto (media:<id>), adattato interamente in 240 x 70.
right.pageinteger1minimo: 1; massimo: 999La pagina corrente di un elemento di pagina, a partire da 1.
right.ofinteger1minimo: 1; massimo: 999Il numero di pagine di un elemento di pagina.
right.stylestring"numbers""dots", "numbers"Un elemento di pagina come 3 / 8 o come puntini (puntini fino a dodici pagine).
right.activebooleanfalseUn elemento di allerta: falso è un segno di spunta silenzioso, vero prende il colore di gravità e le sue parole.
right.severitystring"warm""warm", "danger"Il colore di un elemento di allerta attivo: caldo per attenzione, pericolo per allarme.
right.unitstring"auto""auto", "c", "f"La scala di temperatura di un elemento meteo: auto è Fahrenheit dove la regione della locale del Player lo usa (US PR GU VI AS MP BS BZ KY PW LR) e Celsius ovunque altrove; c e f forzano Celsius o Fahrenheit in ogni locale.
middleoggetto, nullnulladditionalProperties: falseIl messaggio tra gli slot. Senza testo (o pagine) il centro resta vuoto e mantiene lo spazio; è nascosto se sarebbe più stretto di 100 px.
middle.textstring""maxLength: 160Le parole di un messaggio statico o scorrevole.
middle.sizestring"small""small", "medium", "large"28 px con fino a due righe, 38 px o 52 px su una riga, a 1080p.
middle.alignstring"center""start", "center", "end"Dove si trovano le parole al centro.
middle.colorstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"Colore del testo #RRGGBB o #RRGGBBAA; null usa il colore del testo del tema.
middle.modestring"static""static", "crawl", "pages"static mostra un messaggio che non entra, a frasi intere, una dopo l’altra; crawl lo fa scorrere al centro finché il movimento è attivo (resta fermo se ci sta e mostra frasi intere in un fermo immagine o con movimento ridotto); pages mostra le stringhe di pages una dopo l’altra.
middle.pagesarray[]maxItems: 8I messaggi della modalità pagine, in ordine.
middle.pageSecondsinteger8minimo: 3; massimo: 60Secondi in cui ogni pagina rimane visibile; la pagina mostrata segue l’orologio, così ogni schermo mostra la stessa.

Esempio di canvas

Salva le proprietà statiche come params.json e crea la scheda. Il risultato contiene il suo ID crd_.

{
  "theme": "neomustard",
  "location": {
    "name": "Vancouver",
    "latitude": 49.25,
    "longitude": -123.0
  }
}
screenrig card create --type footer --major 1 --file params.json

Aggiungi questo elemento ai primitives di una pagina playlist, con quell’ID al posto di quello dell’esempio. Pubblica la playlist e assegna uno schermo.

{
  "id": "footer",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "footer",
  "content_fit": "fill"
}

Scrivere dati live

Scrivi il documento nella scheda dopo averla creata, poi sostituiscilo per aggiornare lo schermo senza ripubblicare. La scheda controlla ogni scrittura rispetto alle sue proprietà dinamiche e rifiuta un documento che non accetta. Usa lo stesso progetto della playlist.

Salva il documento come card-data.json. Il CLI legge il documento stesso, senza wrapper:

{
  "left": null,
  "right": null,
  "middle": null
}
screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json

Oppure chiamare direttamente l’API. L’API incapsula lo stesso documento in un campo document. Un token agente nomina già il suo progetto, quindi non viene inviato un header progetto; se invii ScreenRig-Project, deve corrispondere al progetto del token. Fornisci l’autorizzazione API tramite l’ambiente; vedi Autenticazione 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}}'