diff --git a/data/index.html.gz b/data/index.html.gz index e0fb8bf..c15156a 100644 Binary files a/data/index.html.gz and b/data/index.html.gz differ diff --git a/data/index.js.gz b/data/index.js.gz index 2fb8d53..4676f62 100644 Binary files a/data/index.js.gz and b/data/index.js.gz differ diff --git a/data/low_power.html.gz b/data/low_power.html.gz index 60ee962..43105e0 100644 Binary files a/data/low_power.html.gz and b/data/low_power.html.gz differ diff --git a/data/low_power.js.gz b/data/low_power.js.gz index 088d581..b85095e 100644 Binary files a/data/low_power.js.gz and b/data/low_power.js.gz differ diff --git a/data/ota.html.gz b/data/ota.html.gz index ababbf0..92268c1 100644 Binary files a/data/ota.html.gz and b/data/ota.html.gz differ diff --git a/data/ota.js.gz b/data/ota.js.gz index 009e082..b919048 100644 Binary files a/data/ota.js.gz and b/data/ota.js.gz differ diff --git a/data/preferences.html.gz b/data/preferences.html.gz index d6b8d28..02a44f9 100644 Binary files a/data/preferences.html.gz and b/data/preferences.html.gz differ diff --git a/data/preferences.js.gz b/data/preferences.js.gz index 1913029..f619e63 100644 Binary files a/data/preferences.js.gz and b/data/preferences.js.gz differ diff --git a/data/status.html.gz b/data/status.html.gz index d558ebb..dc8256d 100644 Binary files a/data/status.html.gz and b/data/status.html.gz differ diff --git a/data/status.js.gz b/data/status.js.gz index f498217..92718b5 100644 Binary files a/data/status.js.gz and b/data/status.js.gz differ diff --git a/data/style.css.gz b/data/style.css.gz index fb6fa2f..c185464 100644 Binary files a/data/style.css.gz and b/data/style.css.gz differ diff --git a/platformio.ini b/platformio.ini index 36df993..8b7aa87 100644 --- 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 index cf184c8..a1978d0 100644 --- 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,6 +418,7 @@ function initNavBar() { console.error('Element with ID "otaLink" not found.') } } + if (features.SUPPORT_LOW_POWER) { const lowPowerLink = document.getElementById("lowPowerLink"); if (lowPowerLink) { @@ -424,14 +426,45 @@ function initNavBar() { } 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})`; }); -}); \ No newline at end of file + + // 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 index f01dad1..417ea7a 100644 --- a/webserver/index.html +++ b/webserver/index.html @@ -17,7 +17,7 @@ - + diff --git a/webserver/low_power.html b/webserver/low_power.html index 8754a37..c51d7ba 100644 --- a/webserver/low_power.html +++ b/webserver/low_power.html @@ -67,6 +67,12 @@ + +
diff --git a/webserver/ota.html b/webserver/ota.html index d977bc7..cab5669 100644 --- a/webserver/ota.html +++ b/webserver/ota.html @@ -67,6 +67,12 @@ + +
diff --git a/webserver/preferences.html b/webserver/preferences.html index 9ec38cb..2dbcea4 100644 --- a/webserver/preferences.html +++ b/webserver/preferences.html @@ -67,6 +67,12 @@ + +
diff --git a/webserver/status.html b/webserver/status.html index 461c7e2..666dd6b 100644 --- a/webserver/status.html +++ b/webserver/status.html @@ -67,6 +67,12 @@ + +
diff --git a/webserver/style.css b/webserver/style.css index ee6f761..93e544e 100644 --- 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 index fbf2d33..910d3e7 100644 --- 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(); -}); \ No newline at end of file + + // Llamar a la función goLowPower al hacer clic en el icono de bajo consumo + document.getElementById('lightingIcon').addEventListener('click', goLowPower); +});