UI designer

Create a design

• Start a project with C: UI app (designer + nodes), which includes ui/main.wiiui.
• Or add one to any homebrew project with File > New > Wii Homebrew > UI Design (.wiiui)….

Double-click the .wiiui file to open the designer.

The screen

The canvas is the Wii's 640 × 480 screen. Add widgets with Add Widget:

• Rectangle: a flat coloured box.
• Label: text. Pick the size and colour.
• Button: clickable with the Wii Remote. It highlights when pointed at and darkens while pressed.
• Image: a PNG or JPEG, scaled to the widget's size when you build. Images from outside the project are copied into assets/. Keep them small: they become C arrays.

Editing

• Drag a widget to move it, and drag the corner handle to resize it.
• ← ↑ → ↓ nudge by one pixel, and Delete removes it.
• The Layers list on the left is draw order: top of the list is drawn last, on top. Use the arrows to bring forward or send backward.
• The inspector on the right has the widget's name, position, size, text, size, colours and whether it's visible at start.
• Undo / Redo in the top bar, and a background colour picker.

Names must be letters, digits and underscores, and unique. A widget named go is UI_GO in your code.

In your code

On Build, the design is turned into source/generated/: a small renderer, your widgets and a font atlas for each text size you used. The atlas is drawn from the Mac's Helvetica, so text on the Wii matches the designer.

The generated API is plain C, so you can use it from your own code too:

• wiiui_set_text(UI_STATUS, "Hello") and wiiui_get_text(id)
• wiiui_set_visible(id, 0/1) and wiiui_set_color(id, r, g, b)
• Hooks you can define: app_on_start(), app_on_frame(), app_on_button(int id) and app_on_wpad(unsigned int pressed).

Without writing any C, use the Node editor to react to buttons.

On the Wii

Point the Wii Remote at the screen and press A to click. Press HOME to quit. In Dolphin, map the Wii Remote's IR pointer to your mouse in Controller Settings.