Contemporary optimizations plugin for local connected displays

2aCD · January 21, 2021, 10:26pm

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 · January 21, 2021, 11:50pm

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 · January 22, 2021, 4:58pm

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

enable ssh for Volumio on the site http://volumio.local/dev
then you can connect with winSCP and user Volumio PW Volumio and Port 22 to server volumio.local
navigate at first up to root and then to /volumio/http/www3/styles/
copy the original css file app-313de2febe.css (936d2e26fe.css) to your local disc and rename the file on your volumio server
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 · January 22, 2021, 5:03pm

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 · January 22, 2021, 5:38pm

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 · January 22, 2021, 6:19pm

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 · January 22, 2021, 11:10pm

I enabled ssh for Volumio on the site http://volumio.local/dev
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 · January 22, 2021, 11:58pm

username and password volumio not Volumio. also username is casesensitive

2aCD · January 23, 2021, 12:05am

@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 · January 23, 2021, 12:55am

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 · January 23, 2021, 9:23am

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 · January 23, 2021, 1:09pm

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 · January 23, 2021, 2:37pm

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 · January 23, 2021, 3:41pm

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

2aCD · January 23, 2021, 10:25pm

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 · January 23, 2021, 11:25pm

Thanks 2aCD.

Andy

Andy_Yong · January 24, 2021, 12:11am

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

2aCD · January 24, 2021, 12:27am

Oh sorry that was not the right file, I have replace the download link now.

naimnatnod · January 24, 2021, 12:55am

Ok, I got it working. Thank you so much.

naimnatnod · January 24, 2021, 12:59am

I’m not trying to be picky. What if I want to make the album art to be bigger size, where do I change in your file?

Here is what I get from the “Touch Display” plugin (Pi4) with portrait orientation which “Touch Display” plugin (TBS) doesn’t have the orientation selection.