A
Anonymous

Bluetooth Connection and GPS Integration in React

// Bluetooth connection logic using Web Bluetooth API let bluetoothDevice; let isBluetoothConnected = false; // Flag to track Bluetooth connection status document.getElementById('connectBluetooth').addEventListener('click', async () => { try { console.log('Attempting to connect to Bluetooth...'); // Request a Bluetooth device bluetoothDevice = await navigator.bluetooth.requestDevice({ // Filter for devices by services filters: [{ services: ['battery_service'] }] }); // Connect to the selected device const server = await bluetoothDevice.gatt.connect(); console.log('Bluetooth connected to device:', bluetoothDevice.name); // Update the UI to show connection status document.getElementById('bluetoothStatus').textContent = `Bluetooth: Connected to ${bluetoothDevice.name}`; isBluetoothConnected = true; // Enable the Lock and Unlock buttons once connected document.getElementById('lockSafe').disabled = false; document.getElementById('unlockSafe').disabled = false; } catch (error) { console.log('Bluetooth connection failed:', error); alert('Failed to connect to Bluetooth device.'); document.getElementById('bluetoothStatus').textContent = 'Bluetooth: Disconnected'; } }); // Function to send lock/unlock commands to the safe function sendCommand(command) { if (!isBluetoothConnected) { alert('Please connect to Bluetooth first!'); return; // Prevent sending commands if Bluetooth isn't connected } if (command === 'L') { document.getElementById('status').textContent = 'Safe is Locked'; updateHistory('Locked the safe'); } else if (command === 'U') { document.getElementById('status').textContent = 'Safe is Unlocked'; updateHistory('Unlocked the safe'); } } // Function to update the history log function updateHistory(action) { const historyList = document.getElementById('historyList'); const listItem = document.createElement('li'); const timestamp = new Date().toLocaleString(); listItem.textContent = `${action} at ${timestamp}`; historyList.appendChild(listItem); } // GPS Functionality async function connectGPS() { try { // Request access to the serial port (Arduino connection) const port = await navigator.serial.requestPort(); await port.open({ baudRate: 9600 }); const decoder = new TextDecoderStream(); const inputDone = port.readable.pipeTo(decoder.writable); const inputStream = decoder.readable.getReader(); // Read GPS data from Arduino while (true) { const { value, done } = await inputStream.read(); if (done) { inputStream.releaseLock(); break; } // Look for LAT and LON markers in serial data if (value.includes("LAT:") && value.includes("LON:")) { const [latStr, lonStr] = value.split(","); const latitude = latStr.split(":")[1]; const longitude = lonStr.split(":")[1]; // Update the GPS coordinates in the UI document.getElementById('gpsCoordinates').textContent = `Latitude: ${latitude}, Longitude: ${longitude}`; } } } catch (error) { console.error('Error connecting to GPS:', error); } } it's not able to search for devices

Prompt
Component Preview

About

Learn how to implement Bluetooth device connection and GPS data retrieval in a React application with Tailwind CSS for a seamless user experience.

Share

Last updated 1 month ago