Smart Displays et applications publiées

Sur cette page

Un Smart Display est un écran qui affiche une application hébergée par votre Agent IA. Comme c'est l'agent qui exécute l'application, il peut modifier ce qu'affiche l'écran à mesure que les choses évoluent autour de lui : le coup de feu du déjeuner au comptoir, un visiteur qui ouvre la porte d'entrée, le hall d'un hôtel qui se remplit, une salle d'attente bondée, des membres qui arrivent pour un défi de fréquentation. Décrivez ce que vous voulez en langage courant. L'agent crée l'application et la tient à jour, et vous la diffusez sur vos écrans comme n'importe quel autre contenu.

Le classement d'un défi de fréquentation d'octobre dans une salle de sport, sur un écran en mode paysage, avec les membres classés par nombre de visites et un panneau Just arrived indiquant le rang de trois membres qui viennent d'enregistrer leur arrivéeLe classement d'un défi de fréquentation d'octobre dans une salle de sport, sur un écran en mode paysage, avec les membres classés par nombre de visites et un panneau Just arrived indiquant le rang de trois membres qui viennent d'enregistrer leur arrivée

Figure 1 : Un Smart Display dans l'espace d'entraînement d'une salle de sport. L'agent recompte les enregistrements d'arrivée toutes les quelques minutes et indique leur rang aux membres qui viennent d'arriver. Le club et les membres sont fictifs.

Vous gardez le contrôle : chaque application se trouve dans votre Library, où vous pouvez la prévisualiser, voir où elle est utilisée, et la modifier ou la supprimer.

Écrans intelligents

Un Smart Display utilise une Agent: Published App : une application web créée par votre Agent IA, qui s'exécute en direct sur l'appareil Agent IA de votre installation. Les écrans affichent l'application en direct : lorsque l'agent modifie ce qu'elle affiche, l'écran change aussi. Personne n'a rien à republier.

L'agent tient l'application à jour de l'une des deux façons suivantes :

  • Selon un planning. Une automatisation s'exécute toutes les quelques minutes pendant les heures qui comptent. Grâce à sa connexion à Performance Hub, l'agent lit ce dont il a besoin, comme les enregistrements d'arrivée, les événements de porte ou les comptages des caméras, et met à jour l'application. Chaque exécution consomme des dépenses IA : ne vérifiez donc qu'aussi souvent que nécessaire.
  • Lorsqu'un événement se produit. Un événement sur votre site, comme le badge d'un visiteur qui ouvre la porte d'entrée, incite l'agent à mettre à jour l'application. L'écran change peu après l'événement, et l'agent ne fait rien entre-temps. Consultez l'accueil de chaque visiteur dans le hall d'un bureau.

Un Smart Display ne peut utiliser que ce que l'agent peut lire. Son accès MCP doit inclure l'installation et les fonctionnalités dont l'application a besoin, comme Door & Gate Access pour les événements de porte ou CCTV pour les enregistrements d'arrivée et les comptages des caméras. Consultez Connexion à Performance Hub.

Deux façons pour une application d'atteindre vos écrans

Agent: Published App (Smart Display)On-Device Web App
Qui la créeVotre Agent IAVous, un développeur ou tout agent IA connecté via MCP
Où elle s'exécuteSur votre appareil Agent IA, affichée en direct sur les écransSur chaque écran (les écrans la téléchargent)
S'adapte en continuOui : l'agent la modifie à mesure que les choses évoluent sur votre siteNon : elle diffuse les mêmes fichiers jusqu'à la publication d'une nouvelle version
Données de votre installationOui, tout ce que l'agent peut lireNon : uniquement des données publiques, comme la météo
En cas de coupure d'Internet ou de l'agentIgnorée jusqu'au retour de l'agentContinue d'être diffusée
Versions et retour arrièreGérés par l'agentOui, dans la Library
Modules nécessairesDisplay Screens, Agent IA et Custom AppsDisplay Screens

Votre agent peut aussi créer une On-Device Web App pour vous, mais une fois publiée, elle ne peut plus s'adapter. Elle diffuse les mêmes fichiers sur chaque écran jusqu'à ce que quelqu'un publie une nouvelle version, et elle ne peut pas utiliser les données de votre installation. Seule une Agent: Published App continue d'évoluer avec ce qui se passe autour de l'écran.

Choisissez un Smart Display lorsque l'écran doit réagir à votre site : qui est arrivé, le niveau d'affluence ou ce qui vient de se passer. Choisissez une On-Device Web App pour un contenu qui reste identique ou n'a besoin que de données publiques, et qui doit continuer d'être diffusé hors ligne.

Exemples de Smart Displays

