From a110efaceef2428b9fb4060cf687c775fd2c4663 Mon Sep 17 00:00:00 2001 From: M-Factory Date: Wed, 16 Jul 2025 00:29:39 +0900 Subject: [PATCH] Added "Get My Location" button Added "Get My Location" button and some cosmetic fixes --- ESPTimeCast.ino | 2 +- data/index.html | 87 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 71 insertions(+), 18 deletions(-) diff --git a/ESPTimeCast.ino b/ESPTimeCast.ino index 30a5aba..3411c4f 100644 --- a/ESPTimeCast.ino +++ b/ESPTimeCast.ino @@ -93,7 +93,7 @@ int ntpRetryCount = 0; // Non-blocking IP display globals bool showingIp = false; int ipDisplayCount = 0; -const int ipDisplayMax = 1; +const int ipDisplayMax = 2; String pendingIpToShow = ""; // Scroll flipped diff --git a/data/index.html b/data/index.html index dbf84c5..bd52397 100644 --- a/data/index.html +++ b/data/index.html @@ -24,6 +24,8 @@ opacity: 0; transition: opacity 0.6s cubic-bezier(.4,0,.2,1); visibility: hidden; + height: 100%; + line-height: 1.5; } body.loaded { @@ -67,7 +69,6 @@ } label { font-size: 0.9rem; - margin-bottom: 0.25rem; display: block; margin-top: 0.75rem; } @@ -194,6 +195,18 @@ textarea::placeholder { select option { color: black; } + + .geo-disabled{ + opacity: 0.5; + background: transparent; + border: 0.1rem white solid; + cursor: not-allowed; + } + + .geo-disabled:hover{ + transform: none; + box-shadow: none; + } @keyframes spin { 0% { transform: rotate(0deg); } @@ -303,10 +316,15 @@ textarea::placeholder { + -
- Visit OpenWeatherMap to find your location.

- Location format examples: City, Country Code - Osaka, JP | ZIP,Country Code - 94040, US | Latitude, Longitude - 34.6937, 135.5023 +
+ Location format examples: City, Country Code - Osaka, JP | ZIP,Country Code - 94040, US | Latitude, Longitude - 34.6937, 135.5023 +
+

Clock Settings

@@ -519,7 +537,7 @@ textarea::placeholder { - + @@ -557,7 +575,8 @@ textarea::placeholder {
- Project by: M-Factory + Project by: M-Factory
+ Location data by: GeoPlugin
@@ -593,7 +612,9 @@ window.onload = function () { .then(data => { isAPMode = (data.mode === "ap"); if (isAPMode) { - document.querySelector('.footer').style.display = 'none'; + document.querySelector('.geo-note').style.display = 'block'; + document.getElementById('geo-button').classList.add('geo-disabled'); + document.getElementById('geo-button').disabled = true; } document.getElementById('ssid').value = data.ssid || ''; @@ -764,18 +785,20 @@ async function submitConfig(event) { removeReloadButton(); removeRestoreButton(); if (isAPMode) { - updateSavingModal("✅ Settings saved successfully!


Rebooting the device now... ", false); - - setTimeout(() => { - document.querySelector('html').style.height = '100%'; + updateSavingModal("✅ Settings saved successfully!

Rebooting the device now... ", false); + setTimeout(() => { document.getElementById('configForm').style.display = 'none'; - updateSavingModal("✅ All done!


You can now close this tab safely.", false); + document.querySelector('.footer').style.display = 'none'; + document.querySelector('html').style.height = '100vh'; + document.body.style.height = '100vh'; + document.getElementById('configForm').style.display = 'none'; + updateSavingModal("✅ All done!
You can now close this tab safely.

Your device is now rebooting and connecting to your Wi-Fi. Its new IP address will appear on the display for future access.", false); }, 5000); return; } else { - updateSavingModal("✅ Configuration saved successfully.


Device will reboot", false); - setTimeout(() => location.reload(), 3000); + updateSavingModal("✅ Configuration saved successfully.

Device will reboot", false); + setTimeout(() => location.href = location.href.split('#')[0], 3000); } }) .catch(err => { @@ -784,10 +807,10 @@ async function submitConfig(event) { if (isAPMode && err.message.includes("Failed to fetch")) { console.warn("Expected disconnect in AP mode after reboot."); showSavingModal(""); - updateSavingModal("✅ Settings saved successfully!


Rebooting the device now... ", false); + updateSavingModal("✅ Settings saved successfully!

Rebooting the device now... ", false); setTimeout(() => { - document.getElementById('configForm').style.display = 'none'; - updateSavingModal("✅ All done!


You can now close this tab safely.", false); + document.getElementById('configForm').style.display = 'none'; + updateSavingModal("✅ All done!
You can now close this tab safely.

Your device is now rebooting and connecting to your Wi-Fi. Its new IP address will appear on the display for future access.", false); }, 5000); removeReloadButton(); removeRestoreButton(); @@ -1036,6 +1059,36 @@ function setDimmingFieldsEnabled(enabled) { document.getElementById('dimBrightness').disabled = !enabled; } +function getLocation() { + fetch('http://www.geoplugin.net/json.gp') + .then(response => response.json()) + .then(data => { + document.getElementById('openWeatherCity').value = data.geoplugin_latitude; + document.getElementById('openWeatherCountry').value = data.geoplugin_longitude; + + const button = document.getElementById('geo-button'); + let label = data.geoplugin_city; + if (!label) label = data.geoplugin_region; + if (!label) label = data.geoplugin_countryName; + if (!label) label = "Location Found"; + + button.textContent = "Location: " + label; + button.disabled = true; + button.classList.add('geo-disabled'); + + console.log("Location fetched via GeoPlugin. Consider crediting them: https://www.geoplugin.com/"); + }) + .catch(error => { + alert( + "Failed to guess your location.\n\n" + + "This may happen if:\n" + + "- You are using an AdBlocker (GeoPlugin might be blocked)\n" + + "- There is a network issue\n\n" + + "You can visit https://openweathermap.org/find to manually search for your city and get latitude/longitude." + ); + }); +} + \ No newline at end of file