ramforth/Overlays
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add location storage and hide input to weather overlay

Browse Source
This commit is contained in:
ramforth
2025-10-31 10:26:37 +01:00
parent 1f02269e75
commit 0f56d23d44
2 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
weather_overlay/README.md
View File

@@ -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.

40
weather_overlay/weather.html
View File

@@ -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;
}
</style>
</head>
<body>
@@ -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}&current_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
// Initial fetch
const storedLocation = loadLocation();
if (storedLocation.latitude && storedLocation.longitude) {
fetchWeather(storedLocation.latitude, storedLocation.longitude);
} else {
fetchWeather(defaultLatitude, defaultLongitude);
}
</script>
</body>
</html>