Chaque exemple ci-dessous est une configuration réelle : ce à quoi l'écran réagit, ce qu'il affiche, comment l'agent le tient à jour et ce dont vous avez besoin. Les entreprises et les personnes sont fictives.

Classement d'un défi de fréquentation qui accueille les membres à leur arrivée

Un espace de coworking, une bibliothèque universitaire ou une salle de sport organise un défi de fréquentation pour le mois. Son agent héberge, pour les écrans devant lesquels passent les membres, un classement qui ordonne les membres selon leurs visites du mois et souhaite la bienvenue aux participants du défi lorsqu'ils sont près de l'écran. Dans les figures, une salle de sport organise un défi de fréquentation d'octobre sur les écrans de son espace d'entraînement.

  • Réagit à : qui se trouve près de l'écran. L'agent le sait grâce à la reconnaissance faciale de Performance Hub, aux enregistrements d'arrivée récents, ou aux deux, selon la configuration de votre site. Chaque participant au défi qui se trouve près de l'écran reçoit une étiquette Just in et une carte indiquant son rang. Dans les figures, la salle de sport utilise les enregistrements d'arrivée des 30 dernières minutes.
  • Affiche : les meilleurs membres par nombre de visites, avec uniquement le prénom et l'initiale du nom, les jours restants du défi et le prix à gagner.
  • Reste à jour : toutes les 5 minutes pendant les heures d'ouverture, l'agent recompte les enregistrements d'arrivée du mois avec insights_checkins, vérifie qui se trouve près de l'écran et met à jour l'application.
  • Ce qu'il vous faut : CCTV avec AI Insights & People, avec la reconnaissance faciale activée sur les caméras proches de l'écran, les enregistrements d'arrivée de votre système de gestion des membres, ou les deux, ainsi qu'une liste des membres qui ont accepté de participer au défi.

Une conversation avec l'Agent IA demandant un classement de défi de fréquentation à partir des enregistrements d'arrivée, avec mise en évidence des membres qui viennent d'arriver, et l'application October Visit Challenge ouverte à côtéUne conversation avec l'Agent IA demandant un classement de défi de fréquentation à partir des enregistrements d'arrivée, avec mise en évidence des membres qui viennent d'arriver, et l'application October Visit Challenge ouverte à côté

Figure 2 : Demandez le classement à votre Agent IA. Il crée l'application, l'ouvre à côté de la conversation et recompte les enregistrements d'arrivée toutes les 5 minutes. La conversation est un exemple.

Le classement du défi de fréquentation d'octobre disposé verticalement pour un écran en mode portraitLe classement du défi de fréquentation d'octobre disposé verticalement pour un écran en mode portrait

Figure 3 : Le même classement sur un écran en mode portrait

Confidentialité. N'incluez que les membres qui ont donné leur accord, n'affichez pas plus que le prénom et l'initiale du nom, et n'affichez jamais d'informations d'adhésion ou de santé.

Menu de restauration rapide qui réagit au coup de feu du déjeuner

Un restaurant de restauration rapide demande à son agent un menu pour l'écran situé au-dessus du comptoir. Le menu change au fil de la journée et, lorsque le comptoir est très fréquenté, fait remonter en tête les articles les plus rapides à préparer.

  • Réagit à : l'heure de la journée et l'affluence au comptoir : le nombre de personnes comptées par la caméra du comptoir depuis le début de l'heure, comparé à une heure normale.
  • Affiche : le petit-déjeuner jusqu'à 11 h, le déjeuner jusqu'à 15 h, puis le menu de l'après-midi. En cas d'affluence, une bannière Ready in under 3 minutes avec les articles rapides à préparer, et une étiquette Quick sur ces articles dans le menu.
  • Reste à jour : toutes les 5 minutes, l'agent consulte les comptages des caméras de la journée dans AI Insights & People et met à jour l'application. Les prix et les temps de préparation proviennent d'un fichier de menu que vous fournissez à l'agent.
  • Ce qu'il vous faut : CCTV avec AI Insights & People, avec une caméra couvrant le comptoir.

Une conversation avec l'Agent IA demandant un menu de comptoir qui change selon l'heure de la journée et met en avant les articles rapides à préparer en cas d'affluence, avec le Counter Menu Board ouvert à côtéUne conversation avec l'Agent IA demandant un menu de comptoir qui change selon l'heure de la journée et met en avant les articles rapides à préparer en cas d'affluence, avec le Counter Menu Board ouvert à côté

Figure 4 : L'agent crée le menu et l'ouvre à côté de la conversation. Il n'utilise que des comptages anonymes. La conversation est un exemple.

Le menu du déjeuner sur un écran en mode paysage, avec une bannière Busy right now présentant trois articles prêts en moins de 3 minutes au-dessus des menus burgers, bowls et accompagnementsLe menu du déjeuner sur un écran en mode paysage, avec une bannière Busy right now présentant trois articles prêts en moins de 3 minutes au-dessus des menus burgers, bowls et accompagnements

Figure 5 : Le résultat au-dessus du comptoir pendant le coup de feu du déjeuner

Accueil de chaque visiteur dans le hall d'un bureau

Un bureau remet à chaque visiteur un badge Door & Gate Access valable pendant la durée de sa visite. Lorsque le badge d'un visiteur ouvre la porte d'entrée, l'écran du hall l'accueille par son prénom en indiquant la personne qui le reçoit, la salle de réunion et l'itinéraire, puis revient au message d'accueil habituel au bout d'une minute.

  • Réagit à : l'ouverture de la porte d'entrée par le badge du visiteur.
  • Affiche : « Hi Priya, great to see you », le nom et l'équipe de la personne qui le reçoit, la salle et l'heure de la réunion, et un itinéraire étape par étape.
  • Reste à jour : un workflow déclenche le message d'accueil lorsque le badge du visiteur ouvre la porte d'entrée. L'agent associe la personne de l'événement de porte à la liste des visiteurs du jour, que l'accueil tient à jour et transmet à l'agent avec, pour chaque visiteur, la personne qui le reçoit, la salle et l'itinéraire. Les événements de porte ne contiennent ni noms, ni hôtes, ni salles : la liste est donc toujours nécessaire.
  • Ce qu'il vous faut : Door & Gate Access et une liste des visiteurs du jour.

Une conversation avec l'Agent IA demandant un écran d'accueil pour le hall qui salue chaque visiteur lorsque son accès ouvre la porte d'entrée, avec l'application Lobby Visitor Welcome ouverte à côtéUne conversation avec l'Agent IA demandant un écran d'accueil pour le hall qui salue chaque visiteur lorsque son accès ouvre la porte d'entrée, avec l'application Lobby Visitor Welcome ouverte à côté

Figure 6 : L'agent crée l'écran d'accueil et l'ouvre à côté de la conversation. La conversation est un exemple.

L'accueil du hall sur un écran en mode portrait, saluant un visiteur par son prénom avec la personne qui le reçoit, la salle de réunion et l'itinéraireL'accueil du hall sur un écran en mode portrait, saluant un visiteur par son prénom avec la personne qui le reçoit, la salle de réunion et l'itinéraire

Figure 7 : Le résultat sur l'écran en mode portrait du hall

La même configuration peut accueillir votre propre équipe. Par exemple, elle peut souhaiter un joyeux anniversaire à un membre de l'équipe lorsqu'il arrive le jour de son anniversaire, à partir d'une liste d'anniversaires des personnes qui y ont consenti. La date de naissance est une information personnelle : n'incluez que les personnes qui ont donné leur accord, et n'affichez pas plus que le prénom.

Pensez à qui peut voir l'écran. Toute personne présente dans le hall peut voir un message d'accueil. N'affichez pas plus que le prénom, et n'affichez jamais d'informations privées comme des données de santé, d'adhésion ou de ressources humaines.

Panneau de salle d'attente avec les temps d'attente en direct

Une clinique ou un centre de services affiche le temps d'attente actuel, afin que les personnes qui attendent sachent à quoi s'attendre.

  • Réagit à : le nombre approximatif de personnes qui attendent, d'après les comptages anonymes de la caméra couvrant la zone d'attente, et les arrivées issues des enregistrements, lorsque votre site les enregistre.
  • Affiche : un temps d'attente approximatif et le nombre approximatif de personnes qui attendent, les heures d'ouverture, et un message rassurant en cas d'affluence.
  • Reste à jour : toutes les quelques minutes, l'agent lit les derniers comptages et arrivées et calcule le temps d'attente à partir de la durée type d'une visite que vous lui indiquez.
  • Ce qu'il vous faut : CCTV avec AI Insights & People, avec une caméra couvrant la zone d'attente.

Un exemple de ce qu'affiche l'écran en cas d'affluence :

Environ 25 minutes

Environ 7 personnes en attente

Nous sommes plus sollicités que d'habitude ce matin. Merci de votre patience : nous vous appellerons dès que nous serons prêts.

N'affichez jamais d'informations sur les patients ou les clients. Le panneau n'affiche que des totaux, jamais de noms ni de motifs de visite.

Panneau de hall d'hôtel qui suit le déroulement de la journée

Un hôtel ou un lieu d'accueil présente le programme à ses clients, en fonction de l'heure de la journée et de l'affluence dans le hall.

  • Réagit à : l'heure de la journée et l'affluence dans le hall, d'après les comptages anonymes de la caméra du hall.
  • Affiche : les informations d'enregistrement et les identifiants Wi-Fi l'après-midi, les événements du soir et les disponibilités du restaurant en soirée, et les horaires du petit-déjeuner et les rappels de départ le matin. Lorsque le hall est très fréquenté, les informations d'enregistrement et les identifiants Wi-Fi passent en premier, afin que les clients qui arrivent les trouvent rapidement.
  • Reste à jour : toutes les quelques minutes, l'agent lit les comptages du hall et met à jour l'application. Les événements et les disponibilités du restaurant proviennent de listes ou de systèmes auxquels vous donnez accès à l'agent.
  • Ce qu'il vous faut : CCTV avec AI Insights & People pour les comptages du hall. Sans CCTV, le panneau change tout de même selon l'heure de la journée.

Un exemple de ce qu'affiche l'écran à 18 h :

Ce soir au Demo Harbour Hotel

Jazz au salon, de 19 h à 22 h

Harbour Grill : tables disponibles à partir de 20 h 30. Réservez à la réception.

Petit-déjeuner demain à partir de 6 h 30 au Harbour Grill.

Signalétique de centre commercial qui s'adapte au public

Un centre commercial demande à son agent une signalétique pour l'atrium qui choisit la promotion en fonction de la répartition par âge et par genre des clients situés près des panneaux.

  • Réagit à : la répartition par âge et par genre des clients situés près des panneaux au cours des 5 dernières minutes, sous forme de comptages agrégés anonymes : totaux par tranche d'âge (18-24, 25-34, 35-44, 45-54 et 55+) et par genre. Aucune personne n'est jamais identifiée ni suivie.
  • Affiche : une promotion destinée aux familles, aux étudiants ou aux seniors, ou une promotion générale, avec l'horloge et le programme du jour, et rien sur les personnes à proximité.
  • Reste à jour : toutes les 5 minutes, l'agent lit les données démographiques issues des données de vision par ordinateur de l'installation dans AI Insights & People et, chaque fois que la promotion doit changer, actualise l'application.
  • Ce qu'il vous faut : CCTV avec AI Insights & People dans l'installation.

Une conversation avec l'Agent IA demandant une signalétique d'atrium qui choisit une promotion toutes les 5 minutes d'après la répartition anonyme par âge et par genre des clients situés près des panneaux, avec l'application Atrium Promotions ouverte à côtéUne conversation avec l'Agent IA demandant une signalétique d'atrium qui choisit une promotion toutes les 5 minutes d'après la répartition anonyme par âge et par genre des clients situés près des panneaux, avec l'application Atrium Promotions ouverte à côté

Figure 8 : L'agent crée l'application et l'ouvre à côté de la conversation. Il n'utilise que des comptages anonymes, jamais des personnes individuelles. La conversation est un exemple.

L'écran Atrium Promotions d'un centre commercial, affichant une promotion de vacances scolaires pour les familles, l'heure et le programme du jourL'écran Atrium Promotions d'un centre commercial, affichant une promotion de vacances scolaires pour les familles, l'heure et le programme du jour

Figure 9 : Le résultat sur un écran en mode paysage. Il affiche la promotion, jamais rien sur les personnes à proximité.

L'écran Atrium Promotions disposé verticalement pour un écran en mode portraitL'écran Atrium Promotions disposé verticalement pour un écran en mode portrait

Figure 10 : La même application sur un écran en mode portrait

Confidentialité. N'utilisez que des comptages agrégés, respectez la législation sur la protection de la vie privée qui s'applique à vous, et informez les clients que des caméras et une mesure d'audience sont utilisées.

Consignes de sécurité en cas d'urgence

N'importe quel site peut faire basculer ses écrans sur des consignes de sécurité en cas d'urgence, puis revenir à la normale une fois la situation terminée.

  • Réagit à : le déclencheur choisi par votre site, par exemple un confinement ou une évacuation lancé par votre site, et la fin de cet événement.
  • Affiche : les consignes que vous avez préparées pour cet événement, à la place de tout le reste sur les écrans que vous choisissez. Lorsque l'événement se termine, les écrans reviennent à leur contenu habituel.
  • Reste à jour : les écrans que vous choisissez basculent sur vos consignes lorsque le déclencheur choisi se produit, et reviennent à la normale lorsque l'événement se termine. Votre agent peut vous aider à rédiger les consignes et à mettre cela en place.
  • Ce qu'il vous faut : Display Screens, et des consignes convenues avec la personne responsable de la sécurité sur votre site.

