Smart Displays e app pubblicate

In questa pagina

Uno Smart Display è uno schermo che mostra un'app ospitata dal tuo Agente AI. Poiché è l'agente a eseguire l'app, può cambiare ciò che lo schermo mostra man mano che cambia ciò che accade intorno: il picco del pranzo al bancone, un visitatore che apre la porta d'ingresso, la hall di un hotel che si riempie, una sala d'attesa affollata, i soci che arrivano per una sfida di visite. Descrivi ciò che desideri in linguaggio semplice. L'agente crea l'app e la mantiene aggiornata, e tu la metti sui tuoi schermi come qualsiasi altro contenuto.

La classifica di una palestra per una sfida di visite di ottobre su uno schermo orizzontale, con i soci ordinati per numero di visite e un pannello Just arrived che mostra la posizione di tre soci che hanno appena effettuato l'ingressoLa classifica di una palestra per una sfida di visite di ottobre su uno schermo orizzontale, con i soci ordinati per numero di visite e un pannello Just arrived che mostra la posizione di tre soci che hanno appena effettuato l'ingresso

Figura 1: uno Smart Display nell'area allenamento di una palestra. L'agente riconta gli ingressi ogni pochi minuti e mostra ai soci appena arrivati la loro posizione in classifica. Il club e i soci sono fittizi.

Mantieni sempre il controllo: ogni app si trova nella tua Library, dove puoi visualizzarne l'anteprima, vedere dove viene usata e modificarla o rimuoverla.

Smart Display

Uno Smart Display usa un'Agent: Published App: un'app web creata dal tuo Agente AI che viene eseguita in tempo reale sul dispositivo dell'Agente AI della tua struttura. Gli schermi mostrano l'app in tempo reale, quindi quando l'agente cambia ciò che mostra, cambia anche lo schermo. Nessuno deve ripubblicare nulla.

L'agente mantiene aggiornata l'app in uno di questi due modi:

  • Secondo una pianificazione. Un'automazione viene eseguita ogni pochi minuti negli orari che contano. Tramite la sua connessione al Performance Hub, l'agente legge ciò che gli serve, come ingressi, eventi delle porte o conteggi delle telecamere, e aggiorna l'app. Ogni esecuzione comporta una spesa AI, quindi esegui i controlli solo con la frequenza necessaria.
  • Quando accade qualcosa. Un evento nella tua sede, come il pass di un visitatore che apre la porta d'ingresso, spinge l'agente ad aggiornare l'app. Lo schermo cambia poco dopo l'evento e, nel frattempo, l'agente non svolge alcun lavoro. Vedi il benvenuto nella hall dell'ufficio.

Uno Smart Display può usare solo ciò che l'agente è in grado di leggere. Il suo accesso MCP deve includere la struttura e le funzionalità di cui l'app ha bisogno, come Door & Gate Access per gli eventi delle porte o TVCC per gli ingressi e i conteggi delle telecamere. Vedi Connessione al Performance Hub.

Due modi in cui un'app raggiunge i tuoi schermi

Agent: Published App (Smart Display)On-Device Web App
Chi la creaIl tuo Agente AITu, uno sviluppatore o qualsiasi agente AI connesso tramite MCP
Dove viene eseguitaSul dispositivo del tuo Agente AI, mostrata in tempo reale sugli schermiSu ogni schermo (gli schermi la scaricano)
Continua ad adattarsiSì: l'agente la modifica man mano che cambia ciò che accade nella tua sedeNo: riproduce gli stessi file finché non viene pubblicata una nuova versione
Dati della tua strutturaSì, tutto ciò che l'agente può leggereNo: solo dati pubblici, come il meteo
Se la connessione internet o l'agente non sono disponibiliViene saltata finché l'agente non torna disponibileContinua a essere riprodotta
Versioni e ripristinoGestiti dall'agenteSì, nella Library
Moduli necessariDisplay Screens, Agente AI e Custom AppsDisplay Screens

Il tuo agente può creare anche un'On-Device Web App per te, ma una volta pubblicata non può continuare ad adattarsi. Riproduce gli stessi file su ogni schermo finché qualcuno non pubblica una nuova versione e non può usare i dati della tua struttura. Solo un'Agent: Published App continua a cambiare in base a ciò che accade intorno allo schermo.

Scegli uno Smart Display quando lo schermo deve reagire a ciò che accade nella tua sede: chi è arrivato, quanta gente c'è o cosa è appena successo. Scegli un'On-Device Web App per i contenuti che restano invariati o richiedono solo dati pubblici e che devono continuare a essere riprodotti offline.

