feat: Add RSS Ticker Overlay
This commit is contained in:
@@ -89,6 +89,11 @@
|
||||
<li><a href="/system_monitor_overlay/system_monitor.html">System Monitor Overlay</a></li>
|
||||
<li><a href="/system_monitor_overlay/system_monitor_no_heading.html">System Monitor Overlay (No Heading)</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>RSS Ticker Overlay</h3>
|
||||
<ul>
|
||||
<li><a href="/rss_ticker_overlay/rss_ticker.html">RSS Ticker 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>
|
||||
|
||||
<div class="footer-info">
|
||||
|
||||
22
rss_ticker_overlay/README.md
Normal file
22
rss_ticker_overlay/README.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# RSS Ticker Overlay
|
||||
|
||||
This overlay displays headlines from an RSS feed as a horizontally scrolling ticker. 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 `rss_ticker.html` file in this directory.
|
||||
* Set the width and height to your desired dimensions.
|
||||
|
||||
2. **Customize RSS Feed:**
|
||||
|
||||
To set your RSS feed URL, you need to open the `rss_ticker.html` file in a regular web browser (like Firefox or Chrome) first.
|
||||
|
||||
1. Open the `rss_ticker.html` file in your browser.
|
||||
2. Enter the full URL of the RSS feed in the input field and click the "Update RSS" button.
|
||||
3. The ticker will now display headlines from your chosen RSS feed. This URL 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 `rss_ticker.html` file as a browser source in OBS Studio. It will use the RSS feed you just set.
|
||||
|
||||
**Note:** To reset the RSS feed URL, 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 `rss_feed_url` key.
|
||||
120
rss_ticker_overlay/rss_ticker.html
Normal file
120
rss_ticker_overlay/rss_ticker.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RSS Ticker Overlay</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden; /* Hide scrollbar */
|
||||
}
|
||||
#ticker-container {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
#ticker-content {
|
||||
display: inline-block;
|
||||
padding-left: 100%; /* Start off-screen */
|
||||
animation: ticker-scroll 30s linear infinite;
|
||||
}
|
||||
@keyframes ticker-scroll {
|
||||
0% { transform: translate3d(0, 0, 0); }
|
||||
100% { transform: translate3d(-100%, 0, 0); }
|
||||
}
|
||||
#rss-input-container {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid white;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
#rss-url-input {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: 70%;
|
||||
}
|
||||
#update-rss-button {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="ticker-container">
|
||||
<span id="ticker-content">Loading RSS feed...</span>
|
||||
</div>
|
||||
|
||||
<div id="rss-input-container">
|
||||
<input type="text" id="rss-url-input" placeholder="Enter RSS Feed URL">
|
||||
<button id="update-rss-button">Update RSS</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
const defaultRssUrl = "https://www.nasa.gov/news-release/feed/"; // Default NASA news feed
|
||||
|
||||
function fetchRssFeed(rssUrl) {
|
||||
const corsProxy = "https://api.allorigins.win/get?url=";
|
||||
const url = `${corsProxy}${encodeURIComponent(rssUrl)}`;
|
||||
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) return response.json();
|
||||
throw new Error('Network response was not ok.');
|
||||
})
|
||||
.then(data => {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(data.contents, "text/xml");
|
||||
const items = xmlDoc.querySelectorAll("item");
|
||||
let headlines = [];
|
||||
items.forEach(item => {
|
||||
headlines.push(item.querySelector("title").textContent);
|
||||
});
|
||||
document.getElementById('ticker-content').textContent = headlines.join(" | ");
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching RSS feed:', error);
|
||||
document.getElementById('ticker-content').textContent = "Error loading RSS feed.";
|
||||
});
|
||||
}
|
||||
|
||||
function saveRssUrl(rssUrl) {
|
||||
localStorage.setItem('rss_feed_url', rssUrl);
|
||||
}
|
||||
|
||||
function loadRssUrl() {
|
||||
return localStorage.getItem('rss_feed_url');
|
||||
}
|
||||
|
||||
document.getElementById('update-rss-button').addEventListener('click', () => {
|
||||
const rssUrl = document.getElementById('rss-url-input').value;
|
||||
if (rssUrl) {
|
||||
saveRssUrl(rssUrl);
|
||||
fetchRssFeed(rssUrl);
|
||||
document.getElementById('rss-input-container').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Initial load
|
||||
const storedRssUrl = loadRssUrl();
|
||||
if (storedRssUrl) {
|
||||
fetchRssFeed(storedRssUrl);
|
||||
document.getElementById('rss-input-container').style.display = 'none';
|
||||
} else {
|
||||
fetchRssFeed(defaultRssUrl);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user