Restore Overlays repository to functional state with original weather overlay
This commit is contained in:
Ramforth
@@ -1,22 +0,0 @@
|
|||||||
# Weather Overlay
|
|
||||||
|
|
||||||
This overlay displays the current weather for a specific location. It's designed to be used as a browser source in streaming software like OBS Studio.
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
1. **Add to OBS Studio:**
|
|
||||||
|
|
||||||
* Add a new "Browser" source to your scene.
|
|
||||||
* Set the URL to the `weather.html` file in this directory.
|
|
||||||
* Set the width and height to your desired dimensions.
|
|
||||||
|
|
||||||
2. **Customize Location:**
|
|
||||||
|
|
||||||
To set your location, you need to open the `weather.html` file in a regular web browser (like Firefox or Chrome) first.
|
|
||||||
|
|
||||||
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, 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.
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Weather Overlay</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: white;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
#weather-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#weather-icon {
|
|
||||||
width: 50px;
|
|
||||||
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>
|
|
||||||
<div id="weather-container">
|
|
||||||
<img id="weather-icon" src="" alt="Weather Icon">
|
|
||||||
<div>
|
|
||||||
<h1 id="temperature"></h1>
|
|
||||||
<p id="weather-description"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="location-container">
|
|
||||||
<input type="text" id="city-input" placeholder="Enter city name">
|
|
||||||
<button id="update-button">Update</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
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`;
|
|
||||||
|
|
||||||
fetch(apiUrl)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
const temperature = data.current_weather.temperature;
|
|
||||||
const weatherCode = data.current_weather.weathercode;
|
|
||||||
|
|
||||||
document.getElementById('temperature').textContent = `${temperature}°C`;
|
|
||||||
document.getElementById('weather-description').textContent = getWeatherDescription(weatherCode);
|
|
||||||
document.getElementById('weather-icon').src = getWeatherIcon(weatherCode);
|
|
||||||
})
|
|
||||||
.catch(error => console.error('Error fetching weather data:', error));
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCoordinates(city) {
|
|
||||||
const geocodingUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${city}`;
|
|
||||||
|
|
||||||
fetch(geocodingUrl)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
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.");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => console.error('Error fetching coordinates:', error));
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('update-button').addEventListener('click', () => {
|
|
||||||
const city = document.getElementById('city-input').value;
|
|
||||||
if (city) {
|
|
||||||
getCoordinates(city);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function getWeatherDescription(code) {
|
|
||||||
// This is a simplified mapping. You can expand it for more detailed descriptions.
|
|
||||||
if (code === 0) return "Clear sky";
|
|
||||||
if (code > 0 && code < 4) return "Partly cloudy";
|
|
||||||
if (code > 44 && code < 49) return "Fog";
|
|
||||||
if (code > 50 && code < 58) return "Drizzle";
|
|
||||||
if (code > 60 && code < 68) return "Rain";
|
|
||||||
if (code > 70 && code < 78) return "Snow";
|
|
||||||
if (code > 80 && code < 83) return "Rain showers";
|
|
||||||
if (code > 94) return "Thunderstorm";
|
|
||||||
return "Cloudy";
|
|
||||||
}
|
|
||||||
|
|
||||||
function getWeatherIcon(code) {
|
|
||||||
// This is a simplified mapping. You can expand it with more icons.
|
|
||||||
if (code === 0) return "https://openweathermap.org/img/wn/01d@2x.png"; // Clear sky
|
|
||||||
if (code > 0 && code < 4) return "https://openweathermap.org/img/wn/02d@2x.png"; // Partly cloudy
|
|
||||||
if (code > 44 && code < 49) return "https://openweathermap.org/img/wn/50d@2x.png"; // Fog
|
|
||||||
if (code > 50 && code < 58) return "https://openweathermap.org/img/wn/09d@2x.png"; // Drizzle
|
|
||||||
if (code > 60 && code < 68) return "https://openweathermap.org/img/wn/10d@2x.png"; // Rain
|
|
||||||
if (code > 70 && code < 78) return "https://openweathermap.org/img/wn/13d@2x.png"; // Snow
|
|
||||||
if (code > 80 && code < 83) return "https://openweathermap.org/img/wn/09d@2x.png"; // Rain showers
|
|
||||||
if (code > 94) return "https://openweathermap.org/img/wn/11d@2x.png"; // Thunderstorm
|
|
||||||
return "https://openweathermap.org/img/wn/03d@2x.png"; // Cloudy
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initial fetch
|
|
||||||
const storedLocation = loadLocation();
|
|
||||||
if (storedLocation.latitude && storedLocation.longitude) {
|
|
||||||
fetchWeather(storedLocation.latitude, storedLocation.longitude);
|
|
||||||
} else {
|
|
||||||
fetchWeather(defaultLatitude, defaultLongitude);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user