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); + }