Ajouter un WebSlate à votre environnement

Vue d’ensemble

Vue d’ensemble de l’affichage et de l’interaction avec le contenu web

Dans le kit de ressources Mesh, le prefab WebSlate que nous voulons utiliser est appelé WebSlateFramed. Il contient un paramètre d’URL que vous pouvez spécifier pour contrôler le contenu affiché par WebSlate. Il est également fourni avec un composant qui permet à un organisateur d’événements de modifier l’URL du WebSlate dans un événement en temps réel. Lorsqu’un événement Mesh contenant le WebSlate démarre, webSlate charge son contenu à l’aide de l’URL que vous avez fournie.

Notes

• Il existe également un prefab nommé WebSlate dans le kit de ressources Mesh, mais il ne prend pas en charge la mise à jour de l’URL dans un événement Mesh en temps réel. Nous ne le recommandons donc pas.

• La taille et la forme du WebSlate correspondent à celle du quad GameObject sur lequel il est placé. En règle générale, il s’agit du quad cuit à l’intérieur du préfabriqué WebSlate.

• Vous pouvez ajouter plusieurs WebSlates à une scène. Le nombre d’utilisateurs dans un événement Mesh basé sur Mesh n’affecte pas les performances de WebSlate ; Les ressources WebSlate sont initialisées localement sur l’ordinateur de l’utilisateur.

Ajouter un webSlate

Ajouter le préfabriqué WebSlateFramed à partir d’un menu

1. Cliquez avec le bouton droit dans la hiérarchie, puis dans le menu contextuel, sélectionnez Mesh Toolkit>WebSlateFramed.

   Conseil : vous pouvez également cliquer sur le bouton « + » en haut à gauche de la fenêtre Hiérarchie pour afficher le même menu.

   

Rechercher et ajouter le préfabriqué WebSlateFramed

1. Dans le champ De recherche, tapez « WebSlateFramed ». Vérifiez que le filtre All est sélectionné.

   

2. Faites glisser le préfabriqué souhaité dans l’affichage Scène ou la hiérarchie.

Spécifier l’URL par défaut

1. Dans la hiérarchie, développez WebSlateFramed GameObject, puis sélectionnez son objet enfant nommé WebSlate.

   

2. Dans l’Inspecteur, accédez au composant WebSlate.

3. Mettez à jour le champ URL actuel vers l’URL que vous souhaitez que le WebSlate charge par défaut dans un événement Mesh.

   

Rendre WebSlate contrôlable dans un événement

Lorsque vous ajoutez un WebSlate à votre environnement, vous définissez une URL par défaut pour celle-ci, mais que se passe-t-il si un organisateur d’événements souhaite modifier l’URL en temps réel pendant un événement à l’aide de l’Panneau de configuration ? Pour ce faire, le prefab WebSlateFramed est fourni avec un composant nommé WebSlate Controllable. Il est également fourni avec le composant Contrôle d’objet qui permet à un organisateur d’événements d’activer ou de désactiver le WebSlate pendant un événement.

La fonctionnalité contrôlable de WebSlates permet aux créateurs d’environnement de conserver la conception et l’esthétique de l’environnement tout en permettant aux organisateurs qui exécutent plusieurs événements (en tant que modèle ou non) de modifier le contenu en fonction du thème de leur événement. Notez que les URL contrôlables peuvent être ajoutées ou modifiées uniquement pendant les événements en direct. Les URL ajoutées lors de la personnalisation (en mode Édition) ne seront pas enregistrées et ne seront donc pas conservées sur plusieurs événements ; Les webSlates sont par défaut ajoutés par défaut par les développeurs dans Unity à chaque fois.

Avec cette fonctionnalité, les WebSlates fournissent les fonctionnalités suivantes :

• Organisateurs d’événements : Activer/désactiver les URL, visibilité (activé/désactivé) et (éventuellement) Empêcher la suspension (pour conserver les WebSlates toujours activés). Les organisateurs peuvent utiliser le panneau hôte pour modifier une URL pendant un événement ; cela met à jour WebSlates pour tous les utilisateurs dans l’événement instantanément (actualisation globale). 
• Participants aux événements : lorsqu’un participant utilise le curseur ou le contrôleur pour pointer sur un WebSlate, une barre de menus avec un bouton d’actualisation intégré et une info-bulle expliquant brièvement la nature mono-utilisateur des WebSlates s’affiche (certaines applications web peuvent offrir des expériences partagées). Cela permet de revenir à l’URL définie par les organisateurs si l’utilisateur navigue et peut être utilisé dans le cas où les applications web rencontrent des problèmes lors d’un événement. 

Ajouter un nom contrôlable et une URL par défaut

Remarque : Si vous disposez déjà d’un préfabriqué WebSlateFramed dans un environnement existant, pour obtenir la fonctionnalité Contrôlable, mettez à niveau le kit de ressources Mesh vers la version 24.10 ou ultérieure. Après cela, vous pouvez commencer à l’étape 3 ci-dessous.

1. Dans la hiérarchie, sélectionnez le préfabriqué WebSlateFramed que vous avez ajouté.

   

2. Dans l’Inspecteur, accédez au composant WebSlate Controllable, puis, dans le champ Nom complet, ajoutez un nom pour le Contrôle. Assurez-vous que le nom donne une indication de la fonction webSlate dans l’environnement ; c’est ce qui sera vu par les organisateurs dans le Panneau de configuration et utilisé pour mettre à jour webSlate en temps réel, si nécessaire. Pour cet exemple, nous allons utiliser « Tableau de bord Azure ».

   

