mirror of
https://github.com/ocornut/imgui.git
synced 2026-11-07 15:05:47 +01:00
5e11619353
Add a fully self-contained Pixel 8 Pro phone simulator that showcases Pixel OS capabilities in any browser. Includes: - Working menu bar (File, View, Tools, Help) with keyboard shortcuts - Lock screen with live clock, notifications, fingerprint/swipe unlock - Home screen with Material You design, Google search, weather widget - 7 functional apps: Phone, Messages, Camera, Settings, Clock, Photos, Browser - Quick Settings panel with 8 toggle tiles + brightness slider - Recents app switcher - Dark mode toggle and 6-theme color switcher - Mouse + touch gesture support (swipe up for home, swipe down for QS) - Bottom status bar showing demo state All functions work — every menu item, button, toggle, and gesture is wired to a real handler. No build step, no dependencies. Part of imgui_xl examples.
68 lines
2.2 KiB
Markdown
68 lines
2.2 KiB
Markdown
# Example: Emscripten Pixel OS Demo
|
|
|
|
Interactive **Pixel phone simulator** showcasing Pixel OS capabilities, built as a self-contained HTML demo.
|
|
|
|
## What It Is
|
|
|
|
A working model of a Pixel 8 Pro phone that runs in any browser. It demonstrates:
|
|
|
|
- **Lock screen** with live clock, notifications, fingerprint/swipe unlock
|
|
- **Home screen** with Material You design, Google search bar, weather widget, app grid
|
|
- **7 functional apps**: Phone (keypad), Messages (chat with auto-replies), Settings (toggles), Camera (shutter flash), Photos (gallery), Clock (world clock, alarms, stopwatch), Browser (Chrome mockup)
|
|
- **Quick Settings** panel with 8 toggle tiles and brightness slider
|
|
- **Recents** app switcher
|
|
- **Dark mode** toggle
|
|
- **Theme switcher** with 6 color themes
|
|
- **Menu bar** integration (File, View, Tools, Help) with keyboard shortcuts
|
|
|
|
## Running
|
|
|
|
### Option 1: Open Directly
|
|
```bash
|
|
# Just open the HTML file in any browser
|
|
open pixel_os_demo.html # macOS
|
|
xdg-open pixel_os_demo.html # Linux
|
|
start pixel_os_demo.html # Windows
|
|
```
|
|
|
|
### Option 2: Local Server
|
|
```bash
|
|
python -m http.server 8765
|
|
# Open http://localhost:8765/pixel_os_demo.html
|
|
```
|
|
|
|
### Option 3: GitHub Pages
|
|
Visit the [imgui_xl GitHub Pages](https://turtle-pb.github.io/imgui_xl/examples/example_emscripten_pixel/pixel_os_demo.html) to see it live.
|
|
|
|
## Keyboard Shortcuts
|
|
|
|
| Shortcut | Action |
|
|
|----------|--------|
|
|
| `Ctrl+P` | Open Phone |
|
|
| `Ctrl+M` | Open Messages |
|
|
| `Ctrl+B` | Open Browser |
|
|
| `Ctrl+,` | Open Settings |
|
|
| `Ctrl+L` | Lock Phone |
|
|
| `Ctrl+R` | Reload Demo |
|
|
| `Ctrl+Q` | Quick Settings |
|
|
| `Ctrl+D` | Toggle Dark Mode |
|
|
| `Ctrl+T` | Cycle Theme |
|
|
| `Ctrl+Tab` | Recents |
|
|
| `Home` / `Esc` | Go Home |
|
|
| `F1` | Quick Guide |
|
|
|
|
## Integration with imgui_xl
|
|
|
|
This demo serves as a reference for web-based UI patterns that complement Dear ImGui's native C++ rendering:
|
|
|
|
- **Self-contained**: No build step, no dependencies, no server required
|
|
- **Cross-platform**: Works on any modern browser (desktop, mobile, tablet)
|
|
- **Interactive**: All buttons, toggles, and gestures are functional
|
|
- **Extensible**: Add new apps by extending the `views` pattern
|
|
|
|
## License
|
|
|
|
MIT License — (c) 2024 Paul Adcock / OwlLogics
|
|
|
|
Part of [imgui_xl](https://github.com/Turtle-PB/imgui_xl).
|