Esempi di Smart Display

Ogni esempio qui sotto è una configurazione reale: a cosa reagisce lo schermo, cosa mostra, come l'agente lo mantiene aggiornato e cosa ti serve. Le aziende e le persone sono fittizie.

Classifica di una sfida di visite che saluta i soci al loro arrivo

Uno spazio di coworking, la biblioteca di un campus o una palestra organizza una sfida di visite per il mese. Il suo agente ospita, per gli schermi davanti ai quali passano i soci, una classifica che ordina i soci per numero di visite nel mese e dà il benvenuto ai partecipanti alla sfida quando si trovano vicino allo schermo. Nelle figure, una palestra organizza una sfida di visite di ottobre sugli schermi della sua area allenamento.

  • Reagisce a: chi si trova vicino allo schermo. L'agente lo sa tramite il riconoscimento facciale del Performance Hub, gli ingressi recenti o entrambi, a seconda di come è configurata la tua sede. Ogni partecipante alla sfida vicino allo schermo riceve un'etichetta Just in e una scheda che mostra la sua posizione in classifica. Nelle figure, la palestra usa gli ingressi degli ultimi 30 minuti.
  • Mostra: i soci con più visite, solo con nome e iniziale del cognome, i giorni rimanenti della sfida e il premio.
  • Si mantiene aggiornato: ogni 5 minuti durante l'orario di apertura, l'agente riconta gli ingressi del mese con insights_checkins, controlla chi si trova vicino allo schermo e aggiorna l'app.
  • Ti serve: TVCC con AI Insights & People, con il riconoscimento facciale attivo sulle telecamere vicine allo schermo, gli ingressi dal tuo sistema di gestione dei soci, o entrambi, e un elenco dei soci che hanno aderito alla sfida dando il proprio consenso.

Una conversazione con l'Agente AI in cui si chiede una classifica per una sfida di visite basata sugli ingressi, con in evidenza i soci che hanno appena effettuato l'ingresso, e l'app October Visit Challenge aperta accantoUna conversazione con l'Agente AI in cui si chiede una classifica per una sfida di visite basata sugli ingressi, con in evidenza i soci che hanno appena effettuato l'ingresso, e l'app October Visit Challenge aperta accanto

Figura 2: chiedi la classifica al tuo Agente AI. L'agente crea l'app, la apre accanto alla chat e riconta gli ingressi ogni 5 minuti. La conversazione è un esempio.

La classifica della sfida di visite di ottobre impaginata per uno schermo verticaleLa classifica della sfida di visite di ottobre impaginata per uno schermo verticale

Figura 3: la stessa classifica su uno schermo verticale

Privacy. Includi solo i soci che hanno dato il consenso, non mostrare più del nome e dell'iniziale del cognome e non mostrare mai dettagli sull'abbonamento o sulla salute.

Menu board di un fast food che reagisce al picco del pranzo

Un ristorante fast food chiede al suo agente il menu board sopra il bancone. Il menu cambia nel corso della giornata e, quando il bancone è affollato, sposta in cima i prodotti più rapidi da preparare.

  • Reagisce a: l'ora del giorno e l'affollamento del bancone, cioè il numero di persone contate finora in quest'ora dalla telecamera del bancone, confrontato con un'ora normale.
  • Mostra: la colazione fino alle 11, il pranzo fino alle 15, poi il menu del pomeriggio. Quando c'è molta gente, un banner Ready in under 3 minutes con i prodotti a preparazione rapida e un'etichetta Quick su di essi nel menu.
  • Si mantiene aggiornato: ogni 5 minuti, l'agente controlla i conteggi delle telecamere della giornata in AI Insights & People e aggiorna l'app. Prezzi e tempi di preparazione provengono da un file del menu che fornisci all'agente.
  • Ti serve: TVCC con AI Insights & People, con una telecamera che inquadra il bancone.

Una conversazione con l'Agente AI in cui si chiede un menu board per il bancone che cambia in base all'ora del giorno e promuove i prodotti a preparazione rapida quando il bancone è affollato, con il Counter Menu Board aperto accantoUna conversazione con l'Agente AI in cui si chiede un menu board per il bancone che cambia in base all'ora del giorno e promuove i prodotti a preparazione rapida quando il bancone è affollato, con il Counter Menu Board aperto accanto

Figura 4: l'agente crea il menu board e lo apre accanto alla chat. Usa solo conteggi anonimi. La conversazione è un esempio.

