Add calibration wizard to preferrences.html

webserver/preferences.html

@@ -273,7 +273,7 @@ <h1>CO2 Gadget Preferences</h1>
                         </label>
                     </div>
                     <div>
-                        <label for="mqttShowInCon">Show MQTT in Console:
+                        <label for="mqttShowInCon">Show MQTT trafic in serial console:
                             <input type="checkbox" id="mqttShowInCon" name="mqttShowInCon">
                             <span class="tooltip-icon">ℹ️</span>
                             <span class="tooltip-text">Show MQTT messages in the serial console. Useful for debugging
@@ -343,14 +343,15 @@ <h1>CO2 Gadget Preferences</h1>
                         </label>
                     </div>
 
-                    <div>
-                        <label for="customCalValue">Custom Calibration Value:
+                    <div style="display: flex; align-items: center;">
+                        <label for="customCalValue" style="flex-grow: 1;">Custom Calibration Value:
                             <span class="tooltip-icon">ℹ️</span>
                             <span class="tooltip-text">Custom calibration value for the CO2 sensor. This value is used
                                 to adjust the sensor
                                 readings. Set to ~415 to calibrate the sensor to outdoor air. Use with caution.</span>
                             <input type="number" id="customCalValue" name="customCalValue" value="">
                         </label>
+                        <button type="button" id="calibrateButton" style="margin-left: 10px;">Calibrate</button>
                     </div>
 
                     <div>
@@ -427,6 +428,30 @@ <h1>CO2 Gadget Preferences</h1>
                 </div>
             </fieldset>
 
+            <!-- Modal for Calibration Instructions -->
+            <div id="calibrationModal" class="modal">
+                <div class="modal-content">
+                    <span class="close">&times;</span>
+                    <h2>Calibration Instructions</h2>
+                    <p>Please place the sensor outside for a few minutes to stabilize.</p>
+                    <p>Calibration Value: <span id="customCalibrationValue"></span> ppm</p>
+                    <p>Current CO2 Value: <span id="currentCO2Value"></span> ppm</p>
+                    <label id="acknowledgeLabel" for="acknowledgeCheckbox">I have read and understand the
+                        instructions.</label>
+                    <input type="checkbox" id="acknowledgeCheckbox">
+                    <button type="button" id="calibrateNowButton">Calibrate Now</button>
+                </div>
+            </div>
+
+            <!-- Modal for Countdown -->
+            <div id="countdownModal" class="modal">
+                <div class="modal-content">
+                    <h2>Calibration in Progress</h2>
+                    <p>Please do not disturb the sensor. Calibration will complete in <span id="countdown">30</span>
+                        seconds.</p>
+                </div>
+            </div>
+
             <!-- Outputs Group -->
             <fieldset>
                 <legend>Outputs</legend>

webserver/preferences.js

@@ -463,6 +463,112 @@ function handlePasswordFields() {
     }
 }
 
