CO2 Gadget Beta v0.14.012 low-power

Add low power icon to web server
melkati · Jun 27, 2024 · db72e76 · db72e76
1 parent 01cd2d4
commit db72e76
Show file tree

Hide file tree

Showing 20 changed files with 118 additions and 10 deletions.
diff --git a/data/index.html.gz b/data/index.html.gz
diff --git a/data/index.js.gz b/data/index.js.gz
diff --git a/data/low_power.html.gz b/data/low_power.html.gz
diff --git a/data/low_power.js.gz b/data/low_power.js.gz
diff --git a/data/ota.html.gz b/data/ota.html.gz
diff --git a/data/ota.js.gz b/data/ota.js.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/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
@@ -13,7 +13,7 @@ extra_configs = platformio_extra_configs.ini
 [version]
 build_flags =
     -D CO2_GADGET_VERSION="\"0.14."\"
-    -D CO2_GADGET_REV="\"011-development-low-power"\"
+    -D CO2_GADGET_REV="\"012-development-low-power"\"
 
 ;****************************************************************************************
 ;*** You can disable features by commenting the line with a semicolon at the beginning

diff --git a/webserver/common.js b/webserver/common.js
@@ -404,11 +404,12 @@ function readPreferencesFromServer() {
 }
 
 /**
- * Initialize the captive portal for preferences.html.
+ * Initialize the navbar based on the features supported by the device.
  */
 function initNavBar() {
     if (captivePortalDebug)
         console.log("Document loaded. Initializing navbar...");
+
     if (features.SUPPORT_OTA) {
         const otaLink = document.getElementById("otaLink");
         if (otaLink) {
@@ -417,21 +418,53 @@ function initNavBar() {
             console.error('Element with ID "otaLink" not found.')
         }
     }
+
     if (features.SUPPORT_LOW_POWER) {
         const lowPowerLink = document.getElementById("lowPowerLink");
         if (lowPowerLink) {
             lowPowerLink.classList.remove("hidden")
         } else {
             console.error('Element with ID "lowPowerLink" not found.')
         }
+
+        const lowPowerIcon = document.getElementById("iconLighting");
+        if (lowPowerIcon) {
+            lowPowerIcon.classList.remove("hidden");
+        } else {
+            console.error('Element with ID "iconLighting" not found.')
+        }
     }
 }
 
+/**
+ * Handles the low power mode activation.
+ */
+function goLowPower() {
+    console.log("Low power mode activated");
+    fetch('/goLowPower', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'text/plain'
+        }
+    })
+        .then(response => {
+            if (response.ok) {
+                console.log('Low power mode activated');
+            } else {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+        })
+        .catch(error => console.error('Error activating low power mode:', error));
+}
+
 document.addEventListener("DOMContentLoaded", function () {
     getFeaturesAsJson().then(initNavBar);
 
-    // Add device hostName to the exixting page title as document.title + (HostName)
+    // Add device hostName to the existing page title as document.title + (HostName)
     readPreferencesFromServer().then(data => {
         document.title += ` (${data.hostName})`;
     });
-});
+
+    // Llamar a la función goLowPower al hacer clic en el icono de bajo consumo
+    document.getElementById('lightingIcon').addEventListener('click', goLowPower);
+});
diff --git a/webserver/index.html b/webserver/index.html
@@ -17,7 +17,7 @@
     <script defer type="text/javascript" src="./index.js"></script>
 </head>
 
-<body>
+<body class="home-page">
     <!-- Navigation bar -->
     <div class="navbar" id="navbar">
         <div class="nav-content">
@@ -67,6 +67,12 @@
                     <span id="server-status-dot" class="status-dot status-dot-hidden"
                         title="Captive portal inactive"></span>
                 </a>
+                <!-- Low Power Icon -->
+                <div class="iconLowPower hidden low-power-icon light-mode" id="iconLighting">
+                    <svg id="lightingIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path id="iconPathLowPower" fill="currentColor"></path>
+                    </svg>
+                </div>
                 <!-- Theme Switch Icon -->
                 <div class="iconDarkLight" id="iconBulb">
                     <svg id="themeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -98,7 +104,7 @@
                     <text x="18" y="25" class="unit">ppm</text>
                 </svg>
             </div>
-        
+
             <div class="single-chart">
                 <div class="tag temp"></div>
                 <svg viewBox="0 0 36 36" class="circular-chart temp">
@@ -126,7 +132,7 @@
                 </svg>
             </div>
         </div>
-        
+
     </div>
 
 </body>

diff --git a/webserver/low_power.html b/webserver/low_power.html
@@ -67,6 +67,12 @@
                     <span id="server-status-dot" class="status-dot status-dot-hidden"
                         title="Captive portal inactive"></span>
                 </a>
+                <!-- Low Power Icon -->
+                <div class="iconLowPower hidden low-power-icon light-mode" id="iconLighting">
+                    <svg id="lightingIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path id="iconPathLowPower" fill="currentColor"></path>
+                    </svg>
+                </div>
                 <!-- Theme Switch Icon -->
                 <div class="iconDarkLight" id="iconBulb">
                     <svg id="themeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

diff --git a/webserver/ota.html b/webserver/ota.html
@@ -67,6 +67,12 @@
                 <a href="/getCaptivePortalStatusAsJson">
                     <span id="server-status-dot" class="status-dot status-dot-hidden" title="Captive portal inactive"></span>
                 </a>
