Smart Displays en gepubliceerde apps

Op deze pagina

Een Smart Display is een scherm dat een app toont die je AI-agent host. Omdat de agent de app uitvoert, kan deze aanpassen wat het scherm toont wanneer er iets verandert in de omgeving: een lunchdrukte aan de balie, een bezoeker die de voordeur opent, een hotellobby die volloopt, een drukke wachtkamer, leden die binnenkomen voor een bezoekchallenge. Beschrijf in gewone taal wat je wilt. De agent bouwt de app en houdt deze actueel, en jij zet de app op je schermen zoals alle andere content.

Een ranglijst van een sportschool voor een bezoekchallenge in oktober op een liggend scherm, met leden gerangschikt op aantal bezoeken en een paneel Just arrived dat toont waar drie leden die net hebben ingecheckt staanEen ranglijst van een sportschool voor een bezoekchallenge in oktober op een liggend scherm, met leden gerangschikt op aantal bezoeken en een paneel Just arrived dat toont waar drie leden die net hebben ingecheckt staan

Afbeelding 1: Een Smart Display op een sportschoolvloer. De agent telt de check-ins om de paar minuten opnieuw en laat leden die net zijn binnengekomen zien waar ze staan. De club en leden zijn fictief.

Jij houdt de controle: elke app staat in je Library, waar je een voorbeeld kunt bekijken, kunt zien waar de app wordt gebruikt en deze kunt wijzigen of verwijderen.

Slimme displays

Een Smart Display gebruikt een Agent: Published App: een webapp die je AI-agent heeft gebouwd en die live draait op het AI-agentapparaat van je faciliteit. Schermen tonen de live app, dus wanneer de agent wijzigt wat de app toont, verandert het scherm mee. Niemand hoeft iets opnieuw te publiceren.

De agent houdt de app op een van twee manieren actueel:

  • Volgens een planning. Een automatisering draait om de paar minuten tijdens de uren die ertoe doen. Via de verbinding met de Performance Hub leest de agent wat nodig is, zoals check-ins, deurgebeurtenissen of cameratellingen, en werkt de app bij. Elke run kost AI-budget, dus controleer niet vaker dan nodig.
  • Wanneer er iets gebeurt. Een gebeurtenis op je locatie, zoals de pas van een bezoeker die de voordeur opent, zet de agent aan om de app bij te werken. Het scherm verandert kort na de gebeurtenis en de agent doet tussendoor niets. Zie het welkomstbord in de kantoorlobby.

Een Smart Display kan alleen gebruiken wat de agent kan lezen. De MCP-toegang moet de faciliteit omvatten en de mogelijkheden die de app nodig heeft, zoals Door & Gate Access voor deurgebeurtenissen of Camerabewaking voor check-ins en cameratellingen. Zie Verbinding maken met de Performance Hub.

Twee manieren waarop een app je schermen bereikt

Agent: Published App (Smart Display)On-Device Web App
Wie bouwt de appJe AI-agentJij, een ontwikkelaar of een AI-agent die via MCP is verbonden
Waar de app draaitOp je AI-agentapparaat, live getoond op schermenOp elk scherm (schermen downloaden de app)
Past zich voortdurend aanJa: de agent wijzigt de app wanneer er iets verandert op je locatieNee: de app speelt dezelfde bestanden af totdat er een nieuwe versie wordt gepubliceerd
Gegevens van je faciliteitJa, alles wat de agent kan lezenNee: alleen openbare gegevens, zoals het weer
Als internet of de agent wegvaltOvergeslagen totdat de agent terug isBlijft spelen
Versies en terugdraaienBeheerd door de agentJa, in de Library
Benodigde modulesDisplay Screens, AI-agent en Custom AppsDisplay Screens

Je agent kan ook een On-Device Web App voor je bouwen, maar zodra deze is gepubliceerd, kan de app zich niet meer aanpassen. Deze speelt dezelfde bestanden af op elk scherm totdat iemand een nieuwe versie publiceert, en kan de gegevens van je faciliteit niet gebruiken. Alleen een Agent: Published App blijft meeveranderen met wat er rond het scherm gebeurt.

Kies een Smart Display wanneer het scherm moet reageren op je locatie: wie er is binnengekomen, hoe druk het is of wat er net is gebeurd. Kies een On-Device Web App voor content die hetzelfde blijft of alleen openbare gegevens nodig heeft, en die offline moet blijven spelen.

Voorbeelden van Smart Displays

Elk voorbeeld hieronder is een echte opstelling: waarop het scherm reageert, wat het toont, hoe de agent het actueel houdt en wat je nodig hebt. De bedrijven en mensen zijn fictief.

Ranglijst voor een bezoekchallenge die leden begroet wanneer ze binnenkomen

Een coworkingruimte, een campusbibliotheek of een sportschool organiseert een bezoekchallenge voor de maand. De agent host een ranglijst voor de schermen waar leden langslopen, die leden rangschikt op aantal bezoeken deze maand en deelnemers aan de challenge verwelkomt wanneer ze bij het scherm zijn. In de afbeeldingen houdt een sportschool een bezoekchallenge in oktober op de schermen op de sportschoolvloer.

  • Reageert op: wie er bij het scherm is. De agent weet dit via de gezichtsherkenning van de Performance Hub, recente check-ins of beide, afhankelijk van hoe je locatie dit heeft ingesteld. Elke deelnemer aan de challenge bij het scherm krijgt een label Just in en een kaart die toont waar hij of zij staat. In de afbeeldingen gebruikt de sportschool check-ins van de afgelopen 30 minuten.
  • Toont: de leden met de meeste bezoeken, alleen voornaam en eerste letter van de achternaam, de resterende dagen van de challenge en de prijs.
  • Blijft actueel: tijdens de openingstijden telt de agent elke 5 minuten de check-ins van deze maand opnieuw met insights_checkins, controleert wie er bij het scherm is en werkt de app bij.
  • Wat je nodig hebt: Camerabewaking met AI Insights & People, met gezichtsherkenning op de camera's bij het scherm, check-ins uit je ledenbeheersysteem, of beide, en een opt-inlijst van de leden die meedoen aan de challenge.

Een gesprek met de AI-agent waarin wordt gevraagd om een ranglijst voor een bezoekchallenge op basis van check-ins, met leden die net hebben ingecheckt gemarkeerd, en de app October Visit Challenge ernaast geopendEen gesprek met de AI-agent waarin wordt gevraagd om een ranglijst voor een bezoekchallenge op basis van check-ins, met leden die net hebben ingecheckt gemarkeerd, en de app October Visit Challenge ernaast geopend

Afbeelding 2: Vraag je AI-agent om de ranglijst. De agent bouwt de app, opent deze naast de chat en telt de check-ins elke 5 minuten opnieuw. Het gesprek is een voorbeeld.

De ranglijst voor de bezoekchallenge in oktober, gestapeld voor een staand schermDe ranglijst voor de bezoekchallenge in oktober, gestapeld voor een staand scherm

Afbeelding 3: Dezelfde ranglijst op een staand scherm

Privacy. Neem alleen leden op die zich hebben aangemeld, toon niet meer dan een voornaam en de eerste letter van de achternaam, en toon nooit lidmaatschaps- of gezondheidsgegevens.

Menubord in een fastfoodrestaurant dat reageert op de lunchdrukte

Een fastfoodrestaurant vraagt de agent om het menubord boven de balie. Het bord wisselt in de loop van de dag van menu en zet de items die het snelst klaar zijn bovenaan wanneer het druk is aan de balie.

  • Reageert op: het tijdstip en hoe druk het is aan de balie: het aantal mensen dat de baliecamera dit uur tot nu toe heeft geteld, vergeleken met een normaal uur.
  • Toont: ontbijt tot 11.00 uur, lunch tot 15.00 uur en daarna het middagmenu. Wanneer het druk is, een banner Ready in under 3 minutes met de snel te bereiden items, en een label Quick bij die items in het menu.
  • Blijft actueel: elke 5 minuten controleert de agent de cameratellingen van vandaag in AI Insights & People en werkt de app bij. Prijzen en bereidingstijden komen uit een menubestand dat je aan de agent geeft.
  • Wat je nodig hebt: Camerabewaking met AI Insights & People, met een camera die de balie in beeld heeft.

Een gesprek met de AI-agent waarin wordt gevraagd om een menubord voor de balie dat met het tijdstip verandert en snel te bereiden items promoot wanneer het druk is, met het Counter Menu Board ernaast geopendEen gesprek met de AI-agent waarin wordt gevraagd om een menubord voor de balie dat met het tijdstip verandert en snel te bereiden items promoot wanneer het druk is, met het Counter Menu Board ernaast geopend

Afbeelding 4: De agent bouwt het menubord en opent het naast de chat. Het gebruikt alleen anonieme tellingen. Het gesprek is een voorbeeld.

Het lunchmenubord op een liggend scherm, met een banner Busy right now die drie items toont die binnen 3 minuten klaar zijn, boven de menu's voor burgers, bowls en bijgerechtenHet lunchmenubord op een liggend scherm, met een banner Busy right now die drie items toont die binnen 3 minuten klaar zijn, boven de menu's voor burgers, bowls en bijgerechten

