docs: Update README and index.html with new overlays
This commit is contained in:
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.
|
||||
@@ -1,51 +0,0 @@
|
||||
# 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.
|
||||
@@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Now Playing (Text Only)</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#song-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#artist {
|
||||
font-size: 18px;
|
||||
}
|
||||
#annotation {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="song-info">
|
||||
<div id="title"></div>
|
||||
<div id="artist"></div>
|
||||
<div id="annotation">radio.ramforth.net</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
|
||||
|
||||
function updateNowPlaying() {
|
||||
fetch(nowPlayingUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const song = data.now_playing.song;
|
||||
document.getElementById('title').textContent = song.title;
|
||||
document.getElementById('artist').textContent = song.artist;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching Now Playing data:', error);
|
||||
document.getElementById('title').textContent = 'Error';
|
||||
document.getElementById('artist').textContent = 'Could not fetch data';
|
||||
});
|
||||
}
|
||||
|
||||
// Update every 5 seconds
|
||||
setInterval(updateNowPlaying, 5000);
|
||||
|
||||
// Initial update
|
||||
updateNowPlaying();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Now Playing</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#album-art {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#song-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#artist {
|
||||
font-size: 18px;
|
||||
}
|
||||
#annotation {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="now-playing">
|
||||
<img id="album-art" src="" alt="Album Art">
|
||||
<div id="song-info">
|
||||
<div id="title"></div>
|
||||
<div id="artist"></div>
|
||||
<div id="annotation">radio.ramforth.net</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
|
||||
|
||||
function updateNowPlaying() {
|
||||
fetch(nowPlayingUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const song = data.now_playing.song;
|
||||
document.getElementById('title').textContent = song.title;
|
||||
document.getElementById('artist').textContent = song.artist;
|
||||
document.getElementById('album-art').src = song.art;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching Now Playing data:', error);
|
||||
document.getElementById('title').textContent = 'Error';
|
||||
document.getElementById('artist').textContent = 'Could not fetch data';
|
||||
});
|
||||
}
|
||||
|
||||
// Update every 5 seconds
|
||||
setInterval(updateNowPlaying, 5000);
|
||||
|
||||
// Initial update
|
||||
updateNowPlaying();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user