Il menu board del pranzo su uno schermo orizzontale, con un banner Busy right now che mostra tre prodotti pronti in meno di 3 minuti sopra i menu di burger, bowl e contorniIl menu board del pranzo su uno schermo orizzontale, con un banner Busy right now che mostra tre prodotti pronti in meno di 3 minuti sopra i menu di burger, bowl e contorni

Figura 5: il risultato sopra il bancone durante il picco del pranzo

Benvenuto nella hall dell'ufficio per ogni visitatore

Un ufficio assegna a ogni visitatore un pass di Door & Gate Access valido per la durata della visita. Quando il pass di un visitatore apre la porta d'ingresso, lo schermo della hall lo saluta per nome indicando la persona che lo ospita, la sala riunioni e le indicazioni per raggiungerla, poi dopo un minuto torna al consueto messaggio di benvenuto.

  • Reagisce a: il pass del visitatore che apre la porta d'ingresso.
  • Mostra: "Hi Priya, great to see you", il nome e il team della persona che lo ospita, la sala riunioni e l'orario e le indicazioni passo per passo.
  • Si mantiene aggiornato: un workflow attiva il saluto quando il pass del visitatore apre la porta d'ingresso. L'agente associa la persona dell'evento della porta all'elenco dei visitatori del giorno, che la reception tiene aggiornato e fornisce all'agente con la persona ospitante, la sala e le indicazioni per ogni visitatore. Gli eventi delle porte non includono nomi, persone ospitanti o sale, quindi l'elenco è sempre necessario.
  • Ti serve: Door & Gate Access e un elenco dei visitatori del giorno.

Una conversazione con l'Agente AI in cui si chiede una schermata di benvenuto per la hall che saluta ogni visitatore quando il suo accesso apre la porta d'ingresso, con l'app Lobby Visitor Welcome aperta accantoUna conversazione con l'Agente AI in cui si chiede una schermata di benvenuto per la hall che saluta ogni visitatore quando il suo accesso apre la porta d'ingresso, con l'app Lobby Visitor Welcome aperta accanto

Figura 6: l'agente crea la schermata di benvenuto e la apre accanto alla chat. La conversazione è un esempio.

Il benvenuto nella hall su uno schermo verticale, che saluta un visitatore per nome con la persona ospitante, la sala riunioni e le indicazioniIl benvenuto nella hall su uno schermo verticale, che saluta un visitatore per nome con la persona ospitante, la sala riunioni e le indicazioni

Figura 7: il risultato sullo schermo verticale nella hall

La stessa configurazione può dare il benvenuto anche al tuo team. Ad esempio, può fare gli auguri di buon compleanno a un membro del team quando arriva nel giorno del suo compleanno, a partire da un elenco dei compleanni delle persone che hanno dato il consenso. La data di nascita è un dato personale: includi solo le persone che hanno dato il consenso e non mostrare più del nome.

Pensa a chi può vedere lo schermo. Chiunque si trovi nella hall può vedere un messaggio di benvenuto. Non mostrare più del nome e non mostrare mai informazioni private come dettagli sulla salute, sull'abbonamento o sulle risorse umane.

Bacheca della sala d'attesa con i tempi di attesa in tempo reale

Una clinica o un centro servizi mostra quanto dura l'attesa in questo momento, così chi aspetta sa cosa aspettarsi.

  • Reagisce a: il numero approssimativo di persone in attesa, dai conteggi anonimi della telecamera che inquadra l'area d'attesa, e gli arrivi dagli ingressi, dove la tua sede li registra.
  • Mostra: un tempo di attesa approssimativo e il numero indicativo di persone in attesa, gli orari di apertura e un messaggio rassicurante quando c'è molta gente.
  • Si mantiene aggiornato: ogni pochi minuti, l'agente legge i conteggi e gli arrivi più recenti e calcola l'attesa in base alla durata tipica di una visita che gli fornisci.
  • Ti serve: TVCC con AI Insights & People, con una telecamera che inquadra l'area d'attesa.

Un esempio di ciò che lo schermo mostra quando c'è molta gente:

Circa 25 minuti

Circa 7 persone in attesa

Stamattina c'è più affluenza del solito. Grazie per la pazienza: ti chiameremo non appena saremo pronti.

Non mostrare mai informazioni su pazienti o clienti. La bacheca mostra solo totali, mai nomi o motivi della visita.

Bacheca della hall di un hotel che segue la giornata

