Contemporary optimizations plugin for local connected displays

[2aCD]

WARNING!!! You install this plugin at your own risk. It is a workaround until the adjustments are integrated into an official version

Volumio:
We are going to cooperate with 2aCD to integrate his excellent mods for everyone, but in the meantime I strongly suggest not to apply this mod manually if you want to update volumio.

2aCD:
Therefore as workaround the optimizations now available as plugin.

Disable the plugin and after reboot all systemfiles goes back to original state, to make a system update of Volumio.

I like the contemporary design. It’s optimal for handy in portait or a standard display in landscape. But the 7" Raspberry original display is landscape with 400 pixel high, or rotate your handy to landscape - hm… and you see nothing optimal.
So I have make a little bit optimized the css stylesheet for Contemporary design. The result is just a suggestion to optimize the original. The advantage is, you can use the same Contemporary in portrait mode on your phone and landscape on your local connected display.

The most changes are only for landscape resolutions.

1. now play view with big albumart and player controls on the right side
2. library view with smaller footer smaller header and smaller player bar
3. the flexgrid for show albumarts a little bit smaller to show five covers instead 4 side by side.

here you see the result:

now also with an option for blur filter for background:

2 mods are included:

• Mod 1: for small landscape displays to 800x400, higher resolutions switch to standard PC-View
• Mod 2: for higher resolution, The mobile view still exist to 1920x1080

All css modifications are available as UI option

Download version 1.0.7 of plugin:
contemporary_advanced plugin

To install the plugin, create a folder /home/volumio/contemporary_advanced and copy the content of zip file to this folder and install it with:

cd /home/volumio/contemporary_advanced
volumio plugin install

To update the plugin from a previous version deactivate the previous plugin at first and reboot. Create a new folder /home/volumio/contemporary_advanced and copy the content of zip file to this folder and update your plugin with:

cd /home/volumio/contemporary_advanced
volumio plugin update

Please reboot after an update and press ‚save’ in all sections of plugin settings to restore your old settings!

Don’t use a system with the previous manually installed script of this plugin
Then it’s very important to start from a fresh install.
Thats the only way to use a later available inplace system update of Volumio.

Tested with versions:
3.569 (buster)

in addition to previous script some new options are available (for local display without touch):

• option to hide play buttons on ‘now play’
• option to hide go back arrow on ‘now play’
• option to use white or transparent background of albumart

Best regards
2aCD

PS
In addition you can find here my latest modifications to use the Contemporary Mods in combination with PeppyMeter as screen saver:
volumio project with 1920 display and peppymeter as screensaver

[Lintbf]

Hi,
Thanks a lot
I have a 4.3 inch display.
Can I use this file? To have the album art on 75 % of the screen I will find the info in the commented lines?
Thanks

[naimnatnod]

Hi 2aCD,

Does this work with a bigger screen? Currently I use the “Display Orientation” on Touch Display plugin to rotate to 90 degrees. However, this feature is only available on Raspberry Pi version. I wanted to use on Tinker Board S. If you method does work on the TBS that would be great.

Thank you.

Andy

[2aCD]

you find the albumart lines here: 9476

this is my change:

/* ----- changed begin new playbackpanel landscape ----- */ 
@media (orientation: landscape){
	#playbackPanelWrapper.mobile #albumartContainer {
		position: absolute;
		top: 10px;
		left: 10px;
		height: calc(100vh - 100px);
		width: calc(100vh - 100px);
		max-width: 50%;
	}
}
@media (orientation: portrait){
	#playbackPanelWrapper.mobile #albumartContainer {
		position: relative;
		margin: 10px;
	}
}
/* ----- changed end ----- */	

the portrait code is original. For landscape I have set an absolute position on the left side of max 50% of the landscape screen. The size is 100% from hight with a minus from 100 pixel.
Here you can test with other values.

with bigger screen resolutions the UI switch to the PC view with sidebar. The limit for this switching is 962 pixel widht. This is not changed. The bigger view is original. The best way to see the switching is a usage on a PC over http://volumio.local
You can change the size of browser window and see the different views.
I think the css file is the same on all different platforms. Is the filename correct then I think it works.
If my file not working you can switch back to the original file without risk, its only a css stylesheet.

Copy with sudo is necessary with the volumio account in winscp

[naimnatnod]