Préparez les consignes sous forme d'image ou d'On-Device Web App plutôt que d'Agent: Published App, afin qu'elles s'affichent même si l'agent est hors ligne. Convenez de ce qu'affichent les écrans, et de quels écrans l'affichent, avec la personne responsable de la sécurité sur votre site, et testez-le avec elle.

Tenez les alarmes silencieuses à l'écart des écrans publics. Les alarmes Duress sont silencieuses : elles ne doivent donc pas piloter les écrans visibles du public. Une prise de contrôle déclenchée par une alarme Duress n'a de sens que sur des écrans situés dans des zones privées non accessibles au public, comme un bureau administratif.

Agent : Applications publiées

Une Agent: Published App est une application web créée par votre Agent IA, qui s'exécute en direct sur l'appareil Agent IA de votre installation. Comme elle s'exécute sur l'agent, elle peut avoir sa propre partie serveur et se mettre à jour d'elle-même. Les écrans l'affichent en direct depuis l'agent.

Créer une application au cours d'une conversation

Demandez à votre Agent IA l'écran que vous souhaitez, en précisant son emplacement et ce à quoi il doit réagir. L'agent crée l'application et l'ouvre à côté de la conversation pour que vous puissiez la vérifier. Par exemple :

  • « Crée un classement pour notre défi de fréquentation d'octobre à partir des enregistrements d'arrivée, et tiens-le à jour toutes les quelques minutes pendant les heures d'ouverture. »
  • « Fais un menu pour le comptoir qui passe du petit-déjeuner au déjeuner à 11 h et met en avant les articles rapides à préparer en cas d'affluence. »
  • « Fais un écran d'accueil pour le hall qui salue chaque visiteur lorsque son badge ouvre la porte d'entrée. »

Un écran d'entraînement dans l'espace d'entraînement d'une salle de sport

Une salle de sport demande à son agent un écran d'entraînement en mode portrait pour son espace d'entraînement. Il affiche deux postes, l'un au-dessus de l'autre : un test de référence au ski erg et des abdominaux, chacun avec son objectif et une courte vidéo de démonstration en boucle. Entre les deux se trouve un grand minuteur de rounds, avec l'intensité cible au centre.

Une conversation avec l'Agent IA demandant un écran d'entraînement en mode portrait avec deux postes et un minuteur de rounds, avec le Workout Station Board ouvert à côtéUne conversation avec l'Agent IA demandant un écran d'entraînement en mode portrait avec deux postes et un minuteur de rounds, avec le Workout Station Board ouvert à côté

Figure 11 : Demandez un écran d'entraînement à votre Agent IA. Il crée l'application et l'ouvre à côté de la conversation. La conversation est un exemple.

Un écran d'entraînement en mode portrait avec deux postes d'exercice, des vidéos de démonstration et un grand minuteur de roundsUn écran d'entraînement en mode portrait avec deux postes d'exercice, des vidéos de démonstration et un grand minuteur de rounds

Figure 12 : Le résultat sur un écran en mode portrait dans l'espace d'entraînement

Publier une application depuis votre Agent IA

Dans Agent IA → Published apps, choisissez Publish to Performance Hub et renseignez les champs suivants :

ParamètreRôle
NameJusqu'à 60 caractères
Icon et DescriptionLa façon dont l'application est présentée dans la liste. La description peut comporter jusqu'à 300 caractères.
Support emailLa personne à contacter au sujet de l'application
Health checks & auto-repairActivé par défaut. L'agent redémarre ou répare l'application si elle cesse de fonctionner.
Allow on display screensDésactivé par défaut. Activez-le pour permettre l'affichage de l'application sur les écrans. Le paramètre affiche l'avertissement suivant : « Anyone near those screens can see it, so only allow apps without private information. »
AudienceQui peut utiliser l'application : Only me (testing), Specific people, This facility (par défaut), Selected facilities, Whole brand ou Entire organisation. Elle ne peut jamais être plus large que votre propre accès, et les audiences au niveau de la marque ou de l'organisation nécessitent un accès au niveau de l'organisation.

Depuis le même onglet, vous pouvez utiliser Pause et Resume, Edit, Unpublish, Transfer ownership et Show on screens.

L'afficher sur les écrans

  1. Dans Display Screens, ouvrez la Library et cliquez sur Add content → Agent: Published App.
  2. Choisissez l'application. Chaque application éligible est présentée avec une image, et un badge Hors ligne si l'agent est hors ligne.
  3. Donnez-lui un Name et, si vous le souhaitez, des Tags et une valeur Show for (seconds), puis cliquez sur Add to library.
  4. Publiez-la sur des écrans, ou ajoutez-la à une playlist.

