Updated

AirQuality.ino

@@ -93,6 +93,7 @@ void setup() {
 
   // Sync time using NTP
   syncTime();
+  delay(1000);
 
   // Initialize AHTX0 sensor
   if (!aht.begin()) {
@@ -150,11 +151,11 @@ void setup() {
       color: #000000;
     }
     .card.poor {
-      background-color: #ff5722;
+      background-color:rgb(255, 60, 34);
       color: #ffffff;
     }
     .card.unhealthy {
-      background-color: #f44336;
+      background-color:rgb(244, 54, 244);
       color: #ffffff;
     }
     .apexcharts-tooltip {
@@ -241,39 +242,64 @@ void setup() {
     ],
     xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
     yaxis: { labels: { style: { colors: '#ffffff' } } },
-      tooltip: { theme: 'dark' },
+    tooltip: { theme: 'dark' }
   };
 
   let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
   chart.render();
 
   async function fetchData() {
+    try {
       const response = await fetch('/data');
+      if (!response.ok) {
+        console.error(`Failed to fetch data: ${response.statusText}`);
+        return;
+      }
+
       const data = await response.json();
 
-      console.log(data.latest.humidity);
+      // Update cards
-
       updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
       updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
       updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
       updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
       updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
 
+      // Update chart
       chart.updateSeries([
         { name: 'TVOC (ppb)', data: data.history.tvoc },
         { name: 'eCO2 (ppm)', data: data.history.eco2 },
         { name: 'Temperature (°C)', data: data.history.temperature },
         { name: 'Humidity (%)', data: data.history.humidity }
       ]);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
   }
 
   function updateCard(cardId, value, recommendation) {
     const card = document.getElementById(cardId);
+    if (!card) {
+      console.error(`Card with ID ${cardId} not found.`);
+      return;
+    }
+
     const valueText = card.querySelector(".card-body h4");
     const recText = card.querySelector(".card-body p");
-      card.className = `card text-center ${recommendation.class}`;
+
+    if (valueText) {
       valueText.textContent = value.toFixed(1);
-      recText.textContent = recommendation.text;
+    } else {
+      console.error(`Value text element not found in ${cardId}`);
+    }
+
+    if (recText && recommendation) {
+      recText.textContent = recommendation.text || "";
+      card.className = `card text-center ${recommendation.class || ""}`;
+    } else if (recText) {
+      recText.textContent = "";
+      card.className = "card text-center";
+    }
   }
 
   function getAQIRecommendation(aqi) {
@@ -300,19 +326,21 @@ void setup() {
   }
 
   function getTemperatureClass(temp) {
-      if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
+    if (temp < 18) return { class: "moderate"};
-      if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
+    if (temp > 26) return { class: "poor"};
-      return { class: "good", text: "Comfortable temperature." };
+    return { class: "good"};
   }
 
   function getHumidityClass(hum) {
-      if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
+    if (hum < 30) return { class: "moderate"};
-      if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
+    if (hum > 60) return { class: "poor"};
-      return { class: "good", text: "Comfortable humidity." };
+    return { class: "good"};
   }
 
+  // Fetch data every second
   setInterval(fetchData, 1000);
 </script>
+
 </body>
 </html>
     )rawliteral";

AirQuality/AirQuality.ino

@@ -93,6 +93,7 @@ void setup() {
 
   // Sync time using NTP
   syncTime();
+  delay(1000);
 
   // Initialize AHTX0 sensor
   if (!aht.begin()) {
@@ -150,11 +151,11 @@ void setup() {
       color: #000000;
     }
     .card.poor {
-      background-color: #ff5722;
+      background-color:rgb(255, 60, 34);
       color: #ffffff;
     }
     .card.unhealthy {
-      background-color: #f44336;
+      background-color:rgb(244, 54, 244);
       color: #ffffff;
     }
     .apexcharts-tooltip {
@@ -241,39 +242,64 @@ void setup() {
     ],
     xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
     yaxis: { labels: { style: { colors: '#ffffff' } } },
-      tooltip: { theme: 'dark' },
+    tooltip: { theme: 'dark' }
   };
 
   let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
   chart.render();
 
   async function fetchData() {
+    try {
       const response = await fetch('/data');
+      if (!response.ok) {
+        console.error(`Failed to fetch data: ${response.statusText}`);
+        return;
+      }
+
       const data = await response.json();
 
-      console.log(data.latest.humidity);
+      // Update cards
-
       updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
       updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
       updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
       updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
       updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
 
+      // Update chart
       chart.updateSeries([
         { name: 'TVOC (ppb)', data: data.history.tvoc },
         { name: 'eCO2 (ppm)', data: data.history.eco2 },
         { name: 'Temperature (°C)', data: data.history.temperature },
         { name: 'Humidity (%)', data: data.history.humidity }
       ]);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
   }
 
   function updateCard(cardId, value, recommendation) {
     const card = document.getElementById(cardId);
+    if (!card) {
+      console.error(`Card with ID ${cardId} not found.`);
+      return;
+    }
+
     const valueText = card.querySelector(".card-body h4");
     const recText = card.querySelector(".card-body p");
-      card.className = `card text-center ${recommendation.class}`;
+
+    if (valueText) {
       valueText.textContent = value.toFixed(1);
-      recText.textContent = recommendation.text;
+    } else {
+      console.error(`Value text element not found in ${cardId}`);
+    }
+
+    if (recText && recommendation) {
+      recText.textContent = recommendation.text || "";
+      card.className = `card text-center ${recommendation.class || ""}`;
+    } else if (recText) {
+      recText.textContent = "";
+      card.className = "card text-center";
+    }
   }
 
   function getAQIRecommendation(aqi) {
@@ -300,19 +326,21 @@ void setup() {
   }
 
   function getTemperatureClass(temp) {
-      if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
+    if (temp < 18) return { class: "moderate"};
-      if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
+    if (temp > 26) return { class: "poor"};
-      return { class: "good", text: "Comfortable temperature." };
+    return { class: "good"};
   }
 
   function getHumidityClass(hum) {
-      if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
+    if (hum < 30) return { class: "moderate"};
-      if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
+    if (hum > 60) return { class: "poor"};
-      return { class: "good", text: "Comfortable humidity." };
+    return { class: "good"};
   }
 
+  // Fetch data every second
   setInterval(fetchData, 1000);
 </script>
+
 </body>
 </html>
     )rawliteral";