Un hotel o un locale mostra agli ospiti il programma, che cambia in base all'ora del giorno e all'affollamento della hall.

  • Reagisce a: l'ora del giorno e l'affollamento della hall, dai conteggi anonimi della telecamera della hall.
  • Mostra: nel pomeriggio, le informazioni sul check-in e i dati del Wi-Fi; la sera, gli eventi della serata e la disponibilità del ristorante; la mattina, gli orari della colazione e i promemoria per il check-out. Quando la hall è affollata, le informazioni sul check-in e sul Wi-Fi vengono mostrate per prime, così gli ospiti in arrivo le trovano rapidamente.
  • Si mantiene aggiornato: ogni pochi minuti, l'agente legge i conteggi della hall e aggiorna l'app. Gli eventi e la disponibilità del ristorante provengono da elenchi o sistemi a cui dai accesso all'agente.
  • Ti serve: TVCC con AI Insights & People per i conteggi della hall. Senza TVCC, la bacheca cambia comunque in base all'ora del giorno.

Un esempio di ciò che lo schermo mostra alle 18:

Stasera al Demo Harbour Hotel

Jazz nella lounge, dalle 19 alle 22

Harbour Grill: tavoli liberi dalle 20:30. Prenota alla reception.

Colazione domani dalle 6:30 all'Harbour Grill.

Segnaletica di un centro commerciale che segue il pubblico

Un centro commerciale chiede al suo agente una segnaletica per l'atrio che sceglie la promozione in base alla composizione per età e genere degli acquirenti vicino ai cartelli.

  • Reagisce a: la composizione per età e genere degli acquirenti vicino ai cartelli negli ultimi 5 minuti, sotto forma di conteggi aggregati anonimi: totali per fascia d'età (18-24, 25-34, 35-44, 45-54 e 55+) e per genere. Nessuna persona viene mai identificata o tracciata.
  • Mostra: una promozione per famiglie, studenti o anziani, oppure una generica, con l'orologio e il programma della giornata, e nulla sulle persone nelle vicinanze.
  • Si mantiene aggiornato: ogni 5 minuti, l'agente legge i dati demografici dai dati di computer vision della struttura in AI Insights & People e, ogni volta che la promozione deve cambiare, aggiorna l'app.
  • Ti serve: TVCC con AI Insights & People nella struttura.

Una conversazione con l'Agente AI in cui si chiede una segnaletica per l'atrio che sceglie una promozione ogni 5 minuti in base alla composizione anonima per età e genere degli acquirenti vicino ai cartelli, con l'app Atrium Promotions aperta accantoUna conversazione con l'Agente AI in cui si chiede una segnaletica per l'atrio che sceglie una promozione ogni 5 minuti in base alla composizione anonima per età e genere degli acquirenti vicino ai cartelli, con l'app Atrium Promotions aperta accanto

Figura 8: l'agente crea l'app e la apre accanto alla chat. Usa solo conteggi anonimi, mai singole persone. La conversazione è un esempio.

La schermata Atrium Promotions in un centro commerciale, che mostra una promozione per le famiglie durante le vacanze scolastiche, l'ora e il programma della giornataLa schermata Atrium Promotions in un centro commerciale, che mostra una promozione per le famiglie durante le vacanze scolastiche, l'ora e il programma della giornata

Figura 9: il risultato su uno schermo orizzontale. Mostra la promozione, mai nulla sulle persone nelle vicinanze.

La schermata Atrium Promotions impaginata per uno schermo verticaleLa schermata Atrium Promotions impaginata per uno schermo verticale

Figura 10: la stessa app su uno schermo verticale

Privacy. Usa solo conteggi aggregati, rispetta la normativa sulla privacy applicabile e informa gli acquirenti che sono in uso telecamere e sistemi di misurazione del pubblico.

Istruzioni di sicurezza durante un'emergenza

Qualsiasi sede può fare in modo che i propri schermi passino alle istruzioni di sicurezza durante un'emergenza e tornino alla normalità una volta terminata.

  • Reagisce a: qualsiasi attivazione scelta dalla tua sede, ad esempio un lockdown o un'evacuazione avviati dalla tua sede, e la fine di tale evento.
  • Mostra: le istruzioni che hai preparato per quell'evento, al posto di tutto il resto sugli schermi che scegli. Quando l'evento termina, gli schermi tornano ai loro contenuti abituali.
  • Si mantiene aggiornato: gli schermi che scegli passano alle tue istruzioni quando si verifica l'attivazione che hai scelto e tornano indietro quando l'evento termina. Il tuo agente può aiutarti a scrivere le istruzioni e a configurare il tutto.
  • Ti serve: Display Screens e istruzioni concordate con il responsabile della sicurezza della tua sede.

