[PLUGIN] Now Playing

[patrickkfkan]

Hi everyone,

I’ve made a plugin that provides a ‘Now Playing’ screen for Volumio devices with connected displays.

In my case, I have a MHS 3.5" LCD with 480x320 resolution. With its small screen estate, low resolution and resistive touch that sucks, combined with the fact that the device is 3 meters away from where I sit, I basically won’t use the screen for browsing media. I still want it to show what Volumio is playing and, as you probably know, Volumio’s UI is not particularly optimized for these small screens.

2aCD’s work has been amazing, but I wanted to write my own plugin that serves a separate screen. This way, I can keep it totally independent of Volumio’s own UI and have more flexibility when making changes along the way.

The Now Playing plugin should work with various resolutions, and you can customize parts of the screen like font size, colors, album art size and background. Here are some screenshots:

480x320px (default styles):

800x480px (default styles):

800x480px (customized background style + widget colors + center text alignment):

1280x400px (custom background image + widget colors + center text alignment):

480x800px (portrait mode; plain color background + center text alignment + ‘contain’ album art fit):

To change volume, tap the down arrow at the top (or swipe down from top*):

*Swiping only tested in Chrome DevTools environment (I do not have a capacitive touchscreen for actual testing )

You can still access Volumio’s UI by tapping ‘Switch to Volumio interface’:

Tap ‘Switch to Now Playing’ to go back to the Now Playing screen.

Source / readme: GitHub - patrickkfkan/volumio-now-playing

Installation

Volumio 3 : Volumio UI → Plugins → User Interface
Volumio 2 : Volumio UI → Plugins → Miscellaneous

Let me know in this thread if you have any questions or suggestions.

-Patrick

[dvo]

youtube images are just a little dot on your left.
touch slider works ok.
auto seems to not work… costum works… ( album art size )

[patrickkfkan]

What about the other images when size is set to Auto (e.g. Web Radio)?

[dvo]

all will be on auto a dot.

[patrickkfkan]

Ahh…right. That’s Firefox, right? I should mention that it’s meant to be viewed in a Chromium-based browser like Chrome / Edge, because Volumio uses Chromium too.

But I’ll see if I can fix this so it can be also be viewed in FireFox.

[dvo]

oke will test it in chrome to yes in chrome based browser auto works oke .

[patrickkfkan]

Album art appearing as dot in FireFox should be fixed now. Update according to instructions in first post of this thread.

[dvo]

oke gonna test tested and works
slider with touch in firefox doesn’t work that well (needs multiple presses) but in chrome it does.

[patrickkfkan]

v0.1.0-b.3:
Added ‘Border Radius’ setting to album art (but might not have intended effect if Album Art Fit is set to ‘contain’)

E.g. 0.5em:

[patrickkfkan]

v0.1.3:
More customization settings

480x320px (Show albumart: off; Background: albumart; Max title lines: 2)

Customized for 144x144px

Added a volume change indicator that appears when you change volume externally (i.e. not through the Now Playing screen):

Probably useful if your device has a rotary encoder or buttons that controls the volume.

[danielfelix]

Very good! And add a link to information about the song, artist, album? Will it be very complicated?

[patrickkfkan]

I don’t think I can do it at the moment…

What kind of info would you like to see if clicking on a link?

[danielfelix]

I think of something like Roon has, it shows data on the artist, the theme, lyrics, etc.
It may be simpler as RadioParadise does on its website, when playing a song, it shows you the lyrics of the song and an extract from the artist’s Wikipedia content.

[ashthespy]

And like (my)Volumio’s metadata discovery? PUBLIC BETA TEST:New Volumio release with metadata discovery

@volumio

Some screenshots for you:

[danielfelix]

I did not remember about that. Superstar Plan. For poor people?

[ashthespy]

I can only tell you what I did – spend time learning to code…
But hey, time isn’t cheap either?

[patrickkfkan]

As ash pointed out, artist info / credits is available with Superstar subscription. Assuming I can add a similar feature to the plugin, I am not sure if Volumio will be fine with this (and continue to allow the plugin to be published).

As for lyrics - that is a good suggestion. However, most lyric services do not provide an API free of charge. If you can find me a service that allows you to retrieve lyrics without limit (and legally), please let me know and I can consider integrating it into the plugin (or create another plugin for it).

[SimonE]

I’m so incredibly happy with this amazing plugin. I spent a couple of hours tinkering with the huge number of options and now my standard 7" display looks fantastic. Thank you so much for the work you put into this. Exactly what I was hoping for.
Simon

[danielfelix]

That’s what I was thinking … do you have a 7 "standard display connected to the Rasp via HDMI? Can you expand the description of your setup?

[volumio]

@patrickkfkan

As ash pointed out, artist info / credits is available with Superstar subscription. Assuming I can add a similar feature to the plugin, I am not sure if Volumio will be fine with this (and continue to allow the plugin to be published).

I have an idea.

First, to do it properly and legally, you have to use sources which allow you to use metadata, which is usually copyrighted material.
The way we did it was:

• Become a sponsor of musicbrazinz, by donating regularly to the project. This means we are legally allowed to use this IP (and we donate to a very nice project).
• Set up an own instance of a musicbrainz server (to not overload the main MB server)
• Set up an API which retrieves metadata.

This feature is available only for MyVolumio Superstar subscribers. But this does not mean it shall be reserved only to Volumio official UI.
We could provide the APIs for metadata also to plugins developers, so they can come up with other brilliant ideas on how to do it.
So if one user has an appropriate account, then the plugin can show the additional metas.

If you guys like the idea, I can document this API