diff --git a/README.md b/README.md index 3f536612d..97844f6dc 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,17 @@ make See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on submitting issues, PRs, and syncing with upstream. +## Web Demo: Pixel OS Model + +This fork includes an interactive **Pixel OS Model Demo** — a working Pixel 8 Pro phone simulator that showcases Pixel OS capabilities in any browser: + +- Lock screen, home screen, 7 functional apps (Phone, Messages, Camera, Settings, Clock, Photos, Browser) +- Quick Settings, Recents, Dark Mode, Theme switcher +- Full menu bar with keyboard shortcuts +- 100% self-contained HTML — no build step, no dependencies + +**Run it:** Open [`examples/example_emscripten_pixel/pixel_os_demo.html`](examples/example_emscripten_pixel/pixel_os_demo.html) in any browser, or visit the [live demo on GitHub Pages](https://turtle-pb.github.io/imgui_xl/examples/example_emscripten_pixel/pixel_os_demo.html). + ## Upstream Resources - **Dear ImGui Homepage**: [github.com/ocornut/imgui](https://github.com/ocornut/imgui) diff --git a/examples/example_emscripten_pixel/README.md b/examples/example_emscripten_pixel/README.md new file mode 100644 index 000000000..56134957c --- /dev/null +++ b/examples/example_emscripten_pixel/README.md @@ -0,0 +1,67 @@ +# 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). diff --git a/examples/example_emscripten_pixel/pixel_os_demo.html b/examples/example_emscripten_pixel/pixel_os_demo.html new file mode 100644 index 000000000..9b5411054 --- /dev/null +++ b/examples/example_emscripten_pixel/pixel_os_demo.html @@ -0,0 +1,961 @@ + + + + + + + + Pixel OS Model Demo — imgui_xl + + + + + + + + + +
+
+
+
+
+
+
+ +
+
+ + +
+
--:--
+
---
+
+
+
📧
+
Gmail
3 new messages
+
+
+
💬
+
Messages
Sarah: Hey! Are we still on?
+
+
+
☁️
+
Weather
Storm warning: Heavy rain at 3pm
+
+
+
Swipe up to unlock
+
+
+ + +
+
+
--:--
+
+ + 📶 + 📡 + 🔋 + 87% + +
+
+ + + +
+
+
72°
+
Phoenix, AZ
+
+
⛅
+
+ +
+
📞
Phone
+
💬
Messages
+
📷
Camera
+
🖼️
Photos
+
⚙️
Settings
+
🕐
Clock
+
🌐
Chrome
+
🌙
Dark Mode
+
🔲
Recents
+
⚡
Quick Set
+
🎨
Theme
+
📋
Widgets
+
+ +
+
📞
+
💬
+
🌐
+
📷
+
+
+ + +
+
+
←
Settings +
+
+ +
+
📶
Wi-Fi
OwlLogics_5G
+
📡
Bluetooth
Connected: Pixel Buds Pro
+
📍
Location
On - High accuracy
+
+
+
🌙
Dark Theme
Off
+
🎨
Wallpaper & Style
Material You - Dynamic
+
🔒
Security
Face unlock, Fingerprint
+
+
+
📱
About Phone
Pixel 8 Pro - Android 15
+
🔄
System Update
Up to date
+
🔋
Battery
87% - 14h remaining
+
+
+
🔔
Notifications
All apps
+
🔊
Sound & Vibration
Volume: 70%
+
♿
Accessibility
TalkBack, Magnification
+
+
Pixel OS Model Demo | (c) 2024 OwlLogics / Paul Adcock
Part of imgui_xl — MIT License
+
+
+ + +
+
+
←
Messages +
+
+
SC
Sarah Chen
Hey! Are we still on for tonight?
2:15 PM
+
M
Mom
Call me when you get a chance ❤️
12:30 PM
+
N
Noah
Can we play Roblox later?
11:45 AM
+
W
Work Group
Mike: Sprint review at 3pm
10:00 AM
+
A
Amazon
Your package arrives today by 8pm
9:00 AM
+
+
+
+
←
+
+ +
+
+
+ + +
+
+
+ + +
+
+
←
Phone +
+
+
+
+ + + + + + + + + + + + +
+ + +
+
+ + +
+
+
📷 Live View
+
+ + + +
+
+
Night
+
Photo
+
Portrait
+
Video
+
Pano
+
+
+ + + +
+
+
+
+ + +
+
+
←
Photos +
+
+
Today
+
+
🌅
+
🌳
+
🌊
+
🌇
+
🎆
+
❄️
+
+
Yesterday
+
+
⛰️
+
🌿
+
🔥
+
+
+
+ + +
+
+
←
Clock +
+
+
World
+
Alarm
+
Stopwatch
+
+
+
+ + +
+
+
←
Chrome +
+
🔒 google.com
+
+

🔍 Google Search

The world's information at your fingertips.

Search
I'm Feeling Lucky
+

📰 Top Stories

Android 15 brings new AI features, privacy controls, and Material You enhancements.

+

🌟 Discover

Pixel 8 Pro voted best smartphone of 2024 by The Verge.

+

🎵 Trending

New music releases this week - check out the charts.

+
+
+ + +
+
+
+
📶
Wi-Fi
+
📡
Bluetooth
+
🔕
DND
+
🔦
Flash
+
🌙
Dark
+
✈️
Airplane
+
📍
Location
+
📶
Hotspot
+
+
+
☀️ Brightness: 80%
+
⚙️
+
+
+
+
+ + +
+
Recent apps
+
+
🌐
Chrome
+
💬
Messages
+
⚙️
Settings
+
+ +
+ + + + + +
+ +
+
+
+
+ + +
+
Demo Running
+
📱 Pixel 8 Pro Sim
+
🦉 imgui_xl
+
--:--:--
+
+ + + + \ No newline at end of file