114 lines
3.5 KiB
HTML
114 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BLE Interaction</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
button {
|
|
display: block;
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 200px;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>BLE Interaction</h1>
|
|
<button id="connectBtn">Connect</button>
|
|
<button id="checkBtn" disabled>Check</button>
|
|
<textarea id="logArea" readonly></textarea>
|
|
<button id="startUpgradeBtn" disabled>Start Upgrade</button>
|
|
|
|
<script>
|
|
// Constants
|
|
const BLE_SERVER_NAME = "BLE_Server_Name"; // Replace with your server name
|
|
const BLE_SERVICE_UUID = "12345678-1234-5678-1234-56789abcdef0"; // Replace with your service UUID
|
|
const BLE_CHARACTERISTIC_UUID = "12345678-1234-5678-1234-56789abcdef1"; // Replace with your characteristic UUID
|
|
|
|
let bleDevice = null;
|
|
let bleCharacteristic = null;
|
|
|
|
// Log messages to the textarea
|
|
function logMessage(message) {
|
|
const logArea = document.getElementById('logArea');
|
|
logArea.value += message + '\n';
|
|
logArea.scrollTop = logArea.scrollHeight;
|
|
}
|
|
|
|
// Function to connect to the BLE server
|
|
async function connectToBle() {
|
|
logMessage('Requesting BLE device...');
|
|
try {
|
|
bleDevice = await navigator.bluetooth.requestDevice({
|
|
filters: [{ name: BLE_SERVER_NAME }],
|
|
optionalServices: [BLE_SERVICE_UUID]
|
|
});
|
|
|
|
logMessage('Connecting to GATT server...');
|
|
const server = await bleDevice.gatt.connect();
|
|
|
|
logMessage('Getting service...');
|
|
const service = await server.getPrimaryService(BLE_SERVICE_UUID);
|
|
|
|
logMessage('Getting characteristic...');
|
|
bleCharacteristic = await service.getCharacteristic(BLE_CHARACTERISTIC_UUID);
|
|
|
|
logMessage('Connected to BLE server.');
|
|
document.getElementById('checkBtn').disabled = false;
|
|
document.getElementById('startUpgradeBtn').disabled = false;
|
|
|
|
} catch (error) {
|
|
logMessage('Connection failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Function to send a JSON packet and wait for a reply
|
|
async function sendJsonPacket(packet) {
|
|
if (!bleCharacteristic) {
|
|
logMessage('Not connected to BLE server.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
logMessage('Sending JSON packet...');
|
|
const encoder = new TextEncoder();
|
|
const encodedPacket = encoder.encode(JSON.stringify(packet));
|
|
await bleCharacteristic.writeValue(encodedPacket);
|
|
|
|
logMessage('Waiting for response...');
|
|
const response = await bleCharacteristic.readValue();
|
|
const decoder = new TextDecoder();
|
|
const decodedResponse = decoder.decode(response);
|
|
|
|
logMessage('Received response: ' + decodedResponse);
|
|
return JSON.parse(decodedResponse);
|
|
} catch (error) {
|
|
logMessage('Error during communication: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Event listeners for buttons
|
|
document.getElementById('connectBtn').addEventListener('click', connectToBle);
|
|
document.getElementById('checkBtn').addEventListener('click', () => {
|
|
const packet = { action: 'check' };
|
|
sendJsonPacket(packet);
|
|
});
|
|
document.getElementById('startUpgradeBtn').addEventListener('click', () => {
|
|
const packet = { action: 'start_upgrade' };
|
|
sendJsonPacket(packet);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|