Prepara le istruzioni come immagine o come On-Device Web App anziché come Agent: Published App, in modo che vengano mostrate anche se l'agente è offline. Concorda con il responsabile della sicurezza della tua sede cosa mostrano gli schermi e quali schermi lo mostrano, e testa il tutto insieme a lui.

Tieni gli allarmi silenziosi lontani dagli schermi pubblici. Gli allarmi Duress sono silenziosi, quindi non devono pilotare gli schermi rivolti al pubblico. Un takeover su un allarme Duress ha senso solo sugli schermi di aree private e non aperte al pubblico, come un back office.

Agente: App pubblicate

Un'Agent: Published App è un'app web creata dal tuo Agente AI che viene eseguita in tempo reale sul dispositivo dell'Agente AI della tua struttura. Poiché viene eseguita sull'agente, può avere un proprio lato server e aggiornarsi da sola. Gli schermi la mostrano in tempo reale dall'agente.

Creare un'app in una conversazione

Chiedi al tuo Agente AI lo schermo che desideri, indicando dove va e a cosa deve reagire. L'agente crea l'app e la apre accanto alla chat in modo che tu possa verificarla. Ad esempio:

  • "Crea una classifica per la nostra sfida di visite di ottobre a partire dagli ingressi e mantienila aggiornata ogni pochi minuti durante l'orario di apertura."
  • "Crea un menu board per il bancone che passi dalla colazione al pranzo alle 11 e promuova i prodotti a preparazione rapida quando c'è molta gente."
  • "Crea una schermata di benvenuto per la hall che saluti ogni visitatore quando il suo pass apre la porta d'ingresso."

Una schermata di allenamento nell'area allenamento della palestra

Una palestra chiede al suo agente una schermata di allenamento verticale per l'area allenamento. Mostra due postazioni, una sopra l'altra: un benchmark allo ski erg e gli addominali, ciascuna con il proprio obiettivo e una breve clip dimostrativa in loop. Tra le due si trova un grande timer dei turni, con l'intensità target al centro.

Una conversazione con l'Agente AI in cui si chiede una schermata di allenamento verticale con due postazioni e un timer dei turni, con il Workout Station Board aperto accantoUna conversazione con l'Agente AI in cui si chiede una schermata di allenamento verticale con due postazioni e un timer dei turni, con il Workout Station Board aperto accanto

Figura 11: chiedi al tuo Agente AI una schermata di allenamento. L'agente crea l'app e la apre accanto alla chat. La conversazione è un esempio.

Una schermata di allenamento verticale con due postazioni di esercizio, video dimostrativi e un grande timer dei turniUna schermata di allenamento verticale con due postazioni di esercizio, video dimostrativi e un grande timer dei turni

Figura 12: il risultato su uno schermo verticale nell'area allenamento della palestra

Pubblicare un'app dal tuo Agente AI

In Agente AI → Published apps, scegli Publish to Performance Hub e compila:

ImpostazioneCosa fa
NameFino a 60 caratteri
Icon e DescriptionCome viene elencata l'app. La descrizione può contenere fino a 300 caratteri.
Support emailChi contattare in merito all'app
Health checks & auto-repairAttivo per impostazione predefinita. L'agente riavvia o ripara l'app se smette di funzionare.
Allow on display screensDisattivato per impostazione predefinita. Attivalo per consentire che l'app venga mostrata sugli schermi. L'impostazione avverte: "Anyone near those screens can see it, so only allow apps without private information."
AudienceChi può usare l'app: Only me (testing), Specific people, This facility (l'impostazione predefinita), Selected facilities, Whole brand o Entire organisation. Non può mai essere più ampio del tuo accesso, e i destinatari a livello di brand o di organizzazione richiedono un accesso a livello di organizzazione.

Dalla stessa scheda puoi usare Pause e Resume, Edit, Unpublish, Transfer ownership e Show on screens.

Mostrarla sugli schermi

  1. In Display Screens, apri la Library e fai clic su Add content → Agent: Published App.
  2. Scegli l'app. Ogni app idonea è elencata con un'immagine e, se l'agente è offline, con un badge Offline.
  3. Assegnale un Name e, facoltativamente, dei Tags e Show for (seconds), quindi fai clic su Add to library.
  4. Pubblicala sugli schermi o aggiungila a una playlist.

La finestra di dialogo Add an Agent: Published App con la classifica October Visit Challenge selezionataLa finestra di dialogo Add an Agent: Published App con la classifica October Visit Challenge selezionata

Figura 13: aggiungi un'Agent: Published App alla Library. Scegli l'app, assegnale un nome e fai clic su Add to library. Le immagini delle app che non fanno parte di questo esempio sono sfocate.

