Synthèse
L'écran des Even Realities G2 est conçu pour afficher des informations courtes, compréhensibles rapidement. Even Hub met à la disposition des développeurs un canevas de 576 x 288 pixels par œil en vert monochrome, et le SDK public construit l'écran à partir de conteneurs de texte, de liste et d'image plutôt que d'une interface libre de type smartphone. Les mises en page les plus efficaces reposent donc sur des textes courts, des espacements nets et seulement quelques éléments à la fois.
Le processus de développement se comprend plus facilement sous la forme d'une séquence continue : associer les G2 dans l'application mobile Even Realities, se connecter à Even Hub sur un ordinateur avec le même compte, installer les outils de développement, créer un projet, ouvrir src/main.ts, créer un conteneur de texte, le prévisualiser dans le Simulator, puis scanner un QR code dans l'application mobile pour tester la même mise en page sur les vraies lunettes. L'objectif n'est pas de faire tenir le plus d'informations possible à l'écran, mais de fournir à l'utilisateur une information utile sans détourner son attention du monde réel.
Qu'est-ce que l'écran des Even Realities G2 ?
Even Realities G2 est une paire de lunettes connectées légères dotée d'un écran binoculaire à guide d'ondes micro-LED. Pour les plugins Even Hub, les lunettes servent principalement de surface d'affichage et de saisie : le plugin s'exécute via le téléphone connecté, tandis que les G2 affichent le contenu et renvoient à l'application les commandes du pavé tactile ou de la bague R1 optionnelle.
Le canevas de développement mesure 576 x 288 pixels par œil et s'affiche en vert avec 16 niveaux de luminosité. Les zones non éclairées restent transparentes, de sorte que l'utilisateur continue de voir le monde réel derrière les informations. Les G2 se prêtent ainsi mieux aux rappels, aux traductions, aux mises à jour de statut et aux instructions courtes qu'aux pages denses ou aux interfaces riches de type smartphone.
Comment concevoir votre premier affichage pour les Even G2 en partant de zéro
Étape 1 : configurer les G2 dans l'application mobile Even Realities
Commencez par le téléphone. Vous y créerez le compte que vous utiliserez également sur l'ordinateur et vous vous assurerez que les lunettes sont prêtes.
1. Ouvrez l'application Even Realities. Créez un compte ou connectez-vous dans l'application mobile.
2. Associez les G2. Ouvrez Devices > Add device > Even G2 et suivez les instructions d'association.
3. Mettez à jour le firmware. Acceptez toute mise à jour du firmware proposée après l'association, ou vérifiez dans Devices > Firmware.
Étape 2 : activer l'accès développeur sur l'ordinateur
Passez maintenant à l'ordinateur, mais gardez le téléphone à portée de main. Utilisez le même compte sur les deux appareils.
1. Ouvrez Even Hub. Dans un navigateur sur l'ordinateur, rendez-vous sur hub.evenrealities.com/login.
2. Connectez-vous avec le même compte. Utilisez l'adresse e-mail et le mot de passe de l'application mobile.
3. Revenez au téléphone. Forcez la fermeture de l'application Even Realities, puis rouvrez-la.
4. Trouvez la section développeur. Ouvrez l'onglet Even Hub dans l'application mobile. La section développeur devrait maintenant apparaître en haut à droite, avec notamment Scan QR.
Étape 3 : installer Node.js et les outils Even Hub
Restez sur l'ordinateur. Node.js est un logiciel qui permet à Even Hub de fonctionner sur votre ordinateur. Il doit être installé avant que les outils en ligne de commande Even Hub puissent s'exécuter.
1. Installez Node.js. Even Hub nécessite actuellement Node 20 LTS ou Node 22 ou une version plus récente.
2. Ouvrez l'application Terminal ou PowerShell. Utilisez Terminal sous macOS ou PowerShell/Terminal sous Windows.
3. Vérifiez Node.js. Saisissez la commande ci-dessous et appuyez sur Entrée. Si une version telle que v20.x ou v22.x s'affiche, tout est prêt.
node -v
4. Installez les outils Even Hub. Dans la même fenêtre, saisissez :
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Étape 4 : créer le projet G2
L'ordinateur est maintenant prêt. Créez un nouveau dossier de projet et ajoutez-y le SDK Even Hub.
1. Créez le projet dans Terminal. Saisissez ces commandes une ligne à la fois :
npm create vite@latest g2-display-demo -- --template vanilla-ts cd g2-display-demo npm install npm install @evenrealities/even_hub_sdk@latest evenhub init
Even propose également des modèles prêts à l'emploi : npx degit even-realities/evenhub-templates/minimal g2-display-demo vous fournit un projet dans lequel le SDK et app.json sont déjà en place
2. Complétez app.json. Vite a créé le projet, le SDK y a été installé et evenhub init a créé app.json. Ouvrez app.json et renseignez package_id (au format de domaine inversé, par exemple com.yourcompany.g2demo), name (20 caractères maximum, sans le mot Even) et min_sdk_version avec la version du SDK que vous avez installée (npm list @evenrealities/even_hub_sdk l'affiche). Ajoutez une icône en niveaux de gris de 24 x 24 sous public/icon.png.
Étape 5 : ouvrir le projet et trouver le fichier d'affichage
Le projet existe, mais l'affichage n'a pas encore été conçu. Ouvrez le dossier dans un éditeur de code.
1. Ouvrez Visual Studio Code ou un autre éditeur de code. Visual Studio Code est une option courante.
2. Ouvrez le dossier du projet. Choisissez File > Open Folder et sélectionnez g2-display-demo.
3. Ouvrez le fichier principal. Dans le panneau Explorer à gauche, ouvrez src > main.ts.
C'est l'emplacement clé : c'est dans src/main.ts que vous saisirez le premier code d'affichage G2 à l'étape suivante.
Étape 6 : créer un conteneur de texte simple
Commencez par un seul conteneur. Cela permet de vérifier que le projet et l'affichage fonctionnent avant d'ajouter d'autres éléments de mise en page.
1. Remplacez le code de départ dans src/main.ts. Supprimez le code de démonstration Vite par défaut et collez le code ci-dessous, puis ajoutez ces lignes à la fin pour que l'utilisateur puisse quitter l'application d'une double pression. Les règles de soumission d'Even l'exigent sur le premier écran, et leurs relecteurs le vérifient :
import { waitForEvenAppBridge, TextContainerProperty, CreateStartUpPageContainer, OsEventTypeList, } from '@evenrealities/even_hub_sdk'
const bridge = await waitForEvenAppBridge()
const statusBox = new TextContainerProperty({ xPosition: 24, yPosition: 24, width: 528, height: 240, paddingLength: 8, borderWidth: 0, containerID: 1, containerName: 'status', content: 'MACHINE 04\nReady\n> Continue', isEventCapture: 1, })
await bridge.createStartUpPageContainer( new CreateStartUpPageContainer({ containerTotalNum: 1, textObject: [statusBox], }), )
bridge.onEvenHubEvent((event) => {
if (event.textEvent?.eventType === OsEventTypeList.DOUBLE_CLICK_EVENT) {
bridge.shutDownPageContainer(1)
}
})
2. Enregistrez main.ts. Utilisez File > Save ou Ctrl+S / Cmd+S.
- xPosition / yPosition : l'endroit où le conteneur commence sur le canevas de 576 x 288.
- width / height : l'espace d'affichage attribué au conteneur.
- paddingLength : l'espace entre le bord du conteneur et le texte.
- content : les mots que voit l'utilisateur.
- containerID / containerName : l'identifiant utilisé pour mettre à jour ce même conteneur ultérieurement.
- isEventCapture: 1 : désigne ce conteneur comme celui qui reçoit les principaux événements de toucher et de balayage.
Étape 7 : prévisualiser l'affichage dans l'Even Hub Simulator
Le code est enregistré. Prévisualisez-le sur l'ordinateur avant de l'envoyer sur les vraies lunettes.
1. Revenez à Terminal. Assurez-vous qu'il se trouve toujours dans le dossier g2-display-demo.
2. Lancez le projet. Saisissez :
npm run dev
3. Laissez ce Terminal ouvert. Vite affiche normalement une adresse telle que http://localhost:5173.
4. Ouvrez une deuxième fenêtre Terminal. Lancez le Simulator avec la même adresse locale :
evenhub-simulator http://localhost:5173
5. Vérifiez le Simulator. Vous devriez voir MACHINE 04, Ready et > Continue dans l'aperçu de 576 x 288.
Étape 8 : ajuster la mise en page dans le même fichier src/main.ts
N'ouvrez pas de nouveau programme ni de nouvelle section. Revenez au fichier que vous avez déjà utilisé à l'étape 6.
1. Retournez dans Visual Studio Code > src > main.ts. Laissez tourner le Simulator et le serveur de développement.
2. Modifiez d'abord le contenu. Remplacez les mots d'exemple dans content par les informations réelles de votre cas d'usage.
3. Ajustez l'espacement uniquement si nécessaire. Modifiez xPosition, yPosition, width, height ou paddingLength, puis enregistrez et regardez de nouveau le Simulator.
4. N'ajoutez un autre conteneur que s'il améliore la clarté. Si vous séparez un titre, un message principal ou un statut, attribuez à chaque conteneur un containerID et un containerName uniques (16 caractères maximum), ajoutez-le à textObject et augmentez containerTotalNum en conséquence. Une page peut contenir jusqu'à 8 conteneurs de texte ou de liste, plus 4 conteneurs d'image.
N'ajoutez pas d'éléments de design propres aux smartphones : les G2 ne proposent ni réglage classique de la taille de police, ni typographie en gras, ni cartes colorées, ni remplissages d'arrière-plan arbitraires. Utilisez plutôt la position, l'espacement, les bordures et les niveaux de luminosité pris en charge.
Étape 9 : mettre à jour un texte variable sans reconstruire la page
Si le conteneur reste au même endroit et que seuls les mots changent, mettez à jour le conteneur existant.
1. Restez dans src/main.ts. En haut du fichier, là où les outils du SDK Even Hub sont importés, ajoutez TextContainerUpgrade.
2. Utilisez le même identifiant et le même nom de conteneur. Par exemple :
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Réservez cette méthode aux modifications de contenu. Si le nombre, la position ou la taille des conteneurs change, reconstruisez plutôt la page. Selon la documentation d'Even Realities, textContainerUpgrade est l'option la plus rapide et sans scintillement pour les mises à jour portant uniquement sur le texte.
Étape 10 : tester la même mise en page sur de vraies G2
Le Simulator vérifie la structure, mais le design final doit être évalué à travers les vraies optiques.
1. Rendez le serveur de développement accessible depuis le téléphone. Par défaut, Vite n'écoute que sur localhost : le téléphone ne peut donc pas y accéder tant que vous ne l'avez pas configuré pour accepter les connexions extérieures. Créez un fichier vite.config.ts dans le dossier du projet (ou ajoutez le bloc server à celui que vous avez) avec les paramètres documentés par Even, puis relancez npm run dev et laissez-le tourner :
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Remplacez par votre adresse IP locale réelle
},
},
})
2. Trouvez l'adresse IP de l'ordinateur sur le réseau local. Sous Windows PowerShell, utilisez ipconfig et repérez l'adresse IPv4. Sous macOS, utilisez ipconfig getifaddr en0 pour le Wi-Fi.
3. Générez le QR code. Remplacez <YOUR-IP> par l'adresse locale :
evenhub qr --url "http://<YOUR-IP>:5173"
4. Passez au téléphone. Ouvrez l'application Even Realities > onglet Even Hub > section développeur > Scan QR.
5. Scannez le QR code affiché sur l'ordinateur. Le téléphone charge le projet local et le transmet aux G2 associées.
6. Regardez à travers les lunettes. Vérifiez que le message principal est facile à repérer et compréhensible tout en regardant l'environnement réel.
Remarque réseau : le téléphone et l'ordinateur doivent pouvoir communiquer. Un Wi-Fi d'entreprise, l'isolation AP/client ou un pare-feu peuvent bloquer les tests locaux par QR code.
Règles de mise en page pratiques pour le petit écran vert
Un seul objectif par écran :
- À faire : afficher un seul statut, une instruction, un rappel ou un petit choix.
- À éviter : combiner un tableau de bord, des instructions et la navigation sur une même page.
Des textes courts :
- À faire : utiliser quelques lignes compactes.
- À éviter : prendre la limite technique de texte comme objectif de design.
Utiliser l'espacement pour la hiérarchie :
- À faire : séparer le titre, l'information principale et l'action par des espaces vides.
- À éviter : tenter de créer une hiérarchie avec des changements de taille de police non pris en charge.
Utiliser les conteneurs à bon escient :
- À faire : n'ajouter un conteneur que lorsqu'il donne un rôle clair à une information.
- À éviter : ajouter des conteneurs simplement parce que la page en autorise jusqu'à 12.
Concevoir en tenant compte de la transparence :
- À faire : garder à l'esprit que les zones non éclairées laissent voir le monde réel derrière le HUD.
- À éviter : traiter le canevas comme un écran de téléphone opaque.
Utiliser les images avec prudence :
- À faire : utiliser des icônes simples et contrastées ou des repères compacts.
- À éviter : les photos ou graphiques détaillés qui nécessitent un examen attentif.
Tester sur le matériel :
- À faire : utiliser le Simulator pour aller vite, puis vérifier sur de vraies G2.
- À éviter : valider le design final uniquement à partir de l'aperçu sur ordinateur.
Quelles informations professionnelles conviennent à cet écran ?
Les G2 donnent le meilleur d'elles-mêmes lorsque l'utilisateur a besoin d'une petite quantité d'informations sans quitter la tâche ou la conversation en cours.
· Rappels en réunion : le nom d'un intervenant, un chiffre clé, un point à aborder ou un bref rappel.
· Traduction en direct : une ou deux lignes de discours traduit plutôt qu'une page de transcription complète.
· Processus guidés : une instruction ou une étape de confirmation à la fois.
· Mises à jour de statut : état d'une machine, statut d'une livraison, avancement d'une tâche ou alerte courte.
· Indications de navigation : une direction, une distance ou une simple flèche plutôt qu'une carte détaillée.
· Rappels de connaissances : une réponse courte, un numéro de référence ou une note contextuelle.
Pourquoi un bon design d'affichage pour les G2 compte pour les entreprises
La valeur des G2 ne tient pas à la quantité d'informations que l'écran peut contenir, mais au peu d'attention qu'il exige. Un HUD court et bien structuré peut faire apparaître des informations utiles sans obliger les collaborateurs à interrompre ce qu'ils font pour ouvrir un téléphone ou un ordinateur portable. Pour les entreprises, cela peut favoriser des réunions plus concentrées, un accès plus rapide aux informations de statut et des processus étape par étape plus homogènes.
Les contraintes de design peuvent aussi aider les équipes à garder leurs applications personnalisées rigoureuses. Réutiliser un petit nombre de conteneurs, des contenus courts et des interactions prévisibles rend les interfaces plus faciles à prendre en main et réduit le risque de transformer les lunettes en une application surchargée de plus.
Conclusion
Concevoir pour l'écran des Even Realities G2 commence sur le téléphone, en associant et en mettant à jour les lunettes, puis se poursuit sur l'ordinateur : activer l'accès à Even Hub, installer Node.js et les outils Even Hub, créer un projet Vite et ouvrir src/main.ts, où le premier HUD vert de 576 x 288 est construit à partir d'un simple conteneur de texte. Prévisualisez la mise en page dans l'Even Hub Simulator, ajustez le contenu et l'espacement dans le même fichier, utilisez textContainerUpgrade lorsque seuls les mots changent, et scannez enfin le QR code de développement dans l'application Even Realities pour tester la mise en page sur de vraies G2. Les interfaces professionnelles les plus efficaces gardent chaque écran court, ciblé et compréhensible d'un coup d'œil, ce qui permet aux entreprises de faire apparaître des traductions, des rappels, des informations de statut ou des instructions de travail sans détourner sans cesse les collaborateurs de leur tâche physique ou de leur conversation pour consulter un autre écran.
Vous développez un processus personnalisé pour les Even G2 ? Commencez par un seul écran utile, testez-le dans le Simulator et sur les vraies lunettes, puis n'étendez l'interface que lorsque l'information suivante améliore clairement la tâche de l'utilisateur.