La boîte de dialogue Add an Agent: Published App avec le classement October Visit Challenge sélectionnéLa boîte de dialogue Add an Agent: Published App avec le classement October Visit Challenge sélectionné

Figure 13 : Ajouter une Agent: Published App à la Library. Choisissez l'application, donnez-lui un nom et cliquez sur Add to library. Les images des applications qui ne font pas partie de cet exemple sont floutées.

Le classement October Visit Challenge dans la Library, avec son aperçu en direct, Preview landscape, Preview portrait, ses tags, Show for 30 seconds et les endroits où il est utiliséLe classement October Visit Challenge dans la Library, avec son aperçu en direct, Preview landscape, Preview portrait, ses tags, Show for 30 seconds et les endroits où il est utilisé

Figure 14 : Une Agent: Published App dans la Library. L'aperçu est une image de l'application en direct, prise par le Performance Hub. Where it is used liste les écrans et les plannings qui l'affichent. Le club et les membres sont fictifs.

Les aperçus, comme Preview landscape, Preview portrait et l'aperçu de la playlist, ne peuvent pas afficher l'application en direct : ils affichent donc le texte de substitution « Shown live on the screen ».

Prérequis

  • Le module Agent IA, pour publier l'application.
  • Le module Custom Apps (AI Agent: Published Apps) dans l'installation, pour l'afficher sur les écrans.
  • L'application doit être active, avoir Allow on display screens activé et avoir une audience qui inclut l'installation.

Quand les écrans ignorent une application d'agent

Les écrans passent à l'élément suivant tant qu'une application d'agent :

  • est en pause ou dépubliée,
  • n'est pas autorisée sur les écrans d'affichage,
  • a une audience qui n'inclut pas l'installation,
  • se trouve dans une installation qui ne dispose pas du module Custom Apps, ou
  • est inaccessible parce que l'agent est hors ligne.

Si une application est définitivement dépubliée, retirez-la de vos playlists et de vos plannings.

Applications Web sur appareil

Une On-Device Web App est un ensemble statique de fichiers HTML, CSS et JavaScript. Les écrans la téléchargent et la diffusent depuis leur propre stockage : elle continue donc d'être diffusée en cas de coupure Internet. Elle convient aux contenus qui n'ont pas besoin de réagir à votre site, par exemple :

  • Toute entreprise dotée d'un accueil : un panneau de bienvenue à la réception avec votre logo, la date et l'heure, et un bandeau d'actualités. Bureaux, cliniques, salles de sport, hôtels, écoles et showrooms peuvent tous l'utiliser. Consultez Exemple : un panneau de bienvenue à la réception.
  • Hôtellerie et restauration : un menu qui passe du petit-déjeuner au déjeuner puis au dîner à heures fixes.
  • Commerce de détail : une promotion en vitrine qui fait défiler les offres spéciales de la semaine.
  • Éducation : un panneau d'affichage de campus avec les événements et les rappels du jour.

Le Reception Welcome Sign sur un écran en mode paysage : le logo Acme Demo Co., l'heure et la date, « Good morning », « Welcome », « Please check in at the front desk » et un bandeau In the news en basLe Reception Welcome Sign sur un écran en mode paysage : le logo Acme Demo Co., l'heure et la date, « Good morning », « Welcome », « Please check in at the front desk » et un bandeau In the news en bas

Figure 15 : Reception Welcome Sign, une On-Device Web App, sur un écran en mode paysage. L'horloge, la date et le message d'accueil utilisent le fuseau horaire de l'installation. Le badge Preview n'apparaît que dans les aperçus, pas sur les écrans réels. Acme Demo Co. est fictive, et les titres de cette capture d'écran sont des exemples.

Le Reception Welcome Sign sur un écran en mode portraitLe Reception Welcome Sign sur un écran en mode portrait

Figure 16 : La même application sur un écran en mode portrait

Exemple : un panneau de bienvenue à la réception

