Shrnutí
Displej Even Realities G2 je určen pro krátké informace, které lze rychle pochopit. Even Hub dává vývojářům k dispozici plátno 576 x 288 pixelů na každé oko v monochromatické zelené a veřejné SDK skládá obrazovku z textových, seznamových a obrázkových kontejnerů, nikoli z volně tvarovaného rozhraní ve stylu telefonu. Nejúčinnější rozvržení proto používají krátký text, jasné rozestupy a jen několik prvků najednou.
Vývojový postup je nejsnazší pochopit jako jednu souvislou posloupnost: spárujte G2 v telefonní aplikaci Even Realities, přihlaste se na počítači do Even Hub stejným účtem, nainstalujte vývojové nástroje, vytvořte projekt, otevřete src/main.ts, sestavte jeden textový kontejner, zobrazte jeho náhled v Simulátoru a poté naskenujte QR kód v telefonní aplikaci, abyste stejné rozvržení otestovali na skutečných brýlích. Cílem není vměstnat na displej co nejvíce informací, ale poskytnout nositeli jednu užitečnou informaci, aniž by odváděla jeho pozornost od skutečného světa.
Co je displej Even Realities G2?
Even Realities G2 jsou lehké chytré brýle s binokulárním micro-LED displejem s vlnovodem. Pro pluginy Even Hub slouží brýle hlavně jako zobrazovací a vstupní plocha: plugin běží přes připojený telefon, zatímco G2 zobrazují obsah a posílají zpět do aplikace vstup z touchpadu nebo z volitelného prstenu R1.
Vývojářské plátno má 576 x 288 pixelů na každé oko a zobrazuje se zeleně s 16 úrovněmi jasu. Nerozsvícené oblasti zůstávají průhledné, takže nositel za informacemi stále vidí skutečný svět. Díky tomu se G2 hodí spíše pro výzvy, překlady, stavové aktualizace a krátké pokyny než pro husté stránky nebo bohatá rozhraní ve stylu telefonu.
Jak od nuly navrhnout svůj první displej pro Even G2
Krok 1: Nastavte G2 v telefonní aplikaci Even Realities
Začněte na telefonu. Vytvoříte tak účet, který budete používat i na počítači, a zajistíte, že brýle budou připravené.
1. Otevřete aplikaci Even Realities. Vytvořte si účet nebo se v telefonní aplikaci přihlaste.
2. Spárujte G2. Otevřete Devices > Add device > Even G2 a postupujte podle pokynů pro párování.
3. Aktualizujte firmware. Přijměte případnou aktualizaci firmwaru nabídnutou po spárování, nebo ji zkontrolujte v Devices > Firmware.
Krok 2: Povolte vývojářský přístup na počítači
Nyní přejděte k počítači, ale telefon mějte po ruce. Na obou zařízeních používejte stejný účet.
1. Otevřete Even Hub. V prohlížeči na počítači přejděte na hub.evenrealities.com/login.
2. Přihlaste se stejným účtem. Použijte e-mail a heslo z telefonní aplikace.
3. Vraťte se k telefonu. Vynuceně ukončete aplikaci Even Realities a znovu ji otevřete.
4. Najděte sekci pro vývojáře. V telefonní aplikaci otevřete kartu Even Hub. Vpravo nahoře by se nyní měla objevit sekce pro vývojáře včetně možnosti Scan QR.
Krok 3: Nainstalujte Node.js a nástroje Even Hub
Zůstaňte u počítače. Node.js je software, díky kterému může Even Hub běžet na vašem počítači. Musí být nainstalován dříve, než bude možné spustit nástroje příkazového řádku Even Hub.
1. Nainstalujte Node.js. Even Hub v současnosti vyžaduje Node 20 LTS nebo Node 22 či novější verze.
2. Otevřete aplikaci Terminal nebo PowerShell. Na macOS použijte Terminal, na Windows PowerShell/Terminal.
3. Zkontrolujte Node.js. Zadejte níže uvedený příkaz a stiskněte Enter. Pokud se zobrazí verze jako v20.x nebo v22.x, je vše připraveno.
node -v
4. Nainstalujte nástroje Even Hub. Ve stejném okně zadejte:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Krok 4: Vytvořte projekt pro G2
Počítač je nyní připraven. Vytvořte jednu novou složku projektu a přidejte do ní Even Hub SDK.
1. Vytvořte projekt v Terminálu. Zadávejte tyto příkazy po jednom řádku:
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 nabízí také hotové šablony: příkaz npx degit even-realities/evenhub-templates/minimal g2-display-demo vám vytvoří projekt, v němž už je SDK i app.json připraveno
2. Dokončete app.json. Vite vytvořil projekt, do něj bylo nainstalováno SDK a příkaz evenhub init vytvořil app.json. Otevřete app.json a nastavte package_id (ve stylu obráceného názvu domény, například com.yourcompany.g2demo), name (nejvýše 20 znaků a nesmí obsahovat slovo Even) a min_sdk_version na verzi SDK, kterou jste nainstalovali (zobrazí ji příkaz npm list @evenrealities/even_hub_sdk). Přidejte ikonu ve stupních šedi o velikosti 24 x 24 jako public/icon.png.
Krok 5: Otevřete projekt a najděte soubor displeje
Projekt existuje, ale displej zatím navržen není. Otevřete složku v editoru kódu.
1. Otevřete Visual Studio Code nebo jiný editor kódu. Visual Studio Code je běžnou volbou.
2. Otevřete složku projektu. Zvolte File > Open Folder a vyberte g2-display-demo.
3. Otevřete hlavní soubor. V panelu Explorer vlevo otevřete src > main.ts.
Toto je klíčové místo: právě do src/main.ts se v dalším kroku zadává první kód pro displej G2.
Krok 6: Sestavte jeden jednoduchý textový kontejner
Začněte jedním kontejnerem. Ověříte tak, že projekt i displej fungují, než přidáte další prvky rozvržení.
1. Nahraďte výchozí kód v src/main.ts. Smažte výchozí ukázkový kód Vite, vložte níže uvedený kód a na konec přidejte tyto řádky, aby nositel mohl aplikaci opustit dvojitým stiskem. Pravidla Even pro odesílání aplikací to na první obrazovce vyžadují a jejich posuzovatelé to kontrolují:
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. Uložte main.ts. Použijte File > Save nebo Ctrl+S / Cmd+S.
- xPosition / yPosition: Kde kontejner začíná na plátně 576 x 288.
- width / height: Kolik místa na displeji kontejner dostane.
- paddingLength: Mezera mezi okrajem kontejneru a textem.
- content: Slova, která nositel vidí.
- containerID / containerName: Identifikace, pomocí níž se tento kontejner později aktualizuje.
- isEventCapture: 1: Označuje tento kontejner jako ten jediný, který přijímá hlavní události dotyku a přejetí.
Krok 7: Zobrazte náhled displeje v Simulátoru Even Hub
Kód je uložen. Než ho pošlete do skutečných brýlí, zobrazte si jeho náhled na počítači.
1. Vraťte se do Terminálu. Ujistěte se, že se stále nachází ve složce g2-display-demo.
2. Spusťte projekt. Zadejte:
npm run dev
3. Nechte tento Terminál běžet. Vite obvykle zobrazí adresu jako http://localhost:5173.
4. Otevřete druhé okno Terminálu. Spusťte Simulátor se stejnou místní adresou:
evenhub-simulator http://localhost:5173
5. Zkontrolujte Simulátor. V náhledu 576 x 288 byste měli vidět MACHINE 04, Ready a > Continue.
Krok 8: Upravte rozvržení ve stejném souboru src/main.ts
Neotevírejte nový program ani sekci. Vraťte se do souboru, který jste už použili v kroku 6.
1. Vraťte se do Visual Studio Code > src > main.ts. Simulátor i vývojový server nechte běžet.
2. Nejprve změňte obsah. Nahraďte ukázková slova v content skutečnými informacemi pro váš případ použití.
3. Rozestupy upravujte jen v případě potřeby. Změňte xPosition, yPosition, width, height nebo paddingLength, pak soubor uložte a znovu se podívejte do Simulátoru.
4. Další kontejner přidejte, jen pokud zlepší přehlednost. Pokud oddělujete nadpis, hlavní sdělení nebo stav, dejte každému kontejneru jedinečné containerID a containerName (nejvýše 16 znaků), přidejte ho do textObject a odpovídajícím způsobem zvyšte containerTotalNum. Stránka pojme až 8 textových nebo seznamových kontejnerů a k tomu 4 obrázkové kontejnery.
Nepřidávejte designové prvky ve stylu telefonu: G2 nenabízí běžnou změnu velikosti písma, tučné písmo, barevné karty ani libovolné výplně pozadí. Místo toho používejte umístění, rozestupy, ohraničení a podporované úrovně jasu.
Krok 9: Aktualizujte měnící se text bez přestavby stránky
Pokud kontejner zůstává na stejném místě a mění se jen slova, aktualizujte stávající kontejner.
1. Zůstaňte v src/main.ts. Na začátek souboru, kde se importují nástroje Even Hub SDK, přidejte TextContainerUpgrade.
2. Použijte stejné ID a název kontejneru. Například:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Používejte to pouze pro změny obsahu. Pokud se mění počet, umístění nebo velikost kontejnerů, stránku raději sestavte znovu. Even Realities v dokumentaci uvádí textContainerUpgrade jako rychlejší možnost bez blikání pro aktualizace samotného textu.
Krok 10: Otestujte stejné rozvržení na skutečných G2
Simulátor ověří strukturu, ale finální návrh je třeba posoudit přes skutečnou optiku.
1. Zpřístupněte vývojový server z telefonu. Vite ve výchozím nastavení naslouchá pouze na localhost, takže telefon se k němu nepřipojí, dokud mu neřeknete, aby přijímal připojení zvenčí. Ve složce projektu vytvořte vite.config.ts (nebo do stávajícího přidejte blok server) s nastavením, které uvádí dokumentace Even, poté znovu spusťte npm run dev a nechte ho běžet:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Nahraďte svou skutečnou místní IP adresou
},
},
})
2. Zjistěte IP adresu počítače v místní síti. Ve Windows PowerShell použijte ipconfig a najděte adresu IPv4. Na macOS použijte pro Wi-Fi příkaz ipconfig getifaddr en0.
3. Vygenerujte QR kód. Nahraďte <YOUR-IP> místní adresou:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Přejděte k telefonu. Otevřete aplikaci Even Realities > kartu Even Hub > sekci pro vývojáře > Scan QR.
5. Naskenujte QR kód zobrazený na počítači. Telefon načte místní projekt a předá ho spárovaným G2.
6. Podívejte se skrz brýle. Zkontrolujte, zda je hlavní sdělení snadno k nalezení a srozumitelné, i když se díváte na skutečné okolí.
Poznámka k síti: Telefon a počítač se musí navzájem vidět. Firemní Wi-Fi, izolace AP/klientů nebo firewall mohou místní testování přes QR zablokovat.
Praktická pravidla rozvržení pro malý zelený displej
Jeden účel na obrazovku:
- Dělejte: Zobrazte jeden stav, pokyn, výzvu nebo malou volbu.
- Vyhněte se: Kombinování přehledového panelu, pokynů a navigace na jedné stránce.
Udržujte text krátký:
- Dělejte: Použijte několik úsporných řádků.
- Vyhněte se: Používání technického limitu textu jako cíle návrhu.
Hierarchii vytvářejte rozestupy:
- Dělejte: Oddělte nadpis, hlavní informaci a akci prázdným místem.
- Vyhněte se: Snaze vytvořit hierarchii nepodporovanými změnami velikosti písma.
Kontejnery používejte uváženě:
- Dělejte: Kontejner přidejte, jen když dává informaci jasnou roli.
- Vyhněte se: Přidávání kontejnerů jen proto, že stránka jich umožňuje až 12.
Navrhujte s ohledem na průhlednost:
- Dělejte: Pamatujte, že nerozsvícené oblasti ukazují skutečný svět za HUD.
- Vyhněte se: Zacházení s plátnem jako s neprůhlednou obrazovkou telefonu.
Obrázky používejte opatrně:
- Dělejte: Používejte jednoduché vysoce kontrastní ikony nebo úsporné vizuální vodítka.
- Vyhněte se: Detailním fotografiím nebo grafice, které je nutné pozorně zkoumat.
Testujte na hardwaru:
- Dělejte: Pro rychlost používejte Simulátor a pak ověřte výsledek na skutečných G2.
- Vyhněte se: Schvalování finálního návrhu pouze podle náhledu na počítači.
Jaké firemní informace se na tento displej hodí?
G2 jsou nejsilnější tehdy, když nositel potřebuje malé množství informací, aniž by musel opustit aktuální úkol nebo rozhovor.
· Výzvy během schůzek: jméno řečníka, jeden klíčový údaj, bod k diskusi nebo krátká připomínka.
· Živý překlad: jeden nebo dva řádky přeložené řeči namísto celé stránky přepisu.
· Řízené pracovní postupy: vždy jeden pokyn nebo potvrzovací krok.
· Stavové aktualizace: stav stroje, stav doručení, postup úkolu nebo krátké upozornění.
· Navigační pokyny: směr, vzdálenost nebo jednoduchá šipka namísto podrobné mapy.
· Znalostní výzvy: krátká odpověď, referenční číslo nebo kontextová poznámka.
Proč je dobrý návrh displeje G2 pro firmy důležitý
Hodnota G2 nespočívá v tom, kolik informací se na displej vejde, ale v tom, jak málo pozornosti displej vyžaduje. Krátký, dobře strukturovaný HUD může zobrazit užitečné informace, aniž by zaměstnanci museli přerušit, co dělají, a otevřít telefon nebo notebook. Firmám to může pomoci k soustředěnějším schůzkám, rychlejšímu přístupu ke stavovým informacím a konzistentnějším pracovním postupům krok za krokem.
Omezení návrhu mohou týmům také pomoci udržet vlastní aplikace disciplinované. Opakované používání malého počtu kontejnerů, krátkého obsahu a předvídatelných interakcí usnadňuje osvojení rozhraní a snižuje riziko, že se z brýlí stane další přeplněná aplikace.
Závěr
Návrh pro displej Even Realities G2 začíná na telefonu spárováním a aktualizací brýlí a pokračuje na počítači povolením přístupu k Even Hub, instalací Node.js a nástrojů Even Hub, vytvořením projektu Vite a otevřením src/main.ts, kde se z jednoduchého textového kontejneru sestaví první zelený HUD o rozměrech 576 x 288. Zobrazte náhled rozvržení v Simulátoru Even Hub, upravte obsah a rozestupy ve stejném souboru, použijte textContainerUpgrade, když se mění jen slova, a nakonec naskenujte vývojový QR kód v aplikaci Even Realities, abyste rozvržení otestovali na skutečných G2. Nejsilnější firemní rozhraní udržují každou obrazovku krátkou, zaměřenou a srozumitelnou na první pohled, takže firmy mohou zobrazovat překlady, výzvy, stavové informace nebo pokyny k pracovním postupům, aniž by zaměstnance opakovaně odváděly od fyzického úkolu či rozhovoru ke kontrole další obrazovky.
Vytváříte vlastní pracovní postup pro Even G2? Začněte jednou užitečnou obrazovkou, otestujte ji v Simulátoru i na skutečných brýlích a rozšiřujte ji, jen když další informace zjevně usnadní nositeli jeho úkol.
