2.1 KiB
2.1 KiB
VulkanUI
A walking tour of the V1 widget set. UI-only (no 3D pass), so the entire visible image comes from one compute dispatch per frame.
What it shows
- Layout: nested
VStack/HStack/Spacer/TabView, fluent builder API,Length::Px/Pct/Frac/Autounits, DPI scaling (yourWindow::scaleflows through automatically). - Theming:
themes::default_dark()withtheme.primary/secondary/danger/inputstyles applied per-widget via.style(...). - Text: per-run colour styling via
TextRun, an em-dash in the header to confirm UTF-8 decoding works end-to-end. - Buttons: rounded background (SDF in the shader), centred SDF
glyphs,
onClickcallbacks. Quit calls_Exit(0)so a working click visibly closes the window. - Progress bar: a
ProgressBarat 42 %. - TabView: three tabs (Graphics / Input / Audio); clicking the tab bar swaps content.
- InputField: focusable text edits with caret blink, UTF-8 typing, Backspace / Delete / arrow keys / Home / End, key repeat, horizontal scrolling that keeps the caret visible, clipping that prevents overflow from drawing past the field's bounds.
Run
cd examples/VulkanUI
crafter-build -r
Interactions to try
| Action | Expected |
|---|---|
Click Play / Options |
Prints [click] ... to stderr |
Click Quit |
App exits |
| Click a tab label (Graphics / Input / Audio) | Tab body swaps |
Click an InputField |
Border turns blue, caret appears and blinks |
| Type | Characters appear at the caret, including multi-byte UTF-8 |
| Hold a letter | After ~500 ms the character starts repeating at ~25 Hz |
| Backspace / Delete | Removes one full UTF-8 codepoint |
| ← / → / Home / End | Moves the caret |
| Type past the right edge | Text scrolls left, caret stays visible |
| Click outside any input | Caret disappears (focus cleared) |
Notes
The shader (shaders/ui.comp.glsl in the library) is compiled to
ui.comp.spv next to the binary by the build system.
The font (Inter.ttf) is bundled via cfg.files.push_back.