Skip to content

Commit 479e766

Browse files
L-jasmineL-jasmine
committed
Optimize setup html
1 parent 280bc05 commit 479e766

File tree

2 files changed

+125
-35
lines changed

2 files changed

+125
-35
lines changed

‎setup/index.html‎

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,14 @@ <h2 class="card-title text-2xl">Setup EchoKit via Bluetooth</h2>
2525
Connect to EchoKit
2626
</button>
2727

28-
<div id="controlPanel" class="hidden space-y-4">
28+
<div id="controlPanel" class="space-y-4">
2929
<div class="flex gap-2">
3030
<button class="btn btn-outline flex-1" id="loadAllButton">
3131
🔄 Load Configuration
3232
</button>
3333
<button class="btn btn-primary flex-1" id="saveAllButton" disabled>
3434
💾 Save Changes
3535
</button>
36-
<button class="btn btn-warning" id="resetButton">
37-
🔄 Reset
38-
</button>
3936
</div>
4037

4138
<div class="card bg-base-100 border border-base-300">
@@ -113,6 +110,19 @@ <h3 class="card-title text-lg">Background Image</h3>
113110
</div>
114111
</div>
115112

113+
<!-- Reset not supported modal dialog -->
114+
<dialog id="resetNotSupportedModal" class="modal">
115+
<div class="modal-box">
116+
<h3 class="font-bold text-lg">⚠️ Device Reset Required</h3>
117+
<p class="py-4">Device does not support this operation, please reset by pressing k0 on the device</p>
118+
<div class="modal-action">
119+
<form method="dialog">
120+
<button class="btn btn-primary">OK</button>
121+
</form>
122+
</div>
123+
</div>
124+
</dialog>
125+
116126
<script>
117127
// UUIDs
118128
const SERVICE_ID = "623fa3e2-631b-4f8f-a6e7-a7b09c03e7e0";
@@ -137,7 +147,6 @@ <h3 class="card-title text-lg">Background Image</h3>
137147
const connectionStatus = document.getElementById('connectionStatus');
138148
const loadAllButton = document.getElementById('loadAllButton');
139149
const saveAllButton = document.getElementById('saveAllButton');
140-
const resetButton = document.getElementById('resetButton');
141150
const ssidInput = document.getElementById('ssidInput');
142151
const passInput = document.getElementById('passInput');
143152
const serverUrlInput = document.getElementById('serverUrlInput');
@@ -151,6 +160,7 @@ <h3 class="card-title text-lg">Background Image</h3>
151160
const clearBgButton = document.getElementById('clearBgButton');
152161
const notificationToast = document.getElementById('notificationToast');
153162
const toastMessage = document.getElementById('toastMessage');
163+
const resetNotSupportedModal = document.getElementById('resetNotSupportedModal');
154164

155165
// Track modified fields
156166
const modifiedFields = {
@@ -264,10 +274,9 @@ <h3 class="card-title text-lg">Background Image</h3>
264274
// Update UI
265275
isConnected = true;
266276
updateConnectionStatus();
267-
268-
// display the main UI
269-
controlPanel.classList.remove('hidden');
270277
connectButton.textContent = 'Disconnect';
278+
connectButton.classList.remove('btn-primary');
279+
connectButton.classList.add('btn-error');
271280

272281
// Process the disconnect event
273282
device.addEventListener('gattserverdisconnected', handleDisconnection);
@@ -299,8 +308,9 @@ <h3 class="card-title text-lg">Background Image</h3>
299308
function handleDisconnection() {
300309
isConnected = false;
301310
updateConnectionStatus();
302-
controlPanel.classList.add('hidden');
303311
connectButton.textContent = 'Connect to EchoKit';
312+
connectButton.classList.remove('btn-error');
313+
connectButton.classList.add('btn-primary');
304314
device = null;
305315
server = null;
306316
service = null;
@@ -313,13 +323,39 @@ <h3 class="card-title text-lg">Background Image</h3>
313323
statusIndicator.classList.remove('badge-error');
314324
statusIndicator.classList.add('badge-success');
315325
connectionStatus.textContent = 'Connected';
326+
enableControls();
316327
} else {
317328
statusIndicator.classList.remove('badge-success');
318329
statusIndicator.classList.add('badge-error');
319330
connectionStatus.textContent = 'Disconnected';
331+
disableControls();
320332
}
321333
}
322334