La classifica October Visit Challenge nella Library, con l'anteprima in tempo reale, Preview landscape, Preview portrait, i tag, Show for 30 seconds e dove viene usataLa classifica October Visit Challenge nella Library, con l'anteprima in tempo reale, Preview landscape, Preview portrait, i tag, Show for 30 seconds e dove viene usata

Figura 14: un'Agent: Published App nella Library. L'anteprima è un'immagine dell'app in tempo reale, acquisita dal Performance Hub. Where it is used elenca gli schermi e le pianificazioni che la mostrano. Il club e i soci sono fittizi.

Le anteprime, come Preview landscape, Preview portrait e l'anteprima della playlist, non possono mostrare l'app in tempo reale, quindi mostrano il segnaposto "Shown live on the screen".

Requisiti

  • Il modulo Agente AI, per pubblicare l'app.
  • Il modulo Custom Apps (AI Agent: Published Apps) nella struttura, per mostrarla sugli schermi.
  • L'app deve essere attiva, avere Allow on display screens attivato e avere destinatari che includano la struttura.

Quando gli schermi saltano un'app dell'agente

Gli schermi passano all'elemento successivo quando un'app dell'agente:

  • è in pausa o la sua pubblicazione è stata annullata,
  • non è consentita sugli schermi,
  • ha destinatari che non includono la struttura,
  • si trova in una struttura senza il modulo Custom Apps, oppure
  • non è raggiungibile perché l'agente è offline.

Se la pubblicazione di un'app viene annullata definitivamente, rimuovila dalle tue playlist e pianificazioni.

App Web su Dispositivo

Un'On-Device Web App è un pacchetto statico di HTML, CSS e JavaScript. Gli schermi la scaricano e la riproducono dalla propria memoria, quindi continua a essere riprodotta anche se la connessione internet si interrompe. È adatta ai contenuti che non devono reagire a ciò che accade nella tua sede, ad esempio:

  • Qualsiasi attività con una reception: un cartello di benvenuto con il tuo logo, la data e l'ora e un ticker di notizie. Possono usarlo uffici, cliniche, palestre, hotel, scuole e showroom. Vedi Esempio: un cartello di benvenuto per la reception.
  • Ristorazione e ospitalità: un menu board che passa dalla colazione al pranzo alla cena a orari stabiliti.
  • Retail: una promozione in vetrina che alterna le offerte speciali della settimana.
  • Istruzione: una bacheca del campus con gli eventi e i promemoria della giornata.

Il Reception Welcome Sign su uno schermo orizzontale: il logo di Acme Demo Co., l'ora e la data, "Good morning", "Welcome", "Please check in at the front desk" e un ticker In the news nella parte inferioreIl Reception Welcome Sign su uno schermo orizzontale: il logo di Acme Demo Co., l'ora e la data, "Good morning", "Welcome", "Please check in at the front desk" e un ticker In the news nella parte inferiore

Figura 15: il Reception Welcome Sign, un'On-Device Web App, su uno schermo orizzontale. L'orologio, la data e il saluto usano il fuso orario della struttura. Il badge Preview compare solo nelle anteprime, non sugli schermi reali. Acme Demo Co. è fittizia e i titoli in questo screenshot sono esempi.

Il Reception Welcome Sign su uno schermo verticaleIl Reception Welcome Sign su uno schermo verticale

Figura 16: la stessa app su uno schermo verticale

Esempio: un cartello di benvenuto per la reception

Il Reception Welcome Sign accoglie le persone alla tua reception con il tuo logo, la data e l'ora e un ticker di notizie. È adatto a qualsiasi attività con una reception o un ingresso.

  • Viene riprodotto dallo schermo: il logo, lo sfondo, il font, l'orologio, la data e il saluto fanno tutti parte dell'app, quindi continuano a funzionare senza internet. L'orologio segue il fuso orario della struttura.
  • Una parte usa internet: il ticker di notizie. Per impostazione predefinita mostra i titoli della sezione "In the news" di Wikipedia, citata sullo schermo. In alternativa può leggere qualsiasi feed RSS che consenta richieste cross-site, ad esempio un feed di notizie tramite un tuo relay.
  • Gestisce l'assenza di connessione: il ticker si nasconde quando lo schermo è offline o quando i titoli non si caricano, e ricompare quando lo schermo torna online. Tutto il resto viene riprodotto dalla copia memorizzata sullo schermo.
  • Personalizzalo: scarica il cartello da For developers qui sotto, sostituisci logo.svg e background.jpg e modifica il testo di benvenuto e le impostazioni delle notizie in config.js, oppure disattiva il ticker. Poi caricalo: Library → Add content → On-Device Web App → Choose ZIP → Publish app.

