Compare commits
3 Commits
f1d8b97156
...
c45cfc9aa0
| Author | SHA1 | Date | |
|---|---|---|---|
| c45cfc9aa0 | |||
| 67ac5f3613 | |||
| d8bc68c7b5 |
15
Other overlay ideas.md
Normal file
15
Other overlay ideas.md
Normal file
@@ -0,0 +1,15 @@
|
||||
The overlays are to be posted to https://gitea.ramforth.net/ramforth/Overlays
|
||||
That way, the webpage on https://overlays.ramforth.net/ will be updated.
|
||||
Also, the web page structure for https://overlays.ramforth.net/ needs an overhaul, and needs more style and fun. Graphics, and pictures.
|
||||
|
||||
Basic ideas:
|
||||
* An overlay that can take RSS feeds and make a ticker style horizontal scroller for the headlines
|
||||
* A What's playing on Spotify overlay
|
||||
* Overlay for Youtube music "now playing"
|
||||
|
||||
New Suggestions:
|
||||
* **Live Chat Overlay:** Display chat messages from a YouTube or Twitch stream in real-time.
|
||||
* **Goals & Countdown Overlay:** Show stream goals (followers, subs, etc.) with a progress bar, or a countdown to a specific event.
|
||||
* **Social Media Feed:** Display a live feed of posts from a Twitter/X hashtag or account.
|
||||
* **System Monitor:** Show real-time PC stats like CPU/GPU temperature and usage.
|
||||
* **Weather Overlay:** Display the current weather for a specified location.
|
||||
26
README.md
26
README.md
@@ -1,8 +1,26 @@
|
||||
# Overlays
|
||||
# Ramforth Overlays
|
||||
|
||||
This repository serves as a collection of various overlays for streaming and other purposes.
|
||||
Each subdirectory contains overlays for a specific service or project.
|
||||
This repository contains a collection of browser source overlays for streaming software like OBS Studio.
|
||||
|
||||
## Available Overlays
|
||||
|
||||
* **Azuracast:** Overlays for displaying "Now Playing" information from an Azuracast radio station.
|
||||
* **Azuracast "Now Playing"**: Displays the currently playing song from an Azuracast radio station.
|
||||
* `overlay-text-only.html`: A clean, text-only overlay.
|
||||
* `overlay-with-album-art.html`: An overlay that includes album art.
|
||||
* **Weather Overlay**: Displays the current weather for a specific location.
|
||||
* **System Monitor Overlay**: Displays real-time system information like CPU and memory usage.
|
||||
|
||||
## Future Ideas
|
||||
|
||||
* An overlay that can take RSS feeds and make a ticker style horizontal scroller for the headlines
|
||||
* A What's playing on Spotify overlay
|
||||
* Overlay for Youtube music "now playing"
|
||||
* Live Chat Overlay: Display chat messages from a YouTube or Twitch stream in real-time.
|
||||
* Goals & Countdown Overlay: Show stream goals (followers, subs, etc.) with a progress bar, or a countdown to a specific event.
|
||||
* Social Media Feed: Display a live feed of posts from a Twitter/X hashtag or account.
|
||||
|
||||
## Usage
|
||||
|
||||
To use these overlays, you can clone this repository and open the HTML files in a browser source in your streaming software.
|
||||
|
||||
For detailed instructions on each overlay, please refer to the individual `README.md` files in the respective overlay directories.
|
||||
14
index.html
14
index.html
@@ -75,8 +75,18 @@
|
||||
|
||||
<h3>Azuracast Radio Overlays</h3>
|
||||
<ul>
|
||||
<li><a href="/azuracast/overlay-text-only.html">Text-only Now Playing Overlay</a></li>
|
||||
<li><a href="/azuracast/overlay-with-album-art.html">Now Playing Overlay with Album Art</a></li>
|
||||
<li><a href="/overlay-text-only.html">Text-only Now Playing Overlay</a></li>
|
||||
<li><a href="/overlay-with-album-art.html">Now Playing Overlay with Album Art</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Weather Overlay</h3>
|
||||
<ul>
|
||||
<li><a href="/weather_overlay/index.html">Weather Overlay</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>System Monitor Overlay</h3>
|
||||
<ul>
|
||||
<li><a href="/system_monitor_overlay/index.html">System Monitor Overlay</a></li>
|
||||
</ul>
|
||||
<p>For detailed usage instructions and to understand how to deploy these overlays, please refer to the <a href="https://gitea.ramforth.net/ramforth/Overlays/src/branch/main/azuracast/README.md">Azuracast README.md</a> within the Gitea repository.</p>
|
||||
|
||||
|
||||
46
system_monitor_overlay/index.html
Normal file
46
system_monitor_overlay/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System Monitor</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>System Monitor</h1>
|
||||
<div>
|
||||
<h2>CPU Usage</h2>
|
||||
<p id="cpu-usage"></p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Memory Usage</h2>
|
||||
<p id="memory-usage"></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function fetchStats() {
|
||||
fetch('http://localhost:8000/stats')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('cpu-usage').textContent = `${data.cpu_percent}%`;
|
||||
document.getElementById('memory-usage').textContent = `${data.memory_percent}%`;
|
||||
})
|
||||
.catch(error => console.error('Error fetching system stats:', error));
|
||||
}
|
||||
|
||||
// Fetch stats every 2 seconds
|
||||
setInterval(fetchStats, 2000);
|
||||
|
||||
// Initial fetch
|
||||
fetchStats();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
25
system_monitor_overlay/server.py
Normal file
25
system_monitor_overlay/server.py
Normal file
@@ -0,0 +1,25 @@
|
||||
import psutil
|
||||
import http.server
|
||||
import socketserver
|
||||
import json
|
||||
|
||||
PORT = 8000
|
||||
|
||||
class SystemInfoHandler(http.server.SimpleHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
if self.path == '/stats':
|
||||
self.send_response(200)
|
||||
self.send_header('Content-type', 'application/json')
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.end_headers()
|
||||
stats = {
|
||||
'cpu_percent': psutil.cpu_percent(interval=1),
|
||||
'memory_percent': psutil.virtual_memory().percent
|
||||
}
|
||||
self.wfile.write(json.dumps(stats).encode('utf-8'))
|
||||
else:
|
||||
super().do_GET()
|
||||
|
||||
with socketserver.TCPServer(('', PORT), SystemInfoHandler) as httpd:
|
||||
print("serving at port", PORT)
|
||||
httpd.serve_forever()
|
||||
79
weather_overlay/index.html
Normal file
79
weather_overlay/index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!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;
|
||||
}
|
||||
</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>
|
||||
|
||||
<script>
|
||||
const latitude = 40.71;
|
||||
const longitude = -74.01;
|
||||
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 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
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user