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
Hey Marco! This looks absolutely great! I really want to do the same with my local radio station here in The Netherlands. Can you help me with that? The track information comes from here. Sometimes there is no album cover url available in the api and then I want to use this image.
I see you are a big fan of building widgets in Scribtable, I really appreciate it!
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)
Great!
Do you also now how I change the titel and artist text in some uppercase? (The problem here is is that the Api send them all in uppercase)
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();
});
Thanks! I really appreciate that! This is what I have now. Can you help me to change the text to some uppercase and I want the logo down a little so that it is the same height as the album cover.
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()
Wow man! This is absolutely next level. Thank you very much!! It also works beautifully in the other size widgets.
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.