Il Reception Welcome Sign senza ticker di notizie, perché i titoli non possono essere caricatiIl Reception Welcome Sign senza ticker di notizie, perché i titoli non possono essere caricati

Figura 17: quando i titoli non si caricano, o lo schermo è offline, il cartello nasconde il ticker e continua a mostrare tutto il resto. Il ticker ricompare non appena i titoli si caricano di nuovo.

Per gli sviluppatori: come è realizzato il cartello

Scarica il Reception Welcome Sign (ZIP, 134 KB)

FileCosa fa
index.htmlLa pagina. Carica il Display App SDK, config.js e app.js.
config.jsTesto di benvenuto, saluto, fuso orario di riserva e impostazioni delle notizie
app.jsOrologio, data e saluto nel fuso orario della struttura, e il ticker di notizie
style.cssLayout per schermi orizzontali e verticali
logo.svg, background.jpg, source-sans-3.woff2Logo, sfondo e font, memorizzati nell'app
README.txt, OFL.txtCome personalizzare il cartello e la licenza del font

L'app legge il fuso orario e le impostazioni locali della struttura da PHDisplay.onInit(ctx). Se l'SDK non si carica, ad esempio quando lo schermo si avvia offline, usa timeZone in config.js o il fuso orario dello schermo stesso.

Il ticker è l'unica parte che recupera dati in tempo reale. Il Display App SDK facoltativo viene caricato dall'host delle app del Performance Hub. Mentre lo schermo è offline, il ticker non effettua richieste e resta nascosto, e l'evento online del browser carica di nuovo i titoli:

function loadNews() {
  clearTimeout(nextTimer);
  if (navigator.onLine === false) {
    hideTicker();
    return; // the 'online' event loads it again
  }
  if (loading) return;
  loading = true;
  var load = news.source === 'rss' ? rssHeadlines : wikipediaHeadlines;
  load()
    .then(function (headlines) {
      failures = 0;
      showTicker(headlines.slice(0, news.maxHeadlines || 8));
      schedule(news.refreshMinutes || 15);
    })
    .catch(function () {
      hideTicker();
      // ... schedules the next try
    })
    .then(function () { loading = false; });
}

window.addEventListener('offline', function () { clearTimeout(nextTimer); hideTicker(); });
window.addEventListener('online', function () { failures = 0; loadNews(); });

Per usare un'altra fonte di notizie, imposta source: 'rss' e rssUrl in config.js su un feed che consenta richieste cross-site (che invii un'intestazione Access-Control-Allow-Origin), ad esempio un feed di notizie tramite un tuo relay. Verifica che le condizioni del feed consentano di mostrarlo sui tuoi schermi. Per disattivare il ticker, imposta enabled: false in news.

Ci sono due modi per aggiungerne una:

  • Chiedi a un agente AI di crearla e pubblicarla.
  • Aggiungila tu stesso: Library → Add content → On-Device Web App, quindi carica uno ZIP, una cartella o dei file. Vedi Aggiungere contenuti.

Una conversazione con l'Agente AI a sinistra, in cui l'agente comunica di aver aggiunto il Reception Welcome Board alla Library di Display Screens come On-Device Web App, con l'app aperta a destraUna conversazione con l'Agente AI a sinistra, in cui l'agente comunica di aver aggiunto il Reception Welcome Board alla Library di Display Screens come On-Device Web App, con l'app aperta a destra

Figura 18: chiedi una schermata al tuo Agente AI. L'agente crea l'app, la apre accanto alla chat in modo che tu possa verificarla e la aggiunge alla tua Library di Display Screens come On-Device Web App, pronta da mostrare su uno schermo. La conversazione è un esempio.

Per pubblicare un'On-Device Web App, l'agente:

  1. Legge le linee guida per le app di Display Screens, in modo che l'app si adatti a uno schermo e rispetti le regole riportate di seguito.
  2. Pubblica l'app nella tua Library. Nello stesso passaggio può pubblicarla su schermi o gruppi, pianificarla o prendere il controllo degli schermi.
  3. Verifica il proprio lavoro con uno screenshot dell'app visualizzata.
  4. Ripristina una versione precedente se lo chiedi.

Qualsiasi agente AI connesso tramite MCP può farlo se il suo accesso include la funzionalità Display Screens, compreso il tuo Agente AI. Vedi gli strumenti MCP di Display Screens e Creare una chiave MCP. Il tuo agente ti chiede conferma prima di agire su più schermi contemporaneamente.