335+
// Enable all controls
336+
function enableControls() {
337+
loadAllButton.disabled = false;
338+
ssidInput.disabled = false;
339+
passInput.disabled = false;
340+
serverUrlInput.disabled = false;
341+
backgroundImage.disabled = false;
342+
clearBgButton.disabled = false;
343+
controlPanel.classList.remove('opacity-50', 'pointer-events-none');
344+
}
345+
346+
// Disable all controls
347+
function disableControls() {
348+
loadAllButton.disabled = true;
349+
saveAllButton.disabled = true;
350+
ssidInput.disabled = true;
351+
passInput.disabled = true;
352+
serverUrlInput.disabled = true;
353+
backgroundImage.disabled = true;
354+
writeBgButton.disabled = true;
355+
clearBgButton.disabled = true;
356+
controlPanel.classList.add('opacity-50', 'pointer-events-none');
357+
}
358+
323359
// Reads Characteristic
324360
async function readCharacteristic(characteristicId, inputElement) {
325361
if (!isConnected || !service) {
@@ -405,6 +441,19 @@ <h3 class="card-title text-lg">Background Image</h3>
405441
}
406442

407443
showNotification('Success', `Saved ${savedCount} changes`);
444+
445+
// Try to reset device after saving
446+
try {
447+
saveAllButton.textContent = 'Resetting...';
448+
const characteristic = await service.getCharacteristic(RESET_ID);
449+
const encoder = new TextEncoder();
450+
const data = encoder.encode('RESET');
451+
await characteristic.writeValue(data);
452+
showNotification('Success', 'Device reset command sent');
453+
} catch (resetError) {
454+
console.error('Reset failed:', resetError);
455+
resetNotSupportedModal.showModal();
456+
}
408457
} catch (error) {
409458
console.error('Save modifications failed:', error);
410459
showNotification('Error', 'Save modifications failed', true);
@@ -432,7 +481,7 @@ <h3 class="card-title text-lg">Background Image</h3>
432481
showNotification('Success', 'Device reset command sent');
433482
} catch (error) {
434483
console.error('Reset failed:', error);
435-
showNotification('Error', 'Device does not support this operation, please reset by pressing k0 on the device', true);
484+
resetNotSupportedModal.showModal();
436485
} finally {
437486
resetButton.disabled = false;
438487
resetButton.textContent = '🔄 Reset';
@@ -539,10 +588,6 @@ <h3 class="card-title text-lg">Background Image</h3>
539588
saveAllModifications();
540589
});
541590