3. Dans le composant Contrôle d’objet , fournissez un nom de la même façon.

4. Dans la hiérarchie, développez le composant WebSlateFramed , puis sélectionnez son objet enfant nommé WebSlate.

5. Dans l’inspecteur, mettez à jour le champ URL actuel vers l’URL que vous souhaitez que le WebSlate charge par défaut dans un événement Mesh.

   

6. Testez le WebSlate en mode Lecture pour vous assurer que l’URL s’affiche correctement.

Autres paramètres contrôlables WebSlate

Empêcher la suspension (composant Contrôle WebSlate) : ce paramètre s’affiche dans le Panneau de configuration et le paramètre par défaut est désactivé. Cela signifie que si un participant s’éloigne d’un WebSlate et que le WebSlate n’est plus dans son affichage pendant 30 secondes ou plus, le Webslate est automatiquement suspendu pour conserver la mémoire. Il se recharge si le WebSlate entre à nouveau dans l’affichage du participant.

Dans certains cas, le contenu peut avoir besoin de lire pour les participants, quelle que soit leur position dans l’événement (par exemple, si le WebSlate exécute du contenu de flux en direct). Dans ce cas, il est préférable d’activer le paramètre Empêcher la suspension.

L’organisateur de l’événement peut activer et désactiver ce paramètre dans l’événement. Si vous souhaitez modifier le paramètre par défaut sur « activé », activez la case à cocher Empêcher la suspension .

Backplate (composant WebSlate Controllable) : Le prefab WebSlateFramed est fourni avec le *Backplate GameObject sélectionné ici pour fournir le « frame ». Vous pouvez remplacer ce paramètre par « Aucun » pour désactiver le cadre, mais nous vous recommandons de conserver ce paramètre tel quel et de le laisser à l’organisateur de l’événement pour activer ou désactiver la plaque arrière.

Visible (composant contrôle d’objet) : ce paramètre apparaît également dans le Panneau de configuration, où Event Organier peut activer ou désactiver la visibilité des WebSlates pour tous les participants à l’événement. Sélectionnez cette option si vous souhaitez que la valeur par défaut soit « visible ».

Remarque : Si l’un de ces paramètres est modifié pendant les événements, les modifications sont reflétées en temps réel pour tous les utilisateurs.

Tester le contrôle dans un événement Mesh

Le test de la fonctionnalité contrôlable complète d’un WebSlate ne peut se produire que dans un événement Mesh. Dans notre exemple d’événement basé sur votre environnement, notre exemple De webSlate contrôlable, « Tableau de bord Azure », apparaît dans la Panneau de configuration.

L’organisateur d’événements peut cliquer sur la flèche vers le bas sur le tableau de bord Azure pour afficher l’URL, qu’il peut ensuite modifier.

Comme mentionné précédemment, l’organisateur peut modifier plusieurs paramètres du WebSlate pendant l’événement, tels que Empêcher la suspension, Afficher la plaque arrière et Visible (activer/désactiver).

Menu WebSlate

Lorsque quelqu’un (utilisateurs ou organisateurs) approche un WebSlate et pointe dessus avec son curseur ou son contrôleur VR, le menu WebSlate s’affiche.

Actualiser (bouton gauche) : le participant peut cliquer dessus pour renvoyer son affichage personnel à la page web par défaut du WebSlate.

Informations (bouton droit) : cette info-bulle permet de rappeler au participant que ce qu’il voit est unique et non partagé avec d’autres participants, sauf si le WebSlate affiche une application web collaborative.

Conseils

• Vous pouvez placer un WebSlate sur GameObjects autre qu’un Quad en ajoutant WebSlate.cs en tant que composant de script directement à votre objet 3D de votre choix et en ajoutant UnlitWebSlate.mat à MeshRenderer Materials. Notez que cela peut entraîner un étirement de texture visuelle, une inversion et/ou une rotation.

• Un WebSlate charge une URL par défaut. Vous devez remplacer cette URL par une URL que vous préférez pour chaque WebSlate en cours d’utilisation. Le paramètre de luminosité est défini sur 1,0 (100 % de la luminosité du navigateur).

• Les webSlates se suspendent automatiquement après avoir été désactivés pendant trop longtemps. Si vous devez vous assurer qu’un WebSlate donné est toujours en cours d’exécution (par exemple, un flux en direct ou une lecture audio continue), dans le composant WebSlate , sélectionnez Empêcher la suspension. Notez que cela peut entraîner l’utilisation de davantage de ressources par la scène, car le WebSlate reste actif à tout moment.

• Pour dimensionner l’URL de l’image à la taille du WebSlate, habillage de l’URL en HTML. Utilisez l’API WebSlate LoadHTML par le biais de scripts visuels pour afficher ce contenu HTML sur votre WebSlate. Ajoutez le code HTML construit à la propriété HTMLContent. Vous pouvez également utiliser l’API LoadHTMAsset et passer le code HTML en tant que ressource. Remplacez l’URL de l’image par l’URL de votre image.

  Exemple de code HTML avec l’URL d’image et le graphe de script visuel à l’aide de l’API LoadHTML et LoadHTMLAsset :

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

Étapes suivantes