Contemporary optimizations plugin for local connected displays

2aCD · January 24, 2021, 9:36pm

The Font-Size of title for big resolution is here:

@media (min-width: 1601px) {
    #trackInfo-compact #trackInfo-title {
        font-size: 24px;
    }
}

But it is also used for the footer in browse view. You can’t it resize to much.

Lintbf · January 24, 2021, 9:44pm

Perfect fit . Finally after 1 year of volumio I 100 % like the UI ,

Now remain to increase the wright part of the screen
The play symbol can be increased ?

Andy_Yong · January 24, 2021, 10:24pm

This is it! Thanks again 2aCD. You are THE MAN!!!

Lintbf · January 24, 2021, 10:28pm

Hello ,
Could you please post the lines where you have modified and also with what values
Indeed this is fabulous with this new UI
Many thanks

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

Hi,

here now the latest css files for download. I have create configuration variables on the top of file, no more searching to find a configurable value.
In addition you can define a border around the albumart (set to 0px if not needed). Also you can change the background darkness.

first css is for small landscape displays and smartphone in landscape. The standard PC view is default. It’s a replacement for the first post:

Download removed, further down v5 exist

second css expand the mobile view up to 1920 full hd

Download removed, further down v5 exist

and here the latest installation to UI if you want.

Download removed, an updated download at first post exist

Lintbf · January 26, 2021, 6:12pm

Hi,
I worked with the variables file and is quite easy now. :).

It is possible to increase also the artist name not only the track info, name.
The song play, next etc can also be increased?
Thanks for this easy solution.

cnidus · January 26, 2021, 9:37pm

Thanks for this work, for me getting the UI to be a little more visible on my 5" DSI display was a goal, so nice to have a starting point.

I added a param for the TrackInfo-Artist also, as that seems to be used for the stream name when doing web radio.

Couple suggestions:

Is there a way to make the track / artist scale to multiple rows
Maybe align the track/artist to vertical center (of the right pane)
Align the playback buttons to vertical-bottom.
Seems like the text size is also used in the bottom "now playing bar when jumping into the main menu, which in my case seems to be too large in that spot. I’m thinking of changing the CSS to reference a new class, but unsure if that would break other things.

Any idea how to achieve these? I can take a stab at it.

app-313de2febe_3.css.zip (39.1 KB)

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

Hi, I have implement now the text wrap for artist and title, if that to large. I‘m not complete ready with all checks.
The player bar on main menu is a problem, have you enlarge the title to big. It use the same class. At time I have no solution for this. I‘ll try to create a new class.

Andy_Yong · January 27, 2021, 1:32am

Here is my actual 15.4" screen that connected to Tinker Board S via HDMI and the screen resolution is 1280x800. I thought it was 1920x1080 that’s why I was playing with my pc screen setting as 1920x1080.

As you can see the three elements that I want to be standing out are: album art, file rate and song title. I am pretty much getting what I want. I know all the info on the right side are set as center from 50% of the screen in landscape mode. If I want to move them a little bit to the right, where can I play around with the margin setting?

My current set up is as follow:

For Album Art picture:
@media (orientation: landscape) and (min-width: 1200px){
#playbackPanelWrapper.mobile #albumartContainer {
top: 0px;
left: 0px;
height: calc(110vh - 150px);
width: calc(110vh - 150px);
max-width: 55%;

For Track Title font size:
@media (min-width: 1200px) and (max-width: 1600px){
#trackInfo-compact #trackInfo-title {
font-size: 36px;

For Track Info Rates size:
@media (orientation: landscape) and (max-width: 1600px){
#playbackPanelWrapper.mobile .track-info-rates {
font-size: 56px;
white-space: nowrap;
margin-top: 2px;
margin-left: 25%;

cnidus · January 27, 2021, 7:12am

If you grab my file above it has a parameter up the top to adjust the Artist title font size as well… though Im sure 2aCD will probably implement it cleaner in his next rev Im sure

lausiv · January 27, 2021, 11:42am

Hi there. First of all big thanks to 2aCD for such good and very hard work with this css.

Here is my variation of it, for screen 1920x480 in my future streamer It is only for display, so I decided to leave only important data on screen.

But my question is: is it normal that after restarting appearance volumio returns to classic look?

2aCD · January 27, 2021, 12:54pm

Wow, very nice this resolution is not trivial.
The switch back to classic was a Little bug in modified index.js. Please download the latest installation and replace only the index.js.
That helps, contemporary still enabled after reboot.
Best regards
2aCD

Lintbf · January 27, 2021, 12:59pm

Hello,
I have tried to use the instalation but after restart I had this display

So I revert the changes and come back to modified the file with the variables in the beginning of the file
Thanks

2aCD · January 27, 2021, 1:48pm

You need one css file active without extension _01 , 02… For start you can duplicate not rename the original. It seems you have no das without extension active.

lausiv · January 27, 2021, 2:39pm

Great, thanks - now modified “contemporary” stays and work like a charm

You’re right it wasn’t like piece of cake - to fit this resolution I had to touch each element on screen including centering verticaly and horizontaly. The most tricki was to find how to change position of “flac” image after resizing it;) That’s why I know what a titanic job you did.

Now I need to find some way to split title line if is longer then I can display. For now I manage to do it, this way

- it could stay as it is but there is enough place to try put another line of title. Maybe You will have some suggestion?

2aCD · January 27, 2021, 4:00pm

Hi, I have find the wrap of lines. This is a little bit tricky. It’s needed to reduce the parent container from 100% to a smaller width and remove white space: nowrap. I have do this in my next published version. Wait a little bit please, I’m try to find a solution for the big title info in player bar of main view, if you enlarge the title on play view.
I hope I find a way to remove the dependency between play view and player bar on main view.

Lintbf · January 27, 2021, 9:05pm

Hi ,
I have used he files from install folder , I can select the contemporary layout 1 , the display is ok but how can I modify the file in real time . In folder www3/styles i have add app-313de2febe.css renamed from 01. Should I add also original files ? What file should I modifie after , 01?

Later edit : Finally i have added the original file and can select the new 01 layout and the display is changing . So now I will select the original layout then update the layout 1 and when i will switch back this will laod the new data ? if yes this is awesome . Sorry for this basic question but I am not a programmer

later edit 1 : Thats it . it is fully working
My best regards ,
Thanks

lausiv · January 28, 2021, 12:11am

Ok it is exect as You wrote, but unfortunately its not good solution for my screen so I will use dots Thanks.

naimnatnod · January 28, 2021, 2:38am

I think this is it that I wanted! I made some video to show how the screen change and looks like when I change the song.

All the credit to “2aCD”.

Lintbf · January 28, 2021, 9:09am

Hi ,

Could you please tell me the names of the artist that you are playing , only a few pls. I really like it
The setup is really nice
Thanks