I am able to open the css file and be able to modify it. However, I’m not a programmer. Could you please give me a step by step to “Copy with sudo is necessary with the volumio account in winscp”?

I am a Mac user but have a Windows machine available. Thanks.

Andy

[2aCD]

sorry it was my mistake, no sudo is needed. The user volumio have enough permissions to write in folder /volumio/http/www3/styles/.

1. enable ssh for Volumio on the site http://volumio.local/dev

2. then you can connect with winSCP and user Volumio PW Volumio and Port 22 to server volumio.local

3. navigate at first up to root and then to /volumio/http/www3/styles/

4. copy the original css file app-313de2febe.css (936d2e26fe.css) to your local disc and rename the file on your volumio server

5. copy the new file from local disc to /volumio/http/www3/styles/
   thats all, refresh the site on PC and see.
   Have you a connected display direct to raspberry then needs a restart.

[Lintbf]

Hi,
Regarding step4, why do I need to rename it? To what name I should rename? I just copy the new css file to same. Location no?
Thanks

[2aCD]

It’s a personal doing of me. Never overwrite an original file. Always rename the original and copy the new with original name. The copy of original to a local place is an additional security.
Change I more then one files, I have a set of original files on my PC. It’s not necessary to do this exactly.

[Lintbf]

Thanks for explaining this
Pls help me on this topic.
Currently I use the 4.3 inch display. I am using the clasic interface. In userconfig.txt I have added those lines
Frame buffer _widith =767
Frame buffer height = 428
Frame_buffer aspect=1
The results is like this

How can I move the circle in the wright size of the display, what lines should I modify ?
Thanks

[Andy_Yong]

1. I enabled ssh for Volumio on the site http://volumio.local/dev
2. I use WinSCP and did what you said by use Volumio for user and PW on Port 22 to volumio.local (Host name) and the File protocal is “SFTP”. I got an “Access denied”. I tried different passwords as “Volumio”, “volumio”, “Volumio2”, “volumio2” and all are denied.!

Any idea?

Capture 1|665x500

[2aCD]

username and password volumio not Volumio. also username is casesensitive

[2aCD]

@Lintbf
I have no changes at time for classic design. To move the cirle to right side I have only a litle change in /volumio/http/www3/styles/app-e831b7a181.css

app-e831b7a181.zip (34.5 KB)

only added this lines:

/* ----- begin change ------- */
@media (orientation: landscape) and (max-width: 767px) {
    #trackManager {
        left: 50%;
    }
}
/* ----- end change ------- */

you can find it with /* ----
its only for your test

[Andy_Yong]

Yes, all lower case “volumio” works for both user name and password.

My screen is 1080 resolution (1920x1080). I tried to change the “100px” to several different numbers all the way up to “900” but it didn’t change on the screen that attached to the Tinker Board S.

Any value or area that I should play around with? What I need is to have it shows like yours, the album cover take the half screen on the left. This is only for a distant view only.

[2aCD]

1920 is a full HD. The limit to switch from mobile to full view is 800px width. What you need is, to move this limit over 1920px width for the play view. See the @media tags to move this limit. But it’s a little bit tricky to do this different for different views.
I’ll play around a little bit…

[Lintbf]

Hi,
I have read a little bit about the css pixels handling and is not that easy I realy appreciate your work. I will think on how do I want to look the volumio interface on dsi display on classic or contemporary layout. I guess I will go with contemporary. As soon as I have a layout I will tag you for help.
Many thanks in advance.

[michel8166]

thanks, works perfectly and is just as nice to operate than the original layout and personally I think it also looks nicer.

3.5 inch touchscreen LCD A v3, 480 x 320 pixel.
XPT-2046 touch controller.
volumio-2.861-2020-12-22-pi img.
raspberry 4b 2gb.

[2aCD]

Oh nice, I’m glad to hear that’s also looks better on a 3,5" 480 x 320 display.

[2aCD]

Hi together, the next modified css only switch to PC-View, if the resolution grater then 1920x1080. FullHD displays run also in mobile view with this css. The grid to show the albumarts is a litte bit changed to show more albums with this bigger resolutions.

A download v5.3 at first post exist:

have fun and best regards

[Andy_Yong]

Thanks 2aCD.

Andy

[Andy_Yong]

Hi 2aCD,

I found that the file “app-e831b7a181.css” is in “/volumio/http/www/styles/” so I replaced the file with yours but after rebooting there is nothing changed!

Advice?

Andy