Hey all, I’ve been messing with Claude (so AI disclaimer!) but I’ve managed to get a News Ticker tile going for Sharptools You may need to customise it with choice of feed. Add this as a custom tile under Developer Tools and let me know how you like it!
<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
"schema": "0.2.0",
"settings": [],
"name": "News Ticker",
"dimensions": {"height": 1, "width": 4}
}
</script>
<!-- Do not edit above -->
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: transparent; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-wrap {
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
height: 100%;
position: relative;
}
.ticker-track-wrap {
flex: 1;
overflow: hidden;
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.ticker-track {
display: flex;
align-items: center;
white-space: nowrap;
animation: ticker-scroll 120s linear infinite;
will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item {
font-family: sans-serif;
font-size: 22px;
color: #ddd;
padding: 0 24px;
white-space: nowrap;
}
.ticker-item::before {
content: '●';
color: #c0392b;
margin-right: 10px;
font-size: 16px;
}
.ticker-error {
font-family: sans-serif;
font-size: 22px;
color: #888;
padding: 0 16px;
}
</style>
<div class="ticker-wrap">
<div class="ticker-track-wrap">
<div class="ticker-track" id="ticker">
<span class="ticker-error">Loading news...</span>
</div>
</div>
</div>
<script>
var PROXY = 'https://api.rss2json.com/v1/api.json?rss_url=';
var FEEDS = [
{
url: 'https://www.newsnationnow.com/feed/',
label: 'NewsNation',
color: '#1a6bb5',
max: 20
},
{
url: 'https://baynews9.com/services/contentfeed.fl%7ctampa.hero.rss',
label: 'Local News',
color: '#c0392b',
max: 20
},
{
url: 'https://www.wtsp.com/feeds/syndication/rss/weather/forecast',
label: '⛅ Weather',
color: '#1a3a6b',
max: 4
}
];
async function loadFeed(feed) {
try {
var r = await fetch(PROXY + encodeURIComponent(feed.url));
var d = await r.json();
if (!d.items || d.items.length === 0) return [];
return d.items.slice(0, feed.max).map(function(item) {
return { title: item.title, label: feed.label, color: feed.color };
});
} catch(e) {
return [];
}
}
async function loadAllFeeds() {
var allItems = [];
for (var i = 0; i < FEEDS.length; i++) {
var items = await loadFeed(FEEDS[i]);
allItems = allItems.concat(items);
}
if (allItems.length === 0) {
document.getElementById('ticker').innerHTML =
'<span class="ticker-error">Unable to load news feeds</span>';
return;
}
var track = document.getElementById('ticker');
var html = '';
var doubled = allItems.concat(allItems);
doubled.forEach(function(item) {
html += '<span class="ticker-item">' +
'<span style="background:' + item.color + ';color:#fff;font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 8px;margin-right:10px;border-radius:2px;">' +
item.label + '</span>' +
item.title +
'</span>';
});
track.innerHTML = html;
var totalWidth = track.scrollWidth;
var duration = Math.max(40, totalWidth / 120);
track.style.animationDuration = duration + 's';
}
loadAllFeeds();
setInterval(loadAllFeeds, 300000);
</script>
