Zusammenfassung
Das Display der Even Realities G2 ist für kurze Informationen ausgelegt, die sich schnell erfassen lassen. Even Hub stellt Entwicklern eine monochrom grüne Arbeitsfläche von 576 x 288 Pixeln pro Auge zur Verfügung, und das öffentliche SDK baut den Bildschirm aus Text-, Listen- und Bildcontainern auf – nicht aus einer frei gestaltbaren Oberfläche wie auf dem Smartphone. Am wirkungsvollsten sind daher Layouts mit kurzen Texten, klaren Abständen und nur wenigen Elementen gleichzeitig.
Der Entwicklungsablauf lässt sich am einfachsten als durchgehende Abfolge verstehen: Koppeln Sie die G2 in der Even Realities Smartphone-App, melden Sie sich am Computer mit demselben Konto bei Even Hub an, installieren Sie die Entwicklungswerkzeuge, legen Sie ein Projekt an, öffnen Sie src/main.ts, erstellen Sie einen Textcontainer, prüfen Sie ihn in der Vorschau des Simulators und scannen Sie anschließend in der Smartphone-App einen QR-Code, um dasselbe Layout auf der echten Brille zu testen. Ziel ist nicht, so viele Informationen wie möglich auf dem Display unterzubringen, sondern der Trägerin oder dem Träger eine nützliche Information zu liefern, ohne die Aufmerksamkeit von der realen Umgebung abzuziehen.
Was ist das Display der Even Realities G2?
Even Realities G2 ist eine leichte Smart Glasses mit binokularem Micro-LED-Waveguide-Display. Für Even-Hub-Plugins dient die Brille vor allem als Anzeige- und Eingabefläche: Das Plugin läuft über das verbundene Smartphone, während die G2 die Inhalte anzeigt und Eingaben über das Touchpad oder den optionalen R1-Ring an die App zurücksendet.
Die Entwickler-Arbeitsfläche umfasst 576 x 288 Pixel pro Auge und wird in Grün mit 16 Helligkeitsstufen dargestellt. Nicht beleuchtete Bereiche bleiben transparent, sodass die Trägerin oder der Träger die reale Umgebung hinter den Informationen weiterhin sieht. Deshalb eignet sich die G2 besser für Hinweise, Übersetzungen, Statusmeldungen und kurze Anweisungen als für dichte Seiten oder aufwendige Oberflächen im Smartphone-Stil.
So gestalten Sie Ihr erstes Even-G2-Display von Grund auf
Schritt 1: Die G2 in der Even Realities Smartphone-App einrichten
Beginnen Sie auf dem Smartphone. Dabei legen Sie das Konto an, das Sie auch am Computer verwenden, und stellen sicher, dass die Brille einsatzbereit ist.
1. Öffnen Sie die Even Realities App. Erstellen Sie ein Konto oder melden Sie sich in der Smartphone-App an.
2. Koppeln Sie die G2. Öffnen Sie Devices > Add device > Even G2 und folgen Sie den Anweisungen zur Kopplung.
3. Aktualisieren Sie die Firmware. Bestätigen Sie ein nach der Kopplung angebotenes Firmware-Update oder prüfen Sie Devices > Firmware.
Schritt 2: Entwicklerzugang am Computer aktivieren
Wechseln Sie nun an den Computer, behalten Sie das Smartphone aber in der Nähe. Verwenden Sie auf beiden Geräten dasselbe Konto.
1. Öffnen Sie Even Hub. Rufen Sie in einem Browser am Computer hub.evenrealities.com/login auf.
2. Melden Sie sich mit demselben Konto an. Verwenden Sie die E-Mail-Adresse und das Passwort aus der Smartphone-App.
3. Kehren Sie zum Smartphone zurück. Beenden Sie die Even Realities App vollständig und öffnen Sie sie dann erneut.
4. Suchen Sie den Entwicklerbereich. Öffnen Sie in der Smartphone-App den Tab Even Hub. Der Entwicklerbereich sollte nun oben rechts erscheinen, einschließlich Scan QR.
Schritt 3: Node.js und die Even-Hub-Tools installieren
Bleiben Sie am Computer. Node.js ist eine Software, mit der Even Hub auf Ihrem Computer laufen kann. Sie muss installiert sein, bevor die Kommandozeilen-Tools von Even Hub ausgeführt werden können.
1. Installieren Sie Node.js. Even Hub setzt derzeit Node 20 LTS oder Node 22 bzw. neuere Versionen voraus.
2. Öffnen Sie Terminal oder die PowerShell-App. Verwenden Sie Terminal unter macOS oder PowerShell/Terminal unter Windows.
3. Prüfen Sie Node.js. Geben Sie den folgenden Befehl ein und drücken Sie die Eingabetaste. Wird eine Version wie v20.x oder v22.x angezeigt, ist alles bereit.
node -v
4. Installieren Sie die Even-Hub-Tools. Geben Sie im selben Fenster Folgendes ein:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Schritt 4: Das G2-Projekt anlegen
Der Computer ist jetzt vorbereitet. Legen Sie einen neuen Projektordner an und fügen Sie darin das Even Hub SDK hinzu.
1. Legen Sie das Projekt im Terminal an. Geben Sie diese Befehle Zeile für Zeile ein:
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 bietet auch fertige Vorlagen an: Mit npx degit even-realities/evenhub-templates/minimal g2-display-demo erhalten Sie ein Projekt, in dem das SDK und app.json bereits vorhanden sind
2. Vervollständigen Sie app.json. Vite hat das Projekt erstellt, das SDK wurde darin installiert, und evenhub init hat app.json angelegt. Öffnen Sie app.json und legen Sie package_id (in umgekehrter Domain-Schreibweise, zum Beispiel com.yourcompany.g2demo), name (bis zu 20 Zeichen; das Wort Even darf nicht enthalten sein) und min_sdk_version auf die installierte SDK-Version fest (npm list @evenrealities/even_hub_sdk zeigt sie an). Fügen Sie ein Graustufen-Icon mit 24 x 24 Pixeln als public/icon.png hinzu.
Schritt 5: Das Projekt öffnen und die Display-Datei finden
Das Projekt existiert, aber das Display ist noch nicht gestaltet. Öffnen Sie den Ordner in einem Code-Editor.
1. Öffnen Sie Visual Studio Code oder einen anderen Code-Editor. Visual Studio Code ist eine gängige Wahl.
2. Öffnen Sie den Projektordner. Wählen Sie File > Open Folder und wählen Sie g2-display-demo aus.
3. Öffnen Sie die Hauptdatei. Öffnen Sie im Explorer-Bereich links src > main.ts.
Das ist die entscheidende Stelle: In src/main.ts wird im nächsten Schritt der erste G2-Display-Code eingegeben.
Schritt 6: Einen einfachen Textcontainer erstellen
Beginnen Sie mit einem einzigen Container. So stellen Sie sicher, dass Projekt und Display funktionieren, bevor Sie weitere Layout-Elemente hinzufügen.
1. Ersetzen Sie den Startcode in src/main.ts. Löschen Sie den Standard-Democode von Vite, fügen Sie den folgenden Code ein und ergänzen Sie am Ende diese Zeilen, damit die Trägerin oder der Träger die App mit einem Doppeldruck verlassen kann. Die Einreichungsregeln von Even schreiben dies für den ersten Bildschirm vor, und die Prüfer kontrollieren es:
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. Speichern Sie main.ts. Verwenden Sie File > Save oder Strg+S / Cmd+S.
- xPosition / yPosition: Wo der Container auf der 576 x 288 großen Arbeitsfläche beginnt.
- width / height: Wie viel Displayfläche der Container erhält.
- paddingLength: Abstand zwischen dem Rand des Containers und dem Text.
- content: Der Text, den die Trägerin oder der Träger sieht.
- containerID / containerName: Die Kennung, mit der genau dieser Container später aktualisiert wird.
- isEventCapture: 1: Kennzeichnet diesen Container als den einen, der die wichtigsten Tipp- und Wischereignisse empfängt.
Schritt 7: Das Display im Even Hub Simulator in der Vorschau ansehen
Der Code ist gespeichert. Sehen Sie ihn sich am Computer in der Vorschau an, bevor Sie ihn an die echte Brille senden.
1. Kehren Sie zum Terminal zurück. Stellen Sie sicher, dass es sich noch im Ordner g2-display-demo befindet.
2. Starten Sie das Projekt. Geben Sie Folgendes ein:
npm run dev
3. Lassen Sie dieses Terminal geöffnet. Vite zeigt normalerweise eine Adresse wie http://localhost:5173 an.
4. Öffnen Sie ein zweites Terminalfenster. Starten Sie den Simulator mit derselben lokalen Adresse:
evenhub-simulator http://localhost:5173
5. Prüfen Sie den Simulator. In der 576 x 288 großen Vorschau sollten MACHINE 04, Ready und > Continue zu sehen sein.
Schritt 8: Das Layout in derselben Datei src/main.ts anpassen
Öffnen Sie kein neues Programm und keinen neuen Bereich. Kehren Sie zu der Datei zurück, die Sie bereits in Schritt 6 verwendet haben.
1. Wechseln Sie zurück zu Visual Studio Code > src > main.ts. Lassen Sie den Simulator und den Entwicklungsserver weiterlaufen.
2. Ändern Sie zuerst den Inhalt. Ersetzen Sie die Beispieltexte in content durch die tatsächlichen Informationen für Ihren Anwendungsfall.
3. Passen Sie Abstände nur bei Bedarf an. Ändern Sie xPosition, yPosition, width, height oder paddingLength, speichern Sie und sehen Sie sich den Simulator erneut an.
4. Fügen Sie nur dann einen weiteren Container hinzu, wenn er die Übersichtlichkeit verbessert. Wenn Sie eine Überschrift, die Hauptnachricht oder einen Status abtrennen, geben Sie jedem Container eine eindeutige containerID und einen eindeutigen containerName (höchstens 16 Zeichen), fügen Sie ihn zu textObject hinzu und erhöhen Sie containerTotalNum entsprechend. Eine Seite kann bis zu 8 Text- oder Listencontainer sowie 4 Bildcontainer enthalten.
Verzichten Sie auf Gestaltungselemente im Smartphone-Stil: Die G2 bietet keine normale Schriftgrößenanpassung, keine fette Schrift, keine farbigen Karten und keine beliebigen Hintergrundfüllungen. Arbeiten Sie stattdessen mit Position, Abständen, Rahmen und den unterstützten Helligkeitsstufen.
Schritt 9: Wechselnden Text aktualisieren, ohne die Seite neu aufzubauen
Wenn der Container an derselben Stelle bleibt und sich nur der Text ändert, aktualisieren Sie den bestehenden Container.
1. Bleiben Sie in src/main.ts. Ergänzen Sie oben in der Datei, wo die Even-Hub-SDK-Tools importiert werden, TextContainerUpgrade.
2. Verwenden Sie dieselbe Container-ID und denselben Namen. Zum Beispiel:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Nutzen Sie dies nur für inhaltliche Änderungen. Ändern sich Anzahl, Position oder Größe der Container, bauen Sie die Seite stattdessen neu auf. Even Realities dokumentiert textContainerUpgrade als schnellere, flackerfreie Option für reine Textaktualisierungen.
Schritt 10: Dasselbe Layout auf der echten G2 testen
Der Simulator prüft die Struktur, das endgültige Design sollte jedoch durch die echte Optik beurteilt werden.
1. Machen Sie den Entwicklungsserver für das Smartphone erreichbar. Vite lauscht standardmäßig nur auf localhost, daher kann das Smartphone den Server erst erreichen, wenn Sie ihn so einstellen, dass er externe Verbindungen akzeptiert. Legen Sie im Projektordner eine vite.config.ts an (oder ergänzen Sie den server-Block in Ihrer vorhandenen Datei) – mit den von Even dokumentierten Einstellungen. Starten Sie dann npm run dev neu und lassen Sie es weiterlaufen:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Durch Ihre tatsächliche lokale IP-Adresse ersetzen
},
},
})
2. Ermitteln Sie die lokale Netzwerk-IP des Computers. Verwenden Sie unter Windows PowerShell ipconfig und suchen Sie die IPv4-Adresse. Verwenden Sie unter macOS ipconfig getifaddr en0 für WLAN.
3. Erzeugen Sie den QR-Code. Ersetzen Sie <YOUR-IP> durch die lokale Adresse:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Wechseln Sie zum Smartphone. Öffnen Sie Even Realities App > Tab Even Hub > Entwicklerbereich > Scan QR.
5. Scannen Sie den auf dem Computer angezeigten QR-Code. Das Smartphone lädt das lokale Projekt und leitet es an die gekoppelte G2 weiter.
6. Schauen Sie durch die Brille. Prüfen Sie, ob die Hauptnachricht leicht zu finden und verständlich ist, während Sie auf die reale Umgebung blicken.
Hinweis zum Netzwerk: Smartphone und Computer müssen sich gegenseitig erreichen können. Firmen-WLAN, AP-/Client-Isolation oder eine Firewall können lokale QR-Tests blockieren.
Praktische Layout-Regeln für das kleine grüne Display
Ein Zweck pro Bildschirm:
- Empfohlen: Zeigen Sie einen Status, eine Anweisung, einen Hinweis oder eine kleine Auswahl.
- Vermeiden: Dashboard, Anweisungen und Navigation auf einer Seite zu kombinieren.
Texte kurz halten:
- Empfohlen: Verwenden Sie wenige kompakte Zeilen.
- Vermeiden: Das technische Textlimit als Gestaltungsziel zu betrachten.
Hierarchie durch Abstände schaffen:
- Empfohlen: Trennen Sie Titel, Hauptinformation und Aktion durch Leerraum.
- Vermeiden: Hierarchie über nicht unterstützte Änderungen der Schriftgröße erzeugen zu wollen.
Container gezielt einsetzen:
- Empfohlen: Fügen Sie einen Container nur hinzu, wenn er einer Information eine klare Rolle gibt.
- Vermeiden: Container nur deshalb hinzuzufügen, weil die Seite bis zu 12 zulässt.
Auf Transparenz ausgelegt gestalten:
- Empfohlen: Denken Sie daran, dass nicht beleuchtete Bereiche die reale Umgebung hinter dem HUD zeigen.
- Vermeiden: Die Arbeitsfläche wie einen undurchsichtigen Smartphone-Bildschirm zu behandeln.
Bilder mit Bedacht einsetzen:
- Empfohlen: Verwenden Sie einfache, kontrastreiche Icons oder kompakte Hinweise.
- Vermeiden: Detaillierte Fotos oder Grafiken, die genaues Hinsehen erfordern.
Auf der Hardware testen:
- Empfohlen: Nutzen Sie den Simulator für schnelle Iterationen und prüfen Sie dann auf der echten G2.
- Vermeiden: Das endgültige Design allein anhand der Desktop-Vorschau freizugeben.
Welche Geschäftsinformationen passen auf dieses Display?
Ihre Stärken spielt die G2 aus, wenn die Trägerin oder der Träger eine kleine Menge an Informationen benötigt, ohne die aktuelle Aufgabe oder das Gespräch zu unterbrechen.
· Hinweise in Meetings: der Name einer sprechenden Person, eine zentrale Kennzahl, ein Gesprächspunkt oder eine kurze Erinnerung.
· Live-Übersetzung: eine oder zwei Zeilen übersetzter Sprache statt einer vollständigen Transkriptseite.
· Geführte Workflows: jeweils eine Anweisung oder ein Bestätigungsschritt.
· Statusmeldungen: Maschinenzustand, Lieferstatus, Aufgabenfortschritt oder eine kurze Warnung.
· Navigationshinweise: eine Richtung, eine Entfernung oder ein einfacher Pfeil statt einer detaillierten Karte.
· Wissenshinweise: eine kurze Antwort, eine Referenznummer oder eine kontextbezogene Notiz.
Warum gutes G2-Display-Design für Unternehmen wichtig ist
Der Wert der G2 liegt nicht darin, wie viele Informationen auf das Display passen, sondern darin, wie wenig Aufmerksamkeit das Display beansprucht. Ein kurzes, gut strukturiertes HUD kann nützliche Informationen bereitstellen, ohne dass Mitarbeitende ihre Tätigkeit unterbrechen und ein Smartphone oder einen Laptop öffnen müssen. Für Unternehmen kann das fokussiertere Meetings, einen schnelleren Zugriff auf Statusinformationen und einheitlichere Schritt-für-Schritt-Workflows unterstützen.
Die gestalterischen Einschränkungen können Teams außerdem helfen, individuelle Anwendungen diszipliniert zu halten. Wer wenige Container wiederverwendet, Inhalte kurz hält und auf vorhersehbare Interaktionen setzt, schafft Oberflächen, die leichter zu erlernen sind, und verringert das Risiko, dass die Brille zu einer weiteren überladenen Anwendung wird.
Fazit
Das Design für das Display der Even Realities G2 beginnt auf dem Smartphone mit dem Koppeln und Aktualisieren der Brille. Anschließend geht es am Computer weiter: Even-Hub-Zugang aktivieren, Node.js und die Even-Hub-Tools installieren, ein Vite-Projekt anlegen und src/main.ts öffnen, wo das erste grüne HUD mit 576 x 288 Pixeln aus einem einfachen Textcontainer entsteht. Sehen Sie sich das Layout im Even Hub Simulator in der Vorschau an, passen Sie Inhalt und Abstände in derselben Datei an, verwenden Sie textContainerUpgrade, wenn sich nur der Text ändert, und scannen Sie schließlich den Entwicklungs-QR-Code in der Even Realities App, um das Layout auf der echten G2 zu testen. Die überzeugendsten Business-Oberflächen halten jeden Bildschirm kurz, fokussiert und auf einen Blick verständlich. So können Unternehmen Übersetzungen, Hinweise, Statusinformationen oder Workflow-Anweisungen bereitstellen, ohne Mitarbeitende immer wieder von der physischen Aufgabe oder dem Gespräch wegzuholen, damit sie auf einen anderen Bildschirm schauen.
Sie entwickeln einen individuellen Workflow für die Even G2? Beginnen Sie mit einem nützlichen Bildschirm, testen Sie ihn im Simulator und auf der echten Brille und erweitern Sie ihn erst dann, wenn die nächste Information die Aufgabe der Trägerin oder des Trägers spürbar verbessert.
