Sammendrag
Skjermen på Even Realities G2 er laget for kort informasjon som kan forstås raskt. Even Hub gir utviklere et lerret på 576 x 288 piksler per øye i monokromt grønt, og det offentlige SDK-et bygger skjermbildet av tekst-, liste- og bildecontainere i stedet for et fritt utformet grensesnitt i telefonstil. De mest effektive oppsettene bruker derfor kort tekst, tydelig luft og bare noen få elementer om gangen.
Utviklingsflyten er lettest å forstå som én sammenhengende rekkefølge: par G2 i Even Realities-appen på telefonen, logg inn på Even Hub på en datamaskin med samme konto, installer utviklingsverktøyene, opprett et prosjekt, åpne src/main.ts, bygg én tekstcontainer, forhåndsvis den i simulatoren og skann deretter en QR-kode i telefonappen for å teste det samme oppsettet på de ekte brillene. Målet er ikke å få plass til mest mulig informasjon på skjermen, men å gi brukeren én nyttig opplysning uten å trekke oppmerksomheten bort fra den virkelige verden.
Hva er Even Realities G2-skjermen?
Even Realities G2 er et par lette smartbriller med en binokulær micro-LED-bølgelederskjerm. For Even Hub-plugins fungerer brillene hovedsakelig som skjerm og inndataflate: pluginen kjører via den tilkoblede telefonen, mens G2 viser innholdet og sender inndata fra styreflaten eller den valgfrie R1-ringen tilbake til appen.
Utviklerlerretet er 576 x 288 piksler per øye og vises i grønt med 16 lysstyrkenivåer. Områder som ikke lyser, forblir gjennomsiktige, slik at brukeren fortsatt ser den virkelige verden bak informasjonen. Dette gjør G2 bedre egnet til stikkord, oversettelser, statusoppdateringer og korte instruksjoner enn til tette sider eller rike grensesnitt i telefonstil.
Slik designer du din første Even G2-skjerm fra bunnen av
Trinn 1: Konfigurer G2 i Even Realities-appen på telefonen
Begynn på telefonen. Her oppretter du kontoen du også skal bruke på datamaskinen, og sørger for at brillene er klare.
1. Åpne Even Realities-appen. Opprett en konto eller logg inn i telefonappen.
2. Par G2. Åpne Devices > Add device > Even G2 og følg instruksjonene for paring.
3. Oppdater fastvaren. Godta eventuelle fastvareoppdateringer som tilbys etter paringen, eller sjekk Devices > Firmware.
Trinn 2: Aktiver utviklertilgang på datamaskinen
Gå nå over til datamaskinen, men ha telefonen i nærheten. Bruk samme konto på begge enhetene.
1. Åpne Even Hub. Gå til hub.evenrealities.com/login i en nettleser på datamaskinen.
2. Logg inn med samme konto. Bruk e-postadressen og passordet fra telefonappen.
3. Gå tilbake til telefonen. Tving Even Realities-appen til å avslutte, og åpne den deretter på nytt.
4. Finn utviklerdelen. Åpne Even Hub-fanen i telefonappen. Utviklerdelen skal nå vises øverst til høyre, inkludert Scan QR.
Trinn 3: Installer Node.js og Even Hub-verktøyene
Bli ved datamaskinen. Node.js er programvare som lar Even Hub kjøre på datamaskinen din. Det må være installert før Even Hubs kommandolinjeverktøy kan kjøre.
1. Installer Node.js. Even Hub krever for øyeblikket Node 20 LTS eller Node 22 eller nyere versjoner.
2. Åpne Terminal- eller PowerShell-appen. Bruk Terminal på macOS eller PowerShell/Terminal på Windows.
3. Sjekk Node.js. Skriv inn kommandoen nedenfor og trykk Enter. Ser du en versjon som v20.x eller v22.x, er alt klart.
node -v
4. Installer Even Hub-verktøyene. Skriv inn følgende i samme vindu:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Trinn 4: Opprett G2-prosjektet
Datamaskinen er nå klargjort. Opprett én ny prosjektmappe og legg til Even Hub SDK i den.
1. Opprett prosjektet i Terminal. Skriv inn disse kommandoene én linje om 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 tilbyr også ferdige maler: npx degit even-realities/evenhub-templates/minimal g2-display-demo gir deg et prosjekt der SDK-et og app.json allerede er på plass
2. Fullfør app.json. Vite opprettet prosjektet, SDK-et ble installert i det, og evenhub init opprettet app.json. Åpne app.json og angi package_id (i omvendt domeneformat, for eksempel com.yourcompany.g2demo), name (opptil 20 tegn, og navnet kan ikke inneholde ordet Even) og min_sdk_version til SDK-versjonen du installerte (npm list @evenrealities/even_hub_sdk viser den). Legg til et ikon i gråtoner på 24 x 24 som public/icon.png.
Trinn 5: Åpne prosjektet og finn skjermfilen
Prosjektet finnes, men skjermbildet er ikke designet ennå. Åpne mappen i en kodeeditor.
1. Åpne Visual Studio Code eller en annen kodeeditor. Visual Studio Code er et vanlig valg.
2. Åpne prosjektmappen. Velg File > Open Folder og velg g2-display-demo.
3. Åpne hovedfilen. Åpne src > main.ts i Explorer-panelet til venstre.
Dette er det viktigste stedet: Det er i src/main.ts du skriver inn den første G2-skjermkoden i neste trinn.
Trinn 6: Bygg én enkel tekstcontainer
Start med én container. Det bekrefter at prosjektet og skjermen fungerer før du legger til flere layoutelementer.
1. Erstatt startkoden i src/main.ts. Slett Vites standard demokode og lim inn koden nedenfor, og legg deretter til disse linjene til slutt, slik at brukeren kan forlate appen med et dobbelttrykk. Evens regler for innsending krever dette på det første skjermbildet, og kontrollørene deres sjekker 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. Lagre main.ts. Bruk File > Save eller Ctrl+S / Cmd+S.
- xPosition / yPosition: Hvor containeren starter på lerretet på 576 x 288.
- width / height: Hvor mye skjermplass containeren får.
- paddingLength: Avstanden mellom kanten av containeren og teksten.
- content: Ordene brukeren ser.
- containerID / containerName: Identiteten som brukes til å oppdatere den samme containeren senere.
- isEventCapture: 1: Markerer denne som den ene containeren som mottar de viktigste berørings- og sveipehendelsene.
Trinn 7: Forhåndsvis skjermbildet i Even Hub Simulator
Koden er lagret. Forhåndsvis den på datamaskinen før du sender den til de ekte brillene.
1. Gå tilbake til Terminal. Kontroller at du fortsatt står i mappen g2-display-demo.
2. Start prosjektet. Skriv inn:
npm run dev
3. La denne terminalen fortsette å kjøre. Vite viser vanligvis en adresse som http://localhost:5173.
4. Åpne et nytt terminalvindu. Start simulatoren med den samme lokale adressen:
evenhub-simulator http://localhost:5173
5. Sjekk simulatoren. Du skal se MACHINE 04, Ready og > Continue i forhåndsvisningen på 576 x 288.
Trinn 8: Juster oppsettet i den samme src/main.ts-filen
Ikke åpne et nytt program eller en ny seksjon. Gå tilbake til filen du allerede brukte i trinn 6.
1. Gå tilbake til Visual Studio Code > src > main.ts. La simulatoren og utviklingsserveren fortsette å kjøre.
2. Endre innholdet først. Erstatt eksempelordene i content med den faktiske informasjonen for ditt bruksområde.
3. Juster avstandene bare ved behov. Endre xPosition, yPosition, width, height eller paddingLength, lagre og se på simulatoren igjen.
4. Legg bare til en ny container hvis det gjør innholdet tydeligere. Hvis du skiller ut en overskrift, en hovedmelding eller en status, gir du hver container en unik containerID og containerName (maks 16 tegn), legger den til i textObject og øker containerTotalNum tilsvarende. En side kan inneholde opptil 8 tekst- eller listecontainere pluss 4 bildecontainere.
Ikke legg til designelementer i telefonstil: G2 tilbyr ikke vanlig justering av skriftstørrelse, fet skrift, fargede kort eller vilkårlige bakgrunnsfyll. Bruk heller plassering, avstand, rammer og de støttede lysstyrkenivåene.
Trinn 9: Oppdater tekst som endres, uten å bygge siden på nytt
Hvis containeren blir stående på samme sted og bare ordene endres, oppdaterer du den eksisterende containeren.
1. Bli i src/main.ts. Øverst i filen, der Even Hub SDK-verktøyene importeres, legger du til TextContainerUpgrade.
2. Bruk samme container-ID og navn. For eksempel:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Bruk dette bare ved endringer i innholdet. Hvis antallet, plasseringen eller størrelsen på containerne endres, bygger du heller siden på nytt. Even Realities dokumenterer textContainerUpgrade som det raskere, flimmerfrie alternativet for rene tekstoppdateringer.
Trinn 10: Test det samme oppsettet på en ekte G2
Simulatoren kontrollerer strukturen, men det endelige designet bør vurderes gjennom den ekte optikken.
1. Gjør utviklingsserveren tilgjengelig fra telefonen. Vite lytter som standard bare på localhost, så telefonen kan ikke nå serveren før du ber den godta tilkoblinger utenfra. Opprett en vite.config.ts i prosjektmappen (eller legg til server-blokken i den du allerede har) med innstillingene Even dokumenterer, og start deretter npm run dev på nytt og la den kjøre:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Erstatt med din faktiske lokale IP-adresse
},
},
})
2. Finn datamaskinens IP-adresse på det lokale nettverket. I Windows PowerShell bruker du ipconfig og finner IPv4-adressen. På macOS bruker du ipconfig getifaddr en0 for Wi-Fi.
3. Generer QR-koden. Erstatt <YOUR-IP> med den lokale adressen:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Gå over til telefonen. Åpne Even Realities-appen > Even Hub-fanen > utviklerdelen > Scan QR.
5. Skann QR-koden som vises på datamaskinen. Telefonen laster inn det lokale prosjektet og videresender det til den parede G2-en.
6. Se gjennom brillene. Kontroller at hovedmeldingen er lett å finne og forstå mens du ser på omgivelsene rundt deg.
Nettverksmerknad: Telefonen og datamaskinen må kunne nå hverandre. Wi-Fi i bedriftsnett, AP-/klientisolasjon eller en brannmur kan blokkere lokal QR-testing.
Praktiske layoutregler for den lille grønne skjermen
Ett formål per skjermbilde:
- Gjør: Vis én status, én instruksjon, ett stikkord eller ett lite valg.
- Unngå: Å kombinere et dashbord, instruksjoner og navigasjon på én side.
Hold teksten kort:
- Gjør: Bruk noen få kompakte linjer.
- Unngå: Å bruke den tekniske tekstgrensen som designmål.
Bruk avstand for å skape hierarki:
- Gjør: Skill tittel, hovedinformasjon og handling med tomrom.
- Unngå: Å forsøke å skape hierarki med endringer i skriftstørrelse som ikke støttes.
Bruk containere bevisst:
- Gjør: Legg bare til en container når den gir informasjonen en tydelig rolle.
- Unngå: Å legge til containere bare fordi siden tillater opptil 12.
Design for gjennomsiktighet:
- Gjør: Husk at områder som ikke lyser, viser den virkelige verden bak HUD-en.
- Unngå: Å behandle lerretet som en ugjennomsiktig telefonskjerm.
Bruk bilder med omhu:
- Gjør: Bruk enkle ikoner med høy kontrast eller kompakte visuelle signaler.
- Unngå: Detaljerte fotografier eller grafikk som krever nærmere ettersyn.
Test på maskinvaren:
- Gjør: Bruk simulatoren for å jobbe raskt, og verifiser deretter på en ekte G2.
- Unngå: Å godkjenne det endelige designet bare ut fra forhåndsvisningen på datamaskinen.
Hvilken forretningsinformasjon passer for denne skjermen?
G2 kommer best til sin rett når brukeren trenger en liten mengde informasjon uten å forlate oppgaven eller samtalen vedkommende er opptatt med.
· Møtestikkord: navnet på en taler, ett nøkkeltall, et samtalepunkt eller en kort påminnelse.
· Direkteoversettelse: én eller to linjer med oversatt tale i stedet for en hel side med transkripsjon.
· Veiledede arbeidsflyter: én instruksjon eller ett bekreftelsestrinn om gangen.
· Statusoppdateringer: maskinstatus, leveringsstatus, fremdrift i oppgaver eller et kort varsel.
· Navigasjonssignaler: en retning, en avstand eller en enkel pil i stedet for et detaljert kart.
· Kunnskapsstikkord: et kort svar, et referansenummer eller en kontekstuell merknad.
Hvorfor godt skjermdesign for G2 er viktig for bedrifter
Verdien av G2 ligger ikke i hvor mye informasjon som får plass på skjermen, men i hvor lite oppmerksomhet skjermen krever. En kort, godt strukturert HUD kan løfte frem nyttig informasjon uten at ansatte må stoppe det de holder på med og åpne en telefon eller bærbar PC. For bedrifter kan det bidra til mer fokuserte møter, raskere tilgang til statusinformasjon og mer konsekvente trinnvise arbeidsflyter.
Designbegrensningene kan også hjelpe team med å holde egenutviklede applikasjoner disiplinerte. Når man gjenbruker et lite antall containere, kort innhold og forutsigbare interaksjoner, blir grensesnittene enklere å lære, og risikoen for at brillene blir enda en overfylt applikasjon reduseres.
Konklusjon
Design for skjermen på Even Realities G2 starter på telefonen med paring og oppdatering av brillene, og fortsetter deretter på datamaskinen, der du aktiverer tilgang til Even Hub, installerer Node.js og Even Hub-verktøyene, oppretter et Vite-prosjekt og åpner src/main.ts, hvor den første grønne HUD-en på 576 x 288 bygges av en enkel tekstcontainer. Forhåndsvis oppsettet i Even Hub Simulator, juster innhold og avstander i den samme filen, bruk textContainerUpgrade når bare ordene endres, og skann til slutt utviklings-QR-koden i Even Realities-appen for å teste oppsettet på en ekte G2. De sterkeste forretningsgrensesnittene holder hvert skjermbilde kort, fokusert og lett å forstå med et raskt blikk, slik at bedrifter kan vise oversettelser, stikkord, statusinformasjon eller arbeidsinstruksjoner uten gang på gang å trekke ansatte bort fra den fysiske oppgaven eller samtalen for å sjekke en annen skjerm.
Bygger du en tilpasset arbeidsflyt for Even G2? Start med ett nyttig skjermbilde, test det i simulatoren og på de ekte brillene, og utvid bare når neste opplysning tydelig gjør brukerens oppgave bedre.