+function calibrateSensor(calibrationValue) {
+    // Implement the calibration logic here
+    if (calibrationValue > 400 && calibrationValue < 2000) {
+        console.log("Calibration process started...");
+        console.log("Calibration value:", calibrationValue);
+        // Call the calibration endpoint with the calibration value settings?CalibrateCO2=400
+        fetch(`/settings?CalibrateCO2=${calibrationValue}`)
+            .then(response => {
+                if (!response.ok) throw new Error('Error calibrating CO2 sensor');
+                console.log('CO2 sensor calibrated successfully');
+            })
+            .catch(error => console.error('Error calibrating CO2 sensor:', error));
+    } else {
+        console.error("Invalid calibration value, please enter a value between 400 and 2000 ppm");
+        console.log("Calibration value:", calibrationValue);
+    }
+}
+
+/**
+ * Handles the calibration wizard functionality.
+ */
+function handleCalibrationWizard() {
+    const calibrateButton = document.getElementById("calibrateButton");
+    const calibrationModal = document.getElementById("calibrationModal");
+    const countdownModal = document.getElementById("countdownModal");
+    const closeSpan = document.querySelector(".close");
+    const acknowledgeCheckbox = document.getElementById("acknowledgeCheckbox");
+    const acknowledgeLabel = document.getElementById("acknowledgeLabel");
+    const calibrateNowButton = document.getElementById("calibrateNowButton");
+    const countdownSpan = document.getElementById("countdown");
+    const currentCO2ValueSpan = document.getElementById("currentCO2Value");
+
+    // Function to fetch current CO2 value from /readCO2 endpoint as text
+    function getCurrentCO2Value() {
+        fetch('/readCO2')
+            .then(response => response.text())
+            .then(data => {
+                let co2Value = parseFloat(data);
+                document.getElementById("currentCO2Value").textContent = co2Value.toFixed(0);
+            })
+            .catch((error) => {
+                console.error('Error fetching CO2 data', error);
+            });
+    }
+
+    // Function to change text color when "Calibrate Now" button is clicked without acknowledging
+    function changeTextColor() {
+        acknowledgeLabel.style.color = "var(--unchecked-font-color)";
+    }
+
+    calibrateButton.addEventListener("click", () => {
+        calibrationModal.style.display = "block";
+        document.getElementById("customCalibrationValue").textContent = document.getElementById("customCalValue").value + " ppm";
+        // Fetch current CO2 value when modal is opened
+        getCurrentCO2Value();
+        // Start interval to update CO2 value every 5 seconds
+        updateCO2Interval = setInterval(getCurrentCO2Value, 5000);
+    });
+
+    closeSpan.addEventListener("click", () => {
+        calibrationModal.style.display = "none";
+        // Clear interval when modal is closed
+        clearInterval(updateCO2Interval);
+    });
+
+    acknowledgeCheckbox.addEventListener("change", () => {
+        // Reset text color when checkbox is checked
+        if (acknowledgeCheckbox.checked) {
+            acknowledgeLabel.style.color = ""; // Reset to default color
+        }
+    });
+
+    calibrateNowButton.addEventListener("click", () => {
+        if (!acknowledgeCheckbox.checked) {
+            changeTextColor(); // Call the function to change text color
+            return; // Exit function if checkbox is not acknowledged
+        }
+
+        calibrationModal.style.display = "none";
+        countdownModal.style.display = "block";
+
+        calibrateSensor(document.getElementById("customCalValue").value);
+
+        let countdown = 15;
+        countdownSpan.textContent = countdown;
+
+        const interval = setInterval(() => {
+            countdown -= 1;
+            countdownSpan.textContent = countdown;
+
+            if (countdown <= 0) {
+                clearInterval(interval);
+                countdownModal.style.display = "none";
+            }
+        }, 1000);
+    });
+
+    window.addEventListener("click", (event) => {
+        if (event.target == calibrationModal) {
+            calibrationModal.style.display = "none";
+            // Clear interval when modal is closed
+            clearInterval(updateCO2Interval);
+        }
+    });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     // Get the current URL
     var currentURL = window.location.href;
@@ -482,5 +588,6 @@ document.addEventListener("DOMContentLoaded", () => {
         toggleVisibility('activeESPNOW', 'espNowConfig');
         toggleVisibility('useStaticIP', 'staticIPSettings');
         handleWiFiMQTTDependency();
+        handleCalibrationWizard(); // Ensure this is called
     }
 });

webserver/status.html

@@ -57,19 +57,19 @@ <h1>CO2 Gadget Status</h1>
                 <span class="status-label">Sensor Selected:</span> <span id="mainDeviceSelected"></span>
             </div>
             <div class="status-item" id="co2Item">
-                <span class="status-label">CO2:</span> <span id="co2"></span>
+                <span class="status-label">CO2:</span> <span id="co2"></span> ppm
             </div>
             <div class="status-item" id="temperatureItem">
-                <span class="status-label">Temperature:</span> <span id="temperature"></span>
+                <span class="status-label">Temperature:</span> <span id="temperature"></span> ºC
             </div>
             <div class="status-item" id="humidityItem">
-                <span class="status-label">Humidity:</span> <span id="humidity"></span>
+                <span class="status-label">Humidity:</span> <span id="humidity"></span> %RH
             </div>
             <div class="status-item" id="measurementIntervalItem">
-                <span class="status-label">Measurement Interval:</span> <span id="measurementInterval"></span>
+                <span class="status-label">Measurement Interval:</span> <span id="measurementInterval"></span> secs.
             </div>
             <div class="status-item" id="sampleIntervalItem">
-                <span class="status-label">Sample Interval:</span> <span id="sampleInterval"></span>
+                <span class="status-label">Sample Interval:</span> <span id="sampleInterval"></span> secs.
             </div>
         </fieldset>
 
@@ -163,7 +163,7 @@ <h1>CO2 Gadget Status</h1>
         <fieldset>
             <legend>CO2 Gadget Calibration:</legend>
             <div class="status-item" id="calibrationValueItem">
-                <span class="status-label">Calibration Value:</span> <span id="calibrationValue"></span>
+                <span class="status-label">Calibration Value:</span> <span id="calibrationValue"></span> ppm
             </div>
             <div class="status-item" id="pendingCalibrationItem">
                 <span class="status-label">Pending Calibration:</span> <span id="pendingCalibration"></span>