Afbeelding 5: Het resultaat boven de balie tijdens de lunchdrukte

Welkomstbord in de kantoorlobby voor elke bezoeker

Een kantoor geeft elke bezoeker een Door & Gate Access-pas voor de duur van het bezoek. Wanneer de pas van een bezoeker de voordeur opent, begroet het lobbyscherm de bezoeker bij de voornaam, met de gastheer of gastvrouw, de vergaderruimte en de routebeschrijving, en gaat het na een minuut terug naar het gewone welkomstbericht.

  • Reageert op: de pas van de bezoeker die de voordeur opent.
  • Toont: "Hi Priya, great to see you", de naam en het team van de gastheer of gastvrouw, de vergaderruimte en het tijdstip, en een stapsgewijze routebeschrijving.
  • Blijft actueel: een workflow start de begroeting wanneer de pas van de bezoeker de voordeur opent. De agent koppelt de persoon uit de deurgebeurtenis aan de bezoekerslijst van vandaag, die de receptie bijhoudt en aan de agent geeft met de gastheer of gastvrouw, ruimte en routebeschrijving van elke bezoeker. Deurgebeurtenissen bevatten geen namen, gastheren of ruimten, dus de lijst is altijd nodig.
  • Wat je nodig hebt: Door & Gate Access en een bezoekerslijst voor de dag.

Een gesprek met de AI-agent waarin wordt gevraagd om een welkomstscherm voor de lobby dat elke bezoeker begroet wanneer diens toegang de voordeur opent, met de app Lobby Visitor Welcome ernaast geopendEen gesprek met de AI-agent waarin wordt gevraagd om een welkomstscherm voor de lobby dat elke bezoeker begroet wanneer diens toegang de voordeur opent, met de app Lobby Visitor Welcome ernaast geopend

Afbeelding 6: De agent bouwt het welkomstscherm en opent het naast de chat. Het gesprek is een voorbeeld.

Het welkomstbord voor de lobby op een staand scherm, dat een bezoeker bij de voornaam begroet met de gastheer of gastvrouw, de vergaderruimte en de routebeschrijvingHet welkomstbord voor de lobby op een staand scherm, dat een bezoeker bij de voornaam begroet met de gastheer of gastvrouw, de vergaderruimte en de routebeschrijving

Afbeelding 7: Het resultaat op het staande scherm in de lobby

Met dezelfde opstelling kun je ook je eigen team verwelkomen. Zo kan het scherm een teamlid een fijne verjaardag wensen wanneer die op zijn of haar verjaardag binnenkomt, op basis van een verjaardagslijst van mensen die daarmee hebben ingestemd. Een geboortedatum is een persoonsgegeven: neem alleen mensen op die hebben ingestemd en toon niet meer dan een voornaam.

Denk na over wie het scherm kan zien. Iedereen in de lobby kan een welkomstbericht zien. Toon niet meer dan een voornaam en toon nooit privégegevens zoals gezondheids-, lidmaatschaps- of HR-gegevens.

Wachtkamerbord met actuele wachttijden

Een kliniek of servicecentrum toont hoe lang de wachttijd op dit moment is, zodat wachtenden weten wat ze kunnen verwachten.

  • Reageert op: ongeveer hoeveel mensen er wachten, op basis van de anonieme tellingen van de camera die de wachtruimte in beeld heeft, en aankomsten uit check-ins waar je locatie die registreert.
  • Toont: een geschatte wachttijd en ongeveer hoeveel mensen er wachten, de openingstijden en een geruststellend bericht wanneer het druk is.
  • Blijft actueel: om de paar minuten leest de agent de nieuwste tellingen en aankomsten en berekent de wachttijd op basis van de gemiddelde tijd per bezoek die je opgeeft.
  • Wat je nodig hebt: Camerabewaking met AI Insights & People, met een camera die de wachtruimte in beeld heeft.

Een voorbeeld van wat het scherm toont wanneer het druk is:

Ongeveer 25 minuten

Ongeveer 7 mensen wachten

Het is vanochtend drukker dan normaal. Bedankt voor je geduld: we roepen je zodra we klaar voor je zijn.

Toon nooit gegevens van patiënten of klanten. Het bord toont alleen totalen, nooit namen of redenen voor een bezoek.

Lobbybord in een hotel dat de dag volgt

