commit d8bc68c7b53d515ab132e2d771a8ca7d19dc7913 Author: ramforth Date: Fri Oct 31 09:39:07 2025 +0100 feat: Initial commit of existing overlay files diff --git a/Other overlay ideas.md b/Other overlay ideas.md new file mode 100644 index 0000000..c4cd0bb --- /dev/null +++ b/Other overlay ideas.md @@ -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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..53c8000 --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +# 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. + +## Available Overlays + +* **Azuracast:** Overlays for displaying "Now Playing" information from an Azuracast radio station. \ No newline at end of file diff --git a/azuracast_readme.md b/azuracast_readme.md new file mode 100644 index 0000000..6dc610a --- /dev/null +++ b/azuracast_readme.md @@ -0,0 +1,51 @@ +# Azuracast Overlays + +This directory contains browser source overlays specifically designed for displaying "Now Playing" information from an Azuracast radio station. + +## Important Note + +The files hosted on `https://overlays.ramforth.net/azuracast/` are for **reference and demonstration purposes only**. For the latest versions, deployment instructions, and to customize these overlays for your own use, please clone the main `Overlays` Gitea repository. Users are expected to deploy these files themselves. + +## Features + +* **Two Overlay Variants:** + * `overlay-text-only.html`: A clean, text-only overlay showing the current song title and artist. + * `overlay-with-album-art.html`: An overlay that includes the album art for the current song. + +## Usage + +### OBS Studio: Browser Source Setup + +To add one of the overlays to your OBS Studio scene, follow these steps: + +1. **Choose an Overlay:** Decide whether you want to use the text-only overlay or the one with album art. + * **Text-only URL (Reference):** `https://overlays.ramforth.net/azuracast/overlay-text-only.html` + * **With Album Art URL (Reference):** `https://overlays.ramforth.net/azuracast/overlay-with-album-art.html` + +2. **Add a Browser Source:** In OBS Studio, right-click in the "Sources" panel and select "Add" -> "Browser". + +3. **Configure the Source:** + * Give the source a name (e.g., "Azuracast Overlay"). + * In the "URL" field, paste the URL of the overlay you chose. + * Set the "Width" and "Height" to your desired dimensions (e.g., 400x150). + * Click "OK". + +4. **Position the Overlay:** You can now resize and position the overlay within your scene as needed. + +### OBS Studio: Media Source Setup + +To add the radio stream itself to your OBS scene, you can use a "Media Source". This will allow you to play the radio audio directly in your stream. + +1. **Add a Media Source:** In OBS Studio, right-click in the "Sources" panel and select "Add" -> "Media Source". + +2. **Configure the Source:** + * Give the source a name (e.g., "Radio Stream"). + * Uncheck the "Local File" box. + * In the "Input" field, paste the following URL: `https://radio.ramforth.net/listen/lo-fi/radio.mp3` + * Click "OK". + +3. **Manage Audio:** You can now control the volume of the radio stream from the "Audio Mixer" panel in OBS. + +## Customization + +To customize the overlays, you can fork this repository and edit the HTML and CSS files directly. You can change the fonts, colors, layout, and more to match your stream's branding. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9b519b2 --- /dev/null +++ b/index.html @@ -0,0 +1,116 @@ + + + + + + Ramforth Overlays (Reference) + + + +
+

Ramforth Overlays (Reference)

+

This page provides a reference and overview of various streaming overlays developed by Ramforth. The files hosted here are for demonstration and reference purposes only.

+ +
+ Important: For the latest versions, deployment instructions, and to customize these overlays for your own use, please clone the official Gitea repository. We do not provide hosting for convenience; users are expected to deploy these files themselves. +
+ +

Repository

+

All source code and comprehensive documentation for these overlays can be found on our Gitea instance:

+

https://gitea.ramforth.net/ramforth/Overlays

+ +

Available Overlays (Reference Files)

+

Below are links to the current reference versions of the overlays hosted on this server:

+ +

Azuracast Radio Overlays

+ +

For detailed usage instructions and to understand how to deploy these overlays, please refer to the Azuracast README.md within the Gitea repository.

+ +
+

Current Time:

+

Last Gitea Update:

+
+
+ + + + \ No newline at end of file diff --git a/overlay-text-only.html b/overlay-text-only.html new file mode 100644 index 0000000..a066395 --- /dev/null +++ b/overlay-text-only.html @@ -0,0 +1,66 @@ + + + + + + Now Playing (Text Only) + + + +
+
+
+
radio.ramforth.net
+
+ + + + diff --git a/overlay-with-album-art.html b/overlay-with-album-art.html new file mode 100644 index 0000000..53e4d50 --- /dev/null +++ b/overlay-with-album-art.html @@ -0,0 +1,80 @@ + + + + + + Now Playing + + + +
+ Album Art +
+
+
+
radio.ramforth.net
+
+
+ + + + diff --git a/system_monitor_overlay/index.html b/system_monitor_overlay/index.html new file mode 100644 index 0000000..fcc3f52 --- /dev/null +++ b/system_monitor_overlay/index.html @@ -0,0 +1,46 @@ + + + + + + System Monitor + + + +

System Monitor

+
+

CPU Usage

+

+
+
+

Memory Usage

+

+
+ + + + diff --git a/system_monitor_overlay/server.py b/system_monitor_overlay/server.py new file mode 100644 index 0000000..e4b176e --- /dev/null +++ b/system_monitor_overlay/server.py @@ -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() diff --git a/weather_overlay/index.html b/weather_overlay/index.html new file mode 100644 index 0000000..503978c --- /dev/null +++ b/weather_overlay/index.html @@ -0,0 +1,79 @@ + + + + + + Weather Overlay + + + +
+ Weather Icon +
+

+

+
+
+ + + +