I built a now-playing widget for Radio Paradise which shows album artwork and metadata. It queries a simple REST api (json) and loads the image. Once touched it opens the flac stream of Radioparadise in VLC (via callback-url).
That’s the script: https://gist.github.com/marco79cgn/195f8d5332069b0cadf1bb7cfd7a304a
Sure, that’s not that big a deal. You‘re looking for
let title = nowPlaying.data[0].title
let artist = nowPlaying.data[0].artist
let imageUrl
if (nowPlaying.data[0].imageUrl != null && nowPlaying.data[0].imageUrl.length > 0) {
imageUrl = nowPlaying.data[0].imageUrl
} else {
imageUrl = "https://www.npo3fm.nl/templates/npo3fm/images/placeholder-1by1.png"
}
let coverArt = await loadImage(imageUrl)
Try this:
let title = "THIS IS ALL UPPERCASE"
// transform to lowercase
title = title.toLowerCase()
// capitalize every first character
title.replace(/\b\w/g, function(c) {
return c.toUpperCase();
});
Unfortunately it’s not possible to display content side by side.
// add title and artist
let title = nowPlaying.title.toLowerCase()
// capitalize every first character
title = title.replace(/\b\w/g, function(c) {
return c.toUpperCase();
});
let titleTxt = widget.addText(title)
titleTxt.font = Font.boldSystemFont(12)
titleTxt.textColor = Color.white()
titleTxt.leftAlignText()
widget.addSpacer(2)
let artist = nowPlaying.artist.toLowerCase()
// capitalize every first character
artist = artist.replace(/\b\w/g, function(c) {
return c.toUpperCase();
});
let artistTxt = widget.addText(artist)
artistTxt.font = Font.systemFont(10)
artistTxt.textColor = Color.white()
artistTxt.textOpacity = 0.6
artistTxt.leftAlignText()
You could try to set the cover as background and play a little bit with transparency. Just change the last two digits of the Color (notice that there are 8, not 6).
const url = "https://www.npo3fm.nl/api/tracks"
const placeholder = "https://www.npo3fm.nl/templates/npo3fm/images/placeholder-1by1.png"
const logoURL = "http://franklyfilms.com/3fmlogo.png"
async function createWidget(nowPlaying) {
let widget = new ListWidget()
const threefmLogo = await loadImage(logoURL);
const logo = widget.addImage(threefmLogo)
logo.imageSize = new Size(38,18)
logo.rightAlignImage()
// load image
const coverArt = await loadImage(nowPlaying.image_url_400x400)
widget.backgroundImage = coverArt
widget.addSpacer()
// set gradient background
let startColor = new Color("#1c1c1c19")
let endColor = new Color("#1c1c1cb4")
let gradient = new LinearGradient()
gradient.colors = [startColor, endColor]
gradient.locations = [0.0, 1]
widget.backgroundGradient = gradient
widget.backgroundColor = new Color("1c1c1c")
// add title and artist
let title = nowPlaying.title.toLowerCase()
// capitalize every first character
title = title.replace(/\b\w/g, function(c) {
return c.toUpperCase();
});
let titleTxt = widget.addText(title)
titleTxt.font = Font.boldSystemFont(12)
titleTxt.textColor = Color.white()
titleTxt.leftAlignText()
widget.addSpacer(2)
let artist = nowPlaying.artist.toLowerCase()
// capitalize every first character
artist = artist.replace(/\b\w/g, function(c) {
return c.toUpperCase();
});
let artistTxt = widget.addText(artist)
artistTxt.font = Font.systemFont(10)
artistTxt.textColor = Color.yellow()
artistTxt.textOpacity = 1
artistTxt.leftAlignText()
widget.setPadding(8, 15, 10, 5)
widget.url = "npo3fm://"
return widget
}
// helper function to load and parse a restful json api
async function loadNowPlaying(coverArt) {
const req = new Request(url)
const json = await req.loadJSON()
return json.data[0]
}
// helper function to download an image from a given url
async function loadImage(imgUrl) {
const url = imgUrl !== null ? imgUrl : placeholder;
const req = new Request(url)
const image = await req.loadImage()
return image
}
const nowPlaying = await loadNowPlaying()
const widget = await createWidget(nowPlaying)
Script.setWidget(widget)
Script.complete()
widget.presentSmall()
I updated one of my first widgets, the Radio Paradise „Now Playing“.
The cover art is now full screen and you can now configure each of the 4 different FLAC streams by setting the widget parameter to either
When you tap on the widget, it will play the corresponding FLAC stream in VLC.
Gist: https://gist.github.com/marco79cgn/195f8d5332069b0cadf1bb7cfd7a304a
This is really cool - if only for the discovery of radio paradise! -
I know widget update rates are kind of iffy, but this one seems never to update! (Plays the radio station, but the cover is stuck) I’m not sure what may block this?
Hi Paul,
there might have been a bug in case one didn’t configure a station as a widget parameter (default).
I just upgraded the script on the gist. Please update and try again.
