Spaces:

drbaker171
/

esp

Running

App Files Files Community

drbaker171 commited on Apr 7, 2025

Commit

c56017a

verified ·

1 Parent(s): 291d5a1

Add 1 files

Browse files

Files changed (1) hide show

index.html +82 -10

index.html CHANGED Viewed

@@ -41,6 +41,14 @@
             from, to { opacity: 1 }
             50% { opacity: 0.5 }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -74,6 +82,7 @@
                                     <i class="fas fa-sync-alt"></i>
                                 </button>
                             </div>
                         </div>
                         <div>
@@ -306,6 +315,7 @@
         let writer = null;
         let isReading = false;
         let isConnected = false;
         document.addEventListener('DOMContentLoaded', function() {
             // Tab switching
@@ -534,9 +544,11 @@
             const connectBtn = document.getElementById('connectBtn');
             const connectionStatus = document.getElementById('connectionStatus');
             const uploadBtn = document.getElementById('uploadBtn');
             async function refreshPortList() {
                 portSelect.innerHTML = '<option value="">Select a port</option>';
                 try {
                     // Request permission to access serial ports
@@ -544,36 +556,70 @@
                     if (ports.length === 0) {
                         portSelect.innerHTML = '<option value="">No ports found</option>';
                         addToOutputConsole('No serial ports found. Connect a device and click refresh.');
                         return;
                     }
-                    ports.forEach(port => {
                         const option = document.createElement('option');
-                        option.value = port.id;
-                        option.textContent = port.getInfo().usbVendorId ?
-                            `Serial Port (Vendor: 0x${port.getInfo().usbVendorId.toString(16)}, Product: 0x${port.getInfo().usbProductId.toString(16)})` :
                             'Serial Port';
                         portSelect.appendChild(option);
                     });
                     addToOutputConsole(`Found ${ports.length} serial port(s)`);
                 } catch (error) {
                     addToOutputConsole(`Error accessing serial ports: ${error}`, 'error');
                     portSelect.innerHTML = '<option value="">Error accessing ports</option>';
                 }
             }
             refreshPorts.addEventListener('click', async () => {
                 refreshPorts.classList.add('blink');
                 addToOutputConsole('Searching for serial ports...');
                 try {
-                    // Request permission to access serial ports
-                    await navigator.serial.requestPort();
                     await refreshPortList();
                 } catch (error) {
-                    if (error.name !== 'NotFoundError') {
                         addToOutputConsole(`Error: ${error.message}`, 'error');
                     }
                 } finally {
@@ -587,10 +633,14 @@
                     return;
                 }
                 try {
-                    // Get the selected port
-                    const ports = await navigator.serial.getPorts();
-                    port = ports.find(p => p.id === portSelect.value);
                     if (!port) {
                         throw new Error('Selected port not found');
@@ -624,8 +674,17 @@
                     addToOutputConsole(`Connected to ${portSelect.options[portSelect.selectedIndex].text} at ${config.baudRate} baud`);
                     uploadBtn.disabled = false;
                 } catch (error) {
                     addToOutputConsole(`Error connecting to port: ${error}`, 'error');
                     if (port) {
                         try {
                             await port.close();
@@ -634,6 +693,18 @@
                         }
                         port = null;
                     }
                 }
             }
@@ -816,6 +887,7 @@
             // Check if Web Serial API is available
             if (!('serial' in navigator)) {
                 addToOutputConsole('Web Serial API not supported in this browser. Try Chrome or Edge.', 'error');
                 refreshPorts.disabled = true;
                 connectBtn.disabled = true;
             } else {

             from, to { opacity: 1 }
             50% { opacity: 0.5 }
         }
+        .port-option {
+            display: flex;
+            align-items: center;
+        }
+        .port-icon {
+            margin-right: 8px;
+            color: #4b5563;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                                     <i class="fas fa-sync-alt"></i>
                                 </button>
                             </div>
+                            <p id="portHelp" class="mt-1 text-xs text-gray-500">Connect your device and click refresh</p>
                         </div>
                         <div>
         let writer = null;
         let isReading = false;
         let isConnected = false;
+        let activePorts = [];
         document.addEventListener('DOMContentLoaded', function() {
             // Tab switching
             const connectBtn = document.getElementById('connectBtn');
             const connectionStatus = document.getElementById('connectionStatus');
             const uploadBtn = document.getElementById('uploadBtn');
+            const portHelp = document.getElementById('portHelp');
             async function refreshPortList() {
                 portSelect.innerHTML = '<option value="">Select a port</option>';
+                activePorts = [];
                 try {
                     // Request permission to access serial ports
                     if (ports.length === 0) {
                         portSelect.innerHTML = '<option value="">No ports found</option>';
+                        portHelp.textContent = 'No serial ports found. Connect a device and click refresh.';
                         addToOutputConsole('No serial ports found. Connect a device and click refresh.');
                         return;
                     }
+                    // Store ports for later reference
+                    activePorts = ports;
+                    ports.forEach((port, index) => {
                         const option = document.createElement('option');
+                        option.value = index; // Using index as value since port objects can't be serialized
+                        const portInfo = port.getInfo();
+                        const portName = portInfo.usbVendorId ?
+                            `Serial Port (Vendor: 0x${portInfo.usbVendorId.toString(16)}, Product: 0x${portInfo.usbProductId.toString(16)})` :
                             'Serial Port';
+                        const optionContent = document.createElement('div');
+                        optionContent.className = 'port-option';
+                        optionContent.innerHTML = `
+                            <i class="fas fa-microchip port-icon"></i>
+                            <span>${portName}</span>
+                        `;
+                        option.textContent = portName;
                         portSelect.appendChild(option);
                     });
+                    portHelp.textContent = `Found ${ports.length} serial port(s)`;
                     addToOutputConsole(`Found ${ports.length} serial port(s)`);
                 } catch (error) {
                     addToOutputConsole(`Error accessing serial ports: ${error}`, 'error');
                     portSelect.innerHTML = '<option value="">Error accessing ports</option>';
+                    portHelp.textContent = 'Error accessing ports. Make sure to grant permission when prompted.';
                 }
             }
             refreshPorts.addEventListener('click', async () => {
                 refreshPorts.classList.add('blink');
                 addToOutputConsole('Searching for serial ports...');
+                portHelp.textContent = 'Searching for devices...';
                 try {
+                    // Request permission to access serial ports with filters
+                    const port = await navigator.serial.requestPort({
+                        filters: [
+                            { usbVendorId: 0x2341 }, // Arduino
+                            { usbVendorId: 0x2A03 }, // Arduino (alternative)
+                            { usbVendorId: 0x10C4 }, // ESP32
+                            { usbVendorId: 0x1A86 }  // CH340 (common USB-to-serial)
+                        ]
+                    });
+                    // After permission is granted, refresh the list
                     await refreshPortList();
                 } catch (error) {
+                    if (error.name === 'NotFoundError') {
+                        portHelp.textContent = 'No device selected';
+                        addToOutputConsole('No device was selected', 'info');
+                    } else if (error.name === 'SecurityError') {
+                        portHelp.textContent = 'Permission denied. Please allow serial port access.';
+                        addToOutputConsole('Permission denied for serial port access', 'error');
+                    } else {
+                        portHelp.textContent = `Error: ${error.message}`;
                         addToOutputConsole(`Error: ${error.message}`, 'error');
                     }
                 } finally {
                     return;
                 }
+                const portIndex = parseInt(portSelect.value);
+                if (isNaN(portIndex) || portIndex < 0 || portIndex >= activePorts.length) {
+                    addToOutputConsole('Invalid port selection', 'error');
+                    return;
+                }
                 try {
+                    port = activePorts[portIndex];
                     if (!port) {
                         throw new Error('Selected port not found');
                     addToOutputConsole(`Connected to ${portSelect.options[portSelect.selectedIndex].text} at ${config.baudRate} baud`);
                     uploadBtn.disabled = false;
+                    // Send a test message to check connection
+                    setTimeout(() => {
+                        if (isConnected) {
+                            sendSerialData("AT"); // Common test command
+                        }
+                    }, 500);
                 } catch (error) {
                     addToOutputConsole(`Error connecting to port: ${error}`, 'error');
+                    portHelp.textContent = `Connection failed: ${error.message}`;
                     if (port) {
                         try {
                             await port.close();
                         }
                         port = null;
                     }
+                    // Reset connection state
+                    isConnected = false;
+                    connectBtn.innerHTML = '<i class="fas fa-link mr-2"></i> Connect';
+                    connectBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
+                    connectBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                    connectionStatus.classList.remove('bg-green-100', 'text-green-700');
+                    connectionStatus.classList.add('bg-gray-100', 'text-gray-700');
+                    connectionStatus.innerHTML = '<i class="fas fa-circle mr-2 text-gray-400"></i><span>Disconnected</span>';
+                    uploadBtn.disabled = true;
                 }
             }
             // Check if Web Serial API is available
             if (!('serial' in navigator)) {
                 addToOutputConsole('Web Serial API not supported in this browser. Try Chrome or Edge.', 'error');
+                portHelp.textContent = 'Web Serial API not supported. Use Chrome or Edge.';
                 refreshPorts.disabled = true;
                 connectBtn.disabled = true;
             } else {