Streszczenie
Wyświetlacz Even Realities G2 jest przeznaczony do krótkich informacji, które można szybko zrozumieć. Even Hub udostępnia programistom monochromatyczne zielone płótno o rozdzielczości 576 x 288 pikseli na każde oko, a publiczne SDK buduje ekran z kontenerów tekstowych, listowych i graficznych, a nie jako swobodny interfejs w stylu telefonu. Dlatego najskuteczniejsze układy wykorzystują krótki tekst, wyraźne odstępy i jednocześnie tylko kilka elementów.
Proces tworzenia najłatwiej zrozumieć jako jedną ciągłą sekwencję: sparuj G2 w aplikacji Even Realities na telefonie, zaloguj się do Even Hub na komputerze przy użyciu tego samego konta, zainstaluj narzędzia programistyczne, utwórz projekt, otwórz src/main.ts, zbuduj jeden kontener tekstowy, wyświetl jego podgląd w symulatorze, a następnie zeskanuj kod QR w aplikacji na telefonie, aby przetestować ten sam układ na prawdziwych okularach. Celem nie jest zmieszczenie na wyświetlaczu jak największej ilości informacji, lecz przekazanie użytkownikowi jednej przydatnej informacji bez odciągania jego uwagi od rzeczywistego otoczenia.
Czym jest wyświetlacz Even Realities G2?
Even Realities G2 to lekkie inteligentne okulary z binokularnym wyświetlaczem falowodowym micro-LED. W przypadku wtyczek Even Hub okulary pełnią przede wszystkim rolę wyświetlacza i powierzchni wejściowej: wtyczka działa za pośrednictwem połączonego telefonu, a G2 wyświetla treść i przesyła z powrotem do aplikacji sygnały z touchpada lub opcjonalnego pierścienia R1.
Płótno programistyczne ma rozdzielczość 576 x 288 pikseli na każde oko i jest wyświetlane w kolorze zielonym z 16 poziomami jasności. Niepodświetlone obszary pozostają przezroczyste, więc użytkownik nadal widzi rzeczywisty świat za wyświetlanymi informacjami. Dzięki temu G2 lepiej nadaje się do podpowiedzi, tłumaczeń, aktualizacji statusu i krótkich instrukcji niż do gęsto zapełnionych stron czy rozbudowanych interfejsów w stylu telefonu.
Jak od zera zaprojektować pierwszy ekran dla Even G2
Krok 1: Skonfiguruj G2 w aplikacji Even Realities na telefonie
Zacznij od telefonu. W ten sposób utworzysz konto, z którego będziesz korzystać również na komputerze, i upewnisz się, że okulary są gotowe do pracy.
1. Otwórz Even Realities App. Utwórz konto lub zaloguj się w aplikacji na telefonie.
2. Sparuj G2. Otwórz Devices > Add device > Even G2 i postępuj zgodnie z instrukcjami parowania.
3. Zaktualizuj oprogramowanie układowe. Zaakceptuj każdą aktualizację oprogramowania układowego zaproponowaną po sparowaniu lub sprawdź Devices > Firmware.
Krok 2: Włącz dostęp programistyczny na komputerze
Teraz przejdź do komputera, ale trzymaj telefon w pobliżu. Używaj tego samego konta na obu urządzeniach.
1. Otwórz Even Hub. W przeglądarce na komputerze przejdź do hub.evenrealities.com/login.
2. Zaloguj się na to samo konto. Użyj adresu e-mail i hasła z aplikacji na telefonie.
3. Wróć do telefonu. Wymuś zamknięcie Even Realities App, a następnie uruchom ją ponownie.
4. Znajdź sekcję dla programistów. Otwórz kartę Even Hub w aplikacji na telefonie. Sekcja dla programistów powinna teraz pojawić się w prawym górnym rogu, wraz z opcją Scan QR.
Krok 3: Zainstaluj Node.js i narzędzia Even Hub
Pozostań przy komputerze. Node.js to oprogramowanie, które pozwala uruchamiać Even Hub na komputerze. Musi zostać zainstalowane, zanim będzie można uruchomić narzędzia wiersza poleceń Even Hub.
1. Zainstaluj Node.js. Even Hub wymaga obecnie Node 20 LTS albo Node 22 lub nowszego.
2. Otwórz aplikację Terminal lub PowerShell. Użyj Terminala w systemie macOS lub PowerShella/Terminala w systemie Windows.
3. Sprawdź Node.js. Wpisz poniższe polecenie i naciśnij Enter. Jeśli zobaczysz wersję, np. v20.x lub v22.x, wszystko jest gotowe.
node -v
4. Zainstaluj narzędzia Even Hub. W tym samym oknie wpisz:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Krok 4: Utwórz projekt G2
Komputer jest już przygotowany. Utwórz jeden nowy folder projektu i dodaj do niego SDK Even Hub.
1. Utwórz projekt w Terminalu. Wpisuj poniższe polecenia po jednym wierszu:
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 oferuje również gotowe szablony: polecenie npx degit even-realities/evenhub-templates/minimal g2-display-demo tworzy projekt, w którym SDK i plik app.json są już na miejscu
2. Uzupełnij plik app.json. Vite utworzył projekt, SDK zostało w nim zainstalowane, a polecenie evenhub init utworzyło plik app.json. Otwórz app.json i ustaw package_id (w stylu odwróconej domeny, np. com.yourcompany.g2demo), name (maksymalnie 20 znaków; nazwa nie może zawierać słowa Even) oraz min_sdk_version na zainstalowaną wersję SDK (można ją sprawdzić poleceniem npm list @evenrealities/even_hub_sdk). Dodaj ikonę w skali szarości o wymiarach 24 x 24 jako public/icon.png.
Krok 5: Otwórz projekt i znajdź plik wyświetlacza
Projekt już istnieje, ale ekran nie został jeszcze zaprojektowany. Otwórz folder w edytorze kodu.
1. Otwórz Visual Studio Code lub inny edytor kodu. Visual Studio Code to popularny wybór.
2. Otwórz folder projektu. Wybierz File > Open Folder i wskaż g2-display-demo.
3. Otwórz plik główny. W panelu Explorer po lewej stronie otwórz src > main.ts.
To kluczowe miejsce: w pliku src/main.ts wprowadzisz w następnym kroku pierwszy kod wyświetlacza G2.
Krok 6: Zbuduj jeden prosty kontener tekstowy
Zacznij od jednego kontenera. W ten sposób sprawdzisz, czy projekt i wyświetlacz działają, zanim dodasz kolejne elementy układu.
1. Zastąp kod startowy w src/main.ts. Usuń domyślny kod demonstracyjny Vite i wklej poniższy kod, a następnie dodaj na końcu podane wiersze, aby użytkownik mógł opuścić aplikację podwójnym naciśnięciem. Zasady zgłaszania aplikacji Even wymagają tego na pierwszym ekranie, a recenzenci to sprawdzają:
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. Zapisz main.ts. Użyj File > Save lub Ctrl+S / Cmd+S.
- xPosition / yPosition: Miejsce, w którym kontener zaczyna się na płótnie 576 x 288.
- width / height: Ile miejsca na wyświetlaczu otrzymuje kontener.
- paddingLength: Odstęp między krawędzią kontenera a tekstem.
- content: Słowa, które widzi użytkownik.
- containerID / containerName: Identyfikator używany do późniejszej aktualizacji tego samego kontenera.
- isEventCapture: 1: Oznacza ten kontener jako jedyny odbierający główne zdarzenia dotyku i przesunięcia.
Krok 7: Wyświetl podgląd ekranu w Even Hub Simulator
Kod jest zapisany. Przed wysłaniem go na prawdziwe okulary wyświetl jego podgląd na komputerze.
1. Wróć do Terminala. Upewnij się, że nadal jesteś w folderze g2-display-demo.
2. Uruchom projekt. Wpisz:
npm run dev
3. Nie zamykaj tego Terminala. Vite zwykle wyświetla adres, np. http://localhost:5173.
4. Otwórz drugie okno Terminala. Uruchom symulator z tym samym adresem lokalnym:
evenhub-simulator http://localhost:5173
5. Sprawdź symulator. W podglądzie 576 x 288 powinny być widoczne napisy MACHINE 04, Ready i > Continue.
Krok 8: Dostosuj układ w tym samym pliku src/main.ts
Nie otwieraj nowego programu ani nowej sekcji. Wróć do pliku używanego już w kroku 6.
1. Wróć do Visual Studio Code > src > main.ts. Nie zamykaj symulatora ani serwera deweloperskiego.
2. Najpierw zmień treść. Zastąp przykładowe słowa w polu content rzeczywistymi informacjami dla swojego zastosowania.
3. Odstępy dostosowuj tylko w razie potrzeby. Zmień xPosition, yPosition, width, height lub paddingLength, a następnie zapisz plik i ponownie sprawdź symulator.
4. Dodaj kolejny kontener tylko wtedy, gdy poprawi to czytelność. Jeśli wydzielasz nagłówek, główny komunikat lub status, nadaj każdemu kontenerowi unikalne containerID i containerName (maksymalnie 16 znaków), dodaj go do textObject i odpowiednio zwiększ containerTotalNum. Strona może zawierać do 8 kontenerów tekstowych lub listowych oraz 4 kontenery graficzne.
Nie dodawaj elementów projektowych typowych dla telefonów: G2 nie oferuje standardowej zmiany rozmiaru czcionki, pogrubienia, kolorowych kart ani dowolnych wypełnień tła. Zamiast tego używaj pozycji, odstępów, obramowań i obsługiwanych poziomów jasności.
Krok 9: Aktualizuj zmieniający się tekst bez przebudowywania strony
Jeśli kontener pozostaje w tym samym miejscu, a zmieniają się tylko słowa, zaktualizuj istniejący kontener.
1. Pozostań w pliku src/main.ts. Na początku pliku, w miejscu importu narzędzi SDK Even Hub, dodaj TextContainerUpgrade.
2. Użyj tego samego identyfikatora i nazwy kontenera. Na przykład:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Stosuj to tylko przy zmianach treści. Jeśli zmienia się liczba, położenie lub rozmiar kontenerów, przebuduj stronę. Według dokumentacji Even Realities textContainerUpgrade to szybsza opcja bez migotania, przeznaczona do aktualizacji samego tekstu.
Krok 10: Przetestuj ten sam układ na prawdziwych G2
Symulator sprawdza strukturę, ale ostateczny projekt należy ocenić przez prawdziwą optykę okularów.
1. Udostępnij serwer deweloperski dla telefonu. Domyślnie Vite nasłuchuje tylko na localhost, więc telefon nie może się z nim połączyć, dopóki nie skonfigurujesz go do przyjmowania połączeń z zewnątrz. Utwórz w folderze projektu plik vite.config.ts (lub dodaj blok server do istniejącego) z ustawieniami opisanymi w dokumentacji Even, a następnie ponownie uruchom npm run dev i nie zamykaj go:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Zastąp swoim rzeczywistym lokalnym adresem IP
},
},
})
2. Znajdź adres IP komputera w sieci lokalnej. W Windows PowerShell użyj polecenia ipconfig i znajdź adres IPv4. W systemie macOS użyj polecenia ipconfig getifaddr en0 dla Wi-Fi.
3. Wygeneruj kod QR. Zastąp <YOUR-IP> adresem lokalnym:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Przejdź do telefonu. Otwórz Even Realities App > karta Even Hub > sekcja dla programistów > Scan QR.
5. Zeskanuj kod QR wyświetlony na komputerze. Telefon wczyta lokalny projekt i przekaże go do sparowanych G2.
6. Spójrz przez okulary. Sprawdź, czy główny komunikat łatwo znaleźć i zrozumieć, patrząc jednocześnie na rzeczywiste otoczenie.
Uwaga dotycząca sieci: telefon i komputer muszą mieć możliwość komunikowania się ze sobą. Firmowa sieć Wi-Fi, izolacja AP/klientów lub zapora sieciowa mogą zablokować lokalne testy za pomocą kodu QR.
Praktyczne zasady układu dla małego zielonego wyświetlacza
Jeden cel na ekran:
- Zalecane: Pokazuj jeden status, instrukcję, podpowiedź lub niewielki wybór.
- Unikaj: Łączenia panelu informacyjnego, instrukcji i nawigacji na jednej stronie.
Pisz krótko:
- Zalecane: Używaj kilku zwięzłych wierszy.
- Unikaj: Traktowania technicznego limitu tekstu jako celu projektowego.
Buduj hierarchię za pomocą odstępów:
- Zalecane: Oddzielaj tytuł, główne informacje i działanie pustą przestrzenią.
- Unikaj: Prób budowania hierarchii za pomocą nieobsługiwanych zmian rozmiaru czcionki.
Używaj kontenerów świadomie:
- Zalecane: Dodawaj kontener tylko wtedy, gdy nadaje informacji jasno określoną rolę.
- Unikaj: Dodawania kontenerów tylko dlatego, że strona pozwala na maksymalnie 12.
Projektuj z myślą o przezroczystości:
- Zalecane: Pamiętaj, że w niepodświetlonych obszarach widać rzeczywisty świat za HUD-em.
- Unikaj: Traktowania płótna jak nieprzezroczystego ekranu telefonu.
Ostrożnie z obrazami:
- Zalecane: Używaj prostych, kontrastowych ikon lub zwięzłych wskazówek wizualnych.
- Unikaj: Szczegółowych zdjęć lub grafik wymagających dokładnego przyglądania się.
Testuj na sprzęcie:
- Zalecane: Używaj symulatora dla szybkości, a następnie weryfikuj na prawdziwych G2.
- Unikaj: Zatwierdzania ostatecznego projektu wyłącznie na podstawie podglądu na komputerze.
Jakie informacje biznesowe pasują do tego wyświetlacza?
G2 sprawdza się najlepiej, gdy użytkownik potrzebuje niewielkiej ilości informacji bez przerywania bieżącego zadania lub rozmowy.
· Podpowiedzi na spotkaniach: imię i nazwisko mówcy, jedna kluczowa liczba, punkt do omówienia lub krótkie przypomnienie.
· Tłumaczenie na żywo: jeden lub dwa wiersze przetłumaczonej wypowiedzi zamiast całej strony transkrypcji.
· Prowadzone procesy pracy: jedna instrukcja lub jeden krok potwierdzenia naraz.
· Aktualizacje statusu: stan maszyny, status dostawy, postęp zadania lub krótki alert.
· Wskazówki nawigacyjne: kierunek, odległość lub prosta strzałka zamiast szczegółowej mapy.
· Podpowiedzi z bazy wiedzy: krótka odpowiedź, numer referencyjny lub notatka kontekstowa.
Dlaczego dobry projekt ekranu G2 ma znaczenie dla firm
Wartość G2 nie polega na tym, ile informacji zmieści się na wyświetlaczu, lecz na tym, jak mało uwagi wymaga. Krótki, dobrze zorganizowany HUD może wyświetlać przydatne informacje, nie zmuszając pracowników do przerywania tego, co robią, i sięgania po telefon czy laptop. W firmach może to sprzyjać bardziej skupionym spotkaniom, szybszemu dostępowi do informacji o statusie i bardziej spójnym procesom pracy krok po kroku.
Ograniczenia projektowe mogą też pomóc zespołom zachować dyscyplinę przy tworzeniu niestandardowych aplikacji. Ponowne wykorzystywanie niewielkiej liczby kontenerów, krótkich treści i przewidywalnych interakcji sprawia, że interfejsy są łatwiejsze do opanowania, i zmniejsza ryzyko, że okulary staną się kolejną przeładowaną aplikacją.
Podsumowanie
Projektowanie dla wyświetlacza Even Realities G2 zaczyna się na telefonie od sparowania i zaktualizowania okularów, a następnie przenosi się na komputer, gdzie należy włączyć dostęp do Even Hub, zainstalować Node.js i narzędzia Even Hub, utworzyć projekt Vite i otworzyć plik src/main.ts, w którym z prostego kontenera tekstowego powstaje pierwszy zielony HUD o rozdzielczości 576 x 288. Sprawdź podgląd układu w Even Hub Simulator, dostosuj treść i odstępy w tym samym pliku, użyj textContainerUpgrade, gdy zmieniają się tylko słowa, a na koniec zeskanuj deweloperski kod QR w Even Realities App, aby przetestować układ na prawdziwych G2. Najlepsze interfejsy biznesowe utrzymują każdy ekran krótki, skoncentrowany i zrozumiały na pierwszy rzut oka, dzięki czemu firmy mogą wyświetlać tłumaczenia, podpowiedzi, informacje o statusie czy instrukcje robocze, nie odrywając raz po raz pracowników od fizycznego zadania lub rozmowy, by sprawdzili inny ekran.
Tworzysz własny proces pracy dla Even G2? Zacznij od jednego przydatnego ekranu, przetestuj go w symulatorze i na prawdziwych okularach, a rozbudowuj dopiero wtedy, gdy kolejna informacja wyraźnie ułatwi użytkownikowi wykonywanie zadania.