Le Reception Welcome Sign accueille les personnes à votre réception avec votre logo, la date et l'heure, et un bandeau d'actualités. Il convient à toute entreprise dotée d'une réception ou d'une entrée.

  • Diffusé depuis l'écran : le logo, l'arrière-plan, la police, l'horloge, la date et le message d'accueil font tous partie de l'application : ils continuent donc de fonctionner sans Internet. L'horloge suit le fuseau horaire de l'installation.
  • Une seule partie utilise Internet : le bandeau d'actualités. Par défaut, il affiche les titres de la rubrique « In the news » de Wikipédia, avec mention de la source à l'écran. Il peut à la place lire n'importe quel flux RSS qui autorise les requêtes intersites, par exemple un flux d'actualités transmis par votre propre relais.
  • Gère l'absence de connexion : le bandeau se masque lorsque l'écran est hors ligne ou lorsque les titres ne peuvent pas être chargés, et réapparaît lorsque l'écran est de nouveau en ligne. Tout le reste est diffusé depuis la copie locale de l'écran.
  • Personnalisez-le : téléchargez le panneau depuis Pour les développeurs ci-dessous, remplacez logo.svg et background.jpg, et modifiez le texte d'accueil et les paramètres d'actualités dans config.js, ou désactivez le bandeau. Téléversez-le ensuite : Library → Add content → On-Device Web App → Choose ZIP → Publish app.

Le Reception Welcome Sign sans bandeau d'actualités, car les titres ne peuvent pas être chargésLe Reception Welcome Sign sans bandeau d'actualités, car les titres ne peuvent pas être chargés

Figure 17 : Lorsque les titres ne peuvent pas être chargés, ou que l'écran est hors ligne, le panneau masque le bandeau et continue d'afficher tout le reste. Le bandeau réapparaît dès que les titres se chargent à nouveau.

Pour les développeurs : comment le panneau est conçu

Télécharger le Reception Welcome Sign (ZIP, 134 KB)

FichierRôle
index.htmlLa page. Charge le Display App SDK, config.js et app.js.
config.jsTexte d'accueil, message de salutation, fuseau horaire de secours et paramètres d'actualités
app.jsHorloge, date et message de salutation dans le fuseau horaire de l'installation, et bandeau d'actualités
style.cssMise en page pour les écrans en mode paysage et portrait
logo.svg, background.jpg, source-sans-3.woff2Logo, arrière-plan et police, stockés dans l'application
README.txt, OFL.txtComment personnaliser le panneau, et la licence de la police

L'application lit le fuseau horaire et les paramètres régionaux de l'installation depuis PHDisplay.onInit(ctx). Si le SDK ne peut pas être chargé, par exemple lorsque l'écran démarre hors ligne, elle utilise timeZone dans config.js ou le fuseau horaire propre à l'écran.

Le bandeau est la seule partie qui récupère des données en direct. Le Display App SDK, facultatif, est chargé depuis l'hôte d'applications de Performance Hub. Tant que l'écran est hors ligne, le bandeau n'envoie aucune requête et reste masqué, et l'événement online du navigateur recharge les titres :

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

Pour utiliser une autre source d'actualités, définissez source: 'rss' et rssUrl dans config.js avec un flux qui autorise les requêtes intersites (il envoie un en-tête Access-Control-Allow-Origin), par exemple un flux d'actualités transmis par votre propre relais. Vérifiez que les conditions d'utilisation du flux autorisent son affichage sur vos écrans. Pour désactiver le bandeau, définissez enabled: false sous news.

Il existe deux façons d'en ajouter une :

  • Demandez à un agent IA de la créer et de la publier.
  • Ajoutez-la vous-même : Library → Add content → On-Device Web App, puis téléversez un ZIP, un dossier ou des fichiers. Consultez Ajouter du contenu.

Une conversation avec l'Agent IA à gauche, dans laquelle l'agent indique avoir ajouté le Reception Welcome Board à la Library de Display Screens en tant qu'On-Device Web App, avec l'application ouverte à droiteUne conversation avec l'Agent IA à gauche, dans laquelle l'agent indique avoir ajouté le Reception Welcome Board à la Library de Display Screens en tant qu'On-Device Web App, avec l'application ouverte à droite

Figure 18 : Demandez un écran à votre Agent IA. Il crée l'application, l'ouvre à côté de la conversation pour que vous puissiez la vérifier, et l'ajoute à votre Library Display Screens en tant qu'On-Device Web App, prête à être diffusée sur un écran. La conversation est un exemple.

Pour publier une On-Device Web App, l'agent :

  1. Lit les recommandations relatives aux applications Display Screens, afin que l'application s'adapte à un écran et respecte les règles ci-dessous.
  2. Publie l'application dans votre Library. Au cours de la même étape, il peut la publier sur des écrans ou des groupes, la planifier ou prendre le contrôle des écrans.
  3. Vérifie son travail à l'aide d'une capture d'écran de l'application rendue.
  4. Revient à une version antérieure si vous le demandez.

Tout agent IA connecté via MCP peut le faire si son accès inclut la fonctionnalité Display Screens, y compris votre Agent IA. Consultez les outils MCP de Display Screens et Créer une clé MCP. Votre agent vous demande une confirmation avant d'agir sur plusieurs écrans à la fois.

