use json for api data

api/mock.json

@@ -0,0 +1,46 @@
+```json
+{
+    "wifi_status": 1,
+    "ssid": "MyHomeWiFi",
+    "ip_address": "192.168.1.100",
+    "cpu_usage": 42,
+    "memory_usage": 64,
+    "temperature": 32,
+    "humidity": 45,
+    "timestamps": ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "00:00"],
+    "temperature_readings": [22, 21, 20, 22, 25, 26, 24, 23, 22],
+    "humidity_readings": [45, 46, 48, 42, 40, 38, 42, 44, 45],
+    "device_name": "Living Room ESP32",
+    "firmware_version": "2.1.4",
+    "uptime": 123456,
+    "sensor_data": {
+        "temperature": 32.5,
+        "humidity": 45.2,
+        "pressure": 1013.2
+    },
+    "controls": {
+        "led": true,
+        "plug": false,
+        "brightness": 75,
+        "speed": 40
+    }
+}
+```
+
+The changes include:
+
+1. Added API handling functionality to script.js with:
+   - API endpoint configuration
+   - Async fetch functions
+   - Dashboard update function
+   - Fallback to local API
+   - Mock data for development
+
+2. Added data-status attributes to status cards in index.html for easier JS targeting
+
+3. Created a mock.json file with sample API response structure
+
+You'll need to:
+1. Replace the API_BASE_URL with your actual API endpoint
+2. Configure your ESP32 to serve the local API endpoint
+3. The mock data will be used during development if APIs are unavailable

index.html

@@ -41,8 +41,8 @@
                 </div>
                 <div>
                     <p class="text-gray-500 dark:text-gray-400 text-sm">WiFi Status</p>
-                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Connected</h3>
-                </div>
+                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="wifi">Connected</h3>
+</div>
             </div>
 
             <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
@@ -51,8 +51,8 @@
                 </div>
                 <div>
                     <p class="text-gray-500 dark:text-gray-400 text-sm">CPU Usage</p>
-                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white">42%</h3>
-                </div>
+                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="cpu">42%</h3>
+</div>
             </div>
 
             <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
@@ -61,8 +61,8 @@
                 </div>
                 <div>
                     <p class="text-gray-500 dark:text-gray-400 text-sm">Memory</p>
-                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white">64%</h3>
-                </div>
+                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="memory">64%</h3>
+</div>
             </div>
 
             <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
@@ -71,8 +71,8 @@
                 </div>
                 <div>
                     <p class="text-gray-500 dark:text-gray-400 text-sm">Temperature</p>
-                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white">32°C</h3>
-                </div>
+                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white" data-status="temperature">32°C</h3>
+</div>
             </div>
         </div>
 

script.js

@@ -9,14 +9,66 @@ document.addEventListener('DOMContentLoaded', () => {
         document.documentElement.classList.remove('dark');
     }
 });
+// API Endpoints
+const API_BASE_URL = 'https://api.thingspeak.com/channels/1234567/feeds.json'; // Replace with your actual API
+const DEVICE_API_URL = 'http://esp32.local/api/status'; // Example local ESP32 API
 
-// Simulate real-time data updates
-setInterval(() => {
-    const cpuElement = document.querySelector('h3:contains("CPU Usage")').nextElementSibling;
-    const randomCpu = Math.floor(Math.random() * 20) + 30; // 30-50%
-    cpuElement.textContent = `${randomCpu}%`;
-}, 5000);
+// Fetch device status from API
+async function fetchDeviceStatus() {
+    try {
+        const response = await fetch(API_BASE_URL);
+        const data = await response.json();
+        updateDashboard(data);
+    } catch (error) {
+        console.error('Error fetching API data:', error);
+        // Fallback to local API
+        try {
+            const localResponse = await fetch(DEVICE_API_URL);
+            const localData = await localResponse.json();
+            updateDashboard(localData);
+        } catch (localError) {
+            console.error('Error fetching local device data:', localError);
+        }
+    }
+}
+
+// Update dashboard with API data
+function updateDashboard(data) {
+    // Update status cards
+    document.querySelector('[data-status="wifi"]').textContent = 
+        data.wifi_status === 1 ? 'Connected' : 'Disconnected';
+    document.querySelector('[data-status="cpu"]').textContent = 
+        `${data.cpu_usage}%`;
+    document.querySelector('[data-status="memory"]').textContent = 
+        `${data.memory_usage}%`;
+    document.querySelector('[data-status="temperature"]').textContent = 
+        `${data.temperature}°C`;
+
+    // Update chart
+    const chart = Chart.getChart('sensorChart');
+    chart.data.labels = data.timestamps;
+    chart.data.datasets[0].data = data.temperature_readings;
+    chart.data.datasets[1].data = data.humidity_readings;
+    chart.update();
+}
 
+// Initialize real-time updates
+document.addEventListener('DOMContentLoaded', () => {
+    fetchDeviceStatus();
+    setInterval(fetchDeviceStatus, 5000); // Update every 5 seconds
+
+    // Mock data for development
+    const mockData = {
+        wifi_status: 1,
+        cpu_usage: Math.floor(Math.random() * 20) + 30,
+        memory_usage: Math.floor(Math.random() * 20) + 60,
+        temperature: Math.floor(Math.random() * 5) + 30,
+        timestamps: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00'],
+        temperature_readings: [22, 21, 20, 22, 25, 26, 24, 23, 22],
+        humidity_readings: [45, 46, 48, 42, 40, 38, 42, 44, 45]
+    };
+    updateDashboard(mockData);
+});
 // Toggle switches functionality
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {