screenRIG
AccediInizia

Schede integrate cards

Aggiungi componenti live a una playlist: menu, orologi, code, punteggi, meteo e indicatori. Scegli una scheda, imposta le proprietà e pubblica.

Una scheda è un componente integrato su una tela playlist. Riempie il suo rettangolo con un orologio, menu, coda o altro dettaglio live, e può stare sopra immagini o video.

Layout e ancore

Imposta layout e anchor nell’elemento della playlist, accanto a card. layout è obbligatorio.

layoutRiquadro in unità di design 1080panchor
fullL’intera tela, orizzontale o verticalenessuno
freeIl tuo rect e layernessuno
center900 × 420, centratonessuno
wideIl canvas è inserito di 80 dall’alto e dal basso e di 30 dai latinessuno
headerL’intero bordo superiore per 80nessuno
footerL’intero bordo inferiore per 80nessuno
corner270 × 270, a filo dell’angolotop-left, top-right, bottom-left, bottom-right
chip240 × 70, distanziato 30 dai due bordi più vicinitop-left, top-right, bottom-left, bottom-right
stripL’intero bordo per 120top, bottom, left, right

Le dimensioni si scalano di min(canvas width, canvas height) / 1080. Un canvas 4K (3840 × 2160) mostra la stessa dimensione apparente del 1080p, e un canvas verticale la stessa di uno orizzontale. Il design di una scheda segue la forma della sua scatola: striscia, orizzontale, quadrata, verticale o torre.

anchor è obbligatorio per corner, chip e strip, e non consentito per full, free, center, wide, header e footer. Ometti rect e layer per ogni layout tranne free: screenRIG li ricava dalla tela della pagina quando la playlist viene salvata. Un elemento free necessita del proprio rect e layer.

Componi una pagina con una scheda full, center o wide, più schede corner, chip e strip se necessario. Una pagina contiene al massimo una scheda full, center o wide, al massimo una scheda corner o chip per angolo, e al massimo una strip per bordo, più una scheda con presenza che condivide quel bordo. Una header e una footer sono barre a tutta larghezza, alte 80, lungo i bordi superiore e inferiore, e una pagina contiene una barra per bordo: una header occupa lo slot strip del bordo superiore e una footer quello del bordo inferiore, quindi quel bordo non contiene strip normali, mentre una scheda con presenza può ancora condividerlo. Una pagina può contenere sia una header che una footer. Immagini, video e elementi web non sono limitati da queste regole, e qualsiasi numero di schede free può condividere una pagina. Una corner o chip su un bordo che contiene una strip si sposta verso l’interno di 120, e oltre una header o footer di 80 (il valore maggiore se un bordo contiene entrambe), quindi non si sovrappongono mai. Una scheda center, wide, header o footer ignora le strisce.

Una strip sinistra o destra è la banda su quel bordo, larga 120 e alta quanto la tela. La carta viene disegnata come una striscia orizzontale e il Player la ruota di 90 gradi intorno al centro della banda: la striscia sinistra in senso antiorario, così il testo si legge dal basso verso l’alto, e la striscia destra in senso orario, così il testo si legge dall’alto verso il basso.

Il livello di una scheda decide i suoi layout. Una scheda core prende tutti e nove, limitati ai layout che disegna: solo le schede header e footer prendono quei due. Una scheda fullscreen è fatta per uno schermo paesaggio o ritratto pieno e prende solo full. Uno stinger è un bumper di transizione pagina e non prende layout. GET /api/card-types e screenrig cards show ID elencano il livello e i layout di ogni scheda.

Presenza

Alcune schede sono presenti solo mentre la loro condizione è vera, come una barra di avvisi sul bordo inferiore o un chip “fulmine nelle vicinanze”. Quando assente, una scheda non disegna nulla. Una striscia di presenza sullo stesso bordo di una striscia normale la sostituisce mentre è presente, e la striscia normale ritorna dopo. Una scheda con presenza appare e scompare con un movimento che corrisponde al suo layout: le strisce scivolano dal loro bordo, gli angoli e i chip si alzano e svaniscono, e le schede center, wide, header, footer, full e free svaniscono.

Errori di layout

Il salvataggio di una playlist viene rifiutato con card_layout_invalid (400) per layout mancante o sconosciuto, ancora mancante, sconosciuto o indesiderato, un’ancora che la tier o le viste della scheda non accettano, o un rect o layer che non è quello derivato. Viene rifiutato con card_layout_conflict (400) quando due schede rivendicano lo stesso posto su una pagina. errors[0].field nomina il membro.

Temi

