Resumé
Skærmen i Even Realities G2 er designet til korte oplysninger, der hurtigt kan forstås. Even Hub giver udviklere et lærred på 576 x 288 pixels pr. øje i monokrom grøn, og det offentlige SDK opbygger skærmbilledet af tekst-, liste- og billedcontainere i stedet for en fritformet brugerflade som på en telefon. De mest effektive layouts bruger derfor kort tekst, tydelig luft og kun få elementer ad gangen.
Udviklingsforløbet er lettest at forstå som én sammenhængende rækkefølge: Par G2 i Even Realities-telefonappen, log ind på Even Hub på en computer med den samme konto, installer udviklingsværktøjerne, opret et projekt, åbn src/main.ts, byg én tekstcontainer, forhåndsvis den i Simulator, og scan derefter en QR-kode i telefonappen for at teste det samme layout på de rigtige briller. Målet er ikke at få så mange oplysninger som muligt ind på skærmen, men at give brugeren én nyttig oplysning uden at trække opmærksomheden væk fra den virkelige verden.
Hvad er Even Realities G2-skærmen?
Even Realities G2 er et par lette smarte briller med en binokulær micro-LED-bølgelederskærm. For Even Hub-plugins fungerer brillerne primært som skærm og inputflade: Pluginet kører via den tilsluttede telefon, mens G2 viser indholdet og sender input fra touchpladen eller den valgfri R1-ring tilbage til appen.
Udviklerlærredet er 576 x 288 pixels pr. øje og vises i grønt med 16 lysstyrkeniveauer. Uoplyste områder forbliver gennemsigtige, så brugeren fortsat ser den virkelige verden bag informationerne. Det gør G2 bedre egnet til prompter, oversættelser, statusopdateringer og korte instruktioner end til tætpakkede sider eller rige brugerflader som på en telefon.
Sådan designer du din første Even G2-skærm fra bunden
Trin 1: Konfigurer G2 i Even Realities-telefonappen
Start på telefonen. Her opretter du den konto, som du også skal bruge på computeren, og sikrer dig, at brillerne er klar.
1. Åbn Even Realities App. Opret en konto, eller log ind i telefonappen.
2. Par G2. Åbn Devices > Add device > Even G2, og følg vejledningen til parring.
3. Opdater firmwaren. Accepter enhver firmwareopdatering, der tilbydes efter parringen, eller tjek Devices > Firmware.
Trin 2: Aktivér udvikleradgang på computeren
Gå nu over til computeren, men hav telefonen i nærheden. Brug den samme konto på begge enheder.
1. Åbn Even Hub. Gå til hub.evenrealities.com/login i en browser på computeren.
2. Log ind med den samme konto. Brug e-mailadressen og adgangskoden fra telefonappen.
3. Gå tilbage til telefonen. Tvangsluk Even Realities App, og åbn den igen.
4. Find udviklersektionen. Åbn fanen Even Hub i telefonappen. Udviklersektionen bør nu vises øverst til højre, herunder Scan QR.
Trin 3: Installer Node.js og Even Hub-værktøjerne
Bliv ved computeren. Node.js er software, der gør det muligt at køre Even Hub på din computer. Det skal være installeret, før Even Hubs kommandolinjeværktøjer kan køre.
1. Installer Node.js. Even Hub kræver i øjeblikket Node 20 LTS eller Node 22 eller nyere versioner.
2. Åbn appen Terminal eller PowerShell. Brug Terminal på macOS eller PowerShell/Terminal på Windows.
3. Tjek Node.js. Skriv kommandoen nedenfor, og tryk på Enter. Hvis der vises en version som v20.x eller v22.x, er det klar.
node -v
4. Installer Even Hub-værktøjerne. Indtast følgende i det samme vindue:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Trin 4: Opret G2-projektet
Computeren er nu klar. Opret én ny projektmappe, og tilføj Even Hub SDK i den.
1. Opret projektet i Terminal. Indtast disse kommandoer én linje ad gangen:
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 tilbyder også færdige skabeloner: npx degit even-realities/evenhub-templates/minimal g2-display-demo giver dig et projekt, hvor SDK'et og app.json allerede er på plads
2. Færdiggør app.json. Vite oprettede projektet, SDK'et blev installeret i det, og evenhub init oprettede app.json. Åbn app.json, og angiv package_id (i omvendt domæneformat, for eksempel com.yourcompany.g2demo), name (op til 20 tegn, og det må ikke indeholde ordet Even) og min_sdk_version som den SDK-version, du har installeret (npm list @evenrealities/even_hub_sdk viser den). Tilføj et ikon i gråtoner på 24 x 24 som public/icon.png.
Trin 5: Åbn projektet, og find skærmfilen
Projektet findes nu, men skærmen er endnu ikke designet. Åbn mappen i en kodeeditor.
1. Åbn Visual Studio Code eller en anden kodeeditor. Visual Studio Code er et udbredt valg.
2. Åbn projektmappen. Vælg File > Open Folder, og vælg g2-display-demo.
3. Åbn hovedfilen. Åbn src > main.ts i Explorer-panelet til venstre.
Dette er det vigtigste sted: Det er i src/main.ts, at den første G2-skærmkode i næste trin skal indtastes.
Trin 6: Byg én enkel tekstcontainer
Start med én container. Det bekræfter, at projektet og skærmen fungerer, før du tilføjer flere layoutelementer.
1. Erstat startkoden i src/main.ts. Slet Vites standarddemokode, indsæt koden nedenfor, og tilføj derefter disse linjer til sidst, så brugeren kan forlade appen med et dobbelttryk. Evens indsendelsesregler kræver dette på det første skærmbillede, og deres reviewere tjekker for det:
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. Gem main.ts. Brug File > Save eller Ctrl+S / Cmd+S.
- xPosition / yPosition: Hvor containeren starter på lærredet på 576 x 288.
- width / height: Hvor meget skærmplads containeren får.
- paddingLength: Afstanden mellem containerens kant og teksten.
- content: De ord, brugeren ser.
- containerID / containerName: Den identitet, der bruges til senere at opdatere den samme container.
- isEventCapture: 1: Markerer dette som den ene container, der modtager de primære berørings- og swipe-hændelser.
Trin 7: Forhåndsvis skærmen i Even Hub Simulator
Koden er gemt. Forhåndsvis den på computeren, før du sender den til de rigtige briller.
1. Gå tilbage til Terminal. Sørg for, at den stadig står i mappen g2-display-demo.
2. Start projektet. Indtast:
npm run dev
3. Lad den Terminal køre. Vite viser normalt en adresse som http://localhost:5173.
4. Åbn et ekstra Terminal-vindue. Start Simulator med den samme lokale adresse:
evenhub-simulator http://localhost:5173
5. Tjek Simulator. Du bør se MACHINE 04, Ready og > Continue i forhåndsvisningen på 576 x 288.
Trin 8: Juster layoutet i den samme src/main.ts-fil
Åbn ikke et nyt program eller en ny sektion. Gå tilbage til den fil, du allerede brugte i trin 6.
1. Gå tilbage til Visual Studio Code > src > main.ts. Lad Simulator og udviklingsserveren køre.
2. Ændr indholdet først. Erstat eksempelordene i content med de rigtige oplysninger til dit anvendelsestilfælde.
3. Juster kun afstande, hvis det er nødvendigt. Ændr xPosition, yPosition, width, height eller paddingLength, gem, og se på Simulator igen.
4. Tilføj kun endnu en container, hvis det gør tingene tydeligere. Hvis du adskiller en overskrift, en hovedbesked eller en status, skal hver container have et unikt containerID og containerName (højst 16 tegn) og tilføjes til textObject, og containerTotalNum skal hæves tilsvarende. En side kan rumme op til 8 tekst- eller listecontainere plus 4 billedcontainere.
Tilføj ikke designelementer som på en telefon: G2 understøtter ikke almindelig skriftstørrelse, fed typografi, farvede kort eller vilkårlig baggrundsudfyldning. Brug i stedet placering, afstand, kanter og de understøttede lysstyrkeniveauer.
Trin 9: Opdater skiftende tekst uden at genopbygge siden
Hvis containeren bliver det samme sted, og kun ordene ændrer sig, skal du opdatere den eksisterende container.
1. Bliv i src/main.ts. Tilføj TextContainerUpgrade øverst i filen, hvor Even Hub SDK-værktøjerne importeres.
2. Brug samme container-ID og navn. For eksempel:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Brug kun dette til ændringer i indholdet. Hvis antallet, placeringen eller størrelsen af containerne ændres, skal du i stedet genopbygge siden. Even Realities dokumenterer textContainerUpgrade som den hurtigere, flimmerfri løsning til opdateringer, der kun omfatter tekst.
Trin 10: Test det samme layout på den rigtige G2
Simulator kontrollerer strukturen, men det endelige design bør vurderes gennem den rigtige optik.
1. Gør udviklingsserveren tilgængelig fra telefonen. Vite lytter som standard kun på localhost, så telefonen kan ikke nå den, før du beder den om at acceptere eksterne forbindelser. Opret en vite.config.ts i projektmappen (eller tilføj server-blokken til den, du har) med de indstillinger, Even dokumenterer, og genstart derefter npm run dev, og lad den køre:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Erstat med din faktiske lokale IP-adresse
},
},
})
2. Find computerens lokale netværks-IP. I Windows PowerShell skal du bruge ipconfig og finde IPv4-adressen. På macOS skal du bruge ipconfig getifaddr en0 for Wi-Fi.
3. Generer QR-koden. Erstat <YOUR-IP> med den lokale adresse:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Gå over til telefonen. Åbn Even Realities App > fanen Even Hub > udviklersektionen > Scan QR.
5. Scan QR-koden, der vises på computeren. Telefonen indlæser det lokale projekt og videresender det til den parrede G2.
6. Se gennem brillerne. Tjek, at hovedbeskeden er let at finde og forstå, mens du ser på de virkelige omgivelser.
Netværksbemærkning: Telefonen og computeren skal kunne nå hinanden. Virksomheds-Wi-Fi, AP-/klientisolering eller en firewall kan blokere lokal QR-test.
Praktiske layoutregler for den lille grønne skærm
Ét formål pr. skærmbillede:
- Gør: Vis én status, instruktion, prompt eller et lille valg.
- Undgå: At kombinere et dashboard, instruktioner og navigation på én side.
Hold teksten kort:
- Gør: Brug nogle få kompakte linjer.
- Undgå: At bruge den tekniske tekstgrænse som designmål.
Brug afstand til hierarki:
- Gør: Adskil titel, hovedinformation og handling med tom plads.
- Undgå: At forsøge at skabe hierarki med ændringer i skriftstørrelse, som ikke understøttes.
Brug containere bevidst:
- Gør: Tilføj kun en container, når den giver informationen en klar rolle.
- Undgå: At tilføje containere, blot fordi siden tillader op til 12.
Design med gennemsigtighed for øje:
- Gør: Husk, at uoplyste områder viser den virkelige verden bag HUD'et.
- Undgå: At behandle lærredet som en uigennemsigtig telefonskærm.
Brug billeder med omtanke:
- Gør: Brug enkle ikoner med høj kontrast eller kompakte visuelle signaler.
- Undgå: Detaljerede fotos eller grafik, der kræver nærmere granskning.
Test på hardwaren:
- Gør: Brug Simulator for hastighedens skyld, og verificer derefter på den rigtige G2.
- Undgå: At godkende det endelige design alene ud fra forhåndsvisningen på computeren.
Hvilke forretningsoplysninger passer til denne skærm?
G2 står stærkest, når brugeren har brug for en lille mængde information uden at forlade den aktuelle opgave eller samtale.
· Mødeprompter: et talernavn, et enkelt nøgletal, et samtalepunkt eller en kort påmindelse.
· Liveoversættelse: en eller to linjer oversat tale i stedet for en hel side med transskription.
· Guidede arbejdsgange: ét instruktions- eller bekræftelsestrin ad gangen.
· Statusopdateringer: maskinstatus, leveringsstatus, opgavefremskridt eller en kort advarsel.
· Navigationssignaler: en retning, en afstand eller en enkel pil i stedet for et detaljeret kort.
· Videnprompter: et kort svar, et referencenummer eller en kontekstuel note.
Hvorfor godt G2-skærmdesign er vigtigt for virksomheder
Værdien af G2 ligger ikke i, hvor meget information der kan være på skærmen, men i, hvor lidt opmærksomhed skærmen behøver at tage. Et kort, velstruktureret HUD kan vise nyttig information uden at bede medarbejderne om at stoppe det, de er i gang med, og åbne en telefon eller bærbar computer. For virksomheder kan det understøtte mere fokuserede møder, hurtigere adgang til statusinformation og mere ensartede trin-for-trin-arbejdsgange.
Designbegrænsningerne kan også hjælpe teams med at holde specialudviklede applikationer disciplinerede. Når man genbruger et lille antal containere, kort indhold og forudsigelige interaktioner, bliver brugerfladerne lettere at lære, og risikoen for at gøre brillerne til endnu en overfyldt applikation mindskes.
Konklusion
Design til skærmen i Even Realities G2 begynder på telefonen med at parre og opdatere brillerne og fortsætter derefter på computeren, hvor du aktiverer adgang til Even Hub, installerer Node.js og Even Hub-værktøjerne, opretter et Vite-projekt og åbner src/main.ts, hvor det første grønne HUD på 576 x 288 bygges ud fra en enkel tekstcontainer. Forhåndsvis layoutet i Even Hub Simulator, juster indhold og afstande i den samme fil, brug textContainerUpgrade, når kun ordene ændres, og scan til sidst udviklings-QR-koden i Even Realities App for at teste layoutet på den rigtige G2. De stærkeste forretningsbrugerflader holder hvert skærmbillede kort, fokuseret og let at forstå med et hurtigt blik, så virksomheder kan vise oversættelser, prompter, statusinformation eller arbejdsinstruktioner uden gentagne gange at trække medarbejderne væk fra den fysiske opgave eller samtale for at tjekke en anden skærm.
Bygger du en specialtilpasset Even G2-arbejdsgang? Start med ét nyttigt skærmbillede, test det i Simulator og på de rigtige briller, og udvid først, når den næste oplysning tydeligt forbedrer brugerens opgave.
