Samenvatting
Het display van de Even Realities G2 is ontworpen voor korte informatie die snel te begrijpen is. Even Hub geeft ontwikkelaars per oog een canvas van 576 × 288 pixels in monochroom groen. De openbare SDK bouwt het scherm op uit tekst-, lijst- en afbeeldingscontainers, niet uit een vrij vormgegeven interface zoals op een telefoon. De effectiefste lay-outs gebruiken daarom korte tekst, duidelijke witruimte en steeds maar een paar elementen tegelijk.
Het ontwikkelproces is het makkelijkst te begrijpen als één doorlopende reeks: koppel de G2 in de telefoonapp van Even Realities, log op een computer met hetzelfde account in bij Even Hub, installeer de ontwikkeltools, maak een project aan, open src/main.ts, bouw één tekstcontainer, bekijk die in de Simulator en scan daarna een QR-code in de telefoonapp om dezelfde lay-out op de echte bril te testen. Het doel is niet om zoveel mogelijk informatie op het display te krijgen, maar om de drager één nuttig stuk informatie te geven zonder de aandacht van de echte wereld af te leiden.
Wat is het display van de Even Realities G2?
Even Realities G2 zijn lichtgewicht smart glasses met een binoculair micro-LED-waveguidedisplay. Voor Even Hub-plugins fungeert de bril vooral als display en invoeroppervlak: de plugin draait via de gekoppelde telefoon, terwijl de G2 de content toont en invoer via de touchpad of de optionele R1-ring terugstuurt naar de app.
Het ontwikkelaarscanvas meet 576 × 288 pixels per oog en wordt in groen weergegeven met 16 helderheidsniveaus. Niet-verlichte delen blijven transparant, zodat de drager de echte wereld achter de informatie blijft zien. Daardoor is de G2 beter geschikt voor prompts, vertalingen, statusupdates en korte instructies dan voor volle pagina's of uitgebreide interfaces zoals op een telefoon.
Zo ontwerpt u vanaf nul uw eerste display voor de Even G2
Stap 1: stel de G2 in via de telefoonapp van Even Realities
Begin op de telefoon. Zo maakt u het account aan dat u ook op de computer gebruikt en zorgt u dat de bril klaar is voor gebruik.
1. Open de Even Realities App. Maak een account aan of log in via de telefoonapp.
2. Koppel de G2. Open Devices > Add device > Even G2 en volg de koppelinstructies.
3. Werk de firmware bij. Accepteer een firmware-update die na het koppelen wordt aangeboden, of controleer Devices > Firmware.
Stap 2: schakel ontwikkelaarstoegang in op de computer
Ga nu naar de computer, maar houd de telefoon bij de hand. Gebruik op beide apparaten hetzelfde account.
1. Open Even Hub. Ga in een browser op de computer naar hub.evenrealities.com/login.
2. Log in met hetzelfde account. Gebruik het e-mailadres en wachtwoord van de telefoonapp.
3. Ga terug naar de telefoon. Sluit de Even Realities App geforceerd af en open de app opnieuw.
4. Zoek het ontwikkelaarsgedeelte. Open het tabblad Even Hub in de telefoonapp. Rechtsboven hoort nu het ontwikkelaarsgedeelte te verschijnen, inclusief Scan QR.
Stap 3: installeer Node.js en de Even Hub-tools
Blijf op de computer. Node.js is software waarmee Even Hub op uw computer kan draaien. Het moet geïnstalleerd zijn voordat de command-line-tools van Even Hub werken.
1. Installeer Node.js. Even Hub vereist momenteel Node 20 LTS of Node 22 of nieuwer.
2. Open de app Terminal of PowerShell. Gebruik Terminal op macOS of PowerShell/Terminal op Windows.
3. Controleer Node.js. Typ de onderstaande opdracht en druk op Enter. Ziet u een versie zoals v20.x of v22.x, dan is alles klaar.
node -v
4. Installeer de Even Hub-tools. Voer in hetzelfde venster in:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Stap 4: maak het G2-project aan
De computer is nu voorbereid. Maak één nieuwe projectmap aan en voeg daarin de Even Hub SDK toe.
1. Maak het project aan in Terminal. Voer deze opdrachten regel voor regel in:
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 biedt ook kant-en-klare templates: met npx degit even-realities/evenhub-templates/minimal g2-display-demo krijgt u een project waarin de SDK en app.json al klaarstaan
2. Maak app.json af. Vite heeft het project aangemaakt, de SDK is erin geïnstalleerd en evenhub init heeft app.json aangemaakt. Open app.json en stel package_id in (in reverse-domain-notatie, bijvoorbeeld com.yourcompany.g2demo), name (maximaal 20 tekens; het woord Even mag er niet in voorkomen) en min_sdk_version op de SDK-versie die u hebt geïnstalleerd (die ziet u met npm list @evenrealities/even_hub_sdk). Voeg een grijswaardenpictogram van 24 × 24 toe als public/icon.png.
Stap 5: open het project en zoek het displaybestand
Het project bestaat, maar het display is nog niet ontworpen. Open de map in een code-editor.
1. Open Visual Studio Code of een andere code-editor. Visual Studio Code is een veelgebruikte keuze.
2. Open de projectmap. Kies File > Open Folder en selecteer g2-display-demo.
3. Open het hoofdbestand. Open in het Explorer-paneel links src > main.ts.
Dit is de belangrijkste plek: in src/main.ts voert u in de volgende stap de eerste displaycode voor de G2 in.
Stap 6: bouw één eenvoudige tekstcontainer
Begin met één container. Zo controleert u of het project en het display werken voordat u meer lay-outelementen toevoegt.
1. Vervang de startercode in src/main.ts. Verwijder de standaard democode van Vite en plak de onderstaande code. Voeg daarna aan het einde de volgende regels toe, zodat de drager de app met een dubbele druk kan verlaten. De indieningsregels van Even vereisen dit op het eerste scherm, en de reviewers controleren erop:
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. Sla main.ts op. Gebruik File > Save of Ctrl+S / Cmd+S.
- xPosition / yPosition: Waar de container begint op het canvas van 576 × 288.
- width / height: Hoeveel displayruimte de container krijgt.
- paddingLength: Ruimte tussen de rand van de container en de tekst.
- content: De woorden die de drager ziet.
- containerID / containerName: De identiteit waarmee u later dezelfde container bijwerkt.
- isEventCapture: 1: Markeert dit als de enige container die de belangrijkste aanraak- en veegevents ontvangt.
Stap 7: bekijk het display in de Even Hub Simulator
De code is opgeslagen. Bekijk het resultaat op de computer voordat u het naar de echte bril stuurt.
1. Ga terug naar Terminal. Controleer of u nog in de map g2-display-demo zit.
2. Start het project. Voer in:
npm run dev
3. Laat deze Terminal draaien. Vite toont normaal gesproken een adres zoals http://localhost:5173.
4. Open een tweede Terminal-venster. Start de Simulator met hetzelfde lokale adres:
evenhub-simulator http://localhost:5173
5. Controleer de Simulator. U ziet MACHINE 04, Ready en > Continue binnen de preview van 576 × 288.
Stap 8: pas de lay-out aan in hetzelfde bestand src/main.ts
Open geen nieuw programma of nieuwe sectie. Ga terug naar het bestand dat u in stap 6 al gebruikte.
1. Ga terug naar Visual Studio Code > src > main.ts. Laat de Simulator en de ontwikkelserver draaien.
2. Pas eerst de content aan. Vervang de voorbeeldwoorden in content door de echte informatie voor uw toepassing.
3. Pas de witruimte alleen aan als dat nodig is. Wijzig xPosition, yPosition, width, height of paddingLength, sla op en kijk opnieuw in de Simulator.
4. Voeg alleen een extra container toe als dat de duidelijkheid verbetert. Zet u een kop, hoofdboodschap of status apart, geef dan elke container een unieke containerID en containerName (maximaal 16 tekens), voeg hem toe aan textObject en verhoog containerTotalNum overeenkomstig. Een pagina bevat maximaal 8 tekst- of lijstcontainers plus 4 afbeeldingscontainers.
Voeg geen ontwerpelementen in telefoonstijl toe: de G2 biedt geen gewone lettergrootte-instellingen, vette typografie, gekleurde kaarten of willekeurige achtergrondvullingen. Gebruik in plaats daarvan positie, witruimte, randen en de ondersteunde helderheidsniveaus.
Stap 9: werk veranderende tekst bij zonder de pagina opnieuw op te bouwen
Blijft de container op dezelfde plek en veranderen alleen de woorden? Werk dan de bestaande container bij.
1. Blijf in src/main.ts. Voeg bovenaan het bestand, waar de tools van de Even Hub SDK worden geïmporteerd, TextContainerUpgrade toe.
2. Gebruik dezelfde container-ID en naam. Bijvoorbeeld:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Gebruik dit alleen voor wijzigingen in de content. Verandert het aantal, de positie of de grootte van containers, bouw de pagina dan opnieuw op. Even Realities documenteert textContainerUpgrade als de snellere optie zonder flikkering voor updates die alleen de tekst betreffen.
Stap 10: test dezelfde lay-out op de echte G2
De Simulator controleert de structuur, maar het uiteindelijke ontwerp moet u beoordelen door de echte optiek.
1. Maak de ontwikkelserver bereikbaar vanaf de telefoon. Vite luistert standaard alleen op localhost, dus de telefoon kan de server pas bereiken als u Vite instelt om externe verbindingen te accepteren. Maak in de projectmap een vite.config.ts aan (of voeg het server-blok toe aan uw bestaande bestand) met de instellingen die Even documenteert. Start daarna npm run dev opnieuw en laat het draaien:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Vervang door uw eigen lokale IP-adres
},
},
})
2. Zoek het lokale netwerk-IP-adres van de computer. Gebruik in Windows PowerShell ipconfig en zoek het IPv4-adres. Gebruik op macOS ipconfig getifaddr en0 voor Wi-Fi.
3. Genereer de QR-code. Vervang <YOUR-IP> door het lokale adres:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Ga naar de telefoon. Open Even Realities App > tabblad Even Hub > ontwikkelaarsgedeelte > Scan QR.
5. Scan de QR-code die op de computer wordt getoond. De telefoon laadt het lokale project en stuurt het door naar de gekoppelde G2.
6. Kijk door de bril. Controleer of de hoofdboodschap makkelijk te vinden en te begrijpen is terwijl u naar de echte omgeving kijkt.
Netwerkopmerking: de telefoon en de computer moeten elkaar kunnen bereiken. Een zakelijk Wi-Fi-netwerk, AP/client-isolatie of een firewall kan lokaal testen via QR blokkeren.
Praktische lay-outregels voor het kleine groene display
Eén doel per scherm:
- Wel: Toon één status, instructie, prompt of kleine keuze.
- Vermijd: Een dashboard, instructies en navigatie op één pagina combineren.
Houd tekst kort:
- Wel: Gebruik een paar compacte regels.
- Vermijd: De technische tekstlimiet als ontwerpdoel gebruiken.
Gebruik witruimte voor hiërarchie:
- Wel: Scheid titel, hoofdinformatie en actie met lege ruimte.
- Vermijd: Hiërarchie proberen aan te brengen met niet-ondersteunde wijzigingen in lettergrootte.
Zet containers bewust in:
- Wel: Voeg alleen een container toe als die de informatie een duidelijke rol geeft.
- Vermijd: Containers toevoegen alleen omdat de pagina er maximaal 12 toestaat.
Ontwerp voor transparantie:
- Wel: Bedenk dat niet-verlichte delen de echte wereld achter de HUD laten zien.
- Vermijd: Het canvas behandelen als een ondoorzichtig telefoonscherm.
Gebruik afbeeldingen met zorg:
- Wel: Gebruik eenvoudige pictogrammen met hoog contrast of compacte visuele aanwijzingen.
- Vermijd: Gedetailleerde foto's of graphics die nauwkeurig bekeken moeten worden.
Test op de hardware:
- Wel: Gebruik de Simulator voor snelheid en controleer daarna op de echte G2.
- Vermijd: Het definitieve ontwerp alleen op basis van de desktoppreview goedkeuren.
Welke zakelijke informatie past bij dit display?
De G2 komt het best tot zijn recht wanneer de drager een kleine hoeveelheid informatie nodig heeft zonder de huidige taak of het gesprek te onderbreken.
· Vergaderprompts: de naam van een spreker, één kerncijfer, een gesprekspunt of een korte herinnering.
· Live vertaling: één of twee regels vertaalde spraak in plaats van een volledige transcriptiepagina.
· Begeleide werkprocessen: één instructie of bevestigingsstap tegelijk.
· Statusupdates: machinestatus, leveringsstatus, voortgang van een taak of een korte melding.
· Navigatieaanwijzingen: een richting, afstand of eenvoudige pijl in plaats van een gedetailleerde kaart.
· Kennisprompts: een kort antwoord, referentienummer of contextuele notitie.
Waarom goed displayontwerp voor de G2 belangrijk is voor bedrijven
De waarde van de G2 zit niet in hoeveel informatie er op het display past, maar in hoe weinig aandacht het display vraagt. Een korte, goed gestructureerde HUD kan nuttige informatie tonen zonder dat medewerkers hun werk hoeven te onderbreken om een telefoon of laptop te openen. Voor bedrijven kan dat bijdragen aan gerichtere vergaderingen, snellere toegang tot statusinformatie en consistentere stapsgewijze werkprocessen.
De ontwerpbeperkingen kunnen teams ook helpen om maatwerkapplicaties gedisciplineerd te houden. Door een klein aantal containers, korte content en voorspelbare interacties te hergebruiken, zijn interfaces makkelijker te leren en is er minder risico dat de bril een zoveelste overvolle applicatie wordt.
Conclusie
Ontwerpen voor het display van de Even Realities G2 begint op de telefoon met het koppelen en bijwerken van de bril. Daarna gaat u naar de computer om toegang tot Even Hub in te schakelen, Node.js en de Even Hub-tools te installeren, een Vite-project aan te maken en src/main.ts te openen, waar u de eerste groene HUD van 576 × 288 opbouwt uit een eenvoudige tekstcontainer. Bekijk de lay-out in de Even Hub Simulator, pas content en witruimte aan in hetzelfde bestand, gebruik textContainerUpgrade als alleen de woorden veranderen en scan tot slot de ontwikkel-QR-code in de Even Realities App om de lay-out op de echte G2 te testen. De sterkste zakelijke interfaces houden elk scherm kort, gericht en in één oogopslag te begrijpen. Zo kunnen bedrijven vertalingen, prompts, statusinformatie of werkinstructies tonen zonder medewerkers steeds weg te halen bij hun fysieke taak of gesprek om op een ander scherm te kijken.
Bouwt u een eigen workflow voor de Even G2? Begin met één nuttig scherm, test het in de Simulator en op de echte bril, en breid pas uit wanneer de volgende informatie de taak van de drager duidelijk verbetert.
