Resumo executivo
O ecrã dos Even Realities G2 foi concebido para informação breve que possa ser compreendida rapidamente. O Even Hub oferece aos programadores uma área de desenho de 576 x 288 píxeis por olho, em verde monocromático, e o SDK público constrói o ecrã a partir de contentores de texto, lista e imagem, em vez de uma interface livre ao estilo de um telemóvel. Por isso, as disposições mais eficazes usam texto curto, espaçamento claro e apenas alguns elementos de cada vez.
O fluxo de desenvolvimento é mais fácil de compreender numa sequência contínua: emparelhar os G2 na aplicação Even Realities para telemóvel, iniciar sessão no Even Hub num computador com a mesma conta, instalar as ferramentas de desenvolvimento, criar um projeto, abrir src/main.ts, construir um contentor de texto, pré-visualizá-lo no Simulator e, depois, ler um código QR na aplicação do telemóvel para testar a mesma disposição nos óculos reais. O objetivo não é colocar o máximo de informação possível no ecrã, mas sim dar a quem usa os óculos uma informação útil sem desviar a atenção do mundo real.
O que é o ecrã dos Even Realities G2?
Even Realities G2 são uns óculos inteligentes leves com um ecrã binocular de guia de ondas micro-LED. Para os plugins do Even Hub, os óculos funcionam sobretudo como superfície de visualização e de entrada: o plugin é executado através do telemóvel ligado, enquanto os G2 mostram o conteúdo e enviam de volta para a aplicação a entrada do touchpad ou do anel R1 opcional.
A área de desenho para programadores tem 576 x 288 píxeis por olho e é apresentada a verde, com 16 níveis de brilho. As áreas não iluminadas permanecem transparentes, pelo que o utilizador continua a ver o mundo real por trás da informação. Isto torna os G2 mais adequados para avisos, traduções, atualizações de estado e instruções curtas do que para páginas densas ou interfaces ricas ao estilo de um telemóvel.
Como conceber o seu primeiro ecrã para os Even G2 a partir do zero
Passo 1: Configurar os G2 na aplicação Even Realities para telemóvel
Comece pelo telemóvel. Isto cria a conta que também irá usar no computador e garante que os óculos estão prontos.
1. Abra a Even Realities App. Crie uma conta ou inicie sessão na aplicação do telemóvel.
2. Emparelhe os G2. Abra Devices > Add device > Even G2 e siga as instruções de emparelhamento.
3. Atualize o firmware. Aceite qualquer atualização de firmware proposta após o emparelhamento ou verifique em Devices > Firmware.
Passo 2: Ativar o acesso de programador no computador
Passe agora para o computador, mas mantenha o telemóvel por perto. Use a mesma conta nos dois dispositivos.
1. Abra o Even Hub. Num navegador no computador, aceda a hub.evenrealities.com/login.
2. Inicie sessão com a mesma conta. Use o e-mail e a palavra-passe da aplicação do telemóvel.
3. Volte ao telemóvel. Force o encerramento da Even Realities App e volte a abri-la.
4. Encontre a secção de programador. Abra o separador Even Hub na aplicação do telemóvel. A secção de programador deverá agora aparecer no canto superior direito, incluindo a opção Scan QR.
Passo 3: Instalar o Node.js e as ferramentas do Even Hub
Continue no computador. O Node.js é o software que permite executar o Even Hub no seu computador. Tem de ser instalado antes de ser possível executar as ferramentas de linha de comandos do Even Hub.
1. Instale o Node.js. Atualmente, o Even Hub requer o Node 20 LTS ou o Node 22 ou versões mais recentes.
2. Abra a aplicação Terminal ou PowerShell. Use o Terminal no macOS ou o PowerShell/Terminal no Windows.
3. Verifique o Node.js. Escreva o comando abaixo e prima Enter. Uma versão como v20.x ou v22.x significa que está pronto.
node -v
4. Instale as ferramentas do Even Hub. Na mesma janela, introduza:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Passo 4: Criar o projeto para os G2
O computador está agora preparado. Crie uma nova pasta de projeto e adicione-lhe o SDK do Even Hub.
1. Crie o projeto no Terminal. Introduza estes comandos, uma linha de cada vez:
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
A Even também disponibiliza modelos prontos a usar: npx degit even-realities/evenhub-templates/minimal g2-display-demo dá-lhe um projeto com o SDK e o app.json já configurados
2. Conclua o app.json. O Vite criou o projeto, o SDK foi instalado dentro dele e o evenhub init criou o app.json. Abra o app.json e defina package_id (no estilo de domínio invertido, por exemplo com.yourcompany.g2demo), name (até 20 caracteres, sem poder conter a palavra Even) e min_sdk_version com a versão do SDK que instalou (npm list @evenrealities/even_hub_sdk mostra-a). Adicione um ícone em tons de cinzento de 24 x 24 como public/icon.png.
Passo 5: Abrir o projeto e encontrar o ficheiro do ecrã
O projeto já existe, mas o ecrã ainda não foi concebido. Abra a pasta num editor de código.
1. Abra o Visual Studio Code ou outro editor de código. O Visual Studio Code é uma opção comum.
2. Abra a pasta do projeto. Escolha File > Open Folder e selecione g2-display-demo.
3. Abra o ficheiro principal. No painel Explorer, à esquerda, abra src > main.ts.
Este é o local essencial: é em src/main.ts que se introduz o primeiro código de ecrã para os G2, no passo seguinte.
Passo 6: Construir um contentor de texto simples
Comece com um único contentor. Isto confirma que o projeto e o ecrã funcionam antes de adicionar mais elementos de disposição.
1. Substitua o código inicial em src/main.ts. Apague o código de demonstração predefinido do Vite e cole o código abaixo; depois, acrescente estas linhas no final para que o utilizador possa sair da aplicação com um duplo toque. As regras de submissão da Even exigem isto no primeiro ecrã e os revisores verificam-no:
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. Guarde o main.ts. Use File > Save ou Ctrl+S / Cmd+S.
- xPosition / yPosition: Onde o contentor começa na área de desenho de 576 x 288.
- width / height: Quanto espaço de ecrã o contentor recebe.
- paddingLength: Espaço entre a margem do contentor e o texto.
- content: As palavras que o utilizador vê.
- containerID / containerName: A identificação usada para atualizar mais tarde este mesmo contentor.
- isEventCapture: 1: Marca este como o único contentor que recebe os principais eventos de toque e de deslize.
Passo 7: Pré-visualizar o ecrã no Even Hub Simulator
O código está guardado. Pré-visualize-o no computador antes de o enviar para os óculos reais.
1. Volte ao Terminal. Certifique-se de que continua dentro da pasta g2-display-demo.
2. Inicie o projeto. Introduza:
npm run dev
3. Mantenha esse Terminal em execução. Normalmente, o Vite mostra um endereço como http://localhost:5173.
4. Abra uma segunda janela do Terminal. Inicie o Simulator com o mesmo endereço local:
evenhub-simulator http://localhost:5173
5. Verifique o Simulator. Deverá ver MACHINE 04, Ready e > Continue dentro da pré-visualização de 576 x 288.
Passo 8: Ajustar a disposição no mesmo ficheiro src/main.ts
Não abra um novo programa nem uma nova secção. Volte ao ficheiro que já usou no passo 6.
1. Volte a Visual Studio Code > src > main.ts. Mantenha o Simulator e o servidor de desenvolvimento em execução.
2. Altere primeiro o conteúdo. Substitua as palavras de exemplo dentro de content pela informação real do seu caso de utilização.
3. Ajuste o espaçamento apenas se for necessário. Altere xPosition, yPosition, width, height ou paddingLength; depois, guarde e volte a observar o Simulator.
4. Adicione outro contentor apenas se isso melhorar a clareza. Se separar um título, a mensagem principal ou o estado, atribua a cada contentor um containerID e um containerName únicos (16 caracteres, no máximo), adicione-o a textObject e aumente containerTotalNum em conformidade. Uma página comporta até 8 contentores de texto ou lista, mais 4 contentores de imagem.
Não adicione elementos de design ao estilo de um telemóvel: os G2 não oferecem o dimensionamento normal do tipo de letra, tipografia a negrito, cartões coloridos nem preenchimentos de fundo arbitrários. Em vez disso, use a posição, o espaçamento, os contornos e os níveis de brilho suportados.
Passo 9: Atualizar texto variável sem reconstruir a página
Se o contentor se mantiver no mesmo sítio e só as palavras mudarem, atualize esse contentor existente.
1. Continue em src/main.ts. No topo do ficheiro, onde as ferramentas do SDK do Even Hub são importadas, adicione TextContainerUpgrade.
2. Use o mesmo ID e nome de contentor. Por exemplo:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Use isto apenas para alterações de conteúdo. Se o número, a posição ou o tamanho dos contentores mudar, reconstrua antes a página. A Even Realities documenta o textContainerUpgrade como a opção mais rápida e sem cintilação para atualizações apenas de texto.
Passo 10: Testar a mesma disposição nos G2 reais
O Simulator verifica a estrutura, mas o design final deve ser avaliado através da ótica real.
1. Torne o servidor de desenvolvimento acessível a partir do telemóvel. Por predefinição, o Vite só escuta em localhost, pelo que o telemóvel não lhe consegue aceder até que lhe indique que aceite ligações externas. Crie um vite.config.ts na pasta do projeto (ou adicione o bloco server ao que já tem) com as definições documentadas pela Even; depois, reinicie npm run dev e mantenha-o em execução:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Substitua pelo seu endereço IP local real
},
},
})
2. Encontre o IP de rede local do computador. No Windows PowerShell, use ipconfig e procure o endereço IPv4. No macOS, use ipconfig getifaddr en0 para Wi-Fi.
3. Gere o código QR. Substitua <YOUR-IP> pelo endereço local:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Passe para o telemóvel. Abra Even Realities App > separador Even Hub > secção de programador > Scan QR.
5. Leia o QR apresentado no computador. O telemóvel carrega o projeto local e transmite-o aos G2 emparelhados.
6. Olhe através dos óculos. Verifique se a mensagem principal é fácil de encontrar e de compreender enquanto olha para o ambiente real.
Nota sobre a rede: o telemóvel e o computador têm de conseguir comunicar entre si. Uma rede Wi-Fi empresarial, o isolamento AP/cliente ou uma firewall podem bloquear os testes locais com QR.
Regras práticas de disposição para o pequeno ecrã verde
Um objetivo por ecrã:
- Faça: Mostre um estado, uma instrução, um aviso ou uma pequena escolha.
- Evite: Combinar um painel, instruções e navegação numa só página.
Mantenha o texto curto:
- Faça: Use algumas linhas compactas.
- Evite: Usar o limite técnico de texto como objetivo de design.
Use o espaçamento para criar hierarquia:
- Faça: Separe o título, a informação principal e a ação com espaço vazio.
- Evite: Tentar criar hierarquia com alterações de tamanho de letra não suportadas.
Use os contentores de forma deliberada:
- Faça: Adicione um contentor apenas quando este atribuir à informação uma função clara.
- Evite: Adicionar contentores só porque a página permite até 12.
Conceba a pensar na transparência:
- Faça: Lembre-se de que as áreas não iluminadas mostram o mundo real por trás do HUD.
- Evite: Tratar a área de desenho como um ecrã de telemóvel opaco.
Use imagens com cuidado:
- Faça: Use ícones simples de alto contraste ou indicações compactas.
- Evite: Fotografias ou gráficos detalhados que exijam uma observação atenta.
Teste no hardware:
- Faça: Use o Simulator pela rapidez e, depois, confirme nos G2 reais.
- Evite: Aprovar o design final apenas com base na pré-visualização no computador.
Que informação empresarial se adequa a este ecrã?
Os G2 dão o seu melhor quando o utilizador precisa de uma pequena quantidade de informação sem abandonar a tarefa ou a conversa em curso.
· Avisos em reuniões: o nome de um orador, um número-chave, um ponto de discussão ou um lembrete curto.
· Tradução em direto: uma ou duas linhas de discurso traduzido, em vez de uma página completa de transcrição.
· Fluxos de trabalho guiados: uma instrução ou um passo de confirmação de cada vez.
· Atualizações de estado: estado da máquina, estado da entrega, progresso da tarefa ou um alerta curto.
· Indicações de navegação: uma direção, uma distância ou uma seta simples, em vez de um mapa detalhado.
· Apoio ao conhecimento: uma resposta curta, um número de referência ou uma nota contextual.
Porque é que um bom design de ecrã para os G2 é importante para as empresas
O valor dos G2 não está na quantidade de informação que cabe no ecrã, mas na pouca atenção que o ecrã exige. Um HUD curto e bem estruturado pode apresentar informação útil sem obrigar os colaboradores a parar o que estão a fazer para abrir um telemóvel ou um portátil. Para as empresas, isso pode contribuir para reuniões mais focadas, um acesso mais rápido a informação de estado e fluxos de trabalho passo a passo mais consistentes.
Os limites de design também podem ajudar as equipas a manter as aplicações personalizadas disciplinadas. Reutilizar um pequeno número de contentores, conteúdo curto e interações previsíveis torna as interfaces mais fáceis de aprender e reduz o risco de transformar os óculos em mais uma aplicação sobrecarregada.
Conclusão
Conceber para o ecrã dos Even Realities G2 começa no telemóvel, emparelhando e atualizando os óculos, e passa depois para o computador para ativar o acesso ao Even Hub, instalar o Node.js e as ferramentas do Even Hub, criar um projeto Vite e abrir src/main.ts, onde o primeiro HUD verde de 576 x 288 é construído a partir de um contentor de texto simples. Pré-visualize a disposição no Even Hub Simulator, ajuste o conteúdo e o espaçamento no mesmo ficheiro, use textContainerUpgrade quando apenas as palavras mudarem e, por fim, leia o código QR de desenvolvimento na Even Realities App para testar a disposição nos G2 reais. As interfaces empresariais mais eficazes mantêm cada ecrã curto, focado e fácil de compreender num relance, permitindo às empresas apresentar traduções, avisos, informação de estado ou instruções de fluxo de trabalho sem afastar repetidamente os colaboradores da tarefa física ou da conversa para consultarem outro ecrã.
Está a criar um fluxo de trabalho personalizado para os Even G2? Comece com um ecrã útil, teste-o no Simulator e nos óculos reais e só depois expanda, quando a informação seguinte melhorar claramente a tarefa do utilizador.
