skills.rest
kyle-deprow
kyle-deprowCOMMUNITY
Explore all skills by this author →
GitHub

g2-display-ui

Render pixel-precise UI containers on G2 AR glasses displays.

Updated Mar 21, 2026
Search Tags:#ui#layout#sdk#containers#ar#display#g2
One-click install
npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill g2-display-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: g2-display-ui
Source: https://github.com/kyle-deprow/ai_scaffolding/tree/main/skills/g2-display-ui
Command: npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill g2-display-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The G2 display UI system defines a pixel-precise container model to render interfaces on the 576×288 per-eye canvas, allowing deterministic layouts without traditional web primitives.

Core Features & Use Cases

  • Pixel-accurate text, list, and image containers with precise positioning on a black/off transparent canvas.
  • Border decorations, 4-bit greyscale rendering, and a constrained container model to guide firmware-driven UI patterns.
  • Patterns for fake buttons, progress indicators, and page transitions using container composition and event capture.

Quick Start

Define your containers (text/list/image) within the 576×288 canvas and build the startup page with createStartUpPageContainer.

Frequently Asked Questions about g2-display-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create pixel-precise UI layouts on a 576x288 AR display?▼

Pixel-precise AR UI layouts are created by declaring containers with exact dimensions and borders on a 576x288 per-eye canvas. You define text, list, and image containers using a deterministic model that avoids traditional web primitives.

What is the maximum number of containers I can declare for a G2 AR glasses layout?▼

The G2 AR UI system enforces containerTotalNum accuracy and requires unique containerIDs for all declared containers. You must operate within the firmware's constrained container model to ensure deterministic rendering.

How do I handle event capture in a G2 AR UI layout?▼

Event capture is handled by designating exactly one isEventCapture container within your G2 AR UI layout. This specific container pattern enables fake buttons and interactive UI elements on the display canvas.

How do I update image data on the G2 AR display after the initial layout?▼

Image data is updated via the updateImageRawData function, which sequences image information into your existing containers. This process applies to 4-bit greyscale rendering within the pixel-accurate container model.

Does the G2 AR UI system support traditional web layout primitives like flexbox?▼

The G2 AR UI system does not support traditional web primitives, relying instead on a pixel-precise container model for deterministic layouts. Interfaces are rendered as text, list, and image containers on a black or off transparent canvas.

What is the difference between startup and rebuild behavior when managing AR UI containers?▼

Startup behavior initializes the UI using createStartUpPageContainer, while rebuild behavior applies to upgrading existing layouts without full reinitialization. Both processes maintain unique containerIDs and accurate containerTotalNum integrity.

Related Skills

Explore More Software Engineering Skills→
even-realitieseven-realities
61

design-guidelines

Provide design guidelines for Even Hub G2 glass interfaces covering constraints, layout, and typography.

Official
Advanced
ErtejeonlineErtejeonline

glasses-ui

Automate glasses UI page construction with text and image containers on the 576x288 G2 canvas.

Community
Advanced
adaptive-enforcement-labadaptive-enforcement-lab
3

reliability-patterns

Configure Argo Events retry and dead-letter patterns for durable event delivery.

Official
Intermediate
jhaugajhauga

game-engine

Create web-based games with HTML5, Canvas, WebGL, and JavaScript frameworks.

Community
Advanced