La Library filtrée sur les On-Device Web AppsLa Library filtrée sur les On-Device Web Apps

Figure 19 : Filtrez la Library sur On-Device Web Apps pour voir toutes les applications de l'installation. Les miniatures des applications qui ne font pas partie de cet exemple sont floutées.

La diffuser sur des écrans

Pour diffuser vous-même une application sur des écrans, ouvrez-la dans la Library et cliquez sur Publier. Dans Show on screens, choisissez tous les écrans de l'installation ou des écrans individuels, puis choisissez When : Always (default), Scheduled ou Take over now. Consultez Publier du contenu.

La boîte de dialogue Show on screens pour le Reception Welcome Sign, avec l'écran Reception Lobby cochéLa boîte de dialogue Show on screens pour le Reception Welcome Sign, avec l'écran Reception Lobby coché

Figure 20 : Afficher le Reception Welcome Sign sur l'écran Reception Lobby

Versions

Chaque publication crée une nouvelle version qui ne change jamais. Ouvrez l'application dans la Library pour voir ses Versions : la version actuelle porte la mention Live, et Make live sur n'importe quelle version antérieure permet de revenir à celle-ci. Sous Publish a new version, déposez un ZIP, un dossier ou des fichiers pour téléverser vous-même une nouvelle version.

Lorsqu'une nouvelle version est publiée, le Performance Hub affiche « New version published. Screens update within a few seconds. ». Après Make live, il confirme quelle version est active, par exemple « Version 4 is now live ». La modification atteint tous les écrans qui affichent l'application.

L'On-Device Web App Reception Welcome Board dans la Library, avec son aperçu et les versions v1 à v4, v4 portant la mention LiveL'On-Device Web App Reception Welcome Board dans la Library, avec son aperçu et les versions v1 à v4, v4 portant la mention Live

Figure 21 : Le Reception Welcome Board dans la Library : son aperçu, Preview landscape et Preview portrait, et quatre versions, dont v4 active et Make live sur les versions antérieures

Utilisez Preview landscape et Preview portrait pour ouvrir l'application au format de l'écran et vérifier qu'elle s'affiche correctement avant de la publier sur des écrans.

Fonctionnement

  • Hors ligne : les écrans conservent une copie de l'application, qui continue donc d'être diffusée sans Internet. Tout ce que l'application charge depuis Internet est indisponible tant qu'un écran est hors ligne.
  • Données en direct : uniquement depuis des API HTTPS publiques qui autorisent les requêtes cross-origin.
  • Isolée : l'application s'exécute dans un bac à sable, séparée du Performance Hub, sans accès à votre session Performance Hub.

Limites

LimiteValeur
Taille totale10 MB
Nombre de fichiers200
Taille d'un fichier5 MB
Longueur du chemin d'un fichier200 caractères
Types de fichiershtml, htm, css, js, mjs, json, svg, png, jpg, jpeg, webp, gif, woff, woff2, txt, map
Durée d'affichage dans une playlist5 à 3 600 secondes

Recommandations de conception

  • Remplir l'écran sans défilement : 1920 × 1080 pour les écrans en mode paysage, 1080 × 1920 pour les écrans en mode portrait.
  • Texte de grande taille : corps de texte d'au moins 32 px, titres d'au moins 64 px.
  • Contraste élevé, afin que l'écran soit lisible depuis l'autre bout de la pièce.
  • Pas de connexion, de formulaires ni d'effets de survol. Personne n'interagit avec un écran.
  • Peu gourmande en ressources processeur, afin de fonctionner de manière fluide sur le lecteur.
  • Gère l'absence de connexion, par exemple lorsqu'une API publique qu'elle utilise est inaccessible.
  • Utilise le fuseau horaire de l'installation pour les horloges et les heures.

Ces recommandations conviennent aussi aux Smart Displays.

Pour les développeurs : le Display App SDK

Les applications peuvent, si elles le souhaitent, utiliser le Display App SDK pour obtenir des informations sur l'écran sur lequel elles s'exécutent et pour signaler leur état.

AppelCe qu'il fournit
PHDisplay.onInit(ctx)S'exécute au démarrage de l'application. ctx inclut l'écran (id, nom, orientation, largeur, hauteur), l'installation (id, nom, fuseau horaire), les paramètres régionaux, la marque (nom, logoUrl, primaryColor), l'élément (id, durationSec) et indique s'il s'agit d'un aperçu
onVisible, onHiddenS'exécutent lorsque l'application est affichée ou masquée à l'écran
ready(), done(), error()Signalent l'état de l'application à l'écran

durationSec est la durée d'affichage de l'élément, de 5 à 3 600 secondes.