mirror of https://github.com/ocornut/imgui.git synced 2026-11-06 22:45:48 +01:00

Turtle Dove 5e11619353 feat: add Pixel OS Model Demo — interactive phone simulator

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.

2026-07-13 13:39:43 -05:00

2.2 KiB

Raw Blame History

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

# 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

python -m http.server 8765
# Open http://localhost:8765/pixel_os_demo.html

Option 3: GitHub Pages

Visit the imgui_xl GitHub Pages 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

Part of imgui_xl.

2.2 KiB Raw Blame History