Larger cover art in 'playback' view

Wow, thanks for that. Looking forward to trying it out :slight_smile:

I finally had some time to try this. It’s definitely an improvement but there’s more I wish I could change (e.g. centering the art more in the page and removing some of the duplicated info), but I’m pretty sure that some of the changes would involve changing more than just the style sheet :slight_smile: Anyway, thanks again!

@2aCD,
I’ve been trying for hours to understand and modify the structure of this page but I can’t seem to find the right CSS references. Do you have any idea how I would take your design further by eliminating the text above the cover art, which would create more space, and horizontally centering the cover art more in the available space? I have a feeling that the javascript files will need modification to achieve this.

Hi Volumious,
to disable track info it’s needed a new entry: ‘disable:none’ on the right place. I have add this entry and define it as variable to set it on the begin of file. For move and resize I have also add new variables.

app-313de2febe.zip (38.9 KB)

With search you find the place, where I have add the values.

Have fun and best regards
2aCD

Thanks, @2aCD! Definitely getting closer :slight_smile: I have removed some unused menu items, which cleans things up, and this is the current state shown in the top image below. Still trying to figure out how to make the cover art larger and more centered, as the the bottom image : )

The final piece of the puzzle will be to use “display: none;” on the volume container div on the bottom right volume control but only for this playback view. Other views will need the volume control.

What did you mean by the ‘resize’ parameters? I didn’t find any variables which seemed to apply to the cover art size.

I have add this variables on the begin of css file with comments to use. The resize value set to 20px or so , don’t forget the px after the value

1 Like

Ok, found it, Thanks. I was initially confused by the ‘track info’ label in the CSS comments. Here is the result at 80px:

1 Like

I finally found a way to move the cover to the right. It’s probably not a perfect solution for very large screen sizes but it works well on my laptop. In case it helps other I will post the method here:

Open /volumio/http/www3/scripts/app-40ba15eb14.js and find two instances of the following string:
<img ng-if="trackInfo.playerService.state.albumart" ng-src

In both cases, modify the DIV tag immediately before both of these image tags by adding align=“right”

Should look like this:

The result:

Pretty happy with this :slight_smile:

1 Like

Hi @2aCD I am trying to copy this file (from a Windows computer to Volumio via Putty) but I am getting this error:
“ssh: Could not resolve hostname c: Name or service not known”

I am using:

scp C:\app-313de2febe.css volumio@192.168.X.XX:/volumio/http/www3/styles/

What am I doing wrong? Sorry I am quite noob with SSH…

1 Like

looks like your ip has changed… or you did not change the X.XX to your ip
are you on a windows machine then use this tool!
https://winscp.net/eng/upgrade.php?v=5.17.9.10905&lang=0413&isinstalled=1&beta=0&to=5.17.10&utm_source=winscp&utm_medium=app&utm_campaign=5.17.9

login is volumio pass volumio + ip of your rpi

after that go to the folder you need and drag and drop the files in place…

Thanks @dvo yes I am on a Windows machine, connecting to Volumio via Putty. The IP is correct, I double checked.

Oh this is much easier, with WinSCP it was easy peasy. Many thanks @dvo!

your welcome :slight_smile: let’s make life eazy…

Sorry for digging up the thread.

Basing on all the conversation in the thread I have managed to enlarge the album art and change the layout a bit.

I would like to remove both volume and time cricled on the right and leave the album art with titles alone.
Which files are responsible for overall elements layout? I have only chaned the app_number.css file.

BR
Jakub

1 Like

Nokub…

do it like this … what version are you running?

I use 2.878 Volumio version.
When I try to install theme from linked thread I get “No matching version - no installation possible!!” error.

update your volumio to the right version and you can alter a lot.
i think you will like it.

Now that Volumio v3 is close to release, we have to figure out how to make these same changes in the new code.

I’m a little disappointed that v3 still has the tiny album art but it’s not a huge deal to modify it.

AFAIK v3 doesn’t change anything in the UI so should be straightforward!

Technically apart from the new modular ALSA audio pipelines and the myVolumio plugin store, not much has changed in the back end…
The main changes are the in base operating system and all packages, that speed up the system :slight_smile:

1 Like

@ashthespy - there were changes in the CSS code even between 2.x versions so the modification has to be redone and retested every time there is a software update. Given that 3.x is still at release candidate stage, it’s not worth putting time into a version which will change within weeks and then again probably a few weeks later. I’ll wait for a really stable version.

I just wish Volumio would give us an interface option with larger cover art. At the moment, 75% of the layout is wasted space.