La Library filtrata per On-Device Web AppsLa Library filtrata per On-Device Web Apps

Figura 19: filtra la Library per On-Device Web Apps per vedere tutte le app della struttura. Le miniature delle app che non fanno parte di questo esempio sono sfocate.

Metterla sugli schermi

Per mettere tu stesso un'app sugli schermi, aprila nella Library e fai clic su Pubblica. In Show on screens, scegli tutti gli schermi della struttura o singoli schermi, quindi scegli When: Always (default), Scheduled o Take over now. Vedi Pubblicare contenuti.

La finestra di dialogo Show on screens per il Reception Welcome Sign, con lo schermo Reception Lobby selezionatoLa finestra di dialogo Show on screens per il Reception Welcome Sign, con lo schermo Reception Lobby selezionato

Figura 20: mostra il Reception Welcome Sign sullo schermo Reception Lobby

Versioni

Ogni pubblicazione crea una nuova versione che non cambia mai. Apri l'app nella Library per vederne le Versions: quella corrente è contrassegnata come Live e Make live su qualsiasi versione precedente ripristina quella versione. In Publish a new version, rilascia uno ZIP, una cartella o dei file per caricare tu stesso una nuova versione.

Quando viene pubblicata una nuova versione, il Performance Hub mostra "New version published. Screens update within a few seconds." Dopo Make live, conferma quale versione è live, ad esempio "Version 4 is now live". La modifica raggiunge tutti gli schermi che mostrano l'app.

L'On-Device Web App Reception Welcome Board nella Library, con la sua anteprima e le versioni da v1 a v4, con v4 contrassegnata come LiveL'On-Device Web App Reception Welcome Board nella Library, con la sua anteprima e le versioni da v1 a v4, con v4 contrassegnata come Live

Figura 21: il Reception Welcome Board nella Library: la sua anteprima, Preview landscape e Preview portrait e quattro versioni, con v4 live e Make live su quelle precedenti

Usa Preview landscape e Preview portrait per aprire l'app alle dimensioni dello schermo e verificare che si adatti prima di pubblicarla sugli schermi.

Come viene eseguita

  • Offline: gli schermi conservano una copia dell'app, quindi continua a essere riprodotta senza internet. Tutto ciò che l'app carica da internet non sarà disponibile mentre uno schermo è offline.
  • Dati in tempo reale: solo da API HTTPS pubbliche che consentono richieste cross-origin.
  • Isolata: l'app viene eseguita in una sandbox, separata dal Performance Hub, senza accesso alla tua sessione del Performance Hub.

Limiti

LimiteValore
Dimensione totale10 MB
Numero di file200
Dimensione di un singolo file5 MB
Lunghezza del percorso del file200 caratteri
Tipi di filehtml, htm, css, js, mjs, json, svg, png, jpg, jpeg, webp, gif, woff, woff2, txt, map
Tempo sullo schermo in una playlistDa 5 a 3.600 secondi

Linee guida di progettazione

  • Riempi lo schermo senza scorrimento: 1920 × 1080 per gli schermi orizzontali, 1080 × 1920 per gli schermi verticali.
  • Testo grande: testo del corpo di almeno 32 px, titoli di almeno 64 px.
  • Contrasto elevato, in modo che lo schermo sia ben leggibile da un capo all'altro della stanza.
  • Niente accessi, moduli o effetti al passaggio del mouse. Nessuno interagisce con uno schermo.
  • Leggera per il processore, in modo che venga eseguita senza problemi sul player.
  • Gestisce l'assenza di connessione, ad esempio quando un'API pubblica che usa non è raggiungibile.
  • Usa il fuso orario della struttura per orologi e orari.

Queste linee guida sono adatte anche agli Smart Displays.

Per gli sviluppatori: il Display App SDK

Le app possono usare facoltativamente il Display App SDK per ottenere informazioni sullo schermo su cui vengono eseguite e per segnalare il proprio stato.

ChiamataCosa fornisce
PHDisplay.onInit(ctx)Viene eseguita all'avvio dell'app. ctx include lo screen (id, name, orientation, width, height), la facility (id, name, timezone), il locale, il brand (name, logoUrl, primaryColor), l'item (id, durationSec) e se si tratta di una preview
onVisible, onHiddenVengono eseguite quando l'app viene mostrata o nascosta sullo schermo
ready(), done(), error()Segnalano lo stato dell'app allo schermo

durationSec è il tempo sullo schermo dell'elemento, da 5 a 3.600 secondi.