Skip to content

Commit a55153c

Browse files
jinzhongjiajinzhongjia
authored
feat(examples): add advanced window, browser profiles, error handling… (#110)
* feat(examples): add advanced window, browser profiles, error handling, and secure communication demos - introduce advanced_window example with window controls and info - add browser_profiles example for managing browser profiles and info - provide error_handling example demonstrating error reporting and recovery - add secure_communication example for encoding, binary transfer, and memory management - update win32GetHwnd for improved pointer handling on Windows * fix(examples): improve ArrayList compatibility for Zig 0.16+ - add version checks to support managed and unmanaged ArrayList initialization - update user append logic to handle allocator parameter for Zig 0.16+ - ensure event handling example works across Zig 0.14, 0.15, and 0.16+ * chore(ci): add Zig 0.15.1 to workflow matrix - update CI configuration to test against Zig 0.15.1 - ensure compatibility across multiple Zig versions * fix(event_handling): improve Zig version compatibility checks - update ArrayList compatibility logic to support Zig 0.15+ - adjust version checks from 0.16 to 0.15 for managed/unmanaged ArrayList - update webui dependency to latest commit in build.zig.zon * fix(examples): improve advanced window controls and icon handling - update window icon to use raw SVG string instead of base64 - refine window hide/show logic to use minimize/maximize for better UX - replace window.destroy with window.close for proper resource management - add missing charset meta tag and webui.js script to HTML * fix(examples): add missing webui.js script to browser_profiles - include webui.js in index.html to enable proper functionality - ensure browser_profiles example loads required scripts * fix(examples): remove error handling and secure communication demos - delete error_handling and secure_communication example directories - remove related Zig and HTML files for both demos * fix(examples): remove browser profiles demo - delete browser_profiles example including HTML and Zig files - remove profile management and browser detection sample code
1 parent 4a5a476 commit a55153c

File tree

6 files changed

+454
-9
lines changed

6 files changed

+454
-9
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jobs:
1919
strategy:
2020
matrix:
2121
os: [ubuntu-latest, macos-latest, windows-latest]
22-
version: [0.14.0, ""]
22+
version: [0.14.0, 0.15.1, ""]
2323
fail-fast: false
2424
runs-on: ${{ matrix.os }}
2525
steps:

‎build.zig.zon‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
.minimum_zig_version = "0.14.0",
66
.dependencies = .{
77
.webui = .{
8-
.hash = "webui-2.5.0-beta.4-pxqD5UtONwCfX1N9d0zUHHT3igVMHYd6KnI87tg0vyA7",
9-
.url = "https://github.com/webui-dev/webui/archive/897a4406e5e6bdff135a48848343b3b0b983fa75.tar.gz",
8+
.hash = "webui-2.5.0-beta.4-pxqD5ahSNwAE_vnS170oThHZ3blPcHQ85Ut2XHf65f1u",
9+
.url = "https://github.com/webui-dev/webui/archive/dcc776a0f6bdf244d0024042253ebd194271ac9b.tar.gz",
1010
},
1111
},
1212
.paths = .{

‎examples/advanced_window/index.html‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<script src="/webui.js"></script>
6+
<title>Advanced Window Controls</title>
7+
<style>
8+
:root {
9+
--primary-color: #5e35b1;
10+
--secondary-color: #7e57c2;
11+
--background: #f5f5f5;
12+
--text-color: #333;
13+
}
14+
15+
@media (prefers-contrast: high) {
16+
:root {
17+
--primary-color: #000;
18+
--secondary-color: #333;
19+
--background: #fff;
20+
--text-color: #000;
21+
}
22+
}
23+
24+
body {
25+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
26+
max-width: 1000px;
27+
margin: 0 auto;
28+
padding: 20px;
29+
background: var(--background);
30+
color: var(--text-color);
31+
}
32+
33+
h1 {
34+
color: var(--primary-color);
35+
text-align: center;
36+
font-size: 2.5em;
37+
margin-bottom: 30px;
38+
}
39+
40+
.control-panel {
41+
display: grid;
42+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
43+
gap: 20px;
44+
margin-bottom: 30px;
45+
}
46+
47+
.control-section {
48+
background: white;
49+
border-radius: 10px;
50+
padding: 20px;
51+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
52+
border: 2px solid transparent;
53+
transition: all 0.3s;
54+
}
55+
56+
.control-section:hover {
57+
border-color: var(--secondary-color);
58+
transform: translateY(-2px);
59+
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
60+
}
61+
62+
h2 {
63+
color: var(--secondary-color);
64+
margin-top: 0;
65+
font-size: 1.3em;
66+
}
67+
68+
button {
69+
background: var(--primary-color);
70+
color: white;
71+
border: none;
72+
padding: 10px 20px;
73+
border-radius: 5px;
74+
cursor: pointer;
75+
font-size: 14px;
76+
margin: 5px;
77+
transition: all 0.3s;
78+
}
79+
80+
button:hover {
81+
background: var(--secondary-color);
82+
transform: scale(1.05);
83+
}
84+
85+
button:active {
86+
transform: scale(0.95);
87+
}
88+
89+
input[type="number"], input[type="text"] {
90+
padding: 8px;
91+
border: 2px solid #ddd;
92+
border-radius: 5px;
93+
margin: 5px;
94+
width: 80px;
95+
transition: border-color 0.3s;
96+
}
97+
98+
input[type="text"] {
99+
width: 200px;
100+
}
101+
102+
input:focus {
103+
outline: none;
104+
border-color: var(--secondary-color);
105+
}
106+
107+
.output {
108+
background: #f0f0f0;
109+
padding: 15px;
110+
border-radius: 5px;
111+
margin-top: 10px;
112+
font-family: 'Courier New', monospace;
113+
white-space: pre-wrap;
114+
min-height: 50px;
115+
border-left: 4px solid var(--primary-color);
116+
}
117+
118+
.danger-zone {
119+
background: #ffebee;
120+
border: 2px solid #ef5350;
121+
}
122+
123+
.danger-zone button {
124+
background: #ef5350;
125+
}
126+
127+
.danger-zone button:hover {
128+
background: #c62828;
129+
}
130+
</style>
131+
</head>
132+
<body>
133+
<h1>🪟 Advanced Window Controls</h1>
134+
135+
<div class="control-panel">
136+
<div class="control-section">
137+
<h2>Window Position</h2>
138+
<button onclick="centerWindow()">Center Window</button>
139+
<br><br>
140+
<input type="number" id="moveX" placeholder="X" value="200">
141+
<input type="number" id="moveY" placeholder="Y" value="200">
142+
<button onclick="moveWindow()">Move Window</button>
143+
</div>
144+
145+
<div class="control-section">
146+
<h2>Window Size</h2>
147+
<input type="number" id="width" placeholder="Width" value="800">
148+
<input type="number" id="height" placeholder="Height" value="600">
149+
<button onclick="resizeWindow()">Resize Window</button>
150+
<p style="font-size: 12px; color: #666;">Min size: 640x480</p>
151+
</div>
152+
153+
<div class="control-section">
154+
<h2>Window Visibility</h2>
155+
<button onclick="toggleHide(true)">Hide Window</button>
156+
<button onclick="toggleHide(false)">Show Window</button>
157+
<p style="font-size: 12px; color: #666;">Note: Hide may not work after window is shown</p>
158+
</div>
159+
160+
<div class="control-section">
161+
<h2>MIME Type Detection</h2>
162+
<input type="text" id="filename" placeholder="Enter filename" value="test.html">
163+
<button onclick="getMimeType()">Get MIME Type</button>
164+
<div id="mimeOutput" class="output">Enter a filename to get its MIME type</div>
165+
</div>
166+
167+
<div class="control-section">
168+
<h2>Port Information</h2>
169+
<button onclick="getPortInfo()">Get Port Info</button>
170+
<div id="portOutput" class="output">Click to get port information</div>
171+
</div>
172+
173+
<div class="control-section">
174+
<h2>Process Information</h2>
175+
<button onclick="getProcessInfo()">Get Process Info</button>
176+
<div id="processOutput" class="output">Click to get process information</div>
177+
</div>
178+
179+
<div class="control-section danger-zone">
180+
<h2>⚠️ Danger Zone</h2>
181+
<button onclick="destroyWindow()">Destroy Window</button>
182+
<p style="font-size: 12px; color: #c62828;">This will close and destroy the window!</p>
183+
</div>
184+
</div>
185+
186+
<script>
187+
async function centerWindow() {
188+
const result = await center_window();
189+
showNotification(result);
190+
}
191+
192+
async function toggleHide(hide) {
193+
const result = await toggle_hide(hide);
194+
showNotification(result);
195+
}
196+
197+
async function resizeWindow() {
198+
const width = parseInt(document.getElementById('width').value);
199+
const height = parseInt(document.getElementById('height').value);
200+
const result = await resize_window(width, height);
201+
showNotification(result);
202+
}
203+
204+
async function moveWindow() {
205+
const x = parseInt(document.getElementById('moveX').value);
206+
const y = parseInt(document.getElementById('moveY').value);
207+
const result = await move_window(x, y);
208+
showNotification(result);
209+
}
210+
211+
async function getMimeType() {
212+
const filename = document.getElementById('filename').value;
213+
const mime = await get_mime(filename);
214+
document.getElementById('mimeOutput').textContent = `MIME type for ${filename}: ${mime}`;
215+
}
216+
217+
async function getPortInfo() {
218+
const info = await get_port();
219+
document.getElementById('portOutput').textContent = info;
220+
}
221+
222+
async function getProcessInfo() {
223+
const info = await get_process();
224+
document.getElementById('processOutput').textContent = info;
225+
}
226+
227+
async function destroyWindow() {
228+
if (confirm('Are you sure you want to destroy this window?')) {
229+
await destroy_window();
230+
}
231+
}
232+
233+
function showNotification(message) {
234+
const notification = document.createElement('div');
235+
notification.style.cssText = `
236+
position: fixed;
237+
top: 20px;
238+
right: 20px;
239+
background: var(--primary-color);
240+
color: white;
241+
padding: 15px 20px;
242+
border-radius: 5px;
243+
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
244+
animation: slideIn 0.3s ease;
245+
z-index: 1000;
246+
`;
247+
notification.textContent = message;
248+
document.body.appendChild(notification);
249+
250+
setTimeout(() => {
251+
notification.style.animation = 'slideOut 0.3s ease';
252+
setTimeout(() => notification.remove(), 300);
253+
}, 2000);
254+
}
255+
256+
// Add animations
257+
const style = document.createElement('style');
258+
style.textContent = `
259+
@keyframes slideIn {
260+
from { transform: translateX(100%); opacity: 0; }
261+
to { transform: translateX(0); opacity: 1; }
262+
}
263+
@keyframes slideOut {
264+
from { transform: translateX(0); opacity: 1; }
265+
to { transform: translateX(100%); opacity: 0; }
266+
}
267+
`;
268+
document.head.appendChild(style);
269+
</script>
270+
</body>
271+
</html>

0 commit comments

Comments
 (0)