Sintesi
Il display di Even Realities G2 è pensato per informazioni brevi, comprensibili in un attimo. Even Hub mette a disposizione degli sviluppatori un'area di 576 x 288 pixel per occhio in verde monocromatico, e l'SDK pubblico costruisce la schermata a partire da container di testo, elenco e immagine, anziché da un'interfaccia libera in stile smartphone. I layout più efficaci, quindi, usano testi brevi, spaziature chiare e pochi elementi alla volta.
Il flusso di sviluppo si comprende meglio come un'unica sequenza continua: abbina i G2 nell'app Even Realities sul telefono, accedi a Even Hub da un computer con lo stesso account, installa gli strumenti di sviluppo, crea un progetto, apri src/main.ts, costruisci un container di testo, visualizzane l'anteprima nel Simulator e infine scansiona un codice QR nell'app sul telefono per provare lo stesso layout sugli occhiali veri. L'obiettivo non è far stare sul display quante più informazioni possibile, ma offrire a chi li indossa un'informazione utile senza distogliere l'attenzione dal mondo reale.
Che cos'è il display di Even Realities G2?
Even Realities G2 sono occhiali smart leggeri con un display binoculare a guida d'onda micro-LED. Per i plugin Even Hub, gli occhiali fungono principalmente da superficie di visualizzazione e di input: il plugin viene eseguito tramite il telefono collegato, mentre i G2 mostrano i contenuti e inviano all'app l'input del touchpad o dell'anello R1 opzionale.
L'area di lavoro per gli sviluppatori misura 576 x 288 pixel per occhio ed è visualizzata in verde con 16 livelli di luminosità. Le aree non illuminate restano trasparenti, quindi chi indossa gli occhiali continua a vedere il mondo reale dietro le informazioni. Per questo i G2 si prestano meglio a promemoria, traduzioni, aggiornamenti di stato e istruzioni brevi che a pagine fitte o a interfacce ricche in stile smartphone.
Come progettare da zero il tuo primo display per Even G2
Passo 1: configura i G2 nell'app Even Realities sul telefono
Parti dal telefono. Così crei l'account che userai anche sul computer e ti assicuri che gli occhiali siano pronti.
1. Apri l'app Even Realities. Crea un account o accedi dall'app sul telefono.
2. Abbina i G2. Apri Devices > Add device > Even G2 e segui le istruzioni di abbinamento.
3. Aggiorna il firmware. Accetta qualsiasi aggiornamento firmware proposto dopo l'abbinamento, oppure controlla in Devices > Firmware.
Passo 2: abilita l'accesso sviluppatore sul computer
Ora passa al computer, ma tieni il telefono a portata di mano. Usa lo stesso account su entrambi i dispositivi.
1. Apri Even Hub. In un browser del computer, vai su hub.evenrealities.com/login.
2. Accedi con lo stesso account. Usa l'email e la password dell'app sul telefono.
3. Torna al telefono. Forza la chiusura dell'app Even Realities, poi riaprila.
4. Trova la sezione sviluppatori. Apri la scheda Even Hub nell'app sul telefono. La sezione sviluppatori dovrebbe ora comparire in alto a destra, con l'opzione Scan QR.
Passo 3: installa Node.js e gli strumenti Even Hub
Resta sul computer. Node.js è il software che consente di eseguire Even Hub sul tuo computer. Deve essere installato prima che gli strumenti a riga di comando di Even Hub possano funzionare.
1. Installa Node.js. Al momento Even Hub richiede Node 20 LTS oppure Node 22 o versioni successive.
2. Apri Terminale o l'app PowerShell. Usa Terminale su macOS oppure PowerShell/Terminale su Windows.
3. Verifica Node.js. Digita il comando qui sotto e premi Invio. Se compare una versione come v20.x o v22.x, è tutto pronto.
node -v
4. Installa gli strumenti Even Hub. Nella stessa finestra, inserisci:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Passo 4: crea il progetto G2
Il computer ora è pronto. Crea una nuova cartella di progetto e aggiungici l'SDK di Even Hub.
1. Crea il progetto nel Terminale. Inserisci questi comandi una riga alla volta:
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 offre anche modelli pronti all'uso: npx degit even-realities/evenhub-templates/minimal g2-display-demo ti fornisce un progetto con l'SDK e app.json già configurati
2. Completa app.json. Vite ha creato il progetto, l'SDK è stato installato al suo interno ed evenhub init ha creato app.json. Apri app.json e imposta package_id (in formato dominio inverso, ad esempio com.yourcompany.g2demo), name (massimo 20 caratteri, senza la parola Even) e min_sdk_version con la versione dell'SDK che hai installato (la puoi vedere con npm list @evenrealities/even_hub_sdk). Aggiungi un'icona in scala di grigi da 24 x 24 come public/icon.png.
Passo 5: apri il progetto e trova il file del display
Il progetto esiste, ma il display non è ancora stato progettato. Apri la cartella in un editor di codice.
1. Apri Visual Studio Code o un altro editor di codice. Visual Studio Code è una scelta diffusa.
2. Apri la cartella del progetto. Scegli File > Open Folder e seleziona g2-display-demo.
3. Apri il file principale. Nel pannello Explorer a sinistra, apri src > main.ts.
Questo è il punto chiave: src/main.ts è il file in cui inserirai il primo codice per il display dei G2 nel passo successivo.
Passo 6: costruisci un semplice container di testo
Inizia con un solo container. In questo modo verifichi che progetto e display funzionino prima di aggiungere altri elementi di layout.
1. Sostituisci il codice iniziale in src/main.ts. Elimina il codice demo predefinito di Vite e incolla il codice qui sotto, quindi aggiungi queste righe alla fine, così chi indossa gli occhiali può uscire dall'app con una doppia pressione. Le regole di pubblicazione di Even lo richiedono nella prima schermata e i loro revisori lo verificano:
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. Salva main.ts. Usa File > Save oppure Ctrl+S / Cmd+S.
- xPosition / yPosition: Il punto in cui inizia il container nell'area di 576 x 288.
- width / height: Quanto spazio del display riceve il container.
- paddingLength: Lo spazio tra il bordo del container e il testo.
- content: Le parole che vede chi indossa gli occhiali.
- containerID / containerName: L'identità usata per aggiornare in seguito questo stesso container.
- isEventCapture: 1: Indica che questo è l'unico container che riceve i principali eventi di tocco e scorrimento.
Passo 7: visualizza l'anteprima del display nell'Even Hub Simulator
Il codice è salvato. Visualizzane l'anteprima sul computer prima di inviarlo agli occhiali veri.
1. Torna al Terminale. Assicurati che sia ancora nella cartella g2-display-demo.
2. Avvia il progetto. Inserisci:
npm run dev
3. Lascia in esecuzione quel Terminale. Di norma Vite mostra un indirizzo come http://localhost:5173.
4. Apri una seconda finestra del Terminale. Avvia il Simulator con lo stesso indirizzo locale:
evenhub-simulator http://localhost:5173
5. Controlla il Simulator. Dovresti vedere MACHINE 04, Ready e > Continue all'interno dell'anteprima di 576 x 288.
Passo 8: modifica il layout nello stesso file src/main.ts
Non aprire un nuovo programma o una nuova sezione. Torna al file che hai già usato nel passo 6.
1. Torna a Visual Studio Code > src > main.ts. Lascia in esecuzione il Simulator e il server di sviluppo.
2. Modifica prima il contenuto. Sostituisci le parole di esempio in content con le informazioni reali del tuo caso d'uso.
3. Regola le spaziature solo se necessario. Modifica xPosition, yPosition, width, height o paddingLength, poi salva e ricontrolla il Simulator.
4. Aggiungi un altro container solo se migliora la chiarezza. Se separi un titolo, il messaggio principale o uno stato, assegna a ogni container un containerID e un containerName univoci (al massimo 16 caratteri), aggiungilo a textObject e aumenta containerTotalNum di conseguenza. Una pagina può contenere fino a 8 container di testo o elenco più 4 container di immagine.
Non aggiungere elementi di design tipici degli smartphone: i G2 non offrono il normale dimensionamento dei caratteri, il grassetto, schede colorate o riempimenti di sfondo arbitrari. Usa invece posizione, spaziature, bordi e i livelli di luminosità supportati.
Passo 9: aggiorna il testo variabile senza ricostruire la pagina
Se il container resta nella stessa posizione e cambiano solo le parole, aggiorna il container esistente.
1. Resta in src/main.ts. All'inizio del file, dove vengono importati gli strumenti dell'SDK di Even Hub, aggiungi TextContainerUpgrade.
2. Usa lo stesso ID e lo stesso nome del container. Ad esempio:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Usalo solo per modifiche al contenuto. Se cambiano il numero, la posizione o le dimensioni dei container, ricostruisci invece la pagina. Even Realities documenta textContainerUpgrade come l'opzione più rapida e priva di sfarfallio per gli aggiornamenti di solo testo.
Passo 10: prova lo stesso layout sui G2 reali
Il Simulator verifica la struttura, ma il design finale va controllato attraverso le ottiche reali.
1. Rendi il server di sviluppo raggiungibile dal telefono. Per impostazione predefinita Vite è in ascolto solo su localhost, quindi il telefono non può raggiungerlo finché non gli indichi di accettare connessioni esterne. Crea un file vite.config.ts nella cartella del progetto (oppure aggiungi il blocco server a quello che hai già) con le impostazioni documentate da Even, poi riavvia npm run dev e lascialo in esecuzione:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Sostituisci con il tuo indirizzo IP locale effettivo
},
},
})
2. Trova l'IP del computer nella rete locale. In Windows PowerShell, usa ipconfig e individua l'indirizzo IPv4. Su macOS, usa ipconfig getifaddr en0 per il Wi-Fi.
3. Genera il codice QR. Sostituisci <YOUR-IP> con l'indirizzo locale:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Passa al telefono. Apri l'app Even Realities > scheda Even Hub > sezione sviluppatori > Scan QR.
5. Scansiona il QR mostrato sul computer. Il telefono carica il progetto locale e lo trasmette ai G2 abbinati.
6. Guarda attraverso gli occhiali. Verifica che il messaggio principale sia facile da trovare e comprensibile mentre osservi l'ambiente reale.
Nota sulla rete: il telefono e il computer devono potersi raggiungere a vicenda. Il Wi-Fi aziendale, l'isolamento AP/client o un firewall possono bloccare i test locali tramite QR.
Regole pratiche di layout per il piccolo display verde
Un solo scopo per schermata:
- Sì: mostra un solo stato, un'istruzione, un promemoria o una scelta semplice.
- Evita: di combinare dashboard, istruzioni e navigazione in un'unica pagina.
Testi brevi:
- Sì: usa poche righe compatte.
- Evita: di usare il limite tecnico di testo come obiettivo di design.
Usa le spaziature per la gerarchia:
- Sì: separa titolo, informazione principale e azione con spazio vuoto.
- Evita: di creare gerarchia con cambi di dimensione del carattere non supportati.
Usa i container con criterio:
- Sì: aggiungi un container solo quando assegna all'informazione un ruolo chiaro.
- Evita: di aggiungere container solo perché la pagina ne consente fino a 12.
Progetta tenendo conto della trasparenza:
- Sì: ricorda che le aree non illuminate mostrano il mondo reale dietro l'HUD.
- Evita: di trattare l'area di lavoro come lo schermo opaco di un telefono.
Usa le immagini con attenzione:
- Sì: usa icone semplici ad alto contrasto o indicazioni compatte.
- Evita: foto dettagliate o grafiche che richiedono un esame ravvicinato.
Prova sull'hardware:
- Sì: usa il Simulator per velocizzare il lavoro, poi verifica sui G2 reali.
- Evita: di approvare il design finale basandoti solo sull'anteprima su desktop.
Quali informazioni aziendali sono adatte a questo display?
I G2 danno il meglio quando chi li indossa ha bisogno di una piccola quantità di informazioni senza interrompere l'attività o la conversazione in corso.
· Promemoria per le riunioni: il nome di un relatore, un dato chiave, un punto di discussione o un breve promemoria.
· Traduzione in tempo reale: una o due righe di parlato tradotto anziché una pagina intera di trascrizione.
· Flussi di lavoro guidati: un'istruzione o un passaggio di conferma alla volta.
· Aggiornamenti di stato: stato di una macchina, stato di una consegna, avanzamento di un'attività o un breve avviso.
· Indicazioni di navigazione: una direzione, una distanza o una semplice freccia anziché una mappa dettagliata.
· Promemoria informativi: una risposta breve, un numero di riferimento o una nota contestuale.
Perché un buon design del display dei G2 è importante per le aziende
Il valore dei G2 non sta in quante informazioni si riescono a far stare sul display, ma in quanta poca attenzione il display richiede. Un HUD breve e ben strutturato può far emergere informazioni utili senza costringere i dipendenti a interrompere ciò che stanno facendo per aprire un telefono o un portatile. Per le aziende, questo può favorire riunioni più concentrate, un accesso più rapido alle informazioni di stato e flussi di lavoro passo dopo passo più coerenti.
I limiti di design possono anche aiutare i team a mantenere disciplinate le applicazioni personalizzate. Riutilizzare un numero ridotto di container, contenuti brevi e interazioni prevedibili rende le interfacce più facili da imparare e riduce il rischio di trasformare gli occhiali nell'ennesima applicazione affollata.
Conclusione
La progettazione per il display di Even Realities G2 parte dal telefono, con l'abbinamento e l'aggiornamento degli occhiali, per poi passare al computer: qui si abilita l'accesso a Even Hub, si installano Node.js e gli strumenti Even Hub, si crea un progetto Vite e si apre src/main.ts, dove il primo HUD verde da 576 x 288 viene costruito a partire da un semplice container di testo. Visualizza l'anteprima del layout nell'Even Hub Simulator, regola contenuto e spaziature nello stesso file, usa textContainerUpgrade quando cambiano solo le parole e, infine, scansiona il codice QR di sviluppo nell'app Even Realities per provare il layout sui G2 reali. Le interfacce aziendali più efficaci mantengono ogni schermata breve, mirata e comprensibile a colpo d'occhio, consentendo alle aziende di far emergere traduzioni, promemoria, informazioni di stato o istruzioni operative senza distogliere ripetutamente i dipendenti dall'attività fisica o dalla conversazione per controllare un altro schermo.
Stai sviluppando un flusso di lavoro personalizzato per Even G2? Inizia con una schermata utile, provala nel Simulator e sugli occhiali reali, poi amplia solo quando l'informazione successiva migliora chiaramente l'attività di chi li indossa.