Imposta params.theme su neomustard (NeoMustard), cyanotype (Cyanotype), propaganda (Propaganda), signal (Signal), avant-garde (Avant Garde), bloom (Bloom), clear-dark (Clear Dark), clear-light (Clear Light) o primetime (Primetime). Le schede su screenrig.ai si aprono in Bloom e il controllo del tema le cambia. Primetime è il tema animato, background none fornisce uno sfondo trasparente e gli layout angolo e chip usano la piastra compatta del tema.

Carte Core, fullscreen e stinger

Ogni scheda può essere core, fullscreen o stinger. Le schede core si adattano a ogni layout e sono quelle nella pagina App. Le schede fullscreen riempiono uno schermo orizzontale o verticale e hanno pagine dedicate elencate nella referenza schede qui sotto. Lo stinger viene riprodotto tra due pagine come transizione.

Proprietà comuni

Queste proprietà controllano il tema e la posizione di ogni scheda. Impostale in params.

NomeTipoPredefinitoValori e limitiDescrizione
themestring"neomustard""neomustard", "cyanotype", "propaganda", "signal", "avant-garde", "bloom", "clear-dark", "clear-light", "primetime"
backgroundstring"theme""theme", "none"nessuno non dipinge alcuno sfondo, per sovrapporre al video.
accentstringa, nullonullmodello: "^#[0-9A-Fa-f]{6}$"Sovrascrive l’accento del tema.
layoutstring"full", "free", "center", "wide", "corner", "chip", "strip"Dove è posizionata la scheda (CONTRACT.md "Layouts"): full è tutto lo schermo, free qualsiasi rettangolo dato dall’host, center 900x420, wide è lo schermo con margine 80 sopra e sotto e 30 ai lati, corner 270x270 attaccato a un angolo, chip 240x70 con margine 30 da un angolo, strip 120 alto lungo un bordo (dimensioni in pixel di design 1080p). Se assente, una scheda prende full se il suo rettangolo riempie lo schermo, altrimenti free.
anchorstring"top-left", "top-right", "bottom-left", "bottom-right", "top", "bottom", "left", "right"In quale angolo (corner e chip) o bordo (strip) si trova un layout. Corner di default in alto a destra e strip in basso; gli altri layout non ne hanno.

Proprietà statiche e dinamiche

Una scheda è un’istanza nel tuo progetto: un ID crd_ che contiene le proprietà statiche della scheda e il suo documento dati live. Creala una volta, inserisci il suo ID in un elemento di pagina e modifica i suoi valori quando vuoi.

Le proprietà statiche sono i params dell’istanza: tema, posizione, titoli e simili. Modificale con card params, poi invia di nuovo la playlist perché le recepisca. Le proprietà dinamiche sono i valori contrassegnati dynamic: true nel contratto della scheda, come sezioni del menu, voci in coda o letture di indicatori. Risiedono nel documento dati della scheda, che card data put sostituisce senza ripubblicare la playlist.

I Player applicano i valori predefiniti, poi i parametri statici, poi le proprietà dinamiche del documento. Il documento live non può cambiare lo stile e params non contiene mai proprietà dinamiche. Una scheda le cui proprietà dinamiche obbligatorie non hanno ancora un documento resta nascosta finché non ne viene scritto uno.

Una scheda, un documento

Ogni scheda ha il proprio documento dati, e ogni elemento di pagina che contiene il suo ID crd_ mostra quel documento. Due schede Workplace Posts che mostrano post diversi sono due schede con ID propri: una scrittura su una aggiorna solo gli elementi che contengono il suo ID. Inserisci lo stesso ID in più elementi, in una pagina o in più pagine, quando devono mostrare lo stesso documento.

Feed

I feed sono dati di terze parti recuperati e memorizzati nella cache dal backend e passati alla scheda dal lettore. Per il meteo, imposta location con nome, latitudine e longitudine. Il backend ricava la chiave feed da queste proprietà statiche; non inviare un campo feed nell’elemento canvas. I documenti feed riportano l’attribuzione della fonte e i timestamp di recupero. Ogni riferimento di scheda nomina il suo schema feed e l’attribuzione della fonte.

Mostra l’attribuzione di un feed ovunque compaiano i suoi dati: le schede lo fanno per te. Un agente legge il documento che legge una scheda con GET /api/feeds/FAMILY, dove la famiglia è il primo nome dopo Famiglia e scheda in ogni sezione qui sotto. Una prima lettura di un luogo nuovo risponde 202 con Retry-After: 60 mentre screenRIG lo recupera, e tutte le schede di uno stesso luogo condividono un documento.

