From 0f56d23d44ea6dc3a177dbfc8e7c5a261b698a58 Mon Sep 17 00:00:00 2001 From: ramforth Date: Fri, 31 Oct 2025 10:26:37 +0100 Subject: [PATCH] feat: Add location storage and hide input to weather overlay --- weather_overlay/README.md | 4 +++- weather_overlay/weather.html | 42 ++++++++++++++++++++++++++++++++++-- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/weather_overlay/README.md b/weather_overlay/README.md index ea08157..afc2ce3 100644 --- a/weather_overlay/README.md +++ b/weather_overlay/README.md @@ -16,5 +16,7 @@ This overlay displays the current weather for a specific location. It's designed 1. Open the `weather.html` file in your browser. 2. Enter a city name in the input field and click the "Update" button. - 3. The overlay will now show the weather for the new location. This location will be saved in your browser's local storage. + 3. The overlay will now show the weather for the new location. This location will be saved in your browser's local storage, so it will be remembered the next time you open the overlay. 4. You can now add the `weather.html` file as a browser source in OBS Studio. It will use the location you just set. + + **Note:** To reset the location, you can open the browser's developer tools (usually by pressing F12), go to the "Application" or "Storage" tab, find "Local Storage", and delete the `weather_latitude` and `weather_longitude` keys. diff --git a/weather_overlay/weather.html b/weather_overlay/weather.html index 11a480c..3a98df5 100644 --- a/weather_overlay/weather.html +++ b/weather_overlay/weather.html @@ -21,6 +21,26 @@ height: 50px; margin-right: 20px; } + #location-container { + background-color: rgba(0, 0, 0, 0.7); + border: 1px solid white; + padding: 10px; + margin-top: 20px; + z-index: 100; + } + #city-input { + padding: 5px; + border: 1px solid #ccc; + border-radius: 5px; + } + #update-button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #4CAF50; + color: white; + cursor: pointer; + } @@ -41,6 +61,17 @@ const defaultLatitude = 40.71; const defaultLongitude = -74.01; + function saveLocation(latitude, longitude) { + localStorage.setItem('weather_latitude', latitude); + localStorage.setItem('weather_longitude', longitude); + } + + function loadLocation() { + const latitude = localStorage.getItem('weather_latitude'); + const longitude = localStorage.getItem('weather_longitude'); + return { latitude, longitude }; + } + function fetchWeather(latitude, longitude) { const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`; @@ -66,7 +97,9 @@ if (data.results && data.results.length > 0) { const latitude = data.results[0].latitude; const longitude = data.results[0].longitude; + saveLocation(latitude, longitude); fetchWeather(latitude, longitude); + document.getElementById('location-container').style.display = 'none'; } else { alert("Could not find city. Please try again."); } @@ -107,8 +140,13 @@ return "https://openweathermap.org/img/wn/03d@2x.png"; // Cloudy } - // Initial fetch with default location - fetchWeather(defaultLatitude, defaultLongitude); + // Initial fetch + const storedLocation = loadLocation(); + if (storedLocation.latitude && storedLocation.longitude) { + fetchWeather(storedLocation.latitude, storedLocation.longitude); + } else { + fetchWeather(defaultLatitude, defaultLongitude); + }