feat: zcatgui v0.15.0 - Mobile & Web Backends
WASM Backend: - src/backend/wasm.zig: Browser backend using extern JS functions - web/zcatgui.js: Canvas 2D rendering bridge (~200 LOC) - web/index.html: Demo page with event handling - examples/wasm_demo.zig: Widget showcase for browser - Output: 18KB WASM binary Android Backend: - src/backend/android.zig: ANativeActivity + ANativeWindow - examples/android_demo.zig: Touch-enabled demo - Touch-to-mouse event mapping - Logging via __android_log_print - Targets: ARM64 (device), x86_64 (emulator) iOS Backend: - src/backend/ios.zig: UIKit bridge via extern C functions - ios/ZcatguiBridge.h: Objective-C header - ios/ZcatguiBridge.m: UIKit implementation (~320 LOC) - CADisplayLink render loop - Touch event queue with @synchronized - Targets: ARM64 (device), ARM64 simulator Build System: - WASM: zig build wasm - Android: zig build android / android-x86 - iOS: zig build ios / ios-sim - Conditional compilation for platform detection Documentation: - docs/MOBILE_WEB_BACKENDS.md: Comprehensive guide (~400 lines) - Updated DEVELOPMENT_PLAN.md with FASE 10 - Updated CLAUDE.md with new commands Stats: 3 backends, ~1500 new LOC, cross-platform ready 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
91e13f6956
commit
6889474327
17 changed files with 3387 additions and 52 deletions
157
CLAUDE.md
157
CLAUDE.md
|
|
@ -45,9 +45,9 @@ Una vez verificado el estado, continúa desde donde se dejó.
|
|||
| Campo | Valor |
|
||||
|-------|-------|
|
||||
| **Nombre** | zcatgui |
|
||||
| **Versión** | v0.14.0 |
|
||||
| **Versión** | v0.15.0 |
|
||||
| **Fecha inicio** | 2025-12-09 |
|
||||
| **Estado** | ✅ 35 widgets, 274 tests, paridad DVUI completa |
|
||||
| **Estado** | ✅ 35 widgets, 274 tests, paridad DVUI + mobile backends |
|
||||
| **Lenguaje** | Zig 0.15.2 |
|
||||
| **Paradigma** | Immediate Mode GUI |
|
||||
| **Inspiración** | Gio (Go), microui (C), DVUI (Zig), Dear ImGui (C++) |
|
||||
|
|
@ -58,10 +58,10 @@ Una vez verificado el estado, continúa desde donde se dejó.
|
|||
**zcatgui** es una librería GUI immediate-mode para Zig con las siguientes características:
|
||||
|
||||
1. **Software Rendering por defecto** - Funciona en cualquier ordenador sin GPU
|
||||
2. **Cross-platform** - Linux, Windows, macOS
|
||||
2. **Cross-platform** - Linux, Windows, macOS, **Web (WASM)**, **Android**, **iOS**
|
||||
3. **SSH compatible** - Funciona via X11 forwarding
|
||||
4. **Sistema de Macros** - Grabación/reproducción de acciones (piedra angular)
|
||||
5. **Sin dependencias pesadas** - Solo SDL2 para ventanas
|
||||
5. **Sin dependencias pesadas** - Solo SDL2 para desktop, nativo para mobile/web
|
||||
|
||||
### Filosofía
|
||||
|
||||
|
|
@ -98,16 +98,29 @@ Una vez verificado el estado, continúa desde donde se dejó.
|
|||
## COMANDOS FRECUENTES
|
||||
|
||||
```bash
|
||||
# Compilar
|
||||
# Compilar (desktop)
|
||||
zig build
|
||||
|
||||
# Tests
|
||||
zig build test
|
||||
|
||||
# Ejemplos (cuando estén implementados)
|
||||
# Ejemplos desktop
|
||||
zig build hello
|
||||
zig build button-demo
|
||||
zig build macro-demo
|
||||
zig build widgets-demo
|
||||
zig build table-demo
|
||||
|
||||
# WASM (navegador)
|
||||
zig build wasm # Genera web/zcatgui-demo.wasm
|
||||
cd web && python3 -m http.server # Servir y abrir localhost:8000
|
||||
|
||||
# Android (requiere NDK)
|
||||
zig build android # ARM64 para dispositivo
|
||||
zig build android-x86 # x86_64 para emulador
|
||||
|
||||
# iOS (requiere Xcode en macOS)
|
||||
zig build ios # ARM64 para dispositivo
|
||||
zig build ios-sim # ARM64 para simulador
|
||||
|
||||
# Git
|
||||
git status
|
||||
|
|
@ -161,63 +174,94 @@ vs Retained Mode (Fyne):
|
|||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Estructura de Archivos (ACTUAL)
|
||||
### Estructura de Archivos (ACTUAL v0.15.0)
|
||||
|
||||
```
|
||||
zcatgui/
|
||||
├── src/
|
||||
│ ├── zcatgui.zig # Entry point, re-exports
|
||||
│ ├── zcatgui.zig # Entry point, re-exports, conditional backend imports
|
||||
│ │
|
||||
│ ├── core/
|
||||
│ │ ├── context.zig # ✅ Context, ID system, command pool
|
||||
│ │ ├── context.zig # ✅ Context, ID system, command pool, FrameArena
|
||||
│ │ ├── layout.zig # ✅ Rect, Constraint, LayoutState
|
||||
│ │ ├── style.zig # ✅ Color, Style, Theme
|
||||
│ │ ├── style.zig # ✅ Color, Style, Theme (5 themes)
|
||||
│ │ ├── input.zig # ✅ Key, KeyEvent, MouseEvent, InputState
|
||||
│ │ └── command.zig # ✅ DrawCommand list
|
||||
│ │ ├── command.zig # ✅ DrawCommand list
|
||||
│ │ ├── clipboard.zig # ✅ Clipboard support
|
||||
│ │ ├── dragdrop.zig # ✅ Drag & drop system
|
||||
│ │ ├── shortcuts.zig # ✅ Keyboard shortcuts manager
|
||||
│ │ ├── focus_group.zig # ✅ Focus groups
|
||||
│ │ ├── accessibility.zig # ✅ Accessibility (ARIA roles)
|
||||
│ │ └── gesture.zig # ✅ Gesture recognizer (tap, swipe, pinch, rotate)
|
||||
│ │
|
||||
│ ├── widgets/
|
||||
│ │ ├── widgets.zig # ✅ Re-exports all widgets
|
||||
│ │ ├── label.zig # ✅ Static text display
|
||||
│ │ ├── button.zig # ✅ Clickable button
|
||||
│ │ ├── text_input.zig # ✅ Editable text field
|
||||
│ │ ├── checkbox.zig # ✅ Boolean toggle
|
||||
│ │ ├── select.zig # ✅ Dropdown selection
|
||||
│ │ ├── list.zig # ✅ Scrollable list
|
||||
│ │ ├── focus.zig # ✅ Focus management
|
||||
│ │ ├── table.zig # ✅ Editable table with scrolling
|
||||
│ │ ├── split.zig # ✅ HSplit/VSplit panels
|
||||
│ │ ├── panel.zig # ✅ Container with title bar
|
||||
│ │ ├── modal.zig # ✅ Modal dialogs (alert, confirm, input)
|
||||
│ │ └── autocomplete.zig # ✅ ComboBox/AutoComplete widget
|
||||
│ ├── widgets/ # 35 widgets implementados
|
||||
│ │ ├── widgets.zig # Re-exports
|
||||
│ │ ├── label.zig, button.zig, text_input.zig, checkbox.zig
|
||||
│ │ ├── select.zig, list.zig, focus.zig, table.zig
|
||||
│ │ ├── split.zig, panel.zig, modal.zig, autocomplete.zig
|
||||
│ │ ├── slider.zig, scroll.zig, tabs.zig, radio.zig, menu.zig
|
||||
│ │ ├── progress.zig, tooltip.zig, toast.zig
|
||||
│ │ ├── textarea.zig, tree.zig, badge.zig
|
||||
│ │ ├── number_entry.zig, reorderable.zig
|
||||
│ │ ├── breadcrumb.zig, image.zig, icon.zig
|
||||
│ │ ├── color_picker.zig, date_picker.zig, chart.zig
|
||||
│ │ └── calendar.zig
|
||||
│ │
|
||||
│ ├── render/
|
||||
│ │ ├── software.zig # ✅ SoftwareRenderer (ejecuta commands)
|
||||
│ │ ├── framebuffer.zig # ✅ Framebuffer RGBA
|
||||
│ │ └── font.zig # ✅ Bitmap font 8x8
|
||||
│ │ ├── software.zig # ✅ SoftwareRenderer
|
||||
│ │ ├── framebuffer.zig # ✅ Framebuffer RGBA (u32 pixels)
|
||||
│ │ ├── font.zig # ✅ Bitmap font 8x8
|
||||
│ │ ├── ttf.zig # ✅ TTF font support (stb_truetype)
|
||||
│ │ ├── animation.zig # ✅ Animation system, easing, springs
|
||||
│ │ ├── effects.zig # ✅ Shadows, gradients, blur
|
||||
│ │ └── antialiasing.zig # ✅ Anti-aliased rendering
|
||||
│ │
|
||||
│ ├── backend/
|
||||
│ │ ├── backend.zig # ✅ Backend interface (vtable)
|
||||
│ │ └── sdl2.zig # ✅ SDL2 implementation
|
||||
│ │ ├── backend.zig # ✅ Backend interface (VTable)
|
||||
│ │ ├── sdl2.zig # ✅ SDL2 (desktop: Linux/Win/Mac)
|
||||
│ │ ├── wasm.zig # ✅ WASM (navegador)
|
||||
│ │ ├── android.zig # ✅ Android (ANativeActivity)
|
||||
│ │ └── ios.zig # ✅ iOS (UIKit bridge)
|
||||
│ │
|
||||
│ └── macro/
|
||||
│ └── macro.zig # ✅ MacroRecorder, MacroPlayer, MacroStorage
|
||||
│ ├── macro/
|
||||
│ │ └── macro.zig # ✅ MacroRecorder, MacroPlayer, MacroStorage
|
||||
│ │
|
||||
│ ├── panels/
|
||||
│ │ └── panels.zig # ✅ Lego Panels architecture
|
||||
│ │
|
||||
│ └── utils/
|
||||
│ └── utils.zig # ✅ FrameArena, ObjectPool, Benchmark
|
||||
│
|
||||
├── examples/
|
||||
│ ├── hello.zig # ✅ Ejemplo básico de rendering
|
||||
│ ├── macro_demo.zig # ✅ Demo del sistema de macros
|
||||
│ ├── widgets_demo.zig # ✅ Demo de todos los widgets básicos
|
||||
│ └── table_demo.zig # ✅ Demo de Table, Split, Panel
|
||||
│ ├── hello.zig # Ejemplo básico
|
||||
│ ├── macro_demo.zig # Demo macros
|
||||
│ ├── widgets_demo.zig # Demo widgets
|
||||
│ ├── table_demo.zig # Demo Table/Split/Panel
|
||||
│ ├── wasm_demo.zig # ✅ Demo WASM (navegador)
|
||||
│ └── android_demo.zig # ✅ Demo Android
|
||||
│
|
||||
├── web/ # ✅ WASM support
|
||||
│ ├── index.html # Demo HTML
|
||||
│ ├── zcatgui.js # JavaScript glue code
|
||||
│ └── zcatgui-demo.wasm # Compiled WASM (~18KB)
|
||||
│
|
||||
├── ios/ # ✅ iOS support
|
||||
│ ├── ZcatguiBridge.h # Objective-C header
|
||||
│ └── ZcatguiBridge.m # UIKit implementation
|
||||
│
|
||||
├── docs/
|
||||
│ ├── ARCHITECTURE.md # Arquitectura detallada
|
||||
│ ├── ARCHITECTURE.md
|
||||
│ ├── DEVELOPMENT_PLAN.md # ⭐ Plan maestro
|
||||
│ ├── MOBILE_WEB_BACKENDS.md # ✅ Documentación mobile/web
|
||||
│ └── research/
|
||||
│ ├── GIO_UI_ANALYSIS.md
|
||||
│ ├── IMMEDIATE_MODE_LIBS.md
|
||||
│ ├── WIDGET_COMPARISON.md
|
||||
│ └── SIMIFACTU_FYNE_ANALYSIS.md
|
||||
│
|
||||
├── build.zig
|
||||
├── build.zig # Build con targets: wasm, android, ios
|
||||
├── build.zig.zon
|
||||
└── CLAUDE.md # Este archivo
|
||||
└── CLAUDE.md
|
||||
```
|
||||
|
||||
---
|
||||
|
|
@ -553,12 +597,14 @@ const stdout = std.fs.File.stdout(); // NO std.io.getStdOut()
|
|||
| 2025-12-09 | v0.12.0 | FASE 6: Clipboard, DragDrop, Shortcuts, FocusGroups |
|
||||
| 2025-12-09 | v0.13.0 | FASE 7: Animation/Easing, Effects (shadow/gradient/blur), VirtualScroll, AA rendering |
|
||||
| 2025-12-09 | v0.14.0 | FASE 8: Accessibility system, Testing framework, 274 tests |
|
||||
| 2025-12-09 | v0.14.1 | FASE 9: Gio parity - 12 widgets + gesture system |
|
||||
| 2025-12-09 | v0.15.0 | FASE 10: Mobile/Web - WASM, Android, iOS backends |
|
||||
|
||||
---
|
||||
|
||||
## ESTADO ACTUAL
|
||||
|
||||
**✅ PROYECTO COMPLETADO - v0.14.0 - Paridad DVUI alcanzada**
|
||||
**✅ PROYECTO COMPLETADO - v0.15.0 - Paridad DVUI + Mobile/Web**
|
||||
|
||||
### Widgets (35 total - 100% paridad DVUI):
|
||||
|
||||
|
|
@ -578,28 +624,49 @@ const stdout = std.fs.File.stdout(); // NO std.io.getStdOut()
|
|||
|
||||
**Sistema (1)**: Badge/TagGroup
|
||||
|
||||
### Backends (5 plataformas):
|
||||
- **SDL2**: Desktop (Linux, Windows, macOS)
|
||||
- **WASM**: Navegadores web (Canvas 2D)
|
||||
- **Android**: ANativeActivity + ANativeWindow
|
||||
- **iOS**: UIKit bridge (Objective-C)
|
||||
|
||||
### Core Systems:
|
||||
- **Context**: FrameArena (O(1) reset), dirty rectangles, ID system
|
||||
- **Input**: Keyboard, mouse, shortcuts, focus groups
|
||||
- **Input**: Keyboard, mouse, touch, shortcuts, focus groups, gestures
|
||||
- **Rendering**: Software renderer, anti-aliasing, effects (shadow, gradient, blur)
|
||||
- **Animation**: Easing functions (20+), AnimationManager
|
||||
- **Animation**: Easing functions (20+), AnimationManager, Springs
|
||||
- **Accessibility**: Roles, states, announcements, live regions
|
||||
- **Testing**: TestRunner, SnapshotTester, Assertions
|
||||
- **Macros**: Recording, playback, storage
|
||||
- **Themes**: 5 themes (dark, light, high_contrast, nord, dracula)
|
||||
- **Clipboard**: SDL2 clipboard integration
|
||||
- **Drag & Drop**: Type-filtered drop zones
|
||||
- **Gestures**: Tap, double-tap, long-press, swipe, pinch, rotate
|
||||
|
||||
### Métricas:
|
||||
- **274 tests** pasando
|
||||
- **~25,000 LOC** total
|
||||
- **~27,000 LOC** total
|
||||
- **0 warnings**, **0 memory leaks**
|
||||
- **WASM**: ~18KB compilado
|
||||
|
||||
### Verificar que funciona:
|
||||
```bash
|
||||
cd /mnt/cello2/arno/re/recode/zig/zcatgui
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build test # 274 tests
|
||||
|
||||
# Tests
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build test
|
||||
|
||||
# Desktop
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build
|
||||
|
||||
# WASM (genera web/zcatgui-demo.wasm)
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build wasm
|
||||
|
||||
# Android (requiere NDK)
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build android
|
||||
|
||||
# iOS (requiere macOS + Xcode)
|
||||
/mnt/cello2/arno/re/recode/zig/zig-0.15.2/zig-x86_64-linux-0.15.2/zig build ios
|
||||
```
|
||||
|
||||
---
|
||||
|
|
|
|||
201
build.zig
201
build.zig
|
|
@ -4,6 +4,9 @@ pub fn build(b: *std.Build) void {
|
|||
const target = b.standardTargetOptions(.{});
|
||||
const optimize = b.standardOptimizeOption(.{});
|
||||
|
||||
// Check if building for WASM
|
||||
const is_wasm = target.result.cpu.arch == .wasm32 or target.result.cpu.arch == .wasm64;
|
||||
|
||||
// ===========================================
|
||||
// Main library module
|
||||
// ===========================================
|
||||
|
|
@ -11,11 +14,13 @@ pub fn build(b: *std.Build) void {
|
|||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = target,
|
||||
.optimize = optimize,
|
||||
.link_libc = true,
|
||||
.link_libc = !is_wasm,
|
||||
});
|
||||
|
||||
// Link SDL2 to the module
|
||||
// Link SDL2 to the module (only for native builds)
|
||||
if (!is_wasm) {
|
||||
zcatgui_mod.linkSystemLibrary("SDL2", .{});
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
// Tests
|
||||
|
|
@ -121,4 +126,196 @@ pub fn build(b: *std.Build) void {
|
|||
run_table.step.dependOn(b.getInstallStep());
|
||||
const table_step = b.step("table-demo", "Run table demo with split panels");
|
||||
table_step.dependOn(&run_table.step);
|
||||
|
||||
// ===========================================
|
||||
// WASM Build
|
||||
// ===========================================
|
||||
|
||||
// WASM-specific module (no SDL2, no libc)
|
||||
const wasm_target = b.resolveTargetQuery(.{
|
||||
.cpu_arch = .wasm32,
|
||||
.os_tag = .freestanding,
|
||||
});
|
||||
|
||||
const zcatgui_wasm_mod = b.createModule(.{
|
||||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = wasm_target,
|
||||
.optimize = .ReleaseSmall,
|
||||
});
|
||||
|
||||
// WASM demo executable
|
||||
const wasm_demo = b.addExecutable(.{
|
||||
.name = "zcatgui-demo",
|
||||
.root_module = b.createModule(.{
|
||||
.root_source_file = b.path("examples/wasm_demo.zig"),
|
||||
.target = wasm_target,
|
||||
.optimize = .ReleaseSmall,
|
||||
.imports = &.{
|
||||
.{ .name = "zcatgui", .module = zcatgui_wasm_mod },
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
// Export WASM functions
|
||||
wasm_demo.entry = .{ .symbol_name = "wasm_main" };
|
||||
wasm_demo.rdynamic = true;
|
||||
|
||||
// Install WASM to web directory
|
||||
const install_wasm = b.addInstallArtifact(wasm_demo, .{
|
||||
.dest_dir = .{ .override = .{ .custom = "../web" } },
|
||||
.dest_sub_path = "zcatgui-demo.wasm",
|
||||
});
|
||||
|
||||
const wasm_step = b.step("wasm", "Build WASM demo");
|
||||
wasm_step.dependOn(&install_wasm.step);
|
||||
|
||||
// ===========================================
|
||||
// Android Build
|
||||
// ===========================================
|
||||
|
||||
// Android ARM64 target
|
||||
const android_target = b.resolveTargetQuery(.{
|
||||
.cpu_arch = .aarch64,
|
||||
.os_tag = .linux,
|
||||
.abi = .android,
|
||||
});
|
||||
|
||||
const zcatgui_android_mod = b.createModule(.{
|
||||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = android_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
});
|
||||
|
||||
// Android demo shared library
|
||||
const android_demo_mod = b.createModule(.{
|
||||
.root_source_file = b.path("examples/android_demo.zig"),
|
||||
.target = android_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
.imports = &.{
|
||||
.{ .name = "zcatgui", .module = zcatgui_android_mod },
|
||||
},
|
||||
});
|
||||
|
||||
const android_demo = b.addExecutable(.{
|
||||
.name = "zcatgui",
|
||||
.root_module = android_demo_mod,
|
||||
.linkage = .dynamic,
|
||||
});
|
||||
|
||||
// Link Android NDK libraries
|
||||
android_demo.root_module.linkSystemLibrary("android", .{});
|
||||
android_demo.root_module.linkSystemLibrary("log", .{});
|
||||
|
||||
// Install to android directory
|
||||
const install_android = b.addInstallArtifact(android_demo, .{
|
||||
.dest_dir = .{ .override = .{ .custom = "../android/libs/arm64-v8a" } },
|
||||
.dest_sub_path = "libzcatgui.so",
|
||||
});
|
||||
|
||||
const android_step = b.step("android", "Build Android shared library (ARM64)");
|
||||
android_step.dependOn(&install_android.step);
|
||||
|
||||
// Android x86_64 (for emulator)
|
||||
const android_x86_target = b.resolveTargetQuery(.{
|
||||
.cpu_arch = .x86_64,
|
||||
.os_tag = .linux,
|
||||
.abi = .android,
|
||||
});
|
||||
|
||||
const zcatgui_android_x86_mod = b.createModule(.{
|
||||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = android_x86_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
});
|
||||
|
||||
const android_demo_x86_mod = b.createModule(.{
|
||||
.root_source_file = b.path("examples/android_demo.zig"),
|
||||
.target = android_x86_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
.imports = &.{
|
||||
.{ .name = "zcatgui", .module = zcatgui_android_x86_mod },
|
||||
},
|
||||
});
|
||||
|
||||
const android_demo_x86 = b.addExecutable(.{
|
||||
.name = "zcatgui",
|
||||
.root_module = android_demo_x86_mod,
|
||||
.linkage = .dynamic,
|
||||
});
|
||||
|
||||
android_demo_x86.root_module.linkSystemLibrary("android", .{});
|
||||
android_demo_x86.root_module.linkSystemLibrary("log", .{});
|
||||
|
||||
const install_android_x86 = b.addInstallArtifact(android_demo_x86, .{
|
||||
.dest_dir = .{ .override = .{ .custom = "../android/libs/x86_64" } },
|
||||
.dest_sub_path = "libzcatgui.so",
|
||||
});
|
||||
|
||||
const android_x86_step = b.step("android-x86", "Build Android shared library (x86_64 for emulator)");
|
||||
android_x86_step.dependOn(&install_android_x86.step);
|
||||
|
||||
// ===========================================
|
||||
// iOS Build
|
||||
// ===========================================
|
||||
|
||||
// iOS ARM64 target (device)
|
||||
const ios_target = b.resolveTargetQuery(.{
|
||||
.cpu_arch = .aarch64,
|
||||
.os_tag = .ios,
|
||||
});
|
||||
|
||||
const zcatgui_ios_mod = b.createModule(.{
|
||||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = ios_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
});
|
||||
|
||||
// iOS static library (object file that can be linked into iOS app)
|
||||
const ios_lib = b.addExecutable(.{
|
||||
.name = "zcatgui",
|
||||
.root_module = zcatgui_ios_mod,
|
||||
.linkage = .static,
|
||||
});
|
||||
|
||||
// Install to ios directory
|
||||
const install_ios = b.addInstallArtifact(ios_lib, .{
|
||||
.dest_dir = .{ .override = .{ .custom = "../ios" } },
|
||||
.dest_sub_path = "libzcatgui.a",
|
||||
});
|
||||
|
||||
const ios_step = b.step("ios", "Build iOS static library (ARM64 device)");
|
||||
ios_step.dependOn(&install_ios.step);
|
||||
|
||||
// iOS Simulator (ARM64 for Apple Silicon Macs)
|
||||
const ios_sim_target = b.resolveTargetQuery(.{
|
||||
.cpu_arch = .aarch64,
|
||||
.os_tag = .ios,
|
||||
.abi = .simulator,
|
||||
});
|
||||
|
||||
const zcatgui_ios_sim_mod = b.createModule(.{
|
||||
.root_source_file = b.path("src/zcatgui.zig"),
|
||||
.target = ios_sim_target,
|
||||
.optimize = .ReleaseSafe,
|
||||
.link_libc = true,
|
||||
});
|
||||
|
||||
const ios_sim_lib = b.addExecutable(.{
|
||||
.name = "zcatgui",
|
||||
.root_module = zcatgui_ios_sim_mod,
|
||||
.linkage = .static,
|
||||
});
|
||||
|
||||
const install_ios_sim = b.addInstallArtifact(ios_sim_lib, .{
|
||||
.dest_dir = .{ .override = .{ .custom = "../ios" } },
|
||||
.dest_sub_path = "libzcatgui-simulator.a",
|
||||
});
|
||||
|
||||
const ios_sim_step = b.step("ios-sim", "Build iOS static library (ARM64 simulator)");
|
||||
ios_sim_step.dependOn(&install_ios_sim.step);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1333,6 +1333,96 @@ pub const SnapshotTest = struct {
|
|||
|
||||
---
|
||||
|
||||
### FASE 10: MOBILE & WEB BACKENDS ✅ COMPLETADA
|
||||
**Fecha completada**: 2025-12-09
|
||||
**Objetivo**: Soporte multiplataforma - Web (WASM), Android, iOS
|
||||
|
||||
#### 10.1 WASM Backend (Navegador) ✅
|
||||
|
||||
| Componente | Archivo | Estado |
|
||||
|------------|---------|--------|
|
||||
| Backend Zig | `src/backend/wasm.zig` | ✅ Completo |
|
||||
| Glue JS | `web/zcatgui.js` | ✅ Completo |
|
||||
| Demo HTML | `web/index.html` | ✅ Completo |
|
||||
| Ejemplo | `examples/wasm_demo.zig` | ✅ Completo |
|
||||
|
||||
**Características:**
|
||||
- Compilación a WebAssembly (wasm32-freestanding)
|
||||
- Canvas 2D API para rendering
|
||||
- Event queue para teclado/ratón/touch
|
||||
- Funciona en cualquier navegador moderno
|
||||
- ~18KB de tamaño compilado
|
||||
|
||||
**Build:** `zig build wasm`
|
||||
|
||||
#### 10.2 Android Backend ✅
|
||||
|
||||
| Componente | Archivo | Estado |
|
||||
|------------|---------|--------|
|
||||
| Backend Zig | `src/backend/android.zig` | ✅ Completo |
|
||||
| Ejemplo | `examples/android_demo.zig` | ✅ Completo |
|
||||
|
||||
**Características:**
|
||||
- ANativeActivity para lifecycle
|
||||
- ANativeWindow para rendering directo
|
||||
- AInputQueue para eventos touch/key
|
||||
- Touch → Mouse mapping
|
||||
- Back button → Quit event
|
||||
- Soporte ARM64 y x86_64 (emulador)
|
||||
|
||||
**Build:** `zig build android` (ARM64) o `zig build android-x86`
|
||||
|
||||
**Requisitos:** Android NDK
|
||||
|
||||
#### 10.3 iOS Backend ✅
|
||||
|
||||
| Componente | Archivo | Estado |
|
||||
|------------|---------|--------|
|
||||
| Backend Zig | `src/backend/ios.zig` | ✅ Completo |
|
||||
| Bridge Header | `ios/ZcatguiBridge.h` | ✅ Completo |
|
||||
| Bridge Impl | `ios/ZcatguiBridge.m` | ✅ Completo |
|
||||
|
||||
**Características:**
|
||||
- UIView custom para rendering
|
||||
- CGBitmapContext para framebuffer
|
||||
- Touch events mapping
|
||||
- CADisplayLink para render loop
|
||||
- Soporte device y simulator
|
||||
|
||||
**Build:** `zig build ios` (device) o `zig build ios-sim` (simulator)
|
||||
|
||||
**Requisitos:** macOS con Xcode
|
||||
|
||||
#### 10.4 Arquitectura Multi-backend
|
||||
|
||||
```
|
||||
src/zcatgui.zig
|
||||
├── backend.Sdl2Backend (desktop: Linux/Win/Mac)
|
||||
├── backend.wasm (navegador: WASM)
|
||||
├── backend.android (Android)
|
||||
└── backend.ios (iOS)
|
||||
|
||||
Compilación condicional basada en:
|
||||
- builtin.cpu.arch (wasm32/wasm64)
|
||||
- builtin.os.tag (ios, linux)
|
||||
- builtin.abi (android)
|
||||
```
|
||||
|
||||
**Entregables Fase 10:**
|
||||
- [x] WASM backend completo y funcional
|
||||
- [x] Android backend completo (requiere NDK)
|
||||
- [x] iOS backend completo (requiere Xcode)
|
||||
- [x] Build targets en build.zig
|
||||
- [x] Documentación en `docs/MOBILE_WEB_BACKENDS.md`
|
||||
- [x] Compilación condicional correcta
|
||||
|
||||
**Impacto:**
|
||||
- zcatgui ahora soporta 5 plataformas: Linux, Windows, macOS, Web, Android, iOS
|
||||
- Código de aplicación idéntico en todas las plataformas
|
||||
- Software rendering funciona en todos los backends
|
||||
|
||||
---
|
||||
|
||||
## 5. DETALLES DE IMPLEMENTACIÓN
|
||||
|
||||
### 5.1 Estructura Final de Archivos
|
||||
|
|
|
|||
534
docs/MOBILE_WEB_BACKENDS.md
Normal file
534
docs/MOBILE_WEB_BACKENDS.md
Normal file
|
|
@ -0,0 +1,534 @@
|
|||
# zcatgui - Mobile & Web Backends
|
||||
|
||||
> Documentaci贸n completa de los backends para WASM (navegador), Android e iOS.
|
||||
|
||||
**Fecha:** 2025-12-09
|
||||
**Versi贸n:** v0.15.0
|
||||
**Autor:** Claude (Opus 4.5) + Arno
|
||||
|
||||
---
|
||||
|
||||
## 脥ndice
|
||||
|
||||
1. [Visi贸n General](#visi贸n-general)
|
||||
2. [WASM Backend (Navegador)](#wasm-backend-navegador)
|
||||
3. [Android Backend](#android-backend)
|
||||
4. [iOS Backend](#ios-backend)
|
||||
5. [Arquitectura Com煤n](#arquitectura-com煤n)
|
||||
6. [Decisiones de Dise帽o](#decisiones-de-dise帽o)
|
||||
7. [Troubleshooting](#troubleshooting)
|
||||
|
||||
---
|
||||
|
||||
## Visi贸n General
|
||||
|
||||
zcatgui soporta m煤ltiples plataformas a trav茅s de backends intercambiables:
|
||||
|
||||
| Backend | Plataforma | Estado | Build Command |
|
||||
|---------|------------|--------|---------------|
|
||||
| SDL2 | Desktop (Linux/Win/Mac) | 鉁? Completo | `zig build` |
|
||||
| WASM | Navegadores web | 鉁? Completo | `zig build wasm` |
|
||||
| Android | Android 5.0+ | 鉁? Completo* | `zig build android` |
|
||||
| iOS | iOS 13.0+ | 鉁? Completo* | `zig build ios` |
|
||||
|
||||
*Requiere SDK/NDK de la plataforma para compilar.
|
||||
|
||||
### Principio de Dise帽o
|
||||
|
||||
Todos los backends implementan la misma interfaz `Backend.VTable`:
|
||||
|
||||
```zig
|
||||
pub const VTable = struct {
|
||||
pollEvent: *const fn (ptr: *anyopaque) ?Event,
|
||||
present: *const fn (ptr: *anyopaque, fb: *const Framebuffer) void,
|
||||
getSize: *const fn (ptr: *anyopaque) SizeResult,
|
||||
deinit: *const fn (ptr: *anyopaque) void,
|
||||
};
|
||||
```
|
||||
|
||||
Esto permite que el c贸digo de la aplicaci贸n sea **id茅ntico** en todas las plataformas.
|
||||
|
||||
---
|
||||
|
||||
## WASM Backend (Navegador)
|
||||
|
||||
### Archivos
|
||||
|
||||
```
|
||||
src/backend/wasm.zig # Backend Zig (extern functions, event parsing)
|
||||
web/zcatgui.js # Glue code JavaScript (Canvas API, eventos)
|
||||
web/index.html # Demo HTML
|
||||
examples/wasm_demo.zig # Aplicaci贸n demo
|
||||
```
|
||||
|
||||
### Compilaci贸n
|
||||
|
||||
```bash
|
||||
zig build wasm
|
||||
# Genera: web/zcatgui-demo.wasm (aproximadamente 18KB)
|
||||
```
|
||||
|
||||
### C贸mo funciona
|
||||
|
||||
```
|
||||
鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹?
|
||||
鈹? Arquitectura WASM 鈹?
|
||||
鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹?
|
||||
鈹? 鈹?
|
||||
鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹?
|
||||
鈹? 鈹? JavaScript 鈹? 鈹? WASM 鈹? 鈹?
|
||||
鈹? 鈹? (zcatgui.js) 鈹? 鈹? (Zig code) 鈹? 鈹?
|
||||
鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹?
|
||||
鈹? 鈹? Canvas 2D API 鈹? 鈫? 鈹? js_canvas_* 鈹? 鈹?
|
||||
鈹? 鈹? Event Queue 鈹? 鈫? 鈹? js_poll_event 鈹? 鈹?
|
||||
鈹? 鈹? Timing 鈹? 鈫? 鈹? js_get_time 鈹? 鈹?
|
||||
鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹?
|
||||
鈹? 鈹?
|
||||
鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹?
|
||||
```
|
||||
|
||||
### Funciones Extern (Zig 鈫? JS)
|
||||
|
||||
```zig
|
||||
// En wasm.zig - declaradas como extern "env"
|
||||
extern "env" fn js_canvas_init(width: u32, height: u32) void;
|
||||
extern "env" fn js_canvas_present(pixels: [*]const u32, width: u32, height: u32) void;
|
||||
extern "env" fn js_get_canvas_width() u32;
|
||||
extern "env" fn js_get_canvas_height() u32;
|
||||
extern "env" fn js_console_log(ptr: [*]const u8, len: usize) void;
|
||||
extern "env" fn js_get_time_ms() u64;
|
||||
extern "env" fn js_poll_event(event_buffer: [*]u8) u32;
|
||||
```
|
||||
|
||||
### Funciones Export (JS 鈫? Zig)
|
||||
|
||||
```zig
|
||||
// La aplicaci贸n WASM exporta estas funciones
|
||||
export fn wasm_main() void; // Llamada al inicio
|
||||
export fn wasm_frame() void; // Llamada cada frame (requestAnimationFrame)
|
||||
```
|
||||
|
||||
### Formato de Eventos
|
||||
|
||||
| Tipo | C贸digo | Formato del Buffer |
|
||||
|------|--------|-------------------|
|
||||
| None | 0 | - |
|
||||
| KeyDown | 1 | `[keyCode: u8, modifiers: u8]` |
|
||||
| KeyUp | 2 | `[keyCode: u8, modifiers: u8]` |
|
||||
| MouseMove | 3 | `[x: i32, y: i32]` |
|
||||
| MouseDown | 4 | `[x: i32, y: i32, button: u8]` |
|
||||
| MouseUp | 5 | `[x: i32, y: i32, button: u8]` |
|
||||
| Wheel | 6 | `[x: i32, y: i32, deltaX: i32, deltaY: i32]` |
|
||||
| Resize | 7 | `[width: u32, height: u32]` |
|
||||
| Quit | 8 | - |
|
||||
| TextInput | 9 | `[len: u8, text: up to 31 bytes]` |
|
||||
|
||||
### Formato de P铆xeles
|
||||
|
||||
El framebuffer usa `u32` en formato RGBA (little-endian):
|
||||
- Byte 0: Red
|
||||
- Byte 1: Green
|
||||
- Byte 2: Blue
|
||||
- Byte 3: Alpha
|
||||
|
||||
El JavaScript convierte esto a ImageData para Canvas 2D.
|
||||
|
||||
### Uso
|
||||
|
||||
1. Compilar:
|
||||
```bash
|
||||
zig build wasm
|
||||
```
|
||||
|
||||
2. Servir el directorio `web/`:
|
||||
```bash
|
||||
cd web
|
||||
python3 -m http.server 8080
|
||||
# o cualquier servidor HTTP est谩tico
|
||||
```
|
||||
|
||||
3. Abrir `http://localhost:8080` en el navegador
|
||||
|
||||
### Ejemplo de Aplicaci贸n WASM
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
const zcatgui = @import("zcatgui");
|
||||
|
||||
const allocator = std.heap.wasm_allocator;
|
||||
var ctx: ?*zcatgui.Context = null;
|
||||
|
||||
export fn wasm_main() void {
|
||||
// Inicializar backend y context
|
||||
const be = allocator.create(zcatgui.backend.wasm.WasmBackend) catch return;
|
||||
be.* = zcatgui.backend.wasm.WasmBackend.init(800, 600) catch return;
|
||||
|
||||
const c = allocator.create(zcatgui.Context) catch return;
|
||||
c.* = zcatgui.Context.init(allocator, 800, 600) catch return;
|
||||
ctx = c;
|
||||
}
|
||||
|
||||
export fn wasm_frame() void {
|
||||
const c = ctx orelse return;
|
||||
|
||||
// Procesar eventos, dibujar UI, renderizar...
|
||||
c.beginFrame();
|
||||
zcatgui.label(c, "Hello from WASM!");
|
||||
c.endFrame();
|
||||
|
||||
// Renderizar a framebuffer y presentar
|
||||
var fb = zcatgui.render.Framebuffer.init(allocator, 800, 600) catch return;
|
||||
defer fb.deinit();
|
||||
// ... render y present
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Android Backend
|
||||
|
||||
### Archivos
|
||||
|
||||
```
|
||||
src/backend/android.zig # Backend Zig (ANativeActivity, input, window)
|
||||
examples/android_demo.zig # Aplicaci贸n demo
|
||||
```
|
||||
|
||||
### Compilaci贸n
|
||||
|
||||
```bash
|
||||
# ARM64 (dispositivos reales)
|
||||
zig build android
|
||||
# Genera: android/libs/arm64-v8a/libzcatgui.so
|
||||
|
||||
# x86_64 (emulador)
|
||||
zig build android-x86
|
||||
# Genera: android/libs/x86_64/libzcatgui.so
|
||||
```
|
||||
|
||||
### Requisitos
|
||||
|
||||
- Android NDK instalado
|
||||
- Variable `ANDROID_NDK_HOME` configurada (opcional, Zig puede detectarlo)
|
||||
|
||||
### C贸mo funciona
|
||||
|
||||
```
|
||||
鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹?
|
||||
鈹? Arquitectura Android 鈹?
|
||||
鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹?
|
||||
鈹? 鈹?
|
||||
鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹?
|
||||
鈹? 鈹? Android System 鈹? 鈹?
|
||||
鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹?
|
||||
鈹? 鈹? ANativeActivity 鈹? ANativeWindow 鈹? 鈹?
|
||||
鈹? 鈹? (lifecycle) 鈹? (surface/pixels) 鈹? 鈹?
|
||||
鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹?
|
||||
鈹? 鈹? 鈹? 鈹?
|
||||
鈹? 鈻? 鈻? 鈹?
|
||||
鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹?
|
||||
鈹? 鈹? android.zig (Zig backend) 鈹? 鈹?
|
||||
鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹?
|
||||
鈹? 鈹? - Touch 鈫? Mouse events 鈹? 鈹?
|
||||
鈹? 鈹? - Keys 鈫? Key events 鈹? 鈹?
|
||||
鈹? 鈹? - ANativeWindow_lock() 鈫? direct pixels 鈹? 鈹?
|
||||
鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹?
|
||||
鈹? 鈹?
|
||||
鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹?
|
||||
```
|
||||
|
||||
### APIs de Android usadas
|
||||
|
||||
```zig
|
||||
// Declaradas como extern "android" en android.zig
|
||||
extern "android" fn ANativeWindow_getWidth(window: *ANativeWindow) i32;
|
||||
extern "android" fn ANativeWindow_getHeight(window: *ANativeWindow) i32;
|
||||
extern "android" fn ANativeWindow_lock(...) i32;
|
||||
extern "android" fn ANativeWindow_unlockAndPost(...) i32;
|
||||
extern "android" fn ALooper_forThread() ?*ALooper;
|
||||
extern "android" fn AInputQueue_*(...); // Manejo de input
|
||||
extern "android" fn AInputEvent_*(...); // Parsing de eventos
|
||||
extern "log" fn __android_log_write(...); // Logging
|
||||
```
|
||||
|
||||
### Mapeo de Eventos
|
||||
|
||||
| Android Event | zcatgui Event |
|
||||
|--------------|---------------|
|
||||
| AMOTION_EVENT_ACTION_DOWN | mouse.pressed = true, button = .left |
|
||||
| AMOTION_EVENT_ACTION_UP | mouse.pressed = false, button = .left |
|
||||
| AMOTION_EVENT_ACTION_MOVE | mouse move |
|
||||
| AKEY_EVENT_ACTION_DOWN | key.pressed = true |
|
||||
| AKEY_EVENT_ACTION_UP | key.pressed = false |
|
||||
| AKEYCODE_BACK (release) | quit event |
|
||||
|
||||
### Integraci贸n en Proyecto Android
|
||||
|
||||
1. Compilar la shared library:
|
||||
```bash
|
||||
zig build android
|
||||
```
|
||||
|
||||
2. Copiar `android/libs/arm64-v8a/libzcatgui.so` a tu proyecto:
|
||||
```
|
||||
app/src/main/jniLibs/arm64-v8a/libzcatgui.so
|
||||
```
|
||||
|
||||
3. En `AndroidManifest.xml`, usar NativeActivity:
|
||||
```xml
|
||||
<activity android:name="android.app.NativeActivity"
|
||||
android:label="zcatgui App">
|
||||
<meta-data android:name="android.app.lib_name"
|
||||
android:value="zcatgui"/>
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN"/>
|
||||
<category android:name="android.intent.category.LAUNCHER"/>
|
||||
</intent-filter>
|
||||
</activity>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## iOS Backend
|
||||
|
||||
### Archivos
|
||||
|
||||
```
|
||||
src/backend/ios.zig # Backend Zig (extern C functions)
|
||||
ios/ZcatguiBridge.h # Header Objective-C
|
||||
ios/ZcatguiBridge.m # Implementaci贸n Objective-C (UIKit)
|
||||
```
|
||||
|
||||
### Compilaci贸n
|
||||
|
||||
```bash
|
||||
# Dispositivo real (ARM64)
|
||||
zig build ios
|
||||
# Genera: ios/libzcatgui.a
|
||||
|
||||
# Simulador (ARM64 Apple Silicon)
|
||||
zig build ios-sim
|
||||
# Genera: ios/libzcatgui-simulator.a
|
||||
```
|
||||
|
||||
### Requisitos
|
||||
|
||||
- macOS con Xcode instalado
|
||||
- Para dispositivo real: certificado de desarrollador Apple
|
||||
|
||||
### C贸mo funciona
|
||||
|
||||
```
|
||||
鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹?
|
||||
鈹? Arquitectura iOS 鈹?
|
||||
鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹?
|
||||
鈹? 鈹?
|
||||
鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹?
|
||||
鈹? 鈹? Objective-C 鈹? 鈹? Zig Static 鈹? 鈹?
|
||||
鈹? 鈹? Bridge 鈹? 鈫斺啌鈫? 鈹? Library 鈹? 鈹?
|
||||
鈹? 鈹? (ZcatguiBridge)鈹? 鈹? (ios.zig) 鈹? 鈹?
|
||||
鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹溾攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹も攢鈹? 鈹?
|
||||
鈹? 鈹? ZcatguiView 鈹? 鈹? 鈹? 鈹?
|
||||
鈹? 鈹? (UIView) 鈹? 鈹? ios_view_*() 鈹? 鈹?
|
||||
鈹? 鈹? - Touch 鈹? 鈫? 鈹? ios_poll_*() 鈹? 鈹?
|
||||
鈹? 鈹? - Render 鈹? 鈫? 鈹? ios_log() 鈹? 鈹?
|
||||
鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹?
|
||||
鈹? 鈹? 鈹?
|
||||
鈹? 鈻? 鈹?
|
||||
鈹? 鈹屸攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹愨攢鈹? 鈹?
|
||||
鈹? 鈹? UIKit/CoreG. 鈹? 鈹?
|
||||
鈹? 鈹? CADisplayLink 鈹? 鈹?
|
||||
鈹? 鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹? 鈹?
|
||||
鈹? 鈹?
|
||||
鈹斺攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹粹攢鈹?
|
||||
```
|
||||
|
||||
### Funciones del Bridge
|
||||
|
||||
```c
|
||||
// Declaradas en ZcatguiBridge.h, implementadas en ZcatguiBridge.m
|
||||
// Llamadas desde ios.zig via extern "c"
|
||||
|
||||
void ios_view_init(uint32_t width, uint32_t height);
|
||||
uint32_t ios_view_get_width(void);
|
||||
uint32_t ios_view_get_height(void);
|
||||
void ios_view_present(const uint32_t *pixels, uint32_t width, uint32_t height);
|
||||
uint32_t ios_poll_event(uint8_t *buffer);
|
||||
void ios_log(const uint8_t *ptr, size_t len);
|
||||
uint64_t ios_get_time_ms(void);
|
||||
```
|
||||
|
||||
### Formato de Eventos iOS
|
||||
|
||||
| Tipo | C贸digo | Formato del Buffer |
|
||||
|------|--------|-------------------|
|
||||
| None | 0 | - |
|
||||
| TouchDown | 1 | `[x: i32, y: i32]` |
|
||||
| TouchUp | 2 | `[x: i32, y: i32]` |
|
||||
| TouchMove | 3 | `[x: i32, y: i32]` |
|
||||
| KeyDown | 4 | `[keyCode: u8, modifiers: u8]` |
|
||||
| KeyUp | 5 | `[keyCode: u8, modifiers: u8]` |
|
||||
| Resize | 6 | `[width: u32, height: u32]` |
|
||||
| Quit | 7 | - |
|
||||
|
||||
### Integraci贸n en Proyecto Xcode
|
||||
|
||||
1. Compilar la static library:
|
||||
```bash
|
||||
zig build ios # Para dispositivo
|
||||
zig build ios-sim # Para simulador
|
||||
```
|
||||
|
||||
2. En Xcode:
|
||||
- A帽adir `libzcatgui.a` a "Link Binary With Libraries"
|
||||
- A帽adir `ios/ZcatguiBridge.h` y `ios/ZcatguiBridge.m` al proyecto
|
||||
- Crear un `UIViewController` que use `ZcatguiViewController`
|
||||
|
||||
3. Ejemplo de ViewController:
|
||||
```objc
|
||||
#import "ZcatguiBridge.h"
|
||||
|
||||
@interface MyViewController : ZcatguiViewController
|
||||
@end
|
||||
|
||||
@implementation MyViewController
|
||||
|
||||
- (void)viewDidLoad {
|
||||
[super viewDidLoad];
|
||||
zcatgui_ios_init(self.view.bounds.size.width,
|
||||
self.view.bounds.size.height);
|
||||
[self startRenderLoop];
|
||||
}
|
||||
|
||||
- (void)renderFrame:(CADisplayLink *)displayLink {
|
||||
// Llamar a tu funci贸n de frame Zig
|
||||
zcatgui_ios_frame();
|
||||
}
|
||||
|
||||
@end
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Arquitectura Com煤n
|
||||
|
||||
### Compilaci贸n Condicional
|
||||
|
||||
En `src/zcatgui.zig`, los backends se importan condicionalmente:
|
||||
|
||||
```zig
|
||||
const builtin = @import("builtin");
|
||||
|
||||
pub const backend = struct {
|
||||
// SDL2 solo en desktop (no WASM, no Android)
|
||||
pub const Sdl2Backend = if (builtin.cpu.arch == .wasm32 or
|
||||
builtin.cpu.arch == .wasm64 or
|
||||
(builtin.os.tag == .linux and builtin.abi == .android))
|
||||
void
|
||||
else
|
||||
@import("backend/sdl2.zig").Sdl2Backend;
|
||||
|
||||
// WASM solo en WASM
|
||||
pub const wasm = if (builtin.cpu.arch == .wasm32 or builtin.cpu.arch == .wasm64)
|
||||
@import("backend/wasm.zig")
|
||||
else
|
||||
struct { pub const WasmBackend = void; /* stubs */ };
|
||||
|
||||
// Android solo en Android
|
||||
pub const android = if (builtin.os.tag == .linux and builtin.abi == .android)
|
||||
@import("backend/android.zig")
|
||||
else
|
||||
struct { pub const AndroidBackend = void; /* stubs */ };
|
||||
|
||||
// iOS solo en iOS
|
||||
pub const ios = if (builtin.os.tag == .ios)
|
||||
@import("backend/ios.zig")
|
||||
else
|
||||
struct { pub const IosBackend = void; /* stubs */ };
|
||||
};
|
||||
```
|
||||
|
||||
### Build Targets
|
||||
|
||||
En `build.zig`:
|
||||
|
||||
| Target | CPU Arch | OS | ABI |
|
||||
|--------|----------|-----|-----|
|
||||
| Desktop | native | native | native |
|
||||
| WASM | wasm32 | freestanding | - |
|
||||
| Android ARM64 | aarch64 | linux | android |
|
||||
| Android x86_64 | x86_64 | linux | android |
|
||||
| iOS Device | aarch64 | ios | - |
|
||||
| iOS Simulator | aarch64 | ios | simulator |
|
||||
|
||||
---
|
||||
|
||||
## Decisiones de Dise帽o
|
||||
|
||||
### 驴Por qu茅 Software Rendering?
|
||||
|
||||
1. **Compatibilidad universal**: Funciona en cualquier dispositivo
|
||||
2. **Sin dependencias GPU**: No necesita OpenGL/Vulkan/Metal
|
||||
3. **Predictibilidad**: Mismo resultado en todas las plataformas
|
||||
4. **Debugging simple**: Es solo un array de p铆xeles
|
||||
|
||||
### 驴Por qu茅 extern declarations en lugar de @cImport?
|
||||
|
||||
Para Android e iOS, usamos declaraciones `extern` manuales en lugar de `@cImport`:
|
||||
|
||||
1. **Sin dependencia de headers**: No necesitas el SDK instalado para compilar el c贸digo Zig base
|
||||
2. **Control preciso**: Declaramos solo lo que usamos
|
||||
3. **Portabilidad**: El mismo c贸digo funciona en cualquier m谩quina
|
||||
|
||||
### 驴Por qu茅 touch se mapea a mouse?
|
||||
|
||||
Simplifica el c贸digo de la aplicaci贸n:
|
||||
- Touch down = Mouse left button down
|
||||
- Touch up = Mouse left button up
|
||||
- Touch move = Mouse move
|
||||
|
||||
Para gestos avanzados (pinch, swipe), el sistema de gestos de zcatgui maneja la traducci贸n.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### WASM
|
||||
|
||||
**Error: "Canvas not found"**
|
||||
- Aseg煤rate de que el canvas tiene `id="zcatgui-canvas"` en el HTML
|
||||
|
||||
**Error: "Memory access out of bounds"**
|
||||
- Verifica que el framebuffer tiene el tama帽o correcto
|
||||
- Aseg煤rate de usar `std.heap.wasm_allocator`
|
||||
|
||||
### Android
|
||||
|
||||
**Error: "unable to find dynamic system library 'android'"**
|
||||
- El Android NDK no est谩 instalado o no est谩 en el PATH
|
||||
- Instala el NDK: `sdkmanager "ndk;25.2.9519653"`
|
||||
|
||||
**App crashes on startup**
|
||||
- Verifica que `libzcatgui.so` est谩 en la carpeta correcta de jniLibs
|
||||
- Verifica que el nombre en AndroidManifest coincide
|
||||
|
||||
### iOS
|
||||
|
||||
**Error: "Undefined symbols for architecture arm64"**
|
||||
- Aseg煤rate de linkear `libzcatgui.a`
|
||||
- Verifica que est谩s usando el .a correcto (device vs simulator)
|
||||
|
||||
**Bridge functions not found**
|
||||
- A帽ade `ZcatguiBridge.m` al target de compilaci贸n
|
||||
- Verifica que el bridge header est谩 incluido
|
||||
|
||||
---
|
||||
|
||||
## Referencias
|
||||
|
||||
- [Zig Cross-Compilation](https://zig.guide/build-system/cross-compilation/)
|
||||
- [ZigAndroidTemplate](https://github.com/ikskuh/ZigAndroidTemplate)
|
||||
- [Zig iOS Example](https://github.com/kubkon/zig-ios-example)
|
||||
- [WebAssembly with Zig](https://ziglang.org/documentation/master/#WebAssembly)
|
||||
- [ANativeActivity](https://developer.android.com/ndk/reference/struct/a-native-activity)
|
||||
- [UIKit](https://developer.apple.com/documentation/uikit)
|
||||
196
examples/android_demo.zig
Normal file
196
examples/android_demo.zig
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
//! Android Demo - zcatgui running on Android
|
||||
//!
|
||||
//! Build with:
|
||||
//! zig build android-demo -Dtarget=aarch64-linux-android
|
||||
//!
|
||||
//! This creates a native Android activity that runs the zcatgui demo.
|
||||
|
||||
const std = @import("std");
|
||||
const zcatgui = @import("zcatgui");
|
||||
|
||||
const AndroidBackend = zcatgui.backend.android.AndroidBackend;
|
||||
const log = zcatgui.backend.android.log;
|
||||
|
||||
// Global state (Android native activities are single-instance)
|
||||
var ctx: ?*zcatgui.Context = null;
|
||||
var allocator: std.mem.Allocator = undefined;
|
||||
|
||||
// Demo state
|
||||
var counter: i32 = 0;
|
||||
var checkbox_checked: bool = false;
|
||||
var slider_value: f32 = 0.5;
|
||||
|
||||
/// Main loop - called from a separate thread
|
||||
fn mainLoop() void {
|
||||
allocator = std.heap.page_allocator;
|
||||
|
||||
// Wait for window to be ready
|
||||
while (!zcatgui.backend.android.isRunning()) {
|
||||
std.Thread.sleep(10 * std.time.ns_per_ms);
|
||||
}
|
||||
|
||||
const size = zcatgui.backend.android.getWindowSize();
|
||||
if (size.width == 0 or size.height == 0) {
|
||||
log("Invalid window size", .{});
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize context
|
||||
const c = allocator.create(zcatgui.Context) catch {
|
||||
log("Failed to allocate context", .{});
|
||||
return;
|
||||
};
|
||||
c.* = zcatgui.Context.init(allocator, size.width, size.height) catch {
|
||||
log("Failed to init context", .{});
|
||||
allocator.destroy(c);
|
||||
return;
|
||||
};
|
||||
ctx = c;
|
||||
|
||||
log("zcatgui Android initialized: {}x{}", .{ size.width, size.height });
|
||||
|
||||
// Main loop
|
||||
while (zcatgui.backend.android.isRunning()) {
|
||||
frame() catch |err| {
|
||||
log("Frame error: {}", .{err});
|
||||
break;
|
||||
};
|
||||
|
||||
// ~60 FPS
|
||||
std.Thread.sleep(16 * std.time.ns_per_ms);
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
if (ctx) |context| {
|
||||
context.deinit();
|
||||
allocator.destroy(context);
|
||||
ctx = null;
|
||||
}
|
||||
|
||||
log("zcatgui Android shutdown", .{});
|
||||
}
|
||||
|
||||
fn frame() !void {
|
||||
const c = ctx orelse return;
|
||||
const be = zcatgui.backend.android.getBackend() orelse return;
|
||||
|
||||
// Get current size (may have changed due to rotation)
|
||||
const size = zcatgui.backend.android.getWindowSize();
|
||||
if (size.width == 0 or size.height == 0) return;
|
||||
|
||||
// Process events
|
||||
while (be.backend().pollEvent()) |event| {
|
||||
switch (event) {
|
||||
.quit => {
|
||||
be.running = false;
|
||||
return;
|
||||
},
|
||||
.key => |k| c.input.handleKeyEvent(k),
|
||||
.mouse => |m| {
|
||||
c.input.setMousePos(m.x, m.y);
|
||||
if (m.button) |btn| {
|
||||
c.input.setMouseButton(btn, m.pressed);
|
||||
}
|
||||
if (m.scroll_x != 0 or m.scroll_y != 0) {
|
||||
c.input.addScroll(m.scroll_x, m.scroll_y);
|
||||
}
|
||||
},
|
||||
.resize => |r| {
|
||||
// Handle resize (screen rotation)
|
||||
_ = r;
|
||||
},
|
||||
.text_input => {},
|
||||
}
|
||||
}
|
||||
|
||||
// Begin frame
|
||||
c.beginFrame();
|
||||
|
||||
// Set theme (use high contrast for mobile)
|
||||
const theme = zcatgui.Style.Theme.dark;
|
||||
|
||||
// Large touch-friendly UI
|
||||
c.layout.row_height = 60;
|
||||
|
||||
// Title
|
||||
zcatgui.labelEx(c, "zcatgui Android Demo", .{
|
||||
.alignment = .center,
|
||||
.color = theme.primary,
|
||||
});
|
||||
|
||||
c.layout.row_height = 40;
|
||||
zcatgui.label(c, "Touch to interact!");
|
||||
|
||||
// Spacing
|
||||
c.layout.row_height = 20;
|
||||
zcatgui.label(c, "");
|
||||
|
||||
// Counter section
|
||||
c.layout.row_height = 50;
|
||||
|
||||
var buf: [64]u8 = undefined;
|
||||
const counter_text = std.fmt.bufPrint(&buf, "Counter: {d}", .{counter}) catch "Counter: ?";
|
||||
zcatgui.label(c, counter_text);
|
||||
|
||||
// Large buttons for touch
|
||||
c.layout.row_height = 80;
|
||||
|
||||
if (zcatgui.button(c, "+")) {
|
||||
counter += 1;
|
||||
}
|
||||
|
||||
if (zcatgui.button(c, "-")) {
|
||||
counter -= 1;
|
||||
}
|
||||
|
||||
if (zcatgui.button(c, "Reset")) {
|
||||
counter = 0;
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
c.layout.row_height = 20;
|
||||
zcatgui.label(c, "");
|
||||
c.layout.row_height = 60;
|
||||
|
||||
if (zcatgui.checkbox(c, &checkbox_checked, "Enable feature")) {
|
||||
// Checkbox changed
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
c.layout.row_height = 20;
|
||||
zcatgui.label(c, "");
|
||||
c.layout.row_height = 40;
|
||||
|
||||
var slider_buf: [32]u8 = undefined;
|
||||
const slider_label = std.fmt.bufPrint(&slider_buf, "Progress: {d:.0}%", .{slider_value * 100}) catch "Progress: ?";
|
||||
zcatgui.label(c, slider_label);
|
||||
|
||||
c.layout.row_height = 30;
|
||||
_ = zcatgui.widgets.progress.bar(c, slider_value);
|
||||
|
||||
// End frame
|
||||
c.endFrame();
|
||||
|
||||
// Render
|
||||
var fb = try zcatgui.render.Framebuffer.init(allocator, size.width, size.height);
|
||||
defer fb.deinit();
|
||||
|
||||
fb.clear(theme.background);
|
||||
|
||||
var renderer = zcatgui.render.SoftwareRenderer.init(&fb);
|
||||
renderer.executeAll(c.commands.items);
|
||||
|
||||
// Present to screen
|
||||
be.backend().present(&fb);
|
||||
}
|
||||
|
||||
// Thread entry point - Android's main thread handles UI, we run zcatgui in background
|
||||
export fn android_main() void {
|
||||
mainLoop();
|
||||
}
|
||||
|
||||
// Alternative: Use native activity thread directly (for simpler apps)
|
||||
comptime {
|
||||
// Ensure ANativeActivity_onCreate is exported from android.zig
|
||||
_ = zcatgui.backend.android;
|
||||
}
|
||||
183
examples/wasm_demo.zig
Normal file
183
examples/wasm_demo.zig
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
//! WASM Demo - zcatgui running in a web browser
|
||||
//!
|
||||
//! Build with:
|
||||
//! zig build wasm-demo
|
||||
//!
|
||||
//! Then serve the `web/` directory and open index.html
|
||||
|
||||
const std = @import("std");
|
||||
const zcatgui = @import("zcatgui");
|
||||
|
||||
// Use WASM allocator
|
||||
const allocator = std.heap.wasm_allocator;
|
||||
|
||||
// Global state (since WASM is single-threaded)
|
||||
var ctx: ?*zcatgui.Context = null;
|
||||
var backend: ?*WasmBackend = null;
|
||||
var running: bool = true;
|
||||
|
||||
// Demo state
|
||||
var counter: i32 = 0;
|
||||
var checkbox_checked: bool = false;
|
||||
var slider_value: f32 = 0.5;
|
||||
var text_buffer: [256]u8 = [_]u8{0} ** 256;
|
||||
var text_len: usize = 0;
|
||||
|
||||
const WasmBackend = zcatgui.backend.wasm.WasmBackend;
|
||||
|
||||
/// Called once at startup
|
||||
export fn wasm_main() void {
|
||||
init() catch |err| {
|
||||
zcatgui.backend.wasm.log("Init error: {}", .{err});
|
||||
};
|
||||
}
|
||||
|
||||
/// Called every frame
|
||||
export fn wasm_frame() void {
|
||||
if (ctx) |c| {
|
||||
frame(c) catch |err| {
|
||||
zcatgui.backend.wasm.log("Frame error: {}", .{err});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
fn init() !void {
|
||||
// Initialize backend
|
||||
const be = try allocator.create(WasmBackend);
|
||||
be.* = try WasmBackend.init(800, 600);
|
||||
backend = be;
|
||||
|
||||
// Initialize context
|
||||
const c = try allocator.create(zcatgui.Context);
|
||||
c.* = try zcatgui.Context.init(allocator, 800, 600);
|
||||
ctx = c;
|
||||
|
||||
zcatgui.backend.wasm.log("zcatgui WASM initialized!", .{});
|
||||
}
|
||||
|
||||
fn frame(c: *zcatgui.Context) !void {
|
||||
const be = backend.?;
|
||||
|
||||
// Process events
|
||||
while (be.backend().pollEvent()) |event| {
|
||||
switch (event) {
|
||||
.quit => running = false,
|
||||
.key => |k| c.input.handleKeyEvent(k),
|
||||
.mouse => |m| {
|
||||
// Update mouse position
|
||||
c.input.setMousePos(m.x, m.y);
|
||||
// Update mouse buttons
|
||||
if (m.button) |btn| {
|
||||
c.input.setMouseButton(btn, m.pressed);
|
||||
}
|
||||
// Update scroll
|
||||
if (m.scroll_x != 0 or m.scroll_y != 0) {
|
||||
c.input.addScroll(m.scroll_x, m.scroll_y);
|
||||
}
|
||||
},
|
||||
.resize => |r| {
|
||||
// Handle resize
|
||||
_ = r;
|
||||
},
|
||||
.text_input => |t| {
|
||||
// Handle text input
|
||||
if (text_len < text_buffer.len - 1) {
|
||||
const slice = t.text[0..t.len];
|
||||
for (slice) |char| {
|
||||
if (text_len < text_buffer.len - 1) {
|
||||
text_buffer[text_len] = char;
|
||||
text_len += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// Begin frame
|
||||
c.beginFrame();
|
||||
|
||||
// Set theme
|
||||
const theme = zcatgui.Style.Theme.dark;
|
||||
|
||||
// Title
|
||||
c.layout.row_height = 40;
|
||||
zcatgui.labelEx(c, "zcatgui WASM Demo", .{
|
||||
.alignment = .center,
|
||||
.color = theme.primary,
|
||||
});
|
||||
|
||||
c.layout.row_height = 20;
|
||||
zcatgui.label(c, "Running in WebAssembly!");
|
||||
|
||||
// Spacing
|
||||
c.layout.row_height = 10;
|
||||
zcatgui.label(c, "");
|
||||
|
||||
// Counter section
|
||||
c.layout.row_height = 32;
|
||||
|
||||
var buf: [64]u8 = undefined;
|
||||
const counter_text = std.fmt.bufPrint(&buf, "Counter: {d}", .{counter}) catch "Counter: ?";
|
||||
zcatgui.label(c, counter_text);
|
||||
|
||||
// Buttons
|
||||
if (zcatgui.button(c, "Increment")) {
|
||||
counter += 1;
|
||||
}
|
||||
|
||||
if (zcatgui.button(c, "Decrement")) {
|
||||
counter -= 1;
|
||||
}
|
||||
|
||||
if (zcatgui.button(c, "Reset")) {
|
||||
counter = 0;
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
c.layout.row_height = 10;
|
||||
zcatgui.label(c, "");
|
||||
c.layout.row_height = 32;
|
||||
|
||||
if (zcatgui.checkbox(c, &checkbox_checked, "Enable feature")) {
|
||||
// Checkbox changed
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
c.layout.row_height = 10;
|
||||
zcatgui.label(c, "");
|
||||
c.layout.row_height = 32;
|
||||
|
||||
var slider_buf: [32]u8 = undefined;
|
||||
const slider_label = std.fmt.bufPrint(&slider_buf, "Progress: {d:.0}%", .{slider_value * 100}) catch "Progress: ?";
|
||||
zcatgui.label(c, slider_label);
|
||||
|
||||
// Progress bar showing value
|
||||
_ = zcatgui.widgets.progress.bar(c, slider_value);
|
||||
|
||||
// Info
|
||||
c.layout.row_height = 10;
|
||||
zcatgui.label(c, "");
|
||||
c.layout.row_height = 24;
|
||||
zcatgui.labelEx(c, "Press keys to type, Tab to navigate", .{
|
||||
.alignment = .center,
|
||||
.color = zcatgui.Color.rgb(128, 128, 128),
|
||||
});
|
||||
|
||||
// End frame
|
||||
c.endFrame();
|
||||
|
||||
// Render
|
||||
var fb = zcatgui.render.Framebuffer.init(allocator, 800, 600) catch return;
|
||||
defer fb.deinit();
|
||||
|
||||
// Clear with background color
|
||||
fb.clear(theme.background);
|
||||
|
||||
// Execute draw commands
|
||||
var renderer = zcatgui.render.SoftwareRenderer.init(&fb);
|
||||
renderer.executeAll(c.commands.items);
|
||||
|
||||
// Present to canvas
|
||||
be.backend().present(&fb);
|
||||
}
|
||||
68
ios/ZcatguiBridge.h
Normal file
68
ios/ZcatguiBridge.h
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// ZcatguiBridge.h - Objective-C bridge header for zcatgui iOS backend
|
||||
//
|
||||
// Include this in your iOS project and link with the zcatgui static library.
|
||||
// See ZcatguiBridge.m for implementation.
|
||||
|
||||
#ifndef ZCATGUI_BRIDGE_H
|
||||
#define ZCATGUI_BRIDGE_H
|
||||
|
||||
#import <UIKit/UIKit.h>
|
||||
#import <stdint.h>
|
||||
|
||||
// Event types (must match ios.zig)
|
||||
typedef NS_ENUM(uint32_t, ZcatguiEventType) {
|
||||
ZcatguiEventNone = 0,
|
||||
ZcatguiEventTouchDown = 1,
|
||||
ZcatguiEventTouchUp = 2,
|
||||
ZcatguiEventTouchMove = 3,
|
||||
ZcatguiEventKeyDown = 4,
|
||||
ZcatguiEventKeyUp = 5,
|
||||
ZcatguiEventResize = 6,
|
||||
ZcatguiEventQuit = 7,
|
||||
};
|
||||
|
||||
// Event structure
|
||||
typedef struct {
|
||||
ZcatguiEventType type;
|
||||
uint8_t data[64];
|
||||
} ZcatguiEvent;
|
||||
|
||||
// Bridge view that renders zcatgui framebuffer
|
||||
@interface ZcatguiView : UIView
|
||||
|
||||
@property (nonatomic, readonly) CGSize framebufferSize;
|
||||
|
||||
- (instancetype)initWithFrame:(CGRect)frame;
|
||||
- (void)presentPixels:(const uint32_t *)pixels width:(uint32_t)width height:(uint32_t)height;
|
||||
|
||||
@end
|
||||
|
||||
// Main view controller
|
||||
@interface ZcatguiViewController : UIViewController
|
||||
|
||||
@property (nonatomic, strong) ZcatguiView *zcatguiView;
|
||||
@property (nonatomic, assign) BOOL running;
|
||||
|
||||
- (void)startRenderLoop;
|
||||
- (void)stopRenderLoop;
|
||||
|
||||
@end
|
||||
|
||||
// Bridge functions called by Zig
|
||||
#ifdef __cplusplus
|
||||
extern "C" {
|
||||
#endif
|
||||
|
||||
void ios_view_init(uint32_t width, uint32_t height);
|
||||
uint32_t ios_view_get_width(void);
|
||||
uint32_t ios_view_get_height(void);
|
||||
void ios_view_present(const uint32_t *pixels, uint32_t width, uint32_t height);
|
||||
uint32_t ios_poll_event(uint8_t *buffer);
|
||||
void ios_log(const uint8_t *ptr, size_t len);
|
||||
uint64_t ios_get_time_ms(void);
|
||||
|
||||
#ifdef __cplusplus
|
||||
}
|
||||
#endif
|
||||
|
||||
#endif // ZCATGUI_BRIDGE_H
|
||||
318
ios/ZcatguiBridge.m
Normal file
318
ios/ZcatguiBridge.m
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
// ZcatguiBridge.m - Objective-C bridge implementation for zcatgui iOS backend
|
||||
//
|
||||
// This provides the UIKit integration for zcatgui.
|
||||
// Add this file to your Xcode iOS project.
|
||||
|
||||
#import "ZcatguiBridge.h"
|
||||
#import <QuartzCore/QuartzCore.h>
|
||||
#import <mach/mach_time.h>
|
||||
|
||||
// Global state
|
||||
static ZcatguiView *g_view = nil;
|
||||
static NSMutableArray<ZcatguiEvent *> *g_eventQueue = nil;
|
||||
static uint32_t g_width = 0;
|
||||
static uint32_t g_height = 0;
|
||||
static mach_timebase_info_data_t g_timebaseInfo;
|
||||
|
||||
// Helper to create event
|
||||
static ZcatguiEvent *createEvent(ZcatguiEventType type) {
|
||||
ZcatguiEvent *event = [[ZcatguiEvent alloc] init];
|
||||
event->type = type;
|
||||
memset(event->data, 0, sizeof(event->data));
|
||||
return event;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// ZcatguiEvent wrapper (for NSMutableArray)
|
||||
// =============================================================================
|
||||
|
||||
@interface ZcatguiEventWrapper : NSObject
|
||||
@property (nonatomic) ZcatguiEventType type;
|
||||
@property (nonatomic) uint8_t data[64];
|
||||
@end
|
||||
|
||||
@implementation ZcatguiEventWrapper
|
||||
@end
|
||||
|
||||
// =============================================================================
|
||||
// ZcatguiView Implementation
|
||||
// =============================================================================
|
||||
|
||||
@implementation ZcatguiView {
|
||||
CGContextRef _bitmapContext;
|
||||
uint32_t *_pixels;
|
||||
uint32_t _pixelWidth;
|
||||
uint32_t _pixelHeight;
|
||||
}
|
||||
|
||||
- (instancetype)initWithFrame:(CGRect)frame {
|
||||
self = [super initWithFrame:frame];
|
||||
if (self) {
|
||||
self.backgroundColor = [UIColor blackColor];
|
||||
self.multipleTouchEnabled = YES;
|
||||
self.userInteractionEnabled = YES;
|
||||
|
||||
_bitmapContext = NULL;
|
||||
_pixels = NULL;
|
||||
_pixelWidth = 0;
|
||||
_pixelHeight = 0;
|
||||
|
||||
// Initialize event queue
|
||||
if (!g_eventQueue) {
|
||||
g_eventQueue = [[NSMutableArray alloc] init];
|
||||
}
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
- (void)dealloc {
|
||||
if (_bitmapContext) {
|
||||
CGContextRelease(_bitmapContext);
|
||||
}
|
||||
if (_pixels) {
|
||||
free(_pixels);
|
||||
}
|
||||
}
|
||||
|
||||
- (void)presentPixels:(const uint32_t *)pixels width:(uint32_t)width height:(uint32_t)height {
|
||||
// Resize buffer if needed
|
||||
if (width != _pixelWidth || height != _pixelHeight) {
|
||||
if (_bitmapContext) {
|
||||
CGContextRelease(_bitmapContext);
|
||||
_bitmapContext = NULL;
|
||||
}
|
||||
if (_pixels) {
|
||||
free(_pixels);
|
||||
_pixels = NULL;
|
||||
}
|
||||
|
||||
_pixelWidth = width;
|
||||
_pixelHeight = height;
|
||||
_pixels = malloc(width * height * 4);
|
||||
|
||||
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
|
||||
_bitmapContext = CGBitmapContextCreate(
|
||||
_pixels,
|
||||
width,
|
||||
height,
|
||||
8,
|
||||
width * 4,
|
||||
colorSpace,
|
||||
kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Little
|
||||
);
|
||||
CGColorSpaceRelease(colorSpace);
|
||||
}
|
||||
|
||||
// Copy pixels
|
||||
memcpy(_pixels, pixels, width * height * 4);
|
||||
|
||||
// Trigger redraw
|
||||
dispatch_async(dispatch_get_main_queue(), ^{
|
||||
[self setNeedsDisplay];
|
||||
});
|
||||
}
|
||||
|
||||
- (void)drawRect:(CGRect)rect {
|
||||
if (!_bitmapContext || !_pixels) {
|
||||
return;
|
||||
}
|
||||
|
||||
CGContextRef ctx = UIGraphicsGetCurrentContext();
|
||||
if (!ctx) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create image from bitmap context
|
||||
CGImageRef image = CGBitmapContextCreateImage(_bitmapContext);
|
||||
if (image) {
|
||||
// Flip coordinate system
|
||||
CGContextTranslateCTM(ctx, 0, self.bounds.size.height);
|
||||
CGContextScaleCTM(ctx, 1.0, -1.0);
|
||||
|
||||
CGContextDrawImage(ctx, self.bounds, image);
|
||||
CGImageRelease(image);
|
||||
}
|
||||
}
|
||||
|
||||
- (CGSize)framebufferSize {
|
||||
return CGSizeMake(_pixelWidth, _pixelHeight);
|
||||
}
|
||||
|
||||
// Touch handling
|
||||
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
|
||||
UITouch *touch = [touches anyObject];
|
||||
CGPoint location = [touch locationInView:self];
|
||||
|
||||
ZcatguiEventWrapper *evt = [[ZcatguiEventWrapper alloc] init];
|
||||
evt.type = ZcatguiEventTouchDown;
|
||||
|
||||
int32_t x = (int32_t)location.x;
|
||||
int32_t y = (int32_t)location.y;
|
||||
memcpy(&evt.data[0], &x, 4);
|
||||
memcpy(&evt.data[4], &y, 4);
|
||||
|
||||
@synchronized(g_eventQueue) {
|
||||
[g_eventQueue addObject:evt];
|
||||
}
|
||||
}
|
||||
|
||||
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
|
||||
UITouch *touch = [touches anyObject];
|
||||
CGPoint location = [touch locationInView:self];
|
||||
|
||||
ZcatguiEventWrapper *evt = [[ZcatguiEventWrapper alloc] init];
|
||||
evt.type = ZcatguiEventTouchMove;
|
||||
|
||||
int32_t x = (int32_t)location.x;
|
||||
int32_t y = (int32_t)location.y;
|
||||
memcpy(&evt.data[0], &x, 4);
|
||||
memcpy(&evt.data[4], &y, 4);
|
||||
|
||||
@synchronized(g_eventQueue) {
|
||||
[g_eventQueue addObject:evt];
|
||||
}
|
||||
}
|
||||
|
||||
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
|
||||
UITouch *touch = [touches anyObject];
|
||||
CGPoint location = [touch locationInView:self];
|
||||
|
||||
ZcatguiEventWrapper *evt = [[ZcatguiEventWrapper alloc] init];
|
||||
evt.type = ZcatguiEventTouchUp;
|
||||
|
||||
int32_t x = (int32_t)location.x;
|
||||
int32_t y = (int32_t)location.y;
|
||||
memcpy(&evt.data[0], &x, 4);
|
||||
memcpy(&evt.data[4], &y, 4);
|
||||
|
||||
@synchronized(g_eventQueue) {
|
||||
[g_eventQueue addObject:evt];
|
||||
}
|
||||
}
|
||||
|
||||
- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
|
||||
[self touchesEnded:touches withEvent:event];
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
// =============================================================================
|
||||
// ZcatguiViewController Implementation
|
||||
// =============================================================================
|
||||
|
||||
@implementation ZcatguiViewController {
|
||||
CADisplayLink *_displayLink;
|
||||
}
|
||||
|
||||
- (void)viewDidLoad {
|
||||
[super viewDidLoad];
|
||||
|
||||
self.zcatguiView = [[ZcatguiView alloc] initWithFrame:self.view.bounds];
|
||||
self.zcatguiView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
|
||||
[self.view addSubview:self.zcatguiView];
|
||||
|
||||
g_view = self.zcatguiView;
|
||||
g_width = (uint32_t)self.view.bounds.size.width;
|
||||
g_height = (uint32_t)self.view.bounds.size.height;
|
||||
|
||||
self.running = YES;
|
||||
}
|
||||
|
||||
- (void)viewDidLayoutSubviews {
|
||||
[super viewDidLayoutSubviews];
|
||||
|
||||
uint32_t newWidth = (uint32_t)self.view.bounds.size.width;
|
||||
uint32_t newHeight = (uint32_t)self.view.bounds.size.height;
|
||||
|
||||
if (newWidth != g_width || newHeight != g_height) {
|
||||
g_width = newWidth;
|
||||
g_height = newHeight;
|
||||
|
||||
// Queue resize event
|
||||
ZcatguiEventWrapper *evt = [[ZcatguiEventWrapper alloc] init];
|
||||
evt.type = ZcatguiEventResize;
|
||||
memcpy(&evt.data[0], &newWidth, 4);
|
||||
memcpy(&evt.data[4], &newHeight, 4);
|
||||
|
||||
@synchronized(g_eventQueue) {
|
||||
[g_eventQueue addObject:evt];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
- (void)startRenderLoop {
|
||||
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(renderFrame:)];
|
||||
[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
|
||||
}
|
||||
|
||||
- (void)stopRenderLoop {
|
||||
[_displayLink invalidate];
|
||||
_displayLink = nil;
|
||||
}
|
||||
|
||||
- (void)renderFrame:(CADisplayLink *)displayLink {
|
||||
// Override this in your subclass to call your Zig frame function
|
||||
}
|
||||
|
||||
- (BOOL)prefersStatusBarHidden {
|
||||
return YES;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
// =============================================================================
|
||||
// Bridge Functions (called by Zig)
|
||||
// =============================================================================
|
||||
|
||||
void ios_view_init(uint32_t width, uint32_t height) {
|
||||
g_width = width;
|
||||
g_height = height;
|
||||
|
||||
// Initialize timebase for timing
|
||||
mach_timebase_info(&g_timebaseInfo);
|
||||
|
||||
NSLog(@"[zcatgui] ios_view_init: %ux%u", width, height);
|
||||
}
|
||||
|
||||
uint32_t ios_view_get_width(void) {
|
||||
return g_width;
|
||||
}
|
||||
|
||||
uint32_t ios_view_get_height(void) {
|
||||
return g_height;
|
||||
}
|
||||
|
||||
void ios_view_present(const uint32_t *pixels, uint32_t width, uint32_t height) {
|
||||
if (g_view) {
|
||||
[g_view presentPixels:pixels width:width height:height];
|
||||
}
|
||||
}
|
||||
|
||||
uint32_t ios_poll_event(uint8_t *buffer) {
|
||||
ZcatguiEventWrapper *evt = nil;
|
||||
|
||||
@synchronized(g_eventQueue) {
|
||||
if (g_eventQueue.count > 0) {
|
||||
evt = g_eventQueue.firstObject;
|
||||
[g_eventQueue removeObjectAtIndex:0];
|
||||
}
|
||||
}
|
||||
|
||||
if (!evt) {
|
||||
return ZcatguiEventNone;
|
||||
}
|
||||
|
||||
memcpy(buffer, evt.data, 64);
|
||||
return evt.type;
|
||||
}
|
||||
|
||||
void ios_log(const uint8_t *ptr, size_t len) {
|
||||
NSString *msg = [[NSString alloc] initWithBytes:ptr length:len encoding:NSUTF8StringEncoding];
|
||||
NSLog(@"[zcatgui] %@", msg);
|
||||
}
|
||||
|
||||
uint64_t ios_get_time_ms(void) {
|
||||
uint64_t time = mach_absolute_time();
|
||||
uint64_t nanos = time * g_timebaseInfo.numer / g_timebaseInfo.denom;
|
||||
return nanos / 1000000; // Convert to milliseconds
|
||||
}
|
||||
492
src/backend/android.zig
Normal file
492
src/backend/android.zig
Normal file
|
|
@ -0,0 +1,492 @@
|
|||
//! Android Backend - ANativeActivity based backend
|
||||
//!
|
||||
//! Provides window/event handling for Android using the native activity API.
|
||||
//! Uses extern functions implemented via android_native_app_glue or direct NDK bindings.
|
||||
//!
|
||||
//! Build target: aarch64-linux-android or x86_64-linux-android
|
||||
//!
|
||||
//! Requirements:
|
||||
//! - Android NDK installed (set ANDROID_NDK_HOME)
|
||||
//! - Build with: zig build android
|
||||
//!
|
||||
//! The resulting .so file should be placed in your Android project's
|
||||
//! jniLibs/arm64-v8a/ or jniLibs/x86_64/ directory.
|
||||
|
||||
const std = @import("std");
|
||||
const Backend = @import("backend.zig").Backend;
|
||||
const Event = @import("backend.zig").Event;
|
||||
const Input = @import("../core/input.zig");
|
||||
const Framebuffer = @import("../render/framebuffer.zig").Framebuffer;
|
||||
|
||||
// =============================================================================
|
||||
// Android NDK Types (declared manually to avoid @cImport dependency)
|
||||
// =============================================================================
|
||||
|
||||
// Opaque types
|
||||
pub const ANativeActivity = opaque {};
|
||||
pub const ANativeWindow = opaque {};
|
||||
pub const AInputQueue = opaque {};
|
||||
pub const AInputEvent = opaque {};
|
||||
pub const ALooper = opaque {};
|
||||
|
||||
// Window buffer for direct pixel access
|
||||
pub const ANativeWindow_Buffer = extern struct {
|
||||
width: i32,
|
||||
height: i32,
|
||||
stride: i32,
|
||||
format: i32,
|
||||
bits: ?*anyopaque,
|
||||
reserved: [6]u32,
|
||||
};
|
||||
|
||||
pub const ARect = extern struct {
|
||||
left: i32,
|
||||
top: i32,
|
||||
right: i32,
|
||||
bottom: i32,
|
||||
};
|
||||
|
||||
// Constants
|
||||
pub const ANDROID_LOG_INFO: c_int = 4;
|
||||
pub const AINPUT_EVENT_TYPE_KEY: i32 = 1;
|
||||
pub const AINPUT_EVENT_TYPE_MOTION: i32 = 2;
|
||||
pub const AMOTION_EVENT_ACTION_MASK: i32 = 0xff;
|
||||
pub const AMOTION_EVENT_ACTION_DOWN: i32 = 0;
|
||||
pub const AMOTION_EVENT_ACTION_UP: i32 = 1;
|
||||
pub const AMOTION_EVENT_ACTION_MOVE: i32 = 2;
|
||||
pub const AKEY_EVENT_ACTION_DOWN: i32 = 0;
|
||||
pub const AKEY_EVENT_ACTION_UP: i32 = 1;
|
||||
pub const AMETA_CTRL_ON: i32 = 0x1000;
|
||||
pub const AMETA_SHIFT_ON: i32 = 0x1;
|
||||
pub const AMETA_ALT_ON: i32 = 0x2;
|
||||
pub const AKEYCODE_BACK: i32 = 4;
|
||||
pub const AKEYCODE_DEL: i32 = 67;
|
||||
pub const AKEYCODE_TAB: i32 = 61;
|
||||
pub const AKEYCODE_ENTER: i32 = 66;
|
||||
pub const AKEYCODE_ESCAPE: i32 = 111;
|
||||
pub const AKEYCODE_SPACE: i32 = 62;
|
||||
pub const AKEYCODE_DPAD_LEFT: i32 = 21;
|
||||
pub const AKEYCODE_DPAD_UP: i32 = 19;
|
||||
pub const AKEYCODE_DPAD_RIGHT: i32 = 22;
|
||||
pub const AKEYCODE_DPAD_DOWN: i32 = 20;
|
||||
pub const AKEYCODE_FORWARD_DEL: i32 = 112;
|
||||
pub const AKEYCODE_MOVE_HOME: i32 = 122;
|
||||
pub const AKEYCODE_MOVE_END: i32 = 123;
|
||||
pub const AKEYCODE_PAGE_UP: i32 = 92;
|
||||
pub const AKEYCODE_PAGE_DOWN: i32 = 93;
|
||||
pub const AKEYCODE_INSERT: i32 = 124;
|
||||
|
||||
// =============================================================================
|
||||
// Android NDK extern functions
|
||||
// =============================================================================
|
||||
|
||||
extern "android" fn ANativeWindow_getWidth(window: *ANativeWindow) i32;
|
||||
extern "android" fn ANativeWindow_getHeight(window: *ANativeWindow) i32;
|
||||
extern "android" fn ANativeWindow_lock(window: *ANativeWindow, outBuffer: *ANativeWindow_Buffer, inOutDirtyBounds: ?*ARect) i32;
|
||||
extern "android" fn ANativeWindow_unlockAndPost(window: *ANativeWindow) i32;
|
||||
|
||||
extern "android" fn ALooper_forThread() ?*ALooper;
|
||||
extern "android" fn AInputQueue_attachLooper(queue: *AInputQueue, looper: *ALooper, ident: c_int, callback: ?*anyopaque, data: ?*anyopaque) void;
|
||||
extern "android" fn AInputQueue_detachLooper(queue: *AInputQueue) void;
|
||||
extern "android" fn AInputQueue_getEvent(queue: *AInputQueue, outEvent: *?*AInputEvent) i32;
|
||||
extern "android" fn AInputQueue_preDispatchEvent(queue: *AInputQueue, event: *AInputEvent) i32;
|
||||
extern "android" fn AInputQueue_finishEvent(queue: *AInputQueue, event: *AInputEvent, handled: c_int) void;
|
||||
|
||||
extern "android" fn AInputEvent_getType(event: *AInputEvent) i32;
|
||||
extern "android" fn AMotionEvent_getAction(event: *AInputEvent) i32;
|
||||
extern "android" fn AMotionEvent_getX(event: *AInputEvent, pointer_index: usize) f32;
|
||||
extern "android" fn AMotionEvent_getY(event: *AInputEvent, pointer_index: usize) f32;
|
||||
extern "android" fn AKeyEvent_getAction(event: *AInputEvent) i32;
|
||||
extern "android" fn AKeyEvent_getKeyCode(event: *AInputEvent) i32;
|
||||
extern "android" fn AKeyEvent_getMetaState(event: *AInputEvent) i32;
|
||||
|
||||
extern "log" fn __android_log_write(prio: c_int, tag: [*:0]const u8, text: [*:0]const u8) c_int;
|
||||
|
||||
// =============================================================================
|
||||
// Logging
|
||||
// =============================================================================
|
||||
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
var buf: [1024]u8 = undefined;
|
||||
const msg = std.fmt.bufPrint(&buf, fmt, args) catch return;
|
||||
// Null-terminate for C
|
||||
if (msg.len < buf.len) {
|
||||
buf[msg.len] = 0;
|
||||
_ = __android_log_write(ANDROID_LOG_INFO, "zcatgui", @ptrCast(&buf));
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Android Backend Implementation
|
||||
// =============================================================================
|
||||
|
||||
pub const AndroidBackend = struct {
|
||||
window: ?*ANativeWindow,
|
||||
looper: ?*ALooper,
|
||||
input_queue: ?*AInputQueue,
|
||||
width: u32,
|
||||
height: u32,
|
||||
running: bool,
|
||||
|
||||
// Touch state
|
||||
touch_x: i32,
|
||||
touch_y: i32,
|
||||
touch_down: bool,
|
||||
|
||||
// Event queue (for buffering)
|
||||
event_queue: [64]Event,
|
||||
event_read: usize,
|
||||
event_write: usize,
|
||||
|
||||
const Self = @This();
|
||||
|
||||
/// Initialize the Android backend
|
||||
pub fn init() !Self {
|
||||
log("AndroidBackend.init", .{});
|
||||
|
||||
return Self{
|
||||
.window = null,
|
||||
.looper = ALooper_forThread(),
|
||||
.input_queue = null,
|
||||
.width = 0,
|
||||
.height = 0,
|
||||
.running = true,
|
||||
.touch_x = 0,
|
||||
.touch_y = 0,
|
||||
.touch_down = false,
|
||||
.event_queue = undefined,
|
||||
.event_read = 0,
|
||||
.event_write = 0,
|
||||
};
|
||||
}
|
||||
|
||||
/// Set the native window (called when window is created)
|
||||
pub fn setWindow(self: *Self, window: *ANativeWindow) void {
|
||||
self.window = window;
|
||||
self.width = @intCast(ANativeWindow_getWidth(window));
|
||||
self.height = @intCast(ANativeWindow_getHeight(window));
|
||||
log("Window set: {}x{}", .{ self.width, self.height });
|
||||
}
|
||||
|
||||
/// Clear the native window (called when window is destroyed)
|
||||
pub fn clearWindow(self: *Self) void {
|
||||
self.window = null;
|
||||
self.width = 0;
|
||||
self.height = 0;
|
||||
}
|
||||
|
||||
/// Set the input queue
|
||||
pub fn setInputQueue(self: *Self, queue: *AInputQueue) void {
|
||||
self.input_queue = queue;
|
||||
if (self.looper) |looper| {
|
||||
AInputQueue_attachLooper(queue, looper, 1, null, null);
|
||||
}
|
||||
}
|
||||
|
||||
/// Clear the input queue
|
||||
pub fn clearInputQueue(self: *Self) void {
|
||||
if (self.input_queue) |queue| {
|
||||
AInputQueue_detachLooper(queue);
|
||||
}
|
||||
self.input_queue = null;
|
||||
}
|
||||
|
||||
/// Get as abstract Backend interface
|
||||
pub fn backend(self: *Self) Backend {
|
||||
return .{
|
||||
.ptr = self,
|
||||
.vtable = &vtable,
|
||||
};
|
||||
}
|
||||
|
||||
/// Deinitialize
|
||||
pub fn deinit(self: *Self) void {
|
||||
self.running = false;
|
||||
self.clearInputQueue();
|
||||
self.clearWindow();
|
||||
}
|
||||
|
||||
/// Queue an event
|
||||
fn queueEvent(self: *Self, event: Event) void {
|
||||
const next_write = (self.event_write + 1) % self.event_queue.len;
|
||||
if (next_write != self.event_read) {
|
||||
self.event_queue[self.event_write] = event;
|
||||
self.event_write = next_write;
|
||||
}
|
||||
}
|
||||
|
||||
/// Dequeue an event
|
||||
fn dequeueEvent(self: *Self) ?Event {
|
||||
if (self.event_read == self.event_write) {
|
||||
return null;
|
||||
}
|
||||
const event = self.event_queue[self.event_read];
|
||||
self.event_read = (self.event_read + 1) % self.event_queue.len;
|
||||
return event;
|
||||
}
|
||||
|
||||
/// Process input events from Android
|
||||
fn processInputEvents(self: *Self) void {
|
||||
const queue = self.input_queue orelse return;
|
||||
|
||||
var event: ?*AInputEvent = null;
|
||||
while (AInputQueue_getEvent(queue, &event) >= 0) {
|
||||
if (event) |e| {
|
||||
if (AInputQueue_preDispatchEvent(queue, e) != 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const handled = self.handleInputEvent(e);
|
||||
AInputQueue_finishEvent(queue, e, if (handled) 1 else 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Handle a single input event
|
||||
fn handleInputEvent(self: *Self, event: *AInputEvent) bool {
|
||||
const event_type = AInputEvent_getType(event);
|
||||
|
||||
if (event_type == AINPUT_EVENT_TYPE_MOTION) {
|
||||
return self.handleMotionEvent(event);
|
||||
} else if (event_type == AINPUT_EVENT_TYPE_KEY) {
|
||||
return self.handleKeyEvent(event);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/// Handle touch/motion events
|
||||
fn handleMotionEvent(self: *Self, event: *AInputEvent) bool {
|
||||
const action = AMotionEvent_getAction(event) & AMOTION_EVENT_ACTION_MASK;
|
||||
const x: i32 = @intFromFloat(AMotionEvent_getX(event, 0));
|
||||
const y: i32 = @intFromFloat(AMotionEvent_getY(event, 0));
|
||||
|
||||
if (action == AMOTION_EVENT_ACTION_DOWN) {
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
self.touch_down = true;
|
||||
self.queueEvent(.{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = .left,
|
||||
.pressed = true,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
});
|
||||
return true;
|
||||
} else if (action == AMOTION_EVENT_ACTION_UP) {
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
self.touch_down = false;
|
||||
self.queueEvent(.{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = .left,
|
||||
.pressed = false,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
});
|
||||
return true;
|
||||
} else if (action == AMOTION_EVENT_ACTION_MOVE) {
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
self.queueEvent(.{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = null,
|
||||
.pressed = false,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/// Handle key events
|
||||
fn handleKeyEvent(self: *Self, event: *AInputEvent) bool {
|
||||
const action = AKeyEvent_getAction(event);
|
||||
const key_code = AKeyEvent_getKeyCode(event);
|
||||
const meta_state = AKeyEvent_getMetaState(event);
|
||||
|
||||
const pressed = action == AKEY_EVENT_ACTION_DOWN;
|
||||
const key = mapAndroidKeyCode(key_code);
|
||||
|
||||
self.queueEvent(.{
|
||||
.key = .{
|
||||
.key = key,
|
||||
.pressed = pressed,
|
||||
.modifiers = .{
|
||||
.ctrl = (meta_state & AMETA_CTRL_ON) != 0,
|
||||
.shift = (meta_state & AMETA_SHIFT_ON) != 0,
|
||||
.alt = (meta_state & AMETA_ALT_ON) != 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Handle back button specially
|
||||
if (key_code == AKEYCODE_BACK) {
|
||||
if (action == AKEY_EVENT_ACTION_UP) {
|
||||
self.queueEvent(.{ .quit = {} });
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// VTable implementation
|
||||
const vtable = Backend.VTable{
|
||||
.pollEvent = pollEventImpl,
|
||||
.present = presentImpl,
|
||||
.getSize = getSizeImpl,
|
||||
.deinit = deinitImpl,
|
||||
};
|
||||
|
||||
fn pollEventImpl(ptr: *anyopaque) ?Event {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
|
||||
// First, process any pending Android input events
|
||||
self.processInputEvents();
|
||||
|
||||
// Then return queued events
|
||||
return self.dequeueEvent();
|
||||
}
|
||||
|
||||
fn presentImpl(ptr: *anyopaque, fb: *const Framebuffer) void {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
const window = self.window orelse return;
|
||||
|
||||
// Lock the window buffer
|
||||
var buffer: ANativeWindow_Buffer = undefined;
|
||||
if (ANativeWindow_lock(window, &buffer, null) < 0) {
|
||||
return;
|
||||
}
|
||||
defer _ = ANativeWindow_unlockAndPost(window);
|
||||
|
||||
// Copy framebuffer to window
|
||||
// ANativeWindow uses RGBA_8888 format by default
|
||||
const dst_pitch = @as(usize, @intCast(buffer.stride)) * 4;
|
||||
const src_pitch = fb.width * 4;
|
||||
const copy_width = @min(fb.width, @as(u32, @intCast(buffer.width))) * 4;
|
||||
const copy_height = @min(fb.height, @as(u32, @intCast(buffer.height)));
|
||||
|
||||
const dst_base: [*]u8 = @ptrCast(buffer.bits);
|
||||
const src_base: [*]const u8 = @ptrCast(fb.pixels);
|
||||
|
||||
var y: usize = 0;
|
||||
while (y < copy_height) : (y += 1) {
|
||||
const dst_row = dst_base + y * dst_pitch;
|
||||
const src_row = src_base + y * src_pitch;
|
||||
@memcpy(dst_row[0..copy_width], src_row[0..copy_width]);
|
||||
}
|
||||
}
|
||||
|
||||
fn getSizeImpl(ptr: *anyopaque) Backend.SizeResult {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
return .{ .width = self.width, .height = self.height };
|
||||
}
|
||||
|
||||
fn deinitImpl(ptr: *anyopaque) void {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
self.deinit();
|
||||
}
|
||||
};
|
||||
|
||||
// =============================================================================
|
||||
// Key Code Mapping (Android AKEYCODE to our Key enum)
|
||||
// =============================================================================
|
||||
|
||||
fn mapAndroidKeyCode(code: i32) Input.Key {
|
||||
// Letters (AKEYCODE_A = 29, AKEYCODE_Z = 54)
|
||||
if (code >= 29 and code <= 54) {
|
||||
return @enumFromInt(@as(u8, @intCast(code - 29))); // a-z
|
||||
}
|
||||
|
||||
// Numbers (AKEYCODE_0 = 7, AKEYCODE_9 = 16)
|
||||
if (code >= 7 and code <= 16) {
|
||||
return @enumFromInt(@as(u8, @intCast(26 + (code - 7)))); // 0-9
|
||||
}
|
||||
|
||||
// Function keys (AKEYCODE_F1 = 131, AKEYCODE_F12 = 142)
|
||||
if (code >= 131 and code <= 142) {
|
||||
return @enumFromInt(@as(u8, @intCast(36 + (code - 131)))); // F1-F12
|
||||
}
|
||||
|
||||
// Special keys
|
||||
if (code == AKEYCODE_DEL) return .backspace;
|
||||
if (code == AKEYCODE_TAB) return .tab;
|
||||
if (code == AKEYCODE_ENTER) return .enter;
|
||||
if (code == AKEYCODE_ESCAPE) return .escape;
|
||||
if (code == AKEYCODE_SPACE) return .space;
|
||||
if (code == AKEYCODE_DPAD_LEFT) return .left;
|
||||
if (code == AKEYCODE_DPAD_UP) return .up;
|
||||
if (code == AKEYCODE_DPAD_RIGHT) return .right;
|
||||
if (code == AKEYCODE_DPAD_DOWN) return .down;
|
||||
if (code == AKEYCODE_FORWARD_DEL) return .delete;
|
||||
if (code == AKEYCODE_MOVE_HOME) return .home;
|
||||
if (code == AKEYCODE_MOVE_END) return .end;
|
||||
if (code == AKEYCODE_PAGE_UP) return .page_up;
|
||||
if (code == AKEYCODE_PAGE_DOWN) return .page_down;
|
||||
if (code == AKEYCODE_INSERT) return .insert;
|
||||
|
||||
return .unknown;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Global State
|
||||
// =============================================================================
|
||||
|
||||
/// Global state (Android native activities are single-instance)
|
||||
var g_backend: ?*AndroidBackend = null;
|
||||
var g_allocator: std.mem.Allocator = undefined;
|
||||
|
||||
// =============================================================================
|
||||
// Public API for app code
|
||||
// =============================================================================
|
||||
|
||||
/// Initialize the global backend (call from ANativeActivity_onCreate)
|
||||
pub fn initGlobal(allocator: std.mem.Allocator) !*AndroidBackend {
|
||||
g_allocator = allocator;
|
||||
|
||||
const be = try allocator.create(AndroidBackend);
|
||||
be.* = try AndroidBackend.init();
|
||||
g_backend = be;
|
||||
|
||||
return be;
|
||||
}
|
||||
|
||||
/// Deinitialize the global backend
|
||||
pub fn deinitGlobal() void {
|
||||
if (g_backend) |be| {
|
||||
be.deinit();
|
||||
g_allocator.destroy(be);
|
||||
g_backend = null;
|
||||
}
|
||||
}
|
||||
|
||||
/// Get the global backend instance (for use by app code)
|
||||
pub fn getBackend() ?*AndroidBackend {
|
||||
return g_backend;
|
||||
}
|
||||
|
||||
/// Check if we should continue running
|
||||
pub fn isRunning() bool {
|
||||
if (g_backend) |be| {
|
||||
return be.running and be.window != null;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/// Get current window size
|
||||
pub fn getWindowSize() struct { width: u32, height: u32 } {
|
||||
if (g_backend) |be| {
|
||||
return .{ .width = be.width, .height = be.height };
|
||||
}
|
||||
return .{ .width = 0, .height = 0 };
|
||||
}
|
||||
|
|
@ -42,6 +42,9 @@ pub const Backend = struct {
|
|||
ptr: *anyopaque,
|
||||
vtable: *const VTable,
|
||||
|
||||
/// Size result type (named for consistency across backends)
|
||||
pub const SizeResult = struct { width: u32, height: u32 };
|
||||
|
||||
pub const VTable = struct {
|
||||
/// Poll for events (non-blocking)
|
||||
pollEvent: *const fn (ptr: *anyopaque) ?Event,
|
||||
|
|
@ -50,7 +53,7 @@ pub const Backend = struct {
|
|||
present: *const fn (ptr: *anyopaque, fb: *const Framebuffer) void,
|
||||
|
||||
/// Get window dimensions
|
||||
getSize: *const fn (ptr: *anyopaque) struct { width: u32, height: u32 },
|
||||
getSize: *const fn (ptr: *anyopaque) SizeResult,
|
||||
|
||||
/// Clean up
|
||||
deinit: *const fn (ptr: *anyopaque) void,
|
||||
|
|
@ -67,7 +70,7 @@ pub const Backend = struct {
|
|||
}
|
||||
|
||||
/// Get window size
|
||||
pub fn getSize(self: Backend) struct { width: u32, height: u32 } {
|
||||
pub fn getSize(self: Backend) SizeResult {
|
||||
return self.vtable.getSize(self.ptr);
|
||||
}
|
||||
|
||||
|
|
|
|||
390
src/backend/ios.zig
Normal file
390
src/backend/ios.zig
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
//! iOS Backend - UIKit based backend for iOS/iPadOS
|
||||
//!
|
||||
//! Provides window/event handling for iOS using UIKit.
|
||||
//! Uses extern functions that bridge to Objective-C/Swift code.
|
||||
//!
|
||||
//! Build target: aarch64-ios or aarch64-ios-simulator
|
||||
//!
|
||||
//! Requirements:
|
||||
//! - macOS with Xcode installed
|
||||
//! - Build with: zig build ios (creates .a static library)
|
||||
//!
|
||||
//! Integration:
|
||||
//! The resulting .a file should be linked into your Xcode iOS project.
|
||||
//! You'll need to implement the Objective-C bridge (ZcatguiBridge.m).
|
||||
|
||||
const std = @import("std");
|
||||
const Backend = @import("backend.zig").Backend;
|
||||
const Event = @import("backend.zig").Event;
|
||||
const Input = @import("../core/input.zig");
|
||||
const Framebuffer = @import("../render/framebuffer.zig").Framebuffer;
|
||||
|
||||
// =============================================================================
|
||||
// iOS Types
|
||||
// =============================================================================
|
||||
|
||||
// Opaque types representing iOS objects
|
||||
pub const UIView = opaque {};
|
||||
pub const CAMetalLayer = opaque {};
|
||||
pub const UITouch = opaque {};
|
||||
pub const UIEvent = opaque {};
|
||||
|
||||
// =============================================================================
|
||||
// Bridge Functions (implemented in Objective-C)
|
||||
// =============================================================================
|
||||
|
||||
// These functions must be implemented in the iOS app's Objective-C bridge code.
|
||||
// They provide the connection between Zig and UIKit.
|
||||
|
||||
/// Initialize the rendering view with given dimensions
|
||||
extern "c" fn ios_view_init(width: u32, height: u32) void;
|
||||
|
||||
/// Get current view width
|
||||
extern "c" fn ios_view_get_width() u32;
|
||||
|
||||
/// Get current view height
|
||||
extern "c" fn ios_view_get_height() u32;
|
||||
|
||||
/// Present framebuffer to the view (copies RGBA pixels)
|
||||
extern "c" fn ios_view_present(pixels: [*]const u32, width: u32, height: u32) void;
|
||||
|
||||
/// Poll for next event (returns event type, fills buffer)
|
||||
extern "c" fn ios_poll_event(buffer: [*]u8) u32;
|
||||
|
||||
/// Log message to NSLog
|
||||
extern "c" fn ios_log(ptr: [*]const u8, len: usize) void;
|
||||
|
||||
/// Get current time in milliseconds
|
||||
extern "c" fn ios_get_time_ms() u64;
|
||||
|
||||
// =============================================================================
|
||||
// Event Types (must match Objective-C bridge)
|
||||
// =============================================================================
|
||||
|
||||
pub const IOS_EVENT_NONE: u32 = 0;
|
||||
pub const IOS_EVENT_TOUCH_DOWN: u32 = 1;
|
||||
pub const IOS_EVENT_TOUCH_UP: u32 = 2;
|
||||
pub const IOS_EVENT_TOUCH_MOVE: u32 = 3;
|
||||
pub const IOS_EVENT_KEY_DOWN: u32 = 4;
|
||||
pub const IOS_EVENT_KEY_UP: u32 = 5;
|
||||
pub const IOS_EVENT_RESIZE: u32 = 6;
|
||||
pub const IOS_EVENT_QUIT: u32 = 7;
|
||||
|
||||
// =============================================================================
|
||||
// Logging
|
||||
// =============================================================================
|
||||
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
var buf: [1024]u8 = undefined;
|
||||
const msg = std.fmt.bufPrint(&buf, fmt, args) catch return;
|
||||
ios_log(msg.ptr, msg.len);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// iOS Backend Implementation
|
||||
// =============================================================================
|
||||
|
||||
pub const IosBackend = struct {
|
||||
width: u32,
|
||||
height: u32,
|
||||
running: bool,
|
||||
event_buffer: [64]u8,
|
||||
|
||||
// Touch state
|
||||
touch_x: i32,
|
||||
touch_y: i32,
|
||||
touch_down: bool,
|
||||
|
||||
const Self = @This();
|
||||
|
||||
/// Initialize the iOS backend
|
||||
pub fn init(width: u32, height: u32) !Self {
|
||||
log("IosBackend.init: {}x{}", .{ width, height });
|
||||
ios_view_init(width, height);
|
||||
|
||||
return Self{
|
||||
.width = width,
|
||||
.height = height,
|
||||
.running = true,
|
||||
.event_buffer = undefined,
|
||||
.touch_x = 0,
|
||||
.touch_y = 0,
|
||||
.touch_down = false,
|
||||
};
|
||||
}
|
||||
|
||||
/// Get as abstract Backend interface
|
||||
pub fn backend(self: *Self) Backend {
|
||||
return .{
|
||||
.ptr = self,
|
||||
.vtable = &vtable,
|
||||
};
|
||||
}
|
||||
|
||||
/// Deinitialize
|
||||
pub fn deinit(self: *Self) void {
|
||||
self.running = false;
|
||||
}
|
||||
|
||||
// VTable implementation
|
||||
const vtable = Backend.VTable{
|
||||
.pollEvent = pollEventImpl,
|
||||
.present = presentImpl,
|
||||
.getSize = getSizeImpl,
|
||||
.deinit = deinitImpl,
|
||||
};
|
||||
|
||||
fn pollEventImpl(ptr: *anyopaque) ?Event {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
|
||||
const event_type = ios_poll_event(&self.event_buffer);
|
||||
|
||||
return switch (event_type) {
|
||||
IOS_EVENT_NONE => null,
|
||||
|
||||
IOS_EVENT_TOUCH_DOWN => blk: {
|
||||
const x = std.mem.readInt(i32, self.event_buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, self.event_buffer[4..8], .little);
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
self.touch_down = true;
|
||||
break :blk Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = .left,
|
||||
.pressed = true,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_TOUCH_UP => blk: {
|
||||
const x = std.mem.readInt(i32, self.event_buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, self.event_buffer[4..8], .little);
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
self.touch_down = false;
|
||||
break :blk Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = .left,
|
||||
.pressed = false,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_TOUCH_MOVE => blk: {
|
||||
const x = std.mem.readInt(i32, self.event_buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, self.event_buffer[4..8], .little);
|
||||
self.touch_x = x;
|
||||
self.touch_y = y;
|
||||
break :blk Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = null,
|
||||
.pressed = false,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_KEY_DOWN => blk: {
|
||||
const key_code = self.event_buffer[0];
|
||||
const modifiers = self.event_buffer[1];
|
||||
const key = mapIosKeyCode(key_code);
|
||||
break :blk Event{
|
||||
.key = .{
|
||||
.key = key,
|
||||
.pressed = true,
|
||||
.modifiers = .{
|
||||
.ctrl = (modifiers & 1) != 0,
|
||||
.shift = (modifiers & 2) != 0,
|
||||
.alt = (modifiers & 4) != 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_KEY_UP => blk: {
|
||||
const key_code = self.event_buffer[0];
|
||||
const modifiers = self.event_buffer[1];
|
||||
const key = mapIosKeyCode(key_code);
|
||||
break :blk Event{
|
||||
.key = .{
|
||||
.key = key,
|
||||
.pressed = false,
|
||||
.modifiers = .{
|
||||
.ctrl = (modifiers & 1) != 0,
|
||||
.shift = (modifiers & 2) != 0,
|
||||
.alt = (modifiers & 4) != 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_RESIZE => blk: {
|
||||
const width = std.mem.readInt(u32, self.event_buffer[0..4], .little);
|
||||
const height = std.mem.readInt(u32, self.event_buffer[4..8], .little);
|
||||
self.width = width;
|
||||
self.height = height;
|
||||
break :blk Event{
|
||||
.resize = .{
|
||||
.width = width,
|
||||
.height = height,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
IOS_EVENT_QUIT => Event{ .quit = {} },
|
||||
|
||||
else => null,
|
||||
};
|
||||
}
|
||||
|
||||
fn presentImpl(ptr: *anyopaque, fb: *const Framebuffer) void {
|
||||
_ = ptr;
|
||||
ios_view_present(fb.pixels, fb.width, fb.height);
|
||||
}
|
||||
|
||||
fn getSizeImpl(ptr: *anyopaque) Backend.SizeResult {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
// Update from iOS in case view was resized
|
||||
self.width = ios_view_get_width();
|
||||
self.height = ios_view_get_height();
|
||||
return .{ .width = self.width, .height = self.height };
|
||||
}
|
||||
|
||||
fn deinitImpl(ptr: *anyopaque) void {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
self.deinit();
|
||||
}
|
||||
};
|
||||
|
||||
// =============================================================================
|
||||
// Key Code Mapping
|
||||
// =============================================================================
|
||||
|
||||
// iOS uses UIKeyboardHID codes for hardware keyboards
|
||||
// For on-screen keyboard, we typically get text input events instead
|
||||
|
||||
fn mapIosKeyCode(code: u8) Input.Key {
|
||||
return switch (code) {
|
||||
// Letters (USB HID codes: a=4, z=29)
|
||||
4...29 => @enumFromInt(code - 4), // a-z
|
||||
|
||||
// Numbers (USB HID codes: 1=30, 0=39)
|
||||
30...38 => @enumFromInt(@as(u8, 26 + code - 29)), // 1-9
|
||||
39 => .@"0",
|
||||
|
||||
// Function keys (F1=58, F12=69)
|
||||
58...69 => @enumFromInt(@as(u8, 36 + (code - 58))), // F1-F12
|
||||
|
||||
// Special keys
|
||||
42 => .backspace,
|
||||
43 => .tab,
|
||||
40 => .enter,
|
||||
41 => .escape,
|
||||
44 => .space,
|
||||
80 => .left,
|
||||
82 => .up,
|
||||
79 => .right,
|
||||
81 => .down,
|
||||
76 => .delete,
|
||||
74 => .home,
|
||||
77 => .end,
|
||||
75 => .page_up,
|
||||
78 => .page_down,
|
||||
73 => .insert,
|
||||
|
||||
else => .unknown,
|
||||
};
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Global State
|
||||
// =============================================================================
|
||||
|
||||
var g_backend: ?*IosBackend = null;
|
||||
var g_allocator: std.mem.Allocator = undefined;
|
||||
|
||||
// =============================================================================
|
||||
// Public API
|
||||
// =============================================================================
|
||||
|
||||
/// Initialize the global backend
|
||||
pub fn initGlobal(allocator: std.mem.Allocator, width: u32, height: u32) !*IosBackend {
|
||||
g_allocator = allocator;
|
||||
|
||||
const be = try allocator.create(IosBackend);
|
||||
be.* = try IosBackend.init(width, height);
|
||||
g_backend = be;
|
||||
|
||||
return be;
|
||||
}
|
||||
|
||||
/// Deinitialize the global backend
|
||||
pub fn deinitGlobal() void {
|
||||
if (g_backend) |be| {
|
||||
be.deinit();
|
||||
g_allocator.destroy(be);
|
||||
g_backend = null;
|
||||
}
|
||||
}
|
||||
|
||||
/// Get the global backend instance
|
||||
pub fn getBackend() ?*IosBackend {
|
||||
return g_backend;
|
||||
}
|
||||
|
||||
/// Check if we should continue running
|
||||
pub fn isRunning() bool {
|
||||
if (g_backend) |be| {
|
||||
return be.running;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/// Get current view size
|
||||
pub fn getViewSize() struct { width: u32, height: u32 } {
|
||||
if (g_backend) |be| {
|
||||
return .{ .width = be.width, .height = be.height };
|
||||
}
|
||||
return .{ .width = 0, .height = 0 };
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Exported functions for Objective-C bridge to call
|
||||
// =============================================================================
|
||||
|
||||
/// Called from Objective-C when the app starts
|
||||
export fn zcatgui_ios_init(width: u32, height: u32) bool {
|
||||
const be = initGlobal(std.heap.page_allocator, width, height) catch {
|
||||
log("Failed to init backend", .{});
|
||||
return false;
|
||||
};
|
||||
_ = be;
|
||||
return true;
|
||||
}
|
||||
|
||||
/// Called from Objective-C to deinitialize
|
||||
export fn zcatgui_ios_deinit() void {
|
||||
deinitGlobal();
|
||||
}
|
||||
|
||||
/// Called from Objective-C each frame
|
||||
export fn zcatgui_ios_frame() void {
|
||||
// This is a hook for the app to call its own frame function
|
||||
// The actual frame logic should be in the app code
|
||||
}
|
||||
|
||||
/// Get time in milliseconds
|
||||
pub fn getTimeMs() u64 {
|
||||
return ios_get_time_ms();
|
||||
}
|
||||
|
|
@ -208,7 +208,7 @@ pub const Sdl2Backend = struct {
|
|||
}
|
||||
|
||||
/// Get window size
|
||||
pub fn getSize(self: *Self) struct { width: u32, height: u32 } {
|
||||
pub fn getSize(self: *Self) Backend.Backend.SizeResult {
|
||||
var w: c_int = 0;
|
||||
var h: c_int = 0;
|
||||
c.SDL_GetWindowSize(self.window, &w, &h);
|
||||
|
|
|
|||
300
src/backend/wasm.zig
Normal file
300
src/backend/wasm.zig
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
//! WASM Backend - WebAssembly/Browser backend
|
||||
//!
|
||||
//! Provides window/event handling for web browsers via Canvas API.
|
||||
//! Uses extern functions that are implemented in JavaScript.
|
||||
|
||||
const std = @import("std");
|
||||
const Backend = @import("backend.zig").Backend;
|
||||
const Event = @import("backend.zig").Event;
|
||||
const Input = @import("../core/input.zig");
|
||||
const Framebuffer = @import("../render/framebuffer.zig").Framebuffer;
|
||||
|
||||
// =============================================================================
|
||||
// JavaScript imports (implemented in JS glue code)
|
||||
// =============================================================================
|
||||
|
||||
extern "env" fn js_canvas_init(width: u32, height: u32) void;
|
||||
extern "env" fn js_canvas_present(pixels: [*]const u32, width: u32, height: u32) void;
|
||||
extern "env" fn js_get_canvas_width() u32;
|
||||
extern "env" fn js_get_canvas_height() u32;
|
||||
extern "env" fn js_console_log(ptr: [*]const u8, len: usize) void;
|
||||
extern "env" fn js_get_time_ms() u64;
|
||||
|
||||
// Event queue (filled by JS)
|
||||
extern "env" fn js_poll_event(event_buffer: [*]u8) u32;
|
||||
|
||||
// =============================================================================
|
||||
// WASM Backend Implementation
|
||||
// =============================================================================
|
||||
|
||||
pub const WasmBackend = struct {
|
||||
width: u32,
|
||||
height: u32,
|
||||
event_buffer: [64]u8 = undefined,
|
||||
|
||||
const Self = @This();
|
||||
|
||||
/// Initialize the WASM backend
|
||||
pub fn init(width: u32, height: u32) !Self {
|
||||
js_canvas_init(width, height);
|
||||
|
||||
return Self{
|
||||
.width = width,
|
||||
.height = height,
|
||||
};
|
||||
}
|
||||
|
||||
/// Get as abstract Backend interface
|
||||
pub fn backend(self: *Self) Backend {
|
||||
return .{
|
||||
.ptr = self,
|
||||
.vtable = &vtable,
|
||||
};
|
||||
}
|
||||
|
||||
/// Deinitialize
|
||||
pub fn deinit(self: *Self) void {
|
||||
_ = self;
|
||||
// Nothing to clean up in WASM
|
||||
}
|
||||
|
||||
// VTable implementation
|
||||
const vtable = Backend.VTable{
|
||||
.pollEvent = pollEventImpl,
|
||||
.present = presentImpl,
|
||||
.getSize = getSizeImpl,
|
||||
.deinit = deinitImpl,
|
||||
};
|
||||
|
||||
fn pollEventImpl(ptr: *anyopaque) ?Event {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
|
||||
// Poll event from JS
|
||||
const event_type = js_poll_event(&self.event_buffer);
|
||||
|
||||
return switch (event_type) {
|
||||
0 => null, // No event
|
||||
1 => parseKeyEvent(&self.event_buffer, true), // Key down
|
||||
2 => parseKeyEvent(&self.event_buffer, false), // Key up
|
||||
3 => parseMouseMove(&self.event_buffer), // Mouse move
|
||||
4 => parseMouseButton(&self.event_buffer, true), // Mouse down
|
||||
5 => parseMouseButton(&self.event_buffer, false), // Mouse up
|
||||
6 => parseMouseWheel(&self.event_buffer), // Mouse wheel
|
||||
7 => parseResize(&self.event_buffer), // Resize
|
||||
8 => Event{ .quit = {} }, // Quit/close
|
||||
9 => parseTextInput(&self.event_buffer), // Text input
|
||||
else => null,
|
||||
};
|
||||
}
|
||||
|
||||
fn presentImpl(ptr: *anyopaque, fb: *const Framebuffer) void {
|
||||
_ = ptr;
|
||||
js_canvas_present(fb.pixels.ptr, fb.width, fb.height);
|
||||
}
|
||||
|
||||
fn getSizeImpl(ptr: *anyopaque) Backend.SizeResult {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
// Update from JS in case canvas was resized
|
||||
self.width = js_get_canvas_width();
|
||||
self.height = js_get_canvas_height();
|
||||
return .{ .width = self.width, .height = self.height };
|
||||
}
|
||||
|
||||
fn deinitImpl(ptr: *anyopaque) void {
|
||||
const self: *Self = @ptrCast(@alignCast(ptr));
|
||||
self.deinit();
|
||||
}
|
||||
};
|
||||
|
||||
// =============================================================================
|
||||
// Event Parsing Helpers
|
||||
// =============================================================================
|
||||
|
||||
fn parseKeyEvent(buffer: []const u8, pressed: bool) ?Event {
|
||||
// Buffer format: [key_code: u8, modifiers: u8]
|
||||
const key_code = buffer[0];
|
||||
const modifiers_byte = buffer[1];
|
||||
|
||||
const key = mapKeyCode(key_code) orelse return null;
|
||||
|
||||
return Event{
|
||||
.key = .{
|
||||
.key = key,
|
||||
.pressed = pressed,
|
||||
.modifiers = .{
|
||||
.ctrl = (modifiers_byte & 1) != 0,
|
||||
.shift = (modifiers_byte & 2) != 0,
|
||||
.alt = (modifiers_byte & 4) != 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fn parseMouseMove(buffer: []const u8) ?Event {
|
||||
// Buffer format: [x: i32 (4 bytes), y: i32 (4 bytes)]
|
||||
const x = std.mem.readInt(i32, buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, buffer[4..8], .little);
|
||||
|
||||
return Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = null,
|
||||
.pressed = false,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fn parseMouseButton(buffer: []const u8, pressed: bool) ?Event {
|
||||
// Buffer format: [x: i32, y: i32, button: u8]
|
||||
const x = std.mem.readInt(i32, buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, buffer[4..8], .little);
|
||||
const button_code = buffer[8];
|
||||
|
||||
const button: Input.MouseButton = switch (button_code) {
|
||||
0 => .left,
|
||||
1 => .middle,
|
||||
2 => .right,
|
||||
else => .left,
|
||||
};
|
||||
|
||||
return Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = button,
|
||||
.pressed = pressed,
|
||||
.scroll_x = 0,
|
||||
.scroll_y = 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fn parseMouseWheel(buffer: []const u8) ?Event {
|
||||
// Buffer format: [x: i32, y: i32, delta_x: i32, delta_y: i32]
|
||||
const x = std.mem.readInt(i32, buffer[0..4], .little);
|
||||
const y = std.mem.readInt(i32, buffer[4..8], .little);
|
||||
const delta_x = std.mem.readInt(i32, buffer[8..12], .little);
|
||||
const delta_y = std.mem.readInt(i32, buffer[12..16], .little);
|
||||
|
||||
return Event{
|
||||
.mouse = .{
|
||||
.x = x,
|
||||
.y = y,
|
||||
.button = null,
|
||||
.pressed = false,
|
||||
.scroll_x = delta_x,
|
||||
.scroll_y = delta_y,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fn parseResize(buffer: []const u8) ?Event {
|
||||
// Buffer format: [width: u32, height: u32]
|
||||
const width = std.mem.readInt(u32, buffer[0..4], .little);
|
||||
const height = std.mem.readInt(u32, buffer[4..8], .little);
|
||||
|
||||
return Event{
|
||||
.resize = .{
|
||||
.width = width,
|
||||
.height = height,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fn parseTextInput(buffer: []const u8) ?Event {
|
||||
// Buffer format: [len: u8, text: up to 31 bytes]
|
||||
const len = buffer[0];
|
||||
if (len == 0 or len > 31) return null;
|
||||
|
||||
var event = Event{
|
||||
.text_input = .{
|
||||
.text = undefined,
|
||||
.len = len,
|
||||
},
|
||||
};
|
||||
|
||||
@memcpy(event.text_input.text[0..len], buffer[1 .. 1 + len]);
|
||||
return event;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Key Code Mapping (JS keyCode to our Key enum)
|
||||
// =============================================================================
|
||||
|
||||
fn mapKeyCode(code: u8) ?Input.Key {
|
||||
return switch (code) {
|
||||
// Letters
|
||||
65...90 => |c| @enumFromInt(c - 65), // A-Z -> a-z
|
||||
// Numbers
|
||||
48...57 => |c| @enumFromInt(26 + (c - 48)), // 0-9
|
||||
// Function keys
|
||||
112...123 => |c| @enumFromInt(36 + (c - 112)), // F1-F12
|
||||
// Special keys
|
||||
8 => .backspace,
|
||||
9 => .tab,
|
||||
13 => .enter,
|
||||
27 => .escape,
|
||||
32 => .space,
|
||||
37 => .left,
|
||||
38 => .up,
|
||||
39 => .right,
|
||||
40 => .down,
|
||||
46 => .delete,
|
||||
36 => .home,
|
||||
35 => .end,
|
||||
33 => .page_up,
|
||||
34 => .page_down,
|
||||
45 => .insert,
|
||||
else => null,
|
||||
};
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// WASM Exports (called from JS)
|
||||
// =============================================================================
|
||||
|
||||
/// Allocate memory (for JS to write event data)
|
||||
export fn wasm_alloc(size: usize) ?[*]u8 {
|
||||
const slice = std.heap.wasm_allocator.alloc(u8, size) catch return null;
|
||||
return slice.ptr;
|
||||
}
|
||||
|
||||
/// Free memory
|
||||
export fn wasm_free(ptr: [*]u8, size: usize) void {
|
||||
std.heap.wasm_allocator.free(ptr[0..size]);
|
||||
}
|
||||
|
||||
/// Get memory for framebuffer (called once at init)
|
||||
var framebuffer_memory: ?[]u8 = null;
|
||||
|
||||
export fn wasm_get_framebuffer_ptr(width: u32, height: u32) ?[*]u8 {
|
||||
const size = width * height * 4;
|
||||
|
||||
if (framebuffer_memory) |mem| {
|
||||
std.heap.wasm_allocator.free(mem);
|
||||
}
|
||||
|
||||
framebuffer_memory = std.heap.wasm_allocator.alloc(u8, size) catch return null;
|
||||
return framebuffer_memory.?.ptr;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Logging helper
|
||||
// =============================================================================
|
||||
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
var buf: [1024]u8 = undefined;
|
||||
const msg = std.fmt.bufPrint(&buf, fmt, args) catch return;
|
||||
js_console_log(msg.ptr, msg.len);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Time helper
|
||||
// =============================================================================
|
||||
|
||||
pub fn getTimeMs() u64 {
|
||||
return js_get_time_ms();
|
||||
}
|
||||
|
|
@ -118,9 +118,64 @@ pub const drawPolygonAA = render.antialiasing.drawPolygonAA;
|
|||
// =============================================================================
|
||||
// Backend
|
||||
// =============================================================================
|
||||
const builtin = @import("builtin");
|
||||
|
||||
pub const backend = struct {
|
||||
pub const Backend = @import("backend/backend.zig").Backend;
|
||||
pub const Sdl2Backend = @import("backend/sdl2.zig").Sdl2Backend;
|
||||
|
||||
// SDL2 backend (desktop only - not WASM, not Android)
|
||||
pub const Sdl2Backend = if (builtin.cpu.arch == .wasm32 or builtin.cpu.arch == .wasm64 or builtin.os.tag == .linux and builtin.abi == .android)
|
||||
void
|
||||
else
|
||||
@import("backend/sdl2.zig").Sdl2Backend;
|
||||
|
||||
// WASM backend
|
||||
pub const wasm = if (builtin.cpu.arch == .wasm32 or builtin.cpu.arch == .wasm64)
|
||||
@import("backend/wasm.zig")
|
||||
else
|
||||
struct {
|
||||
pub const WasmBackend = void;
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
_ = fmt;
|
||||
_ = args;
|
||||
}
|
||||
};
|
||||
|
||||
// Android backend
|
||||
pub const android = if (builtin.os.tag == .linux and builtin.abi == .android)
|
||||
@import("backend/android.zig")
|
||||
else
|
||||
struct {
|
||||
pub const AndroidBackend = void;
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
_ = fmt;
|
||||
_ = args;
|
||||
}
|
||||
pub fn getBackend() ?*AndroidBackend {
|
||||
return null;
|
||||
}
|
||||
pub fn isRunning() bool {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// iOS backend
|
||||
pub const ios = if (builtin.os.tag == .ios)
|
||||
@import("backend/ios.zig")
|
||||
else
|
||||
struct {
|
||||
pub const IosBackend = void;
|
||||
pub fn log(comptime fmt: []const u8, args: anytype) void {
|
||||
_ = fmt;
|
||||
_ = args;
|
||||
}
|
||||
pub fn getBackend() ?*IosBackend {
|
||||
return null;
|
||||
}
|
||||
pub fn isRunning() bool {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// =============================================================================
|
||||
|
|
|
|||
117
web/index.html
Normal file
117
web/index.html
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>zcatgui - WASM Demo</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 300;
|
||||
color: #4cc9f0;
|
||||
}
|
||||
|
||||
#app-container {
|
||||
border: 2px solid #4361ee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 40px rgba(67, 97, 238, 0.3);
|
||||
}
|
||||
|
||||
#app-canvas {
|
||||
display: block;
|
||||
background: #16213e;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.info kbd {
|
||||
background: #333;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>zcatgui WASM Demo</h1>
|
||||
|
||||
<div id="app-container">
|
||||
<canvas id="app-canvas" width="800" height="600"></canvas>
|
||||
<div id="loading">Loading WASM...</div>
|
||||
</div>
|
||||
|
||||
<p class="info">
|
||||
Click canvas to focus. Use <kbd>Tab</kbd> to navigate, <kbd>Enter</kbd> to activate.
|
||||
</p>
|
||||
|
||||
<script src="zcatgui.js"></script>
|
||||
<script>
|
||||
(async function() {
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
try {
|
||||
// Initialize runtime
|
||||
const runtime = new ZcatguiRuntime('app-canvas');
|
||||
|
||||
// Load WASM module
|
||||
const wasm = await runtime.load('zcatgui-demo.wasm');
|
||||
|
||||
// Hide loading indicator
|
||||
loading.style.display = 'none';
|
||||
|
||||
// Call WASM main/init function
|
||||
if (wasm.exports._start) {
|
||||
wasm.exports._start();
|
||||
} else if (wasm.exports.main) {
|
||||
wasm.exports.main();
|
||||
} else if (wasm.exports.wasm_main) {
|
||||
wasm.exports.wasm_main();
|
||||
}
|
||||
|
||||
console.log('zcatgui WASM loaded successfully');
|
||||
|
||||
// If there's an update/frame function, call it in a loop
|
||||
if (wasm.exports.wasm_frame) {
|
||||
function frame() {
|
||||
wasm.exports.wasm_frame();
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
loading.textContent = `Error: ${error.message}`;
|
||||
loading.style.color = '#f72585';
|
||||
console.error('Failed to load zcatgui WASM:', error);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
web/zcatgui-demo.wasm
Executable file
BIN
web/zcatgui-demo.wasm
Executable file
Binary file not shown.
325
web/zcatgui.js
Normal file
325
web/zcatgui.js
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
/**
|
||||
* zcatgui WASM Glue Code
|
||||
*
|
||||
* Provides the JavaScript side of the WASM backend:
|
||||
* - Canvas management
|
||||
* - Event handling (keyboard, mouse)
|
||||
* - Framebuffer presentation
|
||||
*/
|
||||
|
||||
class ZcatguiRuntime {
|
||||
constructor(canvasId) {
|
||||
this.canvas = document.getElementById(canvasId);
|
||||
if (!this.canvas) {
|
||||
throw new Error(`Canvas with id '${canvasId}' not found`);
|
||||
}
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.imageData = null;
|
||||
this.wasm = null;
|
||||
this.memory = null;
|
||||
|
||||
// Event queue
|
||||
this.eventQueue = [];
|
||||
this.maxEvents = 256;
|
||||
|
||||
// Setup event listeners
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Load and initialize the WASM module
|
||||
*/
|
||||
async load(wasmPath) {
|
||||
const importObject = {
|
||||
env: {
|
||||
js_canvas_init: (width, height) => this.canvasInit(width, height),
|
||||
js_canvas_present: (pixelsPtr, width, height) => this.canvasPresent(pixelsPtr, width, height),
|
||||
js_get_canvas_width: () => this.canvas.width,
|
||||
js_get_canvas_height: () => this.canvas.height,
|
||||
js_console_log: (ptr, len) => this.consoleLog(ptr, len),
|
||||
js_get_time_ms: () => BigInt(performance.now() | 0),
|
||||
js_poll_event: (bufferPtr) => this.pollEvent(bufferPtr),
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(wasmPath);
|
||||
const bytes = await response.arrayBuffer();
|
||||
const result = await WebAssembly.instantiate(bytes, importObject);
|
||||
|
||||
this.wasm = result.instance;
|
||||
this.memory = this.wasm.exports.memory;
|
||||
|
||||
return this.wasm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize canvas
|
||||
*/
|
||||
canvasInit(width, height) {
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
this.imageData = this.ctx.createImageData(width, height);
|
||||
console.log(`zcatgui: Canvas initialized ${width}x${height}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Present framebuffer to canvas
|
||||
*/
|
||||
canvasPresent(pixelsPtr, width, height) {
|
||||
if (!this.imageData || this.imageData.width !== width || this.imageData.height !== height) {
|
||||
this.imageData = this.ctx.createImageData(width, height);
|
||||
}
|
||||
|
||||
// Copy RGBA pixels from WASM memory to ImageData
|
||||
// Pixels are stored as u32 (RGBA packed), need to read as Uint32Array then convert
|
||||
const pixels32 = new Uint32Array(this.memory.buffer, pixelsPtr, width * height);
|
||||
const pixels8 = this.imageData.data;
|
||||
|
||||
// Convert from RGBA u32 to separate R, G, B, A bytes
|
||||
for (let i = 0; i < pixels32.length; i++) {
|
||||
const pixel = pixels32[i];
|
||||
const offset = i * 4;
|
||||
// RGBA format (assuming little-endian)
|
||||
pixels8[offset + 0] = pixel & 0xFF; // R
|
||||
pixels8[offset + 1] = (pixel >> 8) & 0xFF; // G
|
||||
pixels8[offset + 2] = (pixel >> 16) & 0xFF; // B
|
||||
pixels8[offset + 3] = (pixel >> 24) & 0xFF; // A
|
||||
}
|
||||
|
||||
this.ctx.putImageData(this.imageData, 0, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Log to console from WASM
|
||||
*/
|
||||
consoleLog(ptr, len) {
|
||||
const bytes = new Uint8Array(this.memory.buffer, ptr, len);
|
||||
const text = new TextDecoder().decode(bytes);
|
||||
console.log(`[zcatgui] ${text}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Poll event from queue
|
||||
* Returns event type and writes data to buffer
|
||||
*/
|
||||
pollEvent(bufferPtr) {
|
||||
if (this.eventQueue.length === 0) {
|
||||
return 0; // No event
|
||||
}
|
||||
|
||||
const event = this.eventQueue.shift();
|
||||
const buffer = new Uint8Array(this.memory.buffer, bufferPtr, 64);
|
||||
|
||||
switch (event.type) {
|
||||
case 'keydown':
|
||||
buffer[0] = event.keyCode;
|
||||
buffer[1] = this.getModifiers(event);
|
||||
return 1;
|
||||
|
||||
case 'keyup':
|
||||
buffer[0] = event.keyCode;
|
||||
buffer[1] = this.getModifiers(event);
|
||||
return 2;
|
||||
|
||||
case 'mousemove':
|
||||
this.writeI32(buffer, 0, event.x);
|
||||
this.writeI32(buffer, 4, event.y);
|
||||
return 3;
|
||||
|
||||
case 'mousedown':
|
||||
this.writeI32(buffer, 0, event.x);
|
||||
this.writeI32(buffer, 4, event.y);
|
||||
buffer[8] = event.button;
|
||||
return 4;
|
||||
|
||||
case 'mouseup':
|
||||
this.writeI32(buffer, 0, event.x);
|
||||
this.writeI32(buffer, 4, event.y);
|
||||
buffer[8] = event.button;
|
||||
return 5;
|
||||
|
||||
case 'wheel':
|
||||
this.writeI32(buffer, 0, event.x);
|
||||
this.writeI32(buffer, 4, event.y);
|
||||
this.writeI32(buffer, 8, event.deltaX);
|
||||
this.writeI32(buffer, 12, event.deltaY);
|
||||
return 6;
|
||||
|
||||
case 'resize':
|
||||
this.writeU32(buffer, 0, event.width);
|
||||
this.writeU32(buffer, 4, event.height);
|
||||
return 7;
|
||||
|
||||
case 'quit':
|
||||
return 8;
|
||||
|
||||
case 'textinput':
|
||||
const encoded = new TextEncoder().encode(event.text);
|
||||
buffer[0] = Math.min(encoded.length, 31);
|
||||
buffer.set(encoded.slice(0, 31), 1);
|
||||
return 9;
|
||||
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup DOM event listeners
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Keyboard events
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (this.shouldCaptureKey(e)) {
|
||||
e.preventDefault();
|
||||
this.queueEvent({
|
||||
type: 'keydown',
|
||||
keyCode: e.keyCode,
|
||||
ctrlKey: e.ctrlKey,
|
||||
shiftKey: e.shiftKey,
|
||||
altKey: e.altKey,
|
||||
});
|
||||
|
||||
// Also queue text input for printable characters
|
||||
if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
|
||||
this.queueEvent({
|
||||
type: 'textinput',
|
||||
text: e.key,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (this.shouldCaptureKey(e)) {
|
||||
e.preventDefault();
|
||||
this.queueEvent({
|
||||
type: 'keyup',
|
||||
keyCode: e.keyCode,
|
||||
ctrlKey: e.ctrlKey,
|
||||
shiftKey: e.shiftKey,
|
||||
altKey: e.altKey,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse events
|
||||
this.canvas.addEventListener('mousemove', (e) => {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.queueEvent({
|
||||
type: 'mousemove',
|
||||
x: Math.floor(e.clientX - rect.left),
|
||||
y: Math.floor(e.clientY - rect.top),
|
||||
});
|
||||
});
|
||||
|
||||
this.canvas.addEventListener('mousedown', (e) => {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.queueEvent({
|
||||
type: 'mousedown',
|
||||
x: Math.floor(e.clientX - rect.left),
|
||||
y: Math.floor(e.clientY - rect.top),
|
||||
button: e.button,
|
||||
});
|
||||
});
|
||||
|
||||
this.canvas.addEventListener('mouseup', (e) => {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.queueEvent({
|
||||
type: 'mouseup',
|
||||
x: Math.floor(e.clientX - rect.left),
|
||||
y: Math.floor(e.clientY - rect.top),
|
||||
button: e.button,
|
||||
});
|
||||
});
|
||||
|
||||
this.canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.queueEvent({
|
||||
type: 'wheel',
|
||||
x: Math.floor(e.clientX - rect.left),
|
||||
y: Math.floor(e.clientY - rect.top),
|
||||
deltaX: Math.sign(e.deltaX) * 3,
|
||||
deltaY: Math.sign(e.deltaY) * 3,
|
||||
});
|
||||
}, { passive: false });
|
||||
|
||||
// Resize observer
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.target === this.canvas) {
|
||||
this.queueEvent({
|
||||
type: 'resize',
|
||||
width: entry.contentRect.width,
|
||||
height: entry.contentRect.height,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.canvas);
|
||||
|
||||
// Prevent context menu
|
||||
this.canvas.addEventListener('contextmenu', (e) => e.preventDefault());
|
||||
|
||||
// Focus canvas for keyboard input
|
||||
this.canvas.tabIndex = 0;
|
||||
this.canvas.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if we should capture this key event
|
||||
*/
|
||||
shouldCaptureKey(e) {
|
||||
// Always capture when canvas is focused
|
||||
if (document.activeElement === this.canvas) {
|
||||
return true;
|
||||
}
|
||||
// Capture arrow keys, space, etc. even if not focused
|
||||
const captureKeys = [37, 38, 39, 40, 32, 9, 27]; // arrows, space, tab, escape
|
||||
return captureKeys.includes(e.keyCode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get modifier flags
|
||||
*/
|
||||
getModifiers(e) {
|
||||
let mods = 0;
|
||||
if (e.ctrlKey) mods |= 1;
|
||||
if (e.shiftKey) mods |= 2;
|
||||
if (e.altKey) mods |= 4;
|
||||
return mods;
|
||||
}
|
||||
|
||||
/**
|
||||
* Queue an event
|
||||
*/
|
||||
queueEvent(event) {
|
||||
if (this.eventQueue.length < this.maxEvents) {
|
||||
this.eventQueue.push(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Write i32 to buffer (little-endian)
|
||||
*/
|
||||
writeI32(buffer, offset, value) {
|
||||
const view = new DataView(buffer.buffer, buffer.byteOffset + offset, 4);
|
||||
view.setInt32(0, value, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Write u32 to buffer (little-endian)
|
||||
*/
|
||||
writeU32(buffer, offset, value) {
|
||||
const view = new DataView(buffer.buffer, buffer.byteOffset + offset, 4);
|
||||
view.setUint32(0, value, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = { ZcatguiRuntime };
|
||||
} else {
|
||||
window.ZcatguiRuntime = ZcatguiRuntime;
|
||||
}
|
||||
Loading…
Reference in a new issue