Een hotel of evenementenlocatie laat gasten zien wat er te doen is, afhankelijk van het tijdstip en hoe druk het is in de lobby.

  • Reageert op: het tijdstip en hoe druk het is in de lobby, op basis van de anonieme tellingen van de lobbycamera.
  • Toont: 's middags informatie over inchecken en de wifigegevens, 's avonds de evenementen van vanavond en de beschikbaarheid in het restaurant, en 's ochtends de ontbijttijden en herinneringen voor het uitchecken. Wanneer het druk is in de lobby, komen de incheck- en wifigegevens eerst, zodat aankomende gasten ze snel vinden.
  • Blijft actueel: om de paar minuten leest de agent de lobbytellingen en werkt de app bij. Evenementen en beschikbaarheid in het restaurant komen uit lijsten of systemen waartoe je de agent toegang geeft.
  • Wat je nodig hebt: Camerabewaking met AI Insights & People voor de lobbytellingen. Zonder Camerabewaking verandert het bord nog steeds met het tijdstip.

Een voorbeeld van wat het scherm om 18.00 uur toont:

Vanavond in Demo Harbour Hotel

Jazz in de lounge, 19.00 tot 22.00 uur

Harbour Grill: tafels vrij vanaf 20.30 uur. Reserveer bij de receptie.

Ontbijt morgen vanaf 6.30 uur in Harbour Grill.

Signage in een winkelcentrum die het publiek volgt

Een winkelcentrum vraagt de agent om signage in het atrium die de promotie kiest op basis van de leeftijds- en geslachtsverdeling van winkelend publiek bij de borden.

  • Reageert op: de leeftijds- en geslachtsverdeling van winkelend publiek bij de borden in de afgelopen 5 minuten, als anonieme, geaggregeerde tellingen: totalen per leeftijdsgroep (18-24, 25-34, 35-44, 45-54 en 55+) en per geslacht. Er wordt nooit een individu geïdentificeerd of gevolgd.
  • Toont: een promotie voor gezinnen, studenten of senioren, of een algemene promotie, met de klok en wat er vandaag te doen is, en niets over de mensen in de buurt.
  • Blijft actueel: elke 5 minuten leest de agent de demografische gegevens uit de computervisiegegevens van de faciliteit in AI Insights & People en vernieuwt de app wanneer de promotie moet veranderen.
  • Wat je nodig hebt: Camerabewaking met AI Insights & People bij de faciliteit.

Een gesprek met de AI-agent waarin wordt gevraagd om signage in het atrium die elke 5 minuten een promotie kiest op basis van de anonieme leeftijds- en geslachtsverdeling van winkelend publiek bij de borden, met de app Atrium Promotions ernaast geopendEen gesprek met de AI-agent waarin wordt gevraagd om signage in het atrium die elke 5 minuten een promotie kiest op basis van de anonieme leeftijds- en geslachtsverdeling van winkelend publiek bij de borden, met de app Atrium Promotions ernaast geopend

Afbeelding 8: De agent bouwt de app en opent deze naast de chat. De app gebruikt alleen anonieme tellingen, nooit individuele personen. Het gesprek is een voorbeeld.

Het scherm Atrium Promotions in een winkelcentrum, met een schoolvakantiepromotie voor gezinnen, de tijd en wat er vandaag te doen isHet scherm Atrium Promotions in een winkelcentrum, met een schoolvakantiepromotie voor gezinnen, de tijd en wat er vandaag te doen is

Afbeelding 9: Het resultaat op een liggend scherm. Het toont de promotie, nooit iets over de mensen in de buurt.

Het scherm Atrium Promotions, gestapeld voor een staand schermHet scherm Atrium Promotions, gestapeld voor een staand scherm

Afbeelding 10: Dezelfde app op een staand scherm

Privacy. Gebruik alleen geaggregeerde tellingen, volg de privacywetgeving die op jou van toepassing is en vertel winkelend publiek dat er camera's en publieksmeting worden gebruikt.

Veiligheidsinstructies tijdens een noodsituatie

Elke locatie kan de schermen tijdens een noodsituatie laten overschakelen op veiligheidsinstructies, en weer terug naar normaal zodra die voorbij is.

  • Reageert op: de trigger die je locatie kiest, bijvoorbeeld een lockdown of evacuatie die je locatie start, en het einde van die gebeurtenis.
  • Toont: de instructies die je voor die gebeurtenis hebt voorbereid, in plaats van al het andere op de schermen die je kiest. Wanneer de gebeurtenis voorbij is, gaan de schermen terug naar hun gewone content.
  • Blijft actueel: de schermen die je kiest, schakelen over op je instructies wanneer de gekozen trigger plaatsvindt, en schakelen terug wanneer de gebeurtenis voorbij is. Je agent kan je helpen de instructies te schrijven en dit in te stellen.
  • Wat je nodig hebt: Display Screens, en instructies die zijn afgestemd met degene die verantwoordelijk is voor de veiligheid op je locatie.