542-
resetButton.addEventListener('click', () => {
543-
resetDevice();
544-
});
545-
546591
// Listen for input changes
547592
ssidInput.addEventListener('input', () => {
548593
markFieldAsModified('ssid', ssidTitle);
@@ -569,7 +614,10 @@ <h3 class="card-title text-lg">Background Image</h3>
569614
showNotification('Error', 'Your browser does not support the Web Bluetooth API. Please use Chrome or Edge', true);
570615
connectButton.disabled = true;
571616
}
617+
618+
// Initialize controls as disabled
619+
disableControls();
572620
</script>
573621
</body>
574622

575-
</html>
623+
</html>

‎setup/index_zh.html‎

Lines changed: 62 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,14 @@ <h2 class="card-title text-2xl">蓝牙控制面板</h2>
2525
连接设备
2626
</button>
2727

28-
<div id="controlPanel" class="hidden space-y-4">
28+
<div id="controlPanel" class="space-y-4">
2929
<div class="flex gap-2">
3030
<button class="btn btn-outline flex-1" id="loadAllButton">
3131
🔄 加载配置
3232
</button>
3333
<button class="btn btn-primary flex-1" id="saveAllButton" disabled>
3434
💾 保存修改
3535
</button>
36-
<button class="btn btn-warning" id="resetButton">
37-
🔄 重启
38-
</button>
3936
</div>
4037

4138
<div class="card bg-base-100 border border-base-300">
@@ -109,6 +106,19 @@ <h3 class="card-title text-lg">背景图片设置</h3>
109106
</div>
110107
</div>
111108

109+
<!-- 设备重启不支持的模态对话框 -->
110+
<dialog id="resetNotSupportedModal" class="modal">
111+
<div class="modal-box">
112+
<h3 class="font-bold text-lg">⚠️ 需要重启设备</h3>
113+
<p class="py-4">设备不支持此操作，请通过按设备上的 k0 来重启</p>
114+
<div class="modal-action">
115+
<form method="dialog">
116+
<button class="btn btn-primary">确定</button>
117+
</form>
118+
</div>
119+
</div>
120+
</dialog>
121+
112122
<script>
113123
// 定义UUID
114124
const SERVICE_ID = "623fa3e2-631b-4f8f-a6e7-a7b09c03e7e0";
@@ -133,7 +143,6 @@ <h3 class="card-title text-lg">背景图片设置</h3>
133143
const connectionStatus = document.getElementById('connectionStatus');
134144
const loadAllButton = document.getElementById('loadAllButton');
135145
const saveAllButton = document.getElementById('saveAllButton');
136-
const resetButton = document.getElementById('resetButton');
137146
const ssidInput = document.getElementById('ssidInput');
138147
const passInput = document.getElementById('passInput');
139148
const serverUrlInput = document.getElementById('serverUrlInput');
@@ -147,6 +156,7 @@ <h3 class="card-title text-lg">背景图片设置</h3>
147156
const clearBgButton = document.getElementById('clearBgButton');
148157
const notificationToast = document.getElementById('notificationToast');
149158
const toastMessage = document.getElementById('toastMessage');
159+
const resetNotSupportedModal = document.getElementById('resetNotSupportedModal');
150160

151161
// 跟踪哪些字段被修改
152162
const modifiedFields = {
@@ -260,10 +270,9 @@ <h3 class="card-title text-lg">背景图片设置</h3>
260270
// 更新UI状态
261271
isConnected = true;
262272
updateConnectionStatus();
263-
264-
// 显示控制面板
265-
controlPanel.classList.remove('hidden');
266273
connectButton.textContent = '断开连接';
274+
connectButton.classList.remove('btn-primary');
275+
connectButton.classList.add('btn-error');
267276

268277
// 设备断开连接时的处理
269278
device.addEventListener('gattserverdisconnected', handleDisconnection);
@@ -295,8 +304,9 @@ <h3 class="card-title text-lg">背景图片设置</h3>
295304
function handleDisconnection() {
296305
isConnected = false;
297306
updateConnectionStatus();
298-
controlPanel.classList.add('hidden');
299307
connectButton.textContent = '连接设备';
308+
connectButton.classList.remove('btn-error');
309+
connectButton.classList.add('btn-primary');
300310
device = null;
301311
server = null;
302312
service = null;
@@ -309,13 +319,39 @@ <h3 class="card-title text-lg">背景图片设置</h3>
309319
statusIndicator.classList.remove('badge-error');
310320
statusIndicator.classList.add('badge-success');
311321
connectionStatus.textContent = '已连接';
322+
enableControls();
312323
} else {
313324
statusIndicator.classList.remove('badge-success');
314325
statusIndicator.classList.add('badge-error');
315326
connectionStatus.textContent = '未连接';
327+
disableControls();
316328
}
317329
}
318330

331+
// 启用所有控件
332+
function enableControls() {
333+
loadAllButton.disabled = false;
334+
ssidInput.disabled = false;
335+
passInput.disabled = false;
336+
serverUrlInput.disabled = false;
337+
backgroundImage.disabled = false;
338+
clearBgButton.disabled = false;
339+
controlPanel.classList.remove('opacity-50', 'pointer-events-none');
340+
}
341+
342+
// 禁用所有控件
343+
function disableControls() {
344+
loadAllButton.disabled = true;
345+
saveAllButton.disabled = true;
346+
ssidInput.disabled = true;
347+
passInput.disabled = true;
348+
serverUrlInput.disabled = true;
349+
backgroundImage.disabled = true;
350+
writeBgButton.disabled = true;
351+
clearBgButton.disabled = true;
352+
controlPanel.classList.add('opacity-50', 'pointer-events-none');
353+
}
354+
319355
// 读取Characteristic值
320356
async function readCharacteristic(characteristicId, inputElement) {
321357
if (!isConnected || !service) {
@@ -403,6 +439,19 @@ <h3 class="card-title text-lg">背景图片设置</h3>
403439
}
404440

405441
showNotification('成功', `已保存 ${savedCount} 项修改`);
442+
443+
// 保存后尝试重启设备
444+
try {
445+
saveAllButton.textContent = '重启中...';
446+
const characteristic = await service.getCharacteristic(RESET_ID);
447+
const encoder = new TextEncoder();
448+
const data = encoder.encode('RESET');
449+
await characteristic.writeValue(data);
450+
showNotification('成功', '设备重启指令已发送');
451+
} catch (resetError) {
452+
console.error('重启失败:', resetError);
453+
resetNotSupportedModal.showModal();
454+
}
406455
} catch (error) {
407456
console.error('保存修改失败:', error);
408457
showNotification('错误', '保存修改失败', true);
@@ -419,9 +468,6 @@ <h3 class="card-title text-lg">背景图片设置</h3>
419468
return;
420469
}
421470

422-
resetButton.disabled = true;
423-
resetButton.textContent = '重启中...';
424-
425471
try {
426472
const characteristic = await service.getCharacteristic(RESET_ID);
427473
const encoder = new TextEncoder();
@@ -430,10 +476,7 @@ <h3 class="card-title text-lg">背景图片设置</h3>
430476
showNotification('成功', '设备重启指令已发送');
431477
} catch (error) {
432478
console.error('重启失败:', error);
433-
showNotification('错误', '设备不支持此操作，请通过按设备上的 k0 来重启', true);
434-
} finally {
435-
resetButton.disabled = false;
436-
resetButton.textContent = '🔄 重启';
479+
resetNotSupportedModal.showModal();
437480
}
438481
}
439482

@@ -547,10 +590,6 @@ <h3 class="card-title text-lg">背景图片设置</h3>
547590
saveAllModifications();
548591
});
549592

550-
resetButton.addEventListener('click', () => {
551-
resetDevice();
552-
});
553-
554593
// 监听输入框变化
555594
ssidInput.addEventListener('input', () => {
556595
markFieldAsModified('ssid', ssidTitle);
@@ -578,6 +617,9 @@ <h3 class="card-title text-lg">背景图片设置</h3>
578617
showNotification('错误', '您的浏览器不支持Web Bluetooth API，请使用Chrome或Edge浏览器', true);
579618
connectButton.disabled = true;
580619
}
620+
621+
// 初始化时禁用所有控件
622+
disableControls();
581623
</script>
582624
</body>
583625

0 commit comments

Comments
 (0)