Skip to content

Commit 8392e7d

Browse files
jinzhongjiajinzhongjia
committed
feat(examples): add window management demo
- introduce a comprehensive window management example with Zig and HTML - demonstrate window controls, kiosk mode, multi-window handling, and browser info - implement Zig bindings for window operations and client communication - add interactive UI with real-time info and user feedback - fix minor indentation in webui.zig for consistency
1 parent 4f76898 commit 8392e7d

File tree

3 files changed

+400
-2
lines changed

3 files changed

+400
-2
lines changed

‎examples/window_management/index.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<script src="/webui.js"></script>
6+
<title>Window Management Example</title>
7+
<style>
8+
body {
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
color: white;
12+
margin: 0;
13+
padding: 20px;
14+
min-height: 100vh;
15+
}
16+
.container {
17+
max-width: 800px;
18+
margin: 0 auto;
19+
text-align: center;
20+
}
21+
h1 {
22+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
23+
margin-bottom: 30px;
24+
}
25+
.section {
26+
background: rgba(255,255,255,0.1);
27+
border-radius: 10px;
28+
padding: 20px;
29+
margin: 20px 0;
30+
backdrop-filter: blur(10px);
31+
}
32+
button {
33+
background: linear-gradient(45deg, #ff6b6b, #ee5a52);
34+
color: white;
35+
border: none;
36+
padding: 12px 24px;
37+
margin: 8px;
38+
border-radius: 25px;
39+
cursor: pointer;
40+
font-size: 14px;
41+
font-weight: bold;
42+
transition: all 0.3s ease;
43+
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
44+
}
45+
button:hover {
46+
background: linear-gradient(45deg, #ee5a52, #ff6b6b);
47+
transform: translateY(-2px);
48+
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
49+
}
50+
.size-controls {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
gap: 10px;
55+
flex-wrap: wrap;
56+
}
57+
input[type="number"] {
58+
padding: 8px;
59+
border: none;
60+
border-radius: 5px;
61+
width: 80px;
62+
text-align: center;
63+
}
64+
#info-display {
65+
background: rgba(0,0,0,0.2);
66+
padding: 15px;
67+
border-radius: 8px;
68+
margin-top: 10px;
69+
font-family: monospace;
70+
word-break: break-all;
71+
}
72+
kbd {
73+
background: rgba(255,255,255,0.2);
74+
padding: 2px 6px;
75+
border-radius: 3px;
76+
font-family: monospace;
77+
border: 1px solid rgba(255,255,255,0.3);
78+
}
79+
ul {
80+
margin: 10px 0;
81+
padding-left: 20px;
82+
}
83+
li {
84+
margin: 5px 0;
85+
}
86+
</style>
87+
</head>
88+
<body>
89+
<div class="container">
90+
<h1>🖼️ Window Management Example</h1>
91+
92+
<div class="section">
93+
<h3>Basic Window Controls</h3>
94+
<button onclick="center_window().then(r => showResult(r))">🎯 Center</button>
95+
<button onclick="close_window()">❌ Close</button>
96+
</div>
97+
98+
<div class="section">
99+
<h3>Window Modes</h3>
100+
<button onclick="toggle_kiosk().then(r => showResult(r))">🔄 Toggle Kiosk Mode</button>
101+
</div>
102+
103+
<div class="section">
104+
<h3>Browser Features</h3>
105+
<button onclick="show_browser_info().then(r => showResult(r))">🌐 Update Browser Info</button>
106+
</div>
107+
108+
<div class="section">
109+
<h3>Window Size Control</h3>
110+
<div class="size-controls">
111+
<label>Width:</label>
112+
<input type="number" id="width" value="800" min="300" max="1920">
113+
<label>Height:</label>
114+
<input type="number" id="height" value="600" min="200" max="1080">
115+
<button onclick="setSize()">📏 Set Size</button>
116+
</div>
117+
</div>
118+
119+
<div class="section">
120+
<h3>Multiple Windows</h3>
121+
<button onclick="open_second_window().then(r => showResult(r))">🪟 Open Second Window</button>
122+
</div>
123+
124+
<div class="section">
125+
<h3>Window Information</h3>
126+
<button onclick="getInfo()">ℹ️ Get Window Info</button>
127+
<div id="info-display">Click "Get Window Info" to see details</div>
128+
</div>
129+
130+
<div class="section">
131+
<h3>Result Display</h3>
132+
<div id="result-display" style="background: rgba(0,255,0,0.1); padding: 10px; border-radius: 5px;">
133+
Ready...
134+
</div>
135+
</div>
136+
137+
<div class="section">
138+
<h3>💡 Browser Mode Tips</h3>
139+
<div style="text-align: left; font-size: 0.9em;">
140+
<p><strong>Keyboard Shortcuts:</strong></p>
141+
<ul>
142+
<li><kbd>F11</kbd> - Toggle fullscreen</li>
143+
<li><kbd>Ctrl + Shift + I</kbd> - Developer tools</li>
144+
<li><kbd>Ctrl + R</kbd> - Refresh page</li>
145+
<li><kbd>Alt + F4</kbd> - Close window (Windows)</li>
146+
<li><kbd>Cmd + W</kbd> - Close window (macOS)</li>
147+
<li><kbd>Esc</kbd> - Exit fullscreen/kiosk mode</li>
148+
</ul>
149+
<p><strong>Features:</strong></p>
150+
<ul>
151+
<li><strong>Kiosk Mode:</strong> WebUI native kiosk mode</li>
152+
<li><strong>Fullscreen:</strong> Standard fullscreen toggle</li>
153+
<li><strong>Window Info:</strong> Real-time browser and window details</li>
154+
</ul>
155+
<p><strong>Note:</strong> All features use WebUI native APIs.</p>
156+
</div>
157+
</div>
158+
</div>
159+
160+
<script>
161+
function setSize() {
162+
const width = parseInt(document.getElementById('width').value);
163+
const height = parseInt(document.getElementById('height').value);
164+
165+
if (width < 300 || height < 200) {
166+
showResult('Size too small! Minimum: 300x200');
167+
return;
168+
}
169+
170+
set_window_size(width, height).then(response => {
171+
showResult(response);
172+
});
173+
}
174+
175+
function getInfo() {
176+
get_window_info().then(info => {
177+
document.getElementById('info-display').innerHTML = info;
178+
});
179+
}
180+
181+
function showResult(message) {
182+
const display = document.getElementById('result-display');
183+
display.innerHTML = message;
184+
display.style.background = 'rgba(0,255,0,0.2)';
185+
186+
setTimeout(() => {
187+
display.style.background = 'rgba(0,255,0,0.1)';
188+
}, 2000);
189+
}
190+
191+
// Auto-refresh window info every 5 seconds
192+
setInterval(() => {
193+
get_window_info().then(info => {
194+
const display = document.getElementById('info-display');
195+
if (display.innerHTML !== 'Click "Get Window Info" to see details') {
196+
display.innerHTML = info;
197+
}
198+
});
199+
}, 5000);
200+
</script>
201+
</body>
202+
</html>

0 commit comments

Comments
 (0)