Contemporary optimizations for small landscape displays (7" raspberry)

[2aCD]

Hi together,
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 reverse engineering to optimize the css stylesheet for Contemporary design. I have not the environment to change the original website. 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 small display.
To change the stylesheet I have copy the /volumio/http/www3/styles/app-313de2febe.css to local and unminimized the file for read and understand. All my changes are comment with /* ----- and to find.
The changes are only for small 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:

To test you can use my changed css file:
app-313de2febe.zip (39.1 KB)

Please check the volumio version befor you replace the file and backup the original.
The used Version is 2.861

The result you see with your phone (switch from portrait to landscape) or on a 7" Raspberry display
Now you cant try
best regards
2aCD

[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 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.

app-313de2febe.zip (39.6 KB)

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