Maree

Previsioni di marea per una stazione, da NOAA CO-OPS: dati di pubblico dominio per gli Stati Uniti e i loro territori.

  • Famiglia e scheda: tides e tides
  • Impostazioni: station, l’ID di stazione NOAA di sette caratteri, oppure location, che sceglie la stazione di previsione più vicina entro 100 km. Un luogo senza una stazione così vicina non ricava alcuna chiave di feed: la scheda attende e l’API risponde 400 invalid_request.
  • Dati: alte e basse maree da due giorni prima a tre giorni dopo, più una serie ogni 15 minuti per le stazioni che NOAA prevede per armoniche. Le altezze sono in metri sopra il MLLW e gli orari in UTC. Aggiornato ogni 6 ore.
  • Crediti: Tide predictions from NOAA CO-OPS, reformatted by screenRIG; not an official NOAA product.

Lanci di razzi

I prossimi lanci di razzi nel mondo, da Launch Library 2 di The Space Devs.

  • Famiglia e scheda: launches e launch-tracker
  • Impostazioni: nessuna. Ogni scheda mostra lo stesso elenco.
  • Dati: i 20 lanci più vicini con fornitore, veicolo, rampa e orbita, aggiornati ogni 15 minuti. Un lancio resta elencato per 24 ore dopo il decollo, ed è così che una scheda ne mostra l’esito, e il lancio sulla rampa riceve anche la cronologia della missione con fino a 20 eventi.
  • Crediti: Data: The Space Devs / Launch Library 2.

Richiami di farmaci e alimenti

Richiami di un’agenzia sanitaria o alimentare di un paese.

  • Famiglia e scheda: drugalerts e drug-alerts
  • Impostazioni: country (us, ca o gb) e category (drug, il predefinito, o food).
  • Dati: gli ultimi 90 giorni, prima la classe I e, dentro una classe, dal più recente al più vecchio, fino a 100. Stati Uniti: i rapporti di applicazione della FDA tramite openFDA, datati dalla data del rapporto, senza i richiami completati e terminati. Canada: i richiami e gli avvisi di sicurezza di Health Canada e della CFIA. Gran Bretagna: i richiami di farmaci della MHRA (classi da 1 a 3) e gli avvisi alimentari della Food Standards Agency. Aggiornato ogni 3-6 ore.
  • Crediti: quelli di ciascuna agenzia, secondo la sua licenza aperta: openFDA (CC0), la Open Government Licence – Canada e la Open Government Licence v3.0.

Malattie respiratorie

Attività settimanale di influenza, COVID-19 e VRS.

  • Famiglia e scheda: respiratory e respiratory-activity
  • Impostazioni: country (us o gb) e region: uno stato, territorio o DC degli USA per nome o codice postale, oppure l’Inghilterra o una regione dell’UKHSA. Una regione vuota è il paese.
  • Dati: per ogni virus un livello da molto basso a molto alto, una tendenza (in aumento, stabile o in calo, che screenRIG calcola dalle ultime due settimane rispetto alle due precedenti), l’ultimo valore e 26 settimane di storico. Stati Uniti: i livelli e i tassi settimanali di ricoveri ospedalieri dei CDC, aggiornati ogni 6 ore. Inghilterra: la quota di test di laboratorio positivi dell’UKHSA, aggiornata ogni 12 ore. L’UKHSA non pubblica alcun livello, quindi screenRIG lo stabilisce confrontando l’ultima settimana con la più alta delle ultime 52: sotto il 5% è molto basso, sotto il 20% basso, sotto il 40% moderato, sotto il 70% alto, e oltre molto alto.
  • Crediti: i CDC, senza alcun avallo di screenRIG da parte dei CDC, dell’HHS o del governo degli Stati Uniti e con il contenuto invariato; l’UKHSA, secondo la Open Government Licence v3.0.

Almanacco

Ciò che la scheda today aggiunge alla data: ricorrenze, gli eventi del giorno nella storia, e il sole e la luna.

  • Famiglia e scheda: almanac e today
  • Impostazioni: language (ar, bs, cs, de, en, es, fr, it, pt, ru, sv, tr, uk o zh; en per impostazione predefinita), country (un codice ISO 3166-1), location ({screen.location} lo riempie) e date. Una scheda senza nessuno di questi mostra la storia in inglese e le giornate internazionali.
  • Dati: le festività nazionali del paese, le sue ricorrenze e le giornate internazionali (i nomi delle festività sono in inglese qualunque sia la lingua), fino a dieci eventi del giorno da On This Day di Wikipedia e, con un luogo, alba, tramonto, mezzogiorno solare, alba e crepuscolo civili, durata del giorno e fase lunare. Sole e luna sono calcolati, non recuperati. Il documento va dal giorno prima a due giorni dopo, quindi una pagina cambia alla mezzanotte locale.
  • Crediti: i collaboratori di Wikipedia, secondo la CC BY-SA 4.0.

