CO2 Gadget Beta v0.14.004

Improve calibration wizard
melkati · Jun 7, 2024 · 15e40ab · 15e40ab
1 parent de62937
commit 15e40ab
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 114 deletions.
diff --git a/data/combined.js.gz b/data/combined.js.gz
diff --git a/data/index.html.gz b/data/index.html.gz
diff --git a/data/main.js.gz b/data/main.js.gz
diff --git a/data/ota.html.gz b/data/ota.html.gz
diff --git a/data/preferences.html.gz b/data/preferences.html.gz
diff --git a/data/preferences.js.gz b/data/preferences.js.gz
diff --git a/data/preferences.min.js b/data/preferences.min.js
diff --git a/data/status.html.gz b/data/status.html.gz
diff --git a/data/status.js.gz b/data/status.js.gz
diff --git a/data/style.css.gz b/data/style.css.gz
diff --git a/platformio.ini b/platformio.ini
@@ -10,7 +10,7 @@ extra_configs = platformio_extra_configs.ini
 [version]
 build_flags =
     -D CO2_GADGET_VERSION="\"0.14."\"
-    -D CO2_GADGET_REV="\"003-development"\"
+    -D CO2_GADGET_REV="\"004-development"\"
 
 ;****************************************************************************************
 ;*** You can disable features by commenting the line with a semicolon at the beginning
@@ -337,8 +337,8 @@ board_build.flash_mode = dio
 board_upload.flash_size = 16MB
 upload_speed = 921600
 monitor_speed = 115200
-monitor_port = COM13
-upload_port = COM13
+monitor_port = COM8
+upload_port = COM8
 lib_deps = 
     bodmer/TFT_eSPI @ ^2.5.43
 	${common_env_data.lib_deps}

diff --git a/webserver/preferences.html b/webserver/preferences.html
@@ -434,20 +434,22 @@ <h1>CO2 Gadget Preferences</h1>
                     <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>Calibration Value: <span id="modalCalibrationValueContainer"><input type="number"
+                                id="modalCustomCalibrationValueInput" value="0" min="400" max="2000"> ppm</span></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>
+                    <p>Please do not disturb the sensor. Calibration will complete in <span id="countdown">15</span>
                         seconds.</p>
                 </div>
             </div>

diff --git a/webserver/preferences.js b/webserver/preferences.js
@@ -464,109 +464,123 @@ 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);
-    }
+  // 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);
-            });
+  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", () => {
+    // Uncheck the acknowledge checkbox when modal is opened
+    acknowledgeCheckbox.checked = false;
+    calibrationModal.style.display = "block";
+    // Set the custom calibration value input to the current custom calibration value
+    const customCalibrationValueInput = document.getElementById(
+      "modalCustomCalibrationValueInput"
+    );
+    customCalibrationValueInput.value =
+      document.getElementById("customCalValue").value;
+    // 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
     }
+  });
 
-    // Function to change text color when "Calibrate Now" button is clicked without acknowledging
-    function changeTextColor() {
-        acknowledgeLabel.style.color = "var(--unchecked-font-color)";
+  calibrateNowButton.addEventListener("click", () => {
+    if (!acknowledgeCheckbox.checked) {
+      changeTextColor(); // Call the function to change text color
+      return; // Exit function if checkbox is not acknowledged
     }
 
-    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);
-        }
-    });
+    calibrationModal.style.display = "none";
+    countdownModal.style.display = "block";
+
+    const customCalValue = parseInt(
+      document.getElementById("modalCustomCalibrationValueInput").value,
+      10
+    );
+    calibrateSensor(customCalValue);
+
+    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", () => {