Radio Paradise Now Playing

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

1 Like

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()

2 Likes

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

  • main
  • mellow
  • rock
  • world

When you tap on the widget, it will play the corresponding FLAC stream in VLC.

Gist: https://gist.github.com/marco79cgn/195f8d5332069b0cadf1bb7cfd7a304a

1 Like

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.