Bereid de instructies voor als afbeelding of On-Device Web App in plaats van als Agent: Published App, zodat ze ook worden getoond als de agent offline is. Spreek met degene die verantwoordelijk is voor de veiligheid op je locatie af wat de schermen tonen en welke schermen dat doen, en test het samen.

Houd stille alarmen weg van openbare schermen. Duress-alarmen zijn stil, dus ze mogen geen openbare schermen aansturen. Een takeover bij een Duress-alarm is alleen zinvol op schermen in besloten, niet-openbare ruimten, zoals een backoffice.

Agent: Gepubliceerde apps

Een Agent: Published App is een webapp die je AI-agent heeft gebouwd en die live draait op het AI-agentapparaat van je faciliteit. Omdat de app op de agent draait, kan deze een eigen serverkant hebben en zichzelf bijwerken. Schermen tonen de app live vanaf de agent.

Een app bouwen in een gesprek

Vraag je AI-agent om het scherm dat je wilt, inclusief waar het komt en waarop het moet reageren. De agent bouwt de app en opent deze naast de chat zodat je hem kunt controleren. Bijvoorbeeld:

  • "Bouw een ranglijst voor onze bezoekchallenge in oktober op basis van check-ins, en houd die tijdens de openingstijden om de paar minuten actueel."
  • "Maak een menubord voor de balie dat om 11.00 uur overschakelt van ontbijt naar lunch en snel te bereiden items promoot wanneer het druk is."
  • "Maak een welkomstscherm voor de lobby dat elke bezoeker begroet wanneer diens pas de voordeur opent."

Een workoutscherm op de sportschoolvloer

Een sportschool vraagt de agent om een staand workoutscherm voor de sportschoolvloer. Het toont twee stations onder elkaar: een ski-erg-benchmark en sit-ups, elk met het doel en een korte, herhalende demonstratieclip. Daartussen staat een grote rondetimer, met de doelintensiteit in het midden.

Een gesprek met de AI-agent waarin wordt gevraagd om een staand workoutscherm met twee stations en een rondetimer, met het Workout Station Board ernaast geopendEen gesprek met de AI-agent waarin wordt gevraagd om een staand workoutscherm met twee stations en een rondetimer, met het Workout Station Board ernaast geopend

Afbeelding 11: Vraag je AI-agent om een workoutscherm. De agent bouwt de app en opent deze naast de chat. Het gesprek is een voorbeeld.

Een staand workoutscherm met twee oefenstations, demonstratievideo's en een grote rondetimerEen staand workoutscherm met twee oefenstations, demonstratievideo's en een grote rondetimer

Afbeelding 12: Het resultaat op een staand scherm op de sportschoolvloer

Een app publiceren vanuit je AI-agent

Kies in AI-agent → Published apps voor Publish to Performance Hub en vul het volgende in:

InstellingWat het doet
NameMaximaal 60 tekens
Icon en DescriptionHoe de app wordt vermeld. De beschrijving mag maximaal 300 tekens lang zijn.
Support emailWie je over de app kunt benaderen
Health checks & auto-repairStandaard ingeschakeld. De agent herstart of herstelt de app als deze niet meer werkt.
Allow on display screensStandaard uitgeschakeld. Schakel dit in om de app op schermen te laten tonen. De instelling waarschuwt: "Anyone near those screens can see it, so only allow apps without private information."
AudienceWie de app kan gebruiken: Only me (testing), Specific people, This facility (de standaardinstelling), Selected facilities, Whole brand of Entire organisation. Het publiek kan nooit breder zijn dan je eigen toegang, en voor een merk of de organisatie als publiek is toegang op organisatieniveau nodig.

Op hetzelfde tabblad kun je Pause en Resume, Edit, Unpublish, Transfer ownership en Show on screens gebruiken.

De app op schermen tonen

  1. Open in Display Screens de Library en klik op Add content → Agent: Published App.
  2. Kies de app. Elke geschikte app wordt vermeld met een afbeelding ervan, en met een label Offline als de agent offline is.
  3. Geef de app een Name, en eventueel Tags en Show for (seconds), en klik daarna op Add to library.
  4. Publiceer de app naar schermen, of voeg deze toe aan een playlist.

