Resumen ejecutivo
La pantalla de las Even Realities G2 está pensada para información breve que pueda entenderse rápidamente. Even Hub ofrece a los desarrolladores un lienzo de 576 x 288 píxeles por ojo en verde monocromo, y el SDK público construye la pantalla a partir de contenedores de texto, de lista y de imagen, en lugar de una interfaz libre al estilo de un móvil. Por eso, los diseños más eficaces utilizan textos cortos, espaciado claro y solo unos pocos elementos a la vez.
El proceso de desarrollo se entiende mejor como una secuencia continua: emparejar las G2 en la aplicación móvil de Even Realities, iniciar sesión en Even Hub en un ordenador con la misma cuenta, instalar las herramientas de desarrollo, crear un proyecto, abrir src/main.ts, construir un contenedor de texto, previsualizarlo en el Simulator y, después, escanear un código QR en la aplicación móvil para probar ese mismo diseño en las gafas reales. El objetivo no es meter toda la información posible en la pantalla, sino ofrecer a quien las lleva una información útil sin desviar su atención del mundo real.
¿Qué es la pantalla de las Even Realities G2?
Even Realities G2 son unas gafas inteligentes ligeras con una pantalla binocular de guía de ondas micro-LED. En el caso de los plugins de Even Hub, las gafas actúan principalmente como superficie de visualización y de entrada: el plugin se ejecuta a través del móvil conectado, mientras que las G2 muestran el contenido y envían a la aplicación las entradas del panel táctil o del anillo R1 opcional.
El lienzo para desarrolladores es de 576 x 288 píxeles por ojo y se muestra en verde con 16 niveles de brillo. Las zonas no iluminadas permanecen transparentes, de modo que quien lleva las gafas sigue viendo el mundo real detrás de la información. Esto hace que las G2 sean más adecuadas para indicaciones, traducciones, actualizaciones de estado e instrucciones breves que para páginas densas o interfaces ricas al estilo de un móvil.
Cómo diseñar tu primera pantalla para las Even G2 desde cero
Paso 1: Configura las G2 en la aplicación móvil de Even Realities
Empieza en el móvil. Así se crea la cuenta que también usarás en el ordenador y te aseguras de que las gafas están listas.
1. Abre la Even Realities App. Crea una cuenta o inicia sesión en la aplicación móvil.
2. Empareja las G2. Abre Devices > Add device > Even G2 y sigue las indicaciones de emparejamiento.
3. Actualiza el firmware. Acepta cualquier actualización de firmware que se ofrezca tras el emparejamiento o consulta Devices > Firmware.
Paso 2: Activa el acceso de desarrollador en el ordenador
Ahora pasa al ordenador, pero mantén el móvil cerca. Usa la misma cuenta en ambos dispositivos.
1. Abre Even Hub. En un navegador del ordenador, ve a hub.evenrealities.com/login.
2. Inicia sesión con la misma cuenta. Usa el correo electrónico y la contraseña de la aplicación móvil.
3. Vuelve al móvil. Fuerza el cierre de la Even Realities App y vuelve a abrirla.
4. Busca la sección de desarrollador. Abre la pestaña Even Hub en la aplicación móvil. La sección de desarrollador debería aparecer ahora en la zona superior derecha, incluida la opción Scan QR.
Paso 3: Instala Node.js y las herramientas de Even Hub
Sigue en el ordenador. Node.js es un software que permite ejecutar Even Hub en tu ordenador. Debe estar instalado antes de que puedan ejecutarse las herramientas de línea de comandos de Even Hub.
1. Instala Node.js. Actualmente, Even Hub requiere Node 20 LTS o Node 22 o versiones más recientes.
2. Abre la aplicación Terminal o PowerShell. Usa Terminal en macOS o PowerShell/Terminal en Windows.
3. Comprueba Node.js. Escribe el siguiente comando y pulsa Intro. Si aparece una versión como v20.x o v22.x, está listo.
node -v
4. Instala las herramientas de Even Hub. En la misma ventana, introduce:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Paso 4: Crea el proyecto para las G2
El ordenador ya está preparado. Crea una nueva carpeta de proyecto y añade dentro el SDK de Even Hub.
1. Crea el proyecto en Terminal. Introduce estos comandos línea a línea:
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 también ofrece plantillas listas para usar: npx degit even-realities/evenhub-templates/minimal g2-display-demo te proporciona un proyecto con el SDK y app.json ya incluidos
2. Completa app.json. Vite ha creado el proyecto, el SDK se ha instalado dentro de él y evenhub init ha creado app.json. Abre app.json y define package_id (con formato de dominio inverso, por ejemplo com.yourcompany.g2demo), name (hasta 20 caracteres y sin contener la palabra Even) y min_sdk_version con la versión del SDK que has instalado (npm list @evenrealities/even_hub_sdk la muestra). Añade un icono en escala de grises de 24 x 24 como public/icon.png.
Paso 5: Abre el proyecto y localiza el archivo de la pantalla
El proyecto ya existe, pero la pantalla aún no se ha diseñado. Abre la carpeta en un editor de código.
1. Abre Visual Studio Code u otro editor de código. Visual Studio Code es una opción habitual.
2. Abre la carpeta del proyecto. Elige File > Open Folder y selecciona g2-display-demo.
3. Abre el archivo principal. En el panel Explorer de la izquierda, abre src > main.ts.
Este es el lugar clave: en src/main.ts se introduce el primer código de pantalla para las G2 del siguiente paso.
Paso 6: Construye un contenedor de texto sencillo
Empieza con un solo contenedor. Así confirmas que el proyecto y la pantalla funcionan antes de añadir más elementos de diseño.
1. Sustituye el código inicial de src/main.ts. Elimina el código de demostración predeterminado de Vite y pega el código siguiente; después, añade estas líneas al final para que quien lleve las gafas pueda salir de la aplicación con una doble pulsación. Las normas de envío de Even lo exigen en la primera pantalla, y sus revisores lo comprueban:
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. Guarda main.ts. Usa File > Save o Ctrl+S / Cmd+S.
- xPosition / yPosition: Dónde empieza el contenedor en el lienzo de 576 x 288.
- width / height: Cuánto espacio de pantalla recibe el contenedor.
- paddingLength: Espacio entre el borde del contenedor y el texto.
- content: Las palabras que ve quien lleva las gafas.
- containerID / containerName: La identidad que se usa para actualizar más tarde este mismo contenedor.
- isEventCapture: 1: Marca este contenedor como el único que recibe los principales eventos de toque y deslizamiento.
Paso 7: Previsualiza la pantalla en el Even Hub Simulator
El código está guardado. Previsualízalo en el ordenador antes de enviarlo a las gafas reales.
1. Vuelve a Terminal. Asegúrate de que sigue dentro de la carpeta g2-display-demo.
2. Inicia el proyecto. Introduce:
npm run dev
3. Mantén ese Terminal en ejecución. Normalmente, Vite muestra una dirección como http://localhost:5173.
4. Abre una segunda ventana de Terminal. Inicia el Simulator con la misma dirección local:
evenhub-simulator http://localhost:5173
5. Comprueba el Simulator. Deberías ver MACHINE 04, Ready y > Continue dentro de la vista previa de 576 x 288.
Paso 8: Ajusta el diseño en el mismo archivo src/main.ts
No abras un programa ni una sección nuevos. Vuelve al archivo que ya usaste en el paso 6.
1. Vuelve a Visual Studio Code > src > main.ts. Mantén en ejecución el Simulator y el servidor de desarrollo.
2. Cambia primero el contenido. Sustituye las palabras de ejemplo dentro de content por la información real de tu caso de uso.
3. Ajusta el espaciado solo si es necesario. Cambia xPosition, yPosition, width, height o paddingLength; después, guarda y vuelve a mirar el Simulator.
4. Añade otro contenedor solo si mejora la claridad. Si separas un encabezado, el mensaje principal o un estado, asigna a cada contenedor un containerID y un containerName únicos (de 16 caracteres como máximo), añádelo a textObject y aumenta containerTotalNum en consecuencia. Una página admite hasta 8 contenedores de texto o de lista más 4 contenedores de imagen.
No añadas elementos de diseño propios de un móvil: las G2 no ofrecen tamaños de fuente normales, tipografía en negrita, tarjetas de color ni rellenos de fondo arbitrarios. En su lugar, utiliza la posición, el espaciado, los bordes y los niveles de brillo compatibles.
Paso 9: Actualiza el texto cambiante sin reconstruir la página
Si el contenedor permanece en el mismo lugar y solo cambian las palabras, actualiza ese contenedor existente.
1. Sigue en src/main.ts. En la parte superior del archivo, donde se importan las herramientas del SDK de Even Hub, añade TextContainerUpgrade.
2. Usa el mismo ID y nombre de contenedor. Por ejemplo:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Usa esto solo para cambios de contenido. Si cambia el número, la posición o el tamaño de los contenedores, reconstruye la página. Even Realities documenta textContainerUpgrade como la opción más rápida y sin parpadeos para actualizaciones que solo afectan al texto.
Paso 10: Prueba el mismo diseño en las G2 reales
El Simulator comprueba la estructura, pero el diseño final debe revisarse a través de la óptica real.
1. Haz que el servidor de desarrollo sea accesible desde el móvil. Por defecto, Vite solo escucha en localhost, así que el móvil no puede acceder a él hasta que le indiques que acepte conexiones externas. Crea un vite.config.ts en la carpeta del proyecto (o añade el bloque server al que ya tengas) con la configuración que documenta Even; después, reinicia npm run dev y mantenlo en ejecución:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Sustitúyela por tu dirección IP local real
},
},
})
2. Busca la IP de la red local del ordenador. En Windows PowerShell, usa ipconfig y busca la dirección IPv4. En macOS, usa ipconfig getifaddr en0 para la wifi.
3. Genera el código QR. Sustituye <YOUR-IP> por la dirección local:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Pasa al móvil. Abre Even Realities App > pestaña Even Hub > sección de desarrollador > Scan QR.
5. Escanea el QR que aparece en el ordenador. El móvil carga el proyecto local y lo transmite a las G2 emparejadas.
6. Mira a través de las gafas. Comprueba que el mensaje principal es fácil de localizar y de entender mientras miras el entorno real.
Nota sobre la red: el móvil y el ordenador deben poder comunicarse entre sí. La wifi corporativa, el aislamiento de AP/clientes o un cortafuegos pueden bloquear las pruebas locales mediante QR.
Reglas prácticas de diseño para la pequeña pantalla verde
Un propósito por pantalla:
- Haz: Muestra un estado, una instrucción, una indicación o una pequeña elección.
- Evita: Combinar un panel de control, instrucciones y navegación en una misma página.
Mantén el texto breve:
- Haz: Usa unas pocas líneas compactas.
- Evita: Tomar el límite técnico de texto como objetivo de diseño.
Usa el espaciado para crear jerarquía:
- Haz: Separa el título, la información principal y la acción con espacio vacío.
- Evita: Intentar crear jerarquía con cambios de tamaño de fuente no compatibles.
Usa los contenedores de forma deliberada:
- Haz: Añade un contenedor solo cuando dé a la información un papel claro.
- Evita: Añadir contenedores solo porque la página permite hasta 12.
Diseña pensando en la transparencia:
- Haz: Recuerda que las zonas no iluminadas muestran el mundo real detrás del HUD.
- Evita: Tratar el lienzo como si fuera la pantalla opaca de un móvil.
Usa las imágenes con cuidado:
- Haz: Usa iconos sencillos de alto contraste o señales compactas.
- Evita: Fotos o gráficos detallados que requieran observarse de cerca.
Prueba en el hardware:
- Haz: Usa el Simulator para ganar rapidez y, después, verifica en las G2 reales.
- Evita: Aprobar el diseño final basándote solo en la vista previa del ordenador.
¿Qué información empresarial encaja en esta pantalla?
Las G2 rinden mejor cuando quien las lleva necesita una pequeña cantidad de información sin abandonar la tarea o la conversación en curso.
· Indicaciones en reuniones: el nombre de un ponente, una cifra clave, un punto de conversación o un breve recordatorio.
· Traducción en directo: una o dos líneas de discurso traducido en lugar de una página completa de transcripción.
· Flujos de trabajo guiados: una instrucción o un paso de confirmación cada vez.
· Actualizaciones de estado: estado de una máquina, estado de una entrega, progreso de una tarea o una alerta breve.
· Indicaciones de navegación: una dirección, una distancia o una flecha sencilla en lugar de un mapa detallado.
· Indicaciones de conocimiento: una respuesta breve, un número de referencia o una nota contextual.
Por qué un buen diseño de pantalla para las G2 importa a las empresas
El valor de las G2 no está en cuánta información cabe en la pantalla, sino en la poca atención que esta requiere. Un HUD breve y bien estructurado puede mostrar información útil sin pedir a los empleados que dejen lo que están haciendo y abran un móvil o un portátil. Para las empresas, esto puede contribuir a reuniones más centradas, un acceso más rápido a la información de estado y flujos de trabajo paso a paso más coherentes.
Las limitaciones de diseño también pueden ayudar a los equipos a mantener la disciplina en sus aplicaciones personalizadas. Reutilizar un número reducido de contenedores, contenidos breves e interacciones predecibles hace que las interfaces sean más fáciles de aprender y reduce el riesgo de convertir las gafas en otra aplicación saturada.
Conclusión
Diseñar para la pantalla de las Even Realities G2 empieza en el móvil, emparejando y actualizando las gafas, y continúa en el ordenador: activar el acceso a Even Hub, instalar Node.js y las herramientas de Even Hub, crear un proyecto de Vite y abrir src/main.ts, donde se construye el primer HUD verde de 576 x 288 a partir de un contenedor de texto sencillo. Previsualiza el diseño en el Even Hub Simulator, ajusta el contenido y el espaciado en el mismo archivo, usa textContainerUpgrade cuando solo cambien las palabras y, por último, escanea el código QR de desarrollo en la Even Realities App para probar el diseño en las G2 reales. Las interfaces empresariales más eficaces mantienen cada pantalla breve, centrada y fácil de entender de un vistazo, lo que permite a las empresas mostrar traducciones, indicaciones, información de estado o instrucciones de flujos de trabajo sin apartar una y otra vez a los empleados de la tarea física o de la conversación para consultar otra pantalla.
¿Estás creando un flujo de trabajo personalizado para las Even G2? Empieza con una pantalla útil, pruébala en el Simulator y en las gafas reales, y amplíala solo cuando la siguiente información mejore claramente la tarea de quien las lleva.
