Sammanfattning
Skärmen på Even Realities G2 är utformad för kort information som snabbt kan uppfattas. Even Hub ger utvecklare en duk på 576 x 288 pixlar per öga i monokromt grönt, och det offentliga SDK:t bygger upp skärmbilden av text-, list- och bildcontainrar i stället för ett fritt utformat gränssnitt i telefonstil. De mest effektiva layouterna använder därför kort text, tydliga avstånd och bara ett fåtal element åt gången.
Utvecklingsflödet är enklast att förstå som en sammanhängande sekvens: para ihop G2 i Even Realities telefonapp, logga in på Even Hub på en dator med samma konto, installera utvecklingsverktygen, skapa ett projekt, öppna src/main.ts, bygg en textcontainer, förhandsgranska den i simulatorn och skanna sedan en QR-kod i telefonappen för att testa samma layout på de riktiga glasögonen. Målet är inte att få plats med så mycket information som möjligt på skärmen, utan att ge bäraren en enda användbar informationsbit utan att dra uppmärksamheten bort från den verkliga världen.
Vad är Even Realities G2-skärmen?
Even Realities G2 är ett par lätta smarta glasögon med en binokulär micro-LED-vågledarskärm. För Even Hub-pluginer fungerar glasögonen främst som skärm och inmatningsyta: pluginen körs via den anslutna telefonen, medan G2 visar innehållet och skickar inmatning från pekplattan eller den valfria R1-ringen tillbaka till appen.
Utvecklarduken är 576 x 288 pixlar per öga och visas i grönt med 16 ljusstyrkenivåer. Oupplysta ytor förblir genomskinliga, så bäraren fortsätter att se den verkliga världen bakom informationen. Det gör G2 bättre lämpad för uppmaningar, översättningar, statusuppdateringar och korta instruktioner än för täta sidor eller innehållsrika gränssnitt i telefonstil.
Så designar du din första Even G2-skärmbild från grunden
Steg 1: Konfigurera G2 i Even Realities telefonapp
Börja på telefonen. Där skapar du kontot som du också ska använda på datorn, och du ser till att glasögonen är redo.
1. Öppna Even Realities App. Skapa ett konto eller logga in i telefonappen.
2. Para ihop G2. Öppna Devices > Add device > Even G2 och följ anvisningarna för ihopparning.
3. Uppdatera firmware. Godkänn eventuella firmwareuppdateringar som erbjuds efter ihopparningen, eller kontrollera under Devices > Firmware.
Steg 2: Aktivera utvecklaråtkomst på datorn
Gå nu över till datorn, men ha telefonen i närheten. Använd samma konto på båda enheterna.
1. Öppna Even Hub. Gå till hub.evenrealities.com/login i en webbläsare på datorn.
2. Logga in med samma konto. Använd e-postadressen och lösenordet från telefonappen.
3. Gå tillbaka till telefonen. Tvångsavsluta Even Realities App och öppna den sedan igen.
4. Hitta utvecklaravsnittet. Öppna fliken Even Hub i telefonappen. Utvecklaravsnittet bör nu visas uppe till höger, inklusive Scan QR.
Steg 3: Installera Node.js och Even Hub-verktygen
Stanna kvar vid datorn. Node.js är programvara som gör att Even Hub kan köras på din dator. Det måste installeras innan Even Hubs kommandoradsverktyg kan köras.
1. Installera Node.js. Even Hub kräver för närvarande Node 20 LTS eller Node 22 eller senare versioner.
2. Öppna appen Terminal eller PowerShell. Använd Terminal på macOS eller PowerShell/Terminal på Windows.
3. Kontrollera Node.js. Skriv kommandot nedan och tryck på Enter. Om en version som v20.x eller v22.x visas är allt klart.
node -v
4. Installera Even Hub-verktygen. Skriv följande i samma fönster:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Steg 4: Skapa G2-projektet
Datorn är nu förberedd. Skapa en ny projektmapp och lägg till Even Hub SDK i den.
1. Skapa projektet i Terminal. Skriv in dessa kommandon en rad i taget:
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 erbjuder också färdiga mallar: npx degit even-realities/evenhub-templates/minimal g2-display-demo ger dig ett projekt där SDK:t och app.json redan finns på plats
2. Gör klart app.json. Vite skapade projektet, SDK:t installerades i det och evenhub init skapade app.json. Öppna app.json och ange package_id (i omvänd domänstil, till exempel com.yourcompany.g2demo), name (högst 20 tecken, och det får inte innehålla ordet Even) och min_sdk_version till den SDK-version du installerade (npm list @evenrealities/even_hub_sdk visar den). Lägg till en gråskaleikon på 24 x 24 som public/icon.png.
Steg 5: Öppna projektet och hitta skärmfilen
Projektet finns, men skärmbilden har inte designats ännu. Öppna mappen i en kodredigerare.
1. Öppna Visual Studio Code eller en annan kodredigerare. Visual Studio Code är ett vanligt alternativ.
2. Öppna projektmappen. Välj File > Open Folder och markera g2-display-demo.
3. Öppna huvudfilen. Öppna src > main.ts i Explorer-panelen till vänster.
Det här är den viktiga platsen: det är i src/main.ts som den första G2-skärmkoden i nästa steg skrivs in.
Steg 6: Bygg en enkel textcontainer
Börja med en container. Då bekräftar du att projektet och skärmen fungerar innan du lägger till fler layoutelement.
1. Ersätt startkoden i src/main.ts. Ta bort Vites standarddemokod och klistra in koden nedan, och lägg sedan till de här raderna i slutet så att bäraren kan lämna appen med ett dubbeltryck. Evens regler för inskickade appar kräver detta på den första skärmen, och deras granskare kontrollerar 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. Spara main.ts. Använd File > Save eller Ctrl+S / Cmd+S.
- xPosition / yPosition: Var containern börjar på duken på 576 x 288.
- width / height: Hur mycket skärmyta containern får.
- paddingLength: Avståndet mellan containerns kant och texten.
- content: Orden som bäraren ser.
- containerID / containerName: Identiteten som används för att uppdatera samma container senare.
- isEventCapture: 1: Markerar detta som den enda container som tar emot de huvudsakliga tryck- och svephändelserna.
Steg 7: Förhandsgranska skärmbilden i Even Hub Simulator
Koden är sparad. Förhandsgranska den på datorn innan du skickar den till de riktiga glasögonen.
1. Gå tillbaka till Terminal. Kontrollera att du fortfarande befinner dig i mappen g2-display-demo.
2. Starta projektet. Skriv:
npm run dev
3. Låt den terminalen fortsätta köras. Vite visar normalt en adress som http://localhost:5173.
4. Öppna ett andra terminalfönster. Starta simulatorn med samma lokala adress:
evenhub-simulator http://localhost:5173
5. Kontrollera simulatorn. Du bör se MACHINE 04, Ready och > Continue i förhandsvisningen på 576 x 288.
Steg 8: Justera layouten i samma src/main.ts-fil
Öppna inte ett nytt program eller avsnitt. Gå tillbaka till filen du redan använde i steg 6.
1. Gå tillbaka till Visual Studio Code > src > main.ts. Låt simulatorn och utvecklingsservern fortsätta köras.
2. Ändra innehållet först. Ersätt exempelorden i content med den verkliga informationen för ditt användningsfall.
3. Justera avstånden bara vid behov. Ändra xPosition, yPosition, width, height eller paddingLength, spara och titta sedan på simulatorn igen.
4. Lägg bara till ytterligare en container om det gör innehållet tydligare. Om du delar upp en rubrik, ett huvudbudskap eller en status ger du varje container ett unikt containerID och containerName (högst 16 tecken), lägger till den i textObject och höjer containerTotalNum i motsvarande grad. En sida rymmer upp till 8 text- eller listcontainrar plus 4 bildcontainrar.
Lägg inte till designfunktioner i telefonstil: G2 erbjuder inte vanlig justering av teckenstorlek, fet typografi, färgade kort eller valfria bakgrundsfyllningar. Använd i stället position, avstånd, ramar och de ljusstyrkenivåer som stöds.
Steg 9: Uppdatera föränderlig text utan att bygga om sidan
Om containern stannar på samma plats och bara orden ändras uppdaterar du den befintliga containern.
1. Stanna kvar i src/main.ts. Lägg till TextContainerUpgrade högst upp i filen, där Even Hub SDK-verktygen importeras.
2. Använd samma container-ID och namn. Till exempel:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Använd detta bara för innehållsändringar. Om antalet containrar, deras position eller storlek ändras bygger du i stället om sidan. Even Realities dokumenterar textContainerUpgrade som det snabbare, flimmerfria alternativet för uppdateringar av enbart text.
Steg 10: Testa samma layout på den riktiga G2
Simulatorn kontrollerar strukturen, men den slutliga designen bör granskas genom den riktiga optiken.
1. Gör utvecklingsservern nåbar från telefonen. Vite lyssnar som standard bara på localhost, så telefonen kan inte nå den förrän du anger att den ska acceptera externa anslutningar. Skapa en vite.config.ts i projektmappen (eller lägg till server-blocket i den du redan har) med de inställningar som Even dokumenterar, starta sedan om npm run dev och låt den fortsätta köras:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Ersätt med din faktiska lokala IP-adress
},
},
})
2. Hitta datorns IP-adress i det lokala nätverket. I Windows PowerShell använder du ipconfig och letar upp IPv4-adressen. På macOS använder du ipconfig getifaddr en0 för Wi-Fi.
3. Generera QR-koden. Ersätt <YOUR-IP> med den lokala adressen:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Gå över till telefonen. Öppna Even Realities App > fliken Even Hub > utvecklaravsnittet > Scan QR.
5. Skanna QR-koden som visas på datorn. Telefonen läser in det lokala projektet och vidarebefordrar det till den ihopparade G2.
6. Titta genom glasögonen. Kontrollera att huvudbudskapet är lätt att hitta och förstå medan du tittar på den verkliga omgivningen.
Nätverksinformation: Telefonen och datorn måste kunna nå varandra. Företags-Wi-Fi, AP-/klientisolering eller en brandvägg kan blockera lokal QR-testning.
Praktiska layoutregler för den lilla gröna skärmen
Ett syfte per skärmbild:
- Gör: Visa en status, instruktion, uppmaning eller ett litet val.
- Undvik: Att kombinera en instrumentpanel, instruktioner och navigering på en sida.
Håll texten kort:
- Gör: Använd några få kompakta rader.
- Undvik: Att använda den tekniska textgränsen som designmål.
Använd avstånd för att skapa hierarki:
- Gör: Separera rubrik, huvudinformation och åtgärd med tomt utrymme.
- Undvik: Att försöka skapa hierarki med ändringar av teckenstorlek som inte stöds.
Använd containrar med eftertanke:
- Gör: Lägg bara till en container när den ger informationen en tydlig roll.
- Undvik: Att lägga till containrar bara för att sidan tillåter upp till 12.
Designa för genomskinlighet:
- Gör: Kom ihåg att oupplysta ytor visar den verkliga världen bakom HUD:en.
- Undvik: Att behandla duken som en ogenomskinlig telefonskärm.
Använd bilder varsamt:
- Gör: Använd enkla ikoner med hög kontrast eller kompakta visuella signaler.
- Undvik: Detaljerade foton eller grafik som kräver noggrann granskning.
Testa på hårdvaran:
- Gör: Använd simulatorn för snabbhetens skull och verifiera sedan på den riktiga G2.
- Undvik: Att godkänna den slutliga designen enbart utifrån förhandsvisningen på datorn.
Vilken affärsinformation passar på den här skärmen?
G2 kommer bäst till sin rätt när bäraren behöver en liten mängd information utan att lämna den pågående uppgiften eller samtalet.
· Mötesstöd: ett talarnamn, en nyckelsiffra, en diskussionspunkt eller en kort påminnelse.
· Liveöversättning: en eller två rader översatt tal i stället för en hel sida med transkription.
· Guidade arbetsflöden: en instruktion eller ett bekräftelsesteg åt gången.
· Statusuppdateringar: maskinstatus, leveransstatus, uppgiftsförlopp eller en kort varning.
· Navigeringsanvisningar: en riktning, ett avstånd eller en enkel pil i stället för en detaljerad karta.
· Kunskapsstöd: ett kort svar, ett referensnummer eller en kontextuell anteckning.
Varför bra skärmdesign för G2 är viktigt för företag
Värdet med G2 ligger inte i hur mycket information som får plats på skärmen, utan i hur lite uppmärksamhet skärmen behöver ta. En kort, välstrukturerad HUD kan lyfta fram användbar information utan att medarbetarna behöver avbryta det de gör och öppna en telefon eller bärbar dator. För företag kan det bidra till mer fokuserade möten, snabbare tillgång till statusinformation och mer enhetliga steg-för-steg-arbetsflöden.
Designbegränsningarna kan också hjälpa team att hålla anpassade applikationer disciplinerade. Att återanvända ett litet antal containrar, kort innehåll och förutsägbara interaktioner gör gränssnitten lättare att lära sig och minskar risken att glasögonen förvandlas till ännu en överlastad applikation.
Slutsats
Att designa för skärmen på Even Realities G2 börjar på telefonen med att para ihop och uppdatera glasögonen och fortsätter sedan på datorn: aktivera åtkomst till Even Hub, installera Node.js och Even Hub-verktygen, skapa ett Vite-projekt och öppna src/main.ts, där den första gröna HUD:en på 576 x 288 byggs upp av en enkel textcontainer. Förhandsgranska layouten i Even Hub Simulator, justera innehåll och avstånd i samma fil, använd textContainerUpgrade när bara orden ändras och skanna slutligen utvecklings-QR-koden i Even Realities App för att testa layouten på den riktiga G2. De starkaste affärsgränssnitten håller varje skärmbild kort, fokuserad och lätt att förstå med en snabb blick, vilket gör att företag kan visa översättningar, uppmaningar, statusinformation eller arbetsinstruktioner utan att gång på gång dra bort medarbetarna från den fysiska uppgiften eller samtalet för att titta på en annan skärm.
Bygger du ett anpassat arbetsflöde för Even G2? Börja med en användbar skärmbild, testa den i simulatorn och på de riktiga glasögonen, och bygg sedan ut bara när nästa informationsbit tydligt förbättrar bärarens uppgift.