Sicurezza all’aperto

La lettura del calore che mostra la scheda outdoor-safety.

  • Famiglia e scheda: outdoorsafety e outdoor-safety
  • Impostazioni: location.
  • Dati: una temperatura di bulbo umido e globo stimata per terreno aperto in pieno sole, calcolata dal meteo nel luogo: temperatura, umidità, vento, nuvolosità e altezza del sole. All’ombra la lettura è più bassa. È una stima, mai una lettura di sensore, e il documento lo dice. Le osservazioni sono orarie, quindi imposta staleMinutes della scheda a 120 o più.
  • Fulmini: il feed porta solo il calore. Imposta show della scheda su heat, oppure scrivi i fulmini nei dati della scheda.

Partenze dei trasporti

Le prossime partenze da una a quattro fermate di un provider di trasporto, in ordine di partenza.

  • Famiglia e scheda: departures e departures
  • Impostazioni: provider (tfl, entur o digitransit) e stops, gli ID delle fermate del provider (separati da virgole nell’API). Trova un ID con la ricerca delle fermate del provider stesso.
  • Dati: aggiornati ogni minuto finché uno schermo mostra il tabellone. Una partenza cancellata resta elencata come cancellata, e una fermata senza partenze è un tabellone vuoto. Una fermata che il provider non conosce fa fallire l’intero tabellone, e l’ultimo tabellone resta. TfL dà solo previsioni in tempo reale, quindi le sue righe non hanno ritardo.
ProviderEsempi di ID di fermataCrediti
tfl940GZZLUOXC (Oxford Circus), 490008660N (una fermata dell’autobus)Powered by TfL Open Data
enturNSR:StopPlace:337, NSR:Quay:568Contains data under the Norwegian licence for Open Government data (NLOD) distributed by Entur
digitransitHSL:1040129© Digitransit, CC BY 4.0

Bike sharing

Le stazioni di bike sharing più vicine a un luogo, da sistemi che pubblicano GBFS.

  • Famiglia e scheda: bikeshare e bike-share
  • Impostazioni: location ({screen.location} funziona) e facoltativamente system, un ID di sistema MobilityData come Mobibikes_CA_Vancouver, dublin o nextbike_bn. Senza system, lo serve il sistema elencato più vicino la cui area contiene il luogo, e un luogo che nessun sistema elencato copre non ricava alcuna chiave: la scheda attende e l’API risponde invalid_request su system.
  • Dati: prima le stazioni più vicine, fino a 40 entro 20 km, ciascuna con bici, e-bike, stalli e stato, aggiornate ogni minuto.
  • Sistemi: 28 il cui feed riporta una licenza che consente la ridistribuzione e la visualizzazione commerciale: Mobi (Vancouver) e City Bikes Helsinki con ODbL, docomo (Tokyo) con CC BY 4.0, i sistemi JCDecaux (Dublino, Lione, Tolosa, Nantes, Bruxelles, Lussemburgo, Valencia, Lubiana) con la Licence Ouverte, e nextbike a Berlino, Colonia, Düsseldorf, Hannover, Norimberga, Bonn, Vienna, Linz, Innsbruck, Praga, Brno, Varsavia, Breslavia, Zagabria, Barcellona, Göteborg e Strasburgo con CC0.
  • Crediti: il gestore, secondo la sua licenza.

Pubblica una tela di schede

Segui Avvio per installare il plugin ufficiale, selezionare il progetto e associare un Player. Crea la scheda, inserisci il suo ID in una playlist e pubblicala. Questa pagina usa la scheda indicatore nel layout center.

Salva le proprietà statiche della scheda come gauge-params.json:

{"theme":"neomustard"}

Crea la scheda con la CLI inclusa nel plugin. Il risultato contiene il suo ID crd_.

screenrig card create --type gauge --file gauge-params.json

Oppure chiama l’API con il tipo e i suoi parametri. La risposta 201 contiene l’id della scheda.

curl --request POST "https://api.screenrig.ai/api/cards" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"type":"gauge","params":{"theme":"neomustard"}}'

Salva quanto segue come playlist.json, con l’ID della tua scheda al posto di crd_01EXAMPLEGAUGE000000000. L’elemento di pagina invia solo l’ID e il suo layout: i params e i dati della scheda restano con la scheda.

