webserial wifi setup

docs/setup/index.html

@@ -17,31 +17,40 @@ <h1>Connect Your Display</h1>
             <h1>E-Paper Display Setup Wizard</h1>
 
             <div class="step">
-                <h2>Step 1: Basic Configuration</h2>
-                <p>Let's start by setting up your basic display configuration.</p>
+                <h2>Step 1: WiFi Configuration</h2>
+                <p>Configure your WiFi networks.</p>
+                <div id="wifi-setup">
+                    <button onclick="startWiFiSetup()" class="button">Configure WiFi</button>
+                </div>
+            </div>
+
+            <div class="step">
+                <h2>Step 2: Basic Configuration</h2>
+                <p>Set up your basic display configuration.</p>
                 <button onclick="startBasicSetup()" class="button">Start Basic Setup</button>
             </div>
 
             <div class="step">
-                <h2>Step 2: Transit Configuration</h2>
+                <h2>Step 3: Transit Configuration</h2>
                 <p>Configure your transit stops and preferences.</p>
                 <button onclick="startTransitSetup()" class="button">Configure Transit</button>
             </div>
 
             <div class="step">
-                <h2>Step 3: Weather Configuration</h2>
+                <h2>Step 4: Weather Configuration</h2>
                 <p>Set up your weather display preferences.</p>
                 <button onclick="startWeatherSetup()" class="button">Configure Weather</button>
             </div>
 
             <div class="step">
-                <h2>Step 4: Review & Finish</h2>
+                <h2>Step 5: Review & Finish</h2>
                 <p>Review your configuration and start the display service.</p>
                 <button onclick="reviewSetup()" class="button">Review & Finish</button>
             </div>
         </div>
     </div>
     <script src="js/webusb.js"></script>
+    <script src="js/wifi_setup.js"></script>
     <script src="js/setup.js"></script>
 </body>
 </html> 

docs/setup/js/wifi_setup.js

@@ -0,0 +1,184 @@
+// WiFi configuration functionality
+async function startWiFiSetup() {
+    try {
+        // Get available networks
+        const response = await displayDevice.sendCommand(0x10);
+        const networks = JSON.parse(new TextDecoder().decode(response.data));
+
+        // Get saved networks
+        const savedResponse = await displayDevice.sendCommand(0x11);
+        const savedNetworks = JSON.parse(new TextDecoder().decode(savedResponse.data));
+
+        // Show WiFi setup form
+        showWiFiSetupForm(networks, savedNetworks);
+    } catch (error) {
+        console.error('Failed to start WiFi setup:', error);
+        alert('Failed to get WiFi networks. Please try reconnecting the device.');
+    }
+}
+
+function showWiFiSetupForm(networks, savedNetworks) {
+    const setupDiv = document.getElementById('wifi-setup');
+    if (!setupDiv) return;
+
+    // Create HTML for available networks
+    let html = `
+        <h2>Available Networks</h2>
+        <div class="network-list">
+    `;
+
+    if (networks.error) {
+        html += `<p class="error">${networks.error}</p>`;
+    } else if (networks.networks && networks.networks.length > 0) {
+        networks.networks.forEach(network => {
+            html += `
+                <div class="network-item">
+                    <span class="network-name">${network.ssid}</span>
+                    <span class="network-signal">${network.signal}%</span>
+                    <button onclick="connectToNetwork('${network.ssid}', ${network.security})">
+                        Connect
+                    </button>
+                </div>
+            `;
+        });
+    } else {
+        html += '<p>No networks found</p>';
+    }
+
+    html += '</div>';
+
+    // Add saved networks section
+    html += `
+        <h2>Saved Networks</h2>
+        <div class="saved-network-list">
+    `;
+
+    if (savedNetworks.error) {
+        html += `<p class="error">${savedNetworks.error}</p>`;
+    } else if (savedNetworks.saved_networks && savedNetworks.saved_networks.length > 0) {
+        savedNetworks.saved_networks.forEach(network => {
+            html += `
+                <div class="network-item">
+                    <span class="network-name">${network.ssid}</span>
+                    <button onclick="forgetNetwork('${network.uuid}')">
+                        Forget
+                    </button>
+                </div>
+            `;
+        });
+    } else {
+        html += '<p>No saved networks</p>';
+    }
+
+    html += '</div>';
+
+    // Add refresh button
+    html += `
+        <div class="network-controls">
+            <button onclick="startWiFiSetup()" class="refresh-button">
+                Refresh Networks
+            </button>
+        </div>
+    `;
+
+    setupDiv.innerHTML = html;
+}
+
+async function connectToNetwork(ssid, requiresPassword) {
+    let password = '';
+    if (requiresPassword) {
+        password = prompt(`Enter password for ${ssid}:`);
+        if (!password) return;  // User cancelled
+    }
+
+    try {
+        const response = await displayDevice.sendCommand(0x12, JSON.stringify({
+            ssid: ssid,
+            password: password
+        }));
+
+        const result = JSON.parse(new TextDecoder().decode(response.data));
+        if (result.error) {
+            alert(`Failed to connect: ${result.error}`);
+        } else {
+            alert(`Successfully connected to ${ssid}`);
+            // Refresh the network list
+            startWiFiSetup();
+        }
+    } catch (error) {
+        console.error('Failed to connect:', error);
+        alert('Failed to connect to network. Please try again.');
+    }
+}
+
+async function forgetNetwork(uuid) {
+    if (!confirm('Are you sure you want to remove this network?')) return;
+
+    try {
+        const response = await displayDevice.sendCommand(0x13, JSON.stringify({
+            uuid: uuid
+        }));
+
+        const result = JSON.parse(new TextDecoder().decode(response.data));
+        if (result.error) {
+            alert(`Failed to remove network: ${result.error}`);
+        } else {
+            // Refresh the network list
+            startWiFiSetup();
+        }
+    } catch (error) {
+        console.error('Failed to forget network:', error);
+        alert('Failed to remove network. Please try again.');
+    }
+}
+
+// Add styles for WiFi setup
+const style = document.createElement('style');
+style.textContent = `
+    .network-list, .saved-network-list {
+        margin: 1em 0;
+        max-height: 300px;
+        overflow-y: auto;
+    }
+    
+    .network-item {
+        display: flex;
+        align-items: center;
+        padding: 0.5em;
+        border-bottom: 1px solid #eee;
+    }
+    
+    .network-name {
+        flex-grow: 1;
+        margin-right: 1em;
+    }
+    
+    .network-signal {
+        margin-right: 1em;
+        color: #666;
+    }
+    
+    .error {
+        color: red;
+        margin: 1em 0;
+    }
+    
+    .network-controls {
+        margin-top: 1em;
+        text-align: center;
+    }
+    
+    .refresh-button {
+        background-color: #4CAF50;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    
+    .refresh-button:hover {
+        background-color: #45a049;
+    }
+`;
+document.head.appendChild(style); 

webusb_server.py

@@ -4,6 +4,7 @@
 import logging
 from pathlib import Path
 import dotenv
+from wifi_config import handle_wifi_command
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)
@@ -61,7 +62,12 @@ def save_config(self, config):
     def handle_command(self, command, data=None):
         """Handle incoming USB commands"""
         try:
-            if command == 0x01:  # GET_CONFIG
+            # WiFi configuration commands (0x10-0x1F)
+            if 0x10 <= command <= 0x1F:
+                return handle_wifi_command(command, data)
+
+            # General configuration commands
+            elif command == 0x01:  # GET_CONFIG
                 return json.dumps(self.get_config())
 
             elif command == 0x02:  # SAVE_CONFIG