+                <!-- Low Power Icon -->
+                <div class="iconLowPower hidden low-power-icon light-mode" id="iconLighting">
+                    <svg id="lightingIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path id="iconPathLowPower" fill="currentColor"></path>
+                    </svg>
+                </div>
                 <!-- Theme Switch Icon -->
                 <div class="iconDarkLight" id="iconBulb">
                     <svg id="themeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

diff --git a/webserver/preferences.html b/webserver/preferences.html
@@ -67,6 +67,12 @@
                     <span id="server-status-dot" class="status-dot status-dot-hidden"
                         title="Captive portal inactive"></span>
                 </a>
+                <!-- Low Power Icon -->
+                <div class="iconLowPower hidden low-power-icon light-mode" id="iconLighting">
+                    <svg id="lightingIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path id="iconPathLowPower" fill="currentColor"></path>
+                    </svg>
+                </div>
                 <!-- Theme Switch Icon -->
                 <div class="iconDarkLight" id="iconBulb">
                     <svg id="themeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

diff --git a/webserver/status.html b/webserver/status.html
@@ -67,6 +67,12 @@
                     <span id="server-status-dot" class="status-dot status-dot-hidden"
                         title="Captive portal inactive"></span>
                 </a>
+                <!-- Low Power Icon -->
+                <div class="iconLowPower hidden low-power-icon light-mode" id="iconLighting">
+                    <svg id="lightingIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path id="iconPathLowPower" fill="currentColor"></path>
+                    </svg>
+                </div>
                 <!-- Theme Switch Icon -->
                 <div class="iconDarkLight" id="iconBulb">
                     <svg id="themeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

diff --git a/webserver/style.css b/webserver/style.css
@@ -178,6 +178,22 @@ h4 {
   transform: scale(1.5);
 }
 
+.iconLowPower {
+  margin-left: 10px;
+  margin-right: 1rem;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+.iconLowPower:hover {
+  transform: scale(1.1);
+}
+
+.iconLowPower:active {
+  transform: scale(1.5);
+}
+
 /* Add styles for SVG icons */
 .navbar a svg {
   display: none; /* Hide icons by default */
@@ -462,11 +478,16 @@ button:hover {
 }
 
 .content {
-  max-width: 90%;
+  max-width: 600px;
+  width: 90%;
   margin: 0 auto;
   overflow-x: auto;
 }
 
+.home-page .content {
+  max-width: none;
+}
+
 .flex-wrapper {
   display: flex;
   flex-flow: row nowrap;

diff --git a/webserver/themes.js b/webserver/themes.js
@@ -1,6 +1,9 @@
 const lightThemeIconPath = `M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z`;
 const darkThemeIconPath = `M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256C0 379.7 100 480 223.5 480c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7 .6-7.4 1.2-11.1 1.6c-5 .5-10.1 .9-15.3 1c-1.2 0-2.5 0-3.7 0c-.1 0-.2 0-.3 0c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5 .1-9.8 .2c-2.3 .1-4.6 .2-6.9 .4z`;
 
+const lightLowPowerIconPath = `M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z`;
+const darkLowPowerIconPath = `M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z`;
+
 /**
  * Set the theme icon based on the current theme.
  * @param {string} theme - The current theme ("light" or "dark").
@@ -17,6 +20,22 @@ function setThemeIcon(theme) {
     }
 }
 
+/**
+ * Set the low power icon based on the current theme.
+ * @param {string} theme - The current theme ("light" or "dark").
+ */
+function setLowPowerIcon(theme) {
+    const iconPathLowPower = document.getElementById("iconPathLowPower");
+    const lowPowerIcon = document.getElementById("lightingIcon");
+    if (theme === "dark") {
+        lowPowerIcon.setAttribute("viewBox", "0 0 384 512");
+        iconPathLowPower.setAttribute("d", darkLowPowerIconPath);
+    } else {
+        lowPowerIcon.setAttribute("viewBox", "0 0 384 512");
+        iconPathLowPower.setAttribute("d", lightLowPowerIconPath);
+    }
+}
+
 /**
  * Toggle between light and dark themes.
  */
@@ -31,6 +50,7 @@ function toggleTheme() {
     console.debug("Theme set to:", newTheme);
     localStorage.setItem("theme", newTheme);
     setThemeIcon(newTheme);
+    setLowPowerIcon(newTheme);
 }
 
 /**
@@ -41,8 +61,10 @@ function initializeTheme() {
     if (savedTheme) {
         document.documentElement.setAttribute("theme", savedTheme);
         setThemeIcon(savedTheme);
+        setLowPowerIcon(savedTheme);
     } else {
         setThemeIcon('light'); // Default theme
+        setLowPowerIcon('light'); // Default low power icon
     }
 }
 
@@ -58,8 +80,10 @@ function initializeThemeSwitch() {
     }
 }
 
-
 document.addEventListener("DOMContentLoaded", function () {
     initializeTheme();
     initializeThemeSwitch();
-});
+
+    // Llamar a la función goLowPower al hacer clic en el icono de bajo consumo
+    document.getElementById('lightingIcon').addEventListener('click', goLowPower);
+});