{
  "name": "Live gauge",
  "pages": [
    {
      "id": "main",
      "canvas": {
        "width": 1920,
        "height": 1080,
        "background": "#000000FF",
        "viewport_fit": "contain"
      },
      "transition": {
        "type": "crossfade",
        "duration_ms": 500
      },
      "advance": {
        "mode": "duration",
        "after_ms": 15000
      },
      "primitives": [
        {
          "id": "gauge",
          "primitive": "card",
          "card": "crd_01EXAMPLEGAUGE000000000",
          "layout": "center",
          "content_fit": "fill"
        }
      ]
    }
  ]
}

Usa autenticazione API per l’autorizzazione. Un token agente nomina già il suo progetto, quindi gli esempi non inviano intestazione ScreenRig-Project; se la invii, deve corrispondere al progetto del token. Mantieni i valori token fuori dai file playlist.

curl --request POST "https://api.screenrig.ai/api/playlists" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data @playlist.json

La risposta identifica la playlist con un ID pl_. Una risposta pending_review attende la revisione del progetto prima di andare in diretta. Per modificare le proprietà statiche, aggiorna la scheda con screenrig card params crd_ID --file gauge-params.json (PATCH /api/cards/{id} con {"params": {...}}), poi invia di nuovo il documento {name, pages} con PUT /api/playlists/{id}: la playlist recepisce i parametri correnti della scheda quando viene salvata. Il major di una scheda, facoltativo alla creazione, fissa il suo contratto; ometterlo seleziona la major corrente.

Gli elementi di pagina precedenti che nominano un tipo del catalogo con params e data incorporati, e le route /api/card-data/{key} che li servono, sono ancora accettati. Ogni risposta riporta un avviso di deprecazione che indica il sostituto: gli ID di istanza scheda da /api/cards e /api/cards/{id}/data.

Scrivi valori live

Preferisci la CLI, che ha il comando. Salva il documento come gauge-data.json. Il file contiene il documento stesso, senza wrapper:

{"metrics":[{"label":"Capacity","value":72,"unit":"%"}]}
screenrig card data put crd_01EXAMPLEGAUGE000000000 --file gauge-data.json

Le scritture sostituiscono l’intero documento e vengono verificate rispetto alle proprietà dinamiche della scheda: un documento che la scheda rifiuta viene respinto con card_data_invalid (409) e nulla cambia. Aggiungi --ttl 30m o --expires-at INSTANT per svuotare i dati su ogni schermo, anche offline, quando nulla li aggiorna. Una notifica sulla condizione card_data_stale avvisa il progetto quando i dati di una scheda sono scaduti perché nulla li ha rinnovati.

Oppure chiama direttamente l’API. L’API incapsula lo stesso documento in un campo document. I documenti sono oggetti JSON di massimo 1 MiB.

curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLEGAUGE000000000/data" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"document":{"metrics":[{"label":"Capacity","value":72,"unit":"%"}]}}'

Gli schermi che mostrano la scheda recuperano nuovamente il documento e lo aggiornano in loco. Leggi un documento con GET /api/cards/{id}/data; la sua revisione ETag può essere inviata come If-Match alla scrittura successiva. Aggiungi Idempotency-Key per una scrittura ripetibile in sicurezza, e ttl_seconds o expires_at accanto a document per una scadenza. Elenca le schede del progetto con GET /api/cards; eliminane una con DELETE /api/cards/{id} quando nessuna playlist la usa.

Le immagini nelle proprietà della scheda usano media:<mediaId>, facendo riferimento a un’immagine pronta nello stesso progetto. Una scrittura dati live richiede che tali immagini siano approvate. Non inserire mai un URL immagine in una proprietà della scheda.

Assegna e verifica con la CLI

Usa la CLI inclusa del plugin ufficiale con lo stesso progetto. Prendi l’id playlist dalla risposta API e l’id schermo da screen list, poi assegna e ispeziona il risultato:

screenrig screen list
screenrig screen assign scr_EXAMPLE --playlist-id pl_EXAMPLE
screenrig screen screenshot scr_EXAMPLE

L’assegnazione registra la playlist desiderata. Controlla le prove del lettore prima di segnalare la riproduzione. Riferimento CLI · Riferimento API.

Riferimento della card

Il riferimento della scheda copre tre gruppi: schede core, schede a schermo intero e lo stinger. Le schede core si adattano a ogni layout, le schede a schermo intero riempiono tutto lo schermo, e lo stinger viene riprodotto tra le pagine.

Schede principali

Schede a schermo intero

Stinger