@@ -174,16 +174,16 @@ <h1>CO2 Gadget Status</h1>
         <fieldset>
             <legend>CO2 Gadget System:</legend>
             <div class="status-item" id="freeHeapItem">
-                <span class="status-label">Free Heap:</span> <span id="freeHeap"></span>
+                <span class="status-label">Free Heap:</span> <span id="freeHeap"></span> bytes
             </div>
             <div class="status-item" id="minFreeHeapItem">
-                <span class="status-label">Min Free Heap:</span> <span id="minFreeHeap"></span>
+                <span class="status-label">Min Free Heap:</span> <span id="minFreeHeap"></span> bytes
             </div>
             <div class="status-item" id="uptimeItem">
-                <span class="status-label">Uptime:</span> <span id="uptime"></span>
+                <span class="status-label">Uptime:</span> <span id="uptime"></span> ms.
             </div>
             <div class="status-item" id="batVoltageItem">
-                <span class="status-label">Battery Voltage:</span> <span id="batVoltage"></span>
+                <span class="status-label">Battery Voltage:</span> <span id="batVoltage"></span> Volts.
             </div>
         </fieldset>
 

webserver/status.js

@@ -9,6 +9,31 @@ function fetchVersion() {
         .catch(error => console.error('Error fetching version information:', error));
 }
 
+/**
+ * Receive a ESP32 numeric code for WiFi Status.
+ * Returns a string with the WiFi Status text for ESP32 numeric codes.
+ */
+function getWiFiStatusText(wifiStatus) {
+    switch (wifiStatus) {
+        case 0:
+            return "WL_IDLE_STATUS (WiFi is in process of changing between statuses)";
+        case 1:
+            return "WL_NO_SSID_AVAIL (No SSID is available)";
+        case 2:
+            return "WL_SCAN_COMPLETED (Scan has completed)";
+        case 3:
+            return "WL_CONNECTED (Connected to a WiFi network)";
+        case 4:
+            return "WL_CONNECT_FAILED (Failed to connect to a WiFi network)";
+        case 5:
+            return "WL_CONNECTION_LOST (Connection lost)";
+        case 6:
+            return "WL_DISCONNECTED (Disconnected from a WiFi network)";
+        default:
+            return "Unknown WiFi Status";
+    }
+}
+
 /**
  * Updates the DOM with feature data for CO2 Gadget.
  */
@@ -47,7 +72,7 @@ function loadCaptivePortalStatusFromServer() {
                 document.getElementById('timeToWaitForCaptivePortalItem').style.display = 'none';
             }
 
-            if (data.captivePortalTimeLeft !== undefined) {
+            if (data.captivePortalTimeLeft !== undefined && data.captivePortalActive) {
                 document.getElementById('captivePortalTimeLeft').textContent = data.captivePortalTimeLeft;
             } else {
                 document.getElementById('captivePortalTimeLeftItem').style.display = 'none';
@@ -101,7 +126,7 @@ function loadStatusFromServer() {
             }
 
             if (data.WiFiStatus !== undefined) {
-                document.getElementById('wifiStatus').textContent = data.WiFiStatus;
+                document.getElementById('wifiStatus').textContent = getWiFiStatusText(data.WiFiStatus) + " (" + data.WiFiStatus + ")";
             } else {
                 document.getElementById('wifiStatusItem').style.display = 'none';
             }

webserver/style.css

@@ -26,6 +26,7 @@
   --close-button-hover-color: darkred;
   --status-bar-bg-color: #fbef83;
   --status-bar-text-color: #333;
+  --unchecked-font-color: orange;
 }
 
 [theme='dark'] {
@@ -56,6 +57,7 @@
   --close-button-hover-color: #c0392b;
   --status-bar-bg-color: #34495e;
   --status-bar-text-color: #ecf0f1;
+  --unchecked-font-color: yellow;
 }
 
 body {
@@ -439,6 +441,7 @@ button:hover {
 
 .tooltip-icon {
   cursor: pointer;
+  margin-left: 5px;
 }
 
 .tooltip-text {
@@ -458,6 +461,46 @@ button:hover {
   visibility: visible;
 }
 
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+  background-color: var(--popup-bg-color);
+  margin: auto;
+  padding: 20px;
+  border: 1px solid var(--input-border-color);
+  width: 80%;
+  color: var(--popup-text-color);
+}
+
+.unchecked-text {
+  color: var(--unchecked-font-color);
+}
+
+
+.close {
+  color: var(--close-button-color);
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: var(--close-button-hover-color);
+  text-decoration: none;
+  cursor: pointer;
+}
 #captive-portal-status-bar {
   width: 100%;
   background-color: var(--status-bar-bg-color);