Het dialoogvenster Add an Agent: Published App met de ranglijst October Visit Challenge geselecteerdHet dialoogvenster Add an Agent: Published App met de ranglijst October Visit Challenge geselecteerd

Afbeelding 13: Een Agent: Published App toevoegen aan de Library. Kies de app, geef deze een naam en klik op Add to library. Afbeeldingen van apps die geen deel uitmaken van dit voorbeeld zijn vervaagd.

De ranglijst October Visit Challenge in de Library, met het livevoorbeeld, Preview landscape, Preview portrait, tags, Show for 30 seconds en waar de app wordt gebruiktDe ranglijst October Visit Challenge in de Library, met het livevoorbeeld, Preview landscape, Preview portrait, tags, Show for 30 seconds en waar de app wordt gebruikt

Afbeelding 14: Een Agent: Published App in de Library. Het voorbeeld is een afbeelding van de live app, gemaakt door de Performance Hub. Where it is used toont de schermen en planningen waarop de app wordt getoond. De club en leden zijn fictief.

Voorbeelden, zoals Preview landscape, Preview portrait en het playlistvoorbeeld, kunnen de live app niet tonen en tonen daarom de tijdelijke tekst "Shown live on the screen".

Vereisten

  • De module AI-agent, om de app te publiceren.
  • De module Custom Apps (AI Agent: Published Apps) bij de faciliteit, om de app op schermen te tonen.
  • De app moet actief zijn, Allow on display screens moet zijn ingeschakeld en het publiek moet de faciliteit omvatten.

Wanneer schermen een agentapp overslaan

Schermen gaan door naar hun volgende item zolang een agentapp:

  • is gepauzeerd of de publicatie ervan is ingetrokken,
  • niet is toegestaan op displayschermen,
  • een publiek heeft dat de faciliteit niet omvat,
  • zich bij een faciliteit zonder de module Custom Apps bevindt, of
  • niet bereikbaar is omdat de agent offline is.

Als de publicatie van een app definitief is ingetrokken, verwijder de app dan uit je playlists en planningen.

Web-apps op het apparaat

Een On-Device Web App is een statische bundel HTML, CSS en JavaScript. Schermen downloaden de app en spelen deze af vanuit hun eigen opslag, zodat de app blijft spelen als het internet wegvalt. Dit is geschikt voor content die niet hoeft te reageren op je locatie, bijvoorbeeld:

  • Elk bedrijf met een receptie: een welkomstbord voor de receptie met je logo, de datum en tijd, en een nieuwsticker. Kantoren, klinieken, sportscholen, hotels, scholen en showrooms kunnen het allemaal gebruiken. Zie Voorbeeld: een welkomstbord voor de receptie.
  • Horeca: een menubord dat op vaste tijden wisselt van ontbijt naar lunch naar diner.
  • Retail: een etalagepromotie die de aanbiedingen van deze week afwisselt.
  • Onderwijs: een prikbord voor de campus met de evenementen en herinneringen van vandaag.

Het Reception Welcome Sign op een liggend scherm: het logo van Acme Demo Co., de tijd en datum, "Good morning", "Welcome", "Please check in at the front desk" en een ticker In the news onderaanHet Reception Welcome Sign op een liggend scherm: het logo van Acme Demo Co., de tijd en datum, "Good morning", "Welcome", "Please check in at the front desk" en een ticker In the news onderaan

Afbeelding 15: Het Reception Welcome Sign, een On-Device Web App, op een liggend scherm. De klok, datum en begroeting gebruiken de tijdzone van de faciliteit. Het label Preview verschijnt alleen in voorbeelden, niet op echte schermen. Acme Demo Co. is fictief en de koppen in deze schermafbeelding zijn voorbeelden.

Het Reception Welcome Sign op een staand schermHet Reception Welcome Sign op een staand scherm

Afbeelding 16: Dezelfde app op een staand scherm

Voorbeeld: een welkomstbord voor de receptie

Het Reception Welcome Sign begroet mensen bij je receptie met je logo, de datum en tijd, en een nieuwsticker. Het is geschikt voor elk bedrijf met een receptie of ingang.

  • Speelt af vanaf het scherm: het logo, de achtergrond, het lettertype, de klok, de datum en de begroeting maken allemaal deel uit van de app, zodat ze zonder internet blijven werken. De klok volgt de tijdzone van de faciliteit.
  • Eén onderdeel gebruikt internet: de nieuwsticker. Standaard toont deze koppen uit "In the news" van Wikipedia, met bronvermelding op het scherm. In plaats daarvan kan de ticker elke RSS-feed lezen die cross-site-verzoeken toestaat, bijvoorbeeld een nieuwsfeed via je eigen relay.
  • Kan offline gaan: de ticker wordt verborgen wanneer het scherm offline is of wanneer de koppen niet kunnen worden geladen, en komt terug wanneer het scherm weer online is. Al het andere speelt af vanuit de eigen kopie van het scherm.
  • Maak het je eigen: download het bord via Voor ontwikkelaars hieronder, vervang logo.svg en background.jpg, en wijzig de welkomsttekst en nieuwsinstellingen in config.js, of schakel de ticker uit. Upload het daarna: Library → Add content → On-Device Web App → Choose ZIP → Publish app.

Het Reception Welcome Sign zonder nieuwsticker, omdat de koppen niet kunnen worden geladenHet Reception Welcome Sign zonder nieuwsticker, omdat de koppen niet kunnen worden geladen

Afbeelding 17: Wanneer de koppen niet kunnen worden geladen of het scherm offline is, verbergt het bord de ticker en blijft het al het andere tonen. De ticker komt terug zodra de koppen weer worden geladen.

Voor ontwikkelaars: hoe het bord is gebouwd

Download het Reception Welcome Sign (ZIP, 134 KB)

BestandWat het doet
index.htmlDe pagina. Laadt de Display App SDK, config.js en app.js.
config.jsWelkomsttekst, begroeting, reservetijdzone en nieuwsinstellingen
app.jsKlok, datum en begroeting in de tijdzone van de faciliteit, en de nieuwsticker
style.cssIndeling voor liggende en staande schermen
logo.svg, background.jpg, source-sans-3.woff2Logo, achtergrond en lettertype, opgeslagen in de app
README.txt, OFL.txtHoe je het bord je eigen maakt, en de licentie van het lettertype

De app leest de tijdzone en landinstelling van de faciliteit uit PHDisplay.onInit(ctx). Als de SDK niet kan worden geladen, bijvoorbeeld wanneer het scherm offline opstart, gebruikt de app timeZone in config.js of de eigen tijdzone van het scherm.

De ticker is het enige onderdeel dat live gegevens ophaalt. De optionele Display App SDK wordt geladen vanaf de app-host van de Performance Hub. Zolang het scherm offline is, doet de ticker geen verzoek en blijft deze verborgen, en de online-gebeurtenis van de browser laadt de koppen opnieuw:

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(); });

Om een andere nieuwsbron te gebruiken, stel je in config.js source: 'rss' en rssUrl in op een feed die cross-site-verzoeken toestaat (de feed stuurt een Access-Control-Allow-Origin-header mee), bijvoorbeeld een nieuwsfeed via je eigen relay. Controleer of de voorwaarden van de feed toestaan dat je deze op je schermen toont. Stel enabled: false in onder news om de ticker uit te schakelen.

Er zijn twee manieren om er een toe te voegen:

  • Vraag een AI-agent om de app te bouwen en te publiceren.
  • Voeg de app zelf toe: Library → Add content → On-Device Web App, en upload daarna een ZIP, een map of bestanden. Zie Content toevoegen.

Een gesprek met de AI-agent aan de linkerkant, waarin de agent meldt dat het Reception Welcome Board als On-Device Web App aan de Library van Display Screens is toegevoegd, met de app rechts geopendEen gesprek met de AI-agent aan de linkerkant, waarin de agent meldt dat het Reception Welcome Board als On-Device Web App aan de Library van Display Screens is toegevoegd, met de app rechts geopend

Afbeelding 18: Vraag je AI-agent om een scherm. De agent bouwt de app, opent deze naast de chat zodat je hem kunt controleren, en voegt hem als On-Device Web App toe aan je Library van Display Screens, klaar om op een scherm te zetten. Het gesprek is een voorbeeld.

Om een On-Device Web App te publiceren, doet de agent het volgende:

  1. Leest de app-richtlijnen voor Display Screens, zodat de app op een scherm past en de onderstaande regels volgt.
  2. Publiceert de app naar je Library. In dezelfde stap kan de agent de app publiceren naar schermen of groepen, plannen of schermen overnemen.
  3. Controleert het werk met een schermafbeelding van de weergegeven app.
  4. Draait terug naar een eerdere versie als je daarom vraagt.

Elke AI-agent die via MCP is verbonden, kan dit doen als de toegang de mogelijkheid Display Screens omvat, waaronder je AI-agent. Zie de MCP-tools voor Display Screens en Een MCP-sleutel maken. Je agent vraagt je om bevestiging voordat hij op meerdere schermen tegelijk actie onderneemt.

De Library gefilterd op On-Device Web AppsDe Library gefilterd op On-Device Web Apps

Afbeelding 19: Filter de Library op On-Device Web Apps om elke app bij de faciliteit te zien. Miniaturen van apps die geen deel uitmaken van dit voorbeeld zijn vervaagd.

De app op schermen zetten

Om een app zelf op schermen te zetten, open je deze in de Library en klik je op Publiceren. Kies in Show on screens elk scherm bij de faciliteit of afzonderlijke schermen, en kies daarna bij When voor Always (default), Scheduled of Take over now. Zie Content publiceren.

Het dialoogvenster Show on screens voor het Reception Welcome Sign, met het scherm Reception Lobby aangevinktHet dialoogvenster Show on screens voor het Reception Welcome Sign, met het scherm Reception Lobby aangevinkt

Afbeelding 20: Het Reception Welcome Sign tonen op het scherm Reception Lobby

Versies

Elke publicatie maakt een nieuwe versie die nooit verandert. Open de app in de Library om de Versions te bekijken: de huidige versie is gemarkeerd met Live, en met Make live bij een eerdere versie draai je terug naar die versie. Zet onder Publish a new version een ZIP, een map of bestanden neer om zelf een nieuwe versie te uploaden.

Wanneer een nieuwe versie is gepubliceerd, toont de Performance Hub "New version published. Screens update within a few seconds." Na Make live bevestigt de Performance Hub welke versie live is, bijvoorbeeld "Version 4 is now live". De wijziging bereikt elk scherm dat de app toont.

De On-Device Web App Reception Welcome Board in de Library, met het voorbeeld en de versies v1 tot en met v4, waarbij v4 is gemarkeerd als LiveDe On-Device Web App Reception Welcome Board in de Library, met het voorbeeld en de versies v1 tot en met v4, waarbij v4 is gemarkeerd als Live

Afbeelding 21: Het Reception Welcome Board in de Library: het voorbeeld, Preview landscape en Preview portrait, en vier versies, met v4 live en Make live bij de eerdere versies

Gebruik Preview landscape en Preview portrait om de app op schermformaat te openen en te controleren of deze past voordat je hem naar schermen publiceert.

Hoe de app draait

  • Offline: schermen bewaren een kopie van de app, zodat deze zonder internet blijft spelen. Alles wat de app van internet laadt, is niet beschikbaar zolang een scherm offline is.
  • Live gegevens: alleen van openbare HTTPS-API's die cross-origin-verzoeken toestaan.
  • Geïsoleerd: de app draait in een sandbox, gescheiden van de Performance Hub, zonder toegang tot je Performance Hub-sessie.

Limieten

LimietWaarde
Totale grootte10 MB
Aantal bestanden200
Grootte van één bestand5 MB
Lengte van het bestandspad200 tekens
Bestandstypenhtml, htm, css, js, mjs, json, svg, png, jpg, jpeg, webp, gif, woff, woff2, txt, map
Weergavetijd in een playlist5 tot 3.600 seconden

Ontwerprichtlijnen

  • Vul het scherm zonder scrollen: 1920 × 1080 voor liggende schermen, 1080 × 1920 voor staande schermen.
  • Grote tekst: hoofdtekst minimaal 32 px, koppen minimaal 64 px.
  • Hoog contrast, zodat het scherm goed leesbaar is vanaf de andere kant van de ruimte.
  • Geen aanmeldingen, formulieren of hover-effecten. Niemand gebruikt een scherm interactief.
  • Licht voor de processor, zodat de app soepel draait op de player.
  • Kan offline gaan, bijvoorbeeld wanneer een openbare API die de app gebruikt niet bereikbaar is.
  • Gebruikt de tijdzone van de faciliteit voor klokken en tijden.

Deze richtlijnen zijn ook geschikt voor Smart Displays.

Voor ontwikkelaars: de Display App SDK

Apps kunnen optioneel de Display App SDK gebruiken om informatie te krijgen over het scherm waarop ze draaien en om hun status te melden.

AanroepWat het levert
PHDisplay.onInit(ctx)Wordt uitgevoerd wanneer de app start. ctx bevat het scherm (id, name, orientation, width, height), de faciliteit (id, name, timezone), de landinstelling, het merk (name, logoUrl, primaryColor), het item (id, durationSec) en of dit een voorbeeld is
onVisible, onHiddenWorden uitgevoerd wanneer de app op het scherm wordt getoond of verborgen
ready(), done(), error()Melden de status van de app aan het scherm

durationSec is de weergavetijd van het item op het scherm, van 5 tot 3.600 seconden.