Contemporary optimizations plugin for local connected displays

Totonello · March 20, 2021, 9:46pm

Hi @2aCD, great job! Your mod is really nice and seems made for my custom media player. I use the latest version of Volumio. I followed the instructions provided with the install.zip file, but nothing has changed. Seems I’m doing something wrong, but I cannot understand what…
It would be great if you would provide an apt auto-installing file…
I will keep trying…

2aCD · March 21, 2021, 12:26am

Do you see the additional option to select the modified contemporary profile?

Totonello · March 21, 2021, 4:26pm

Yep! now it works! two options: contemporary 1 and 2 but they look the same.
I have not the circular progress bar and I have very small fonts.

There is a way to have bigger (font size) title & artist?

Anyway this is exactly what I was looking for! Great job!

Lintbf · March 21, 2021, 4:35pm

Hello,
This looks so nice. Could you please give us some details in a new post pls : material of the front plate and a picture on how you place the display inside, did you have used a extender cable for the fein sd card?
Thanks and Sory for tbe off topic.

Totonello · March 21, 2021, 4:37pm

@Lintbf I will do in a specific post asap! thank you for your interest!

2aCD · March 21, 2021, 5:16pm

The difference between the two versions are:
the first is for displays with lower resolutions <= 800. Have you a display with a resolution grater then 900, this mod switch to standard PC View.
The second mod prevent the switching to PC View for greater resolutions. So you can use the mobile view also with grater resolutions. For small resolutions both mods do the same.

In the top area of css files that you have copied, placed some variables with comments. With this variables you can change the size of fonts and some other values. Change the _1.css for the first mod and the _2.css for the second mod with winscp and select it again in VOLUMIO settings, that restart chromium to re-read your css, without reboot

The best way to find the right size of title and artist and other values is to use a browser (edge, chrome) on PC.
Do the follow:

open your Volumio.local site
press F12 to debug
use the tab elements in debug window
scale your browser window exact to your raspberry resolution (800x400 or so) with F12 you see the resolution in the right top corner of browser
in your debug window now you find all variables thats defined (starts with --) in :root section
the comments for it you find in the ccs file
now you can change the variables live and you see the result in browser. Do not remove the extensions px or vh, change only the values. You can play a little bit with this variables, the changes are only for this session on your PC never write back to css.
have you find the right sizing options, write that to your css file manually and select the mod again in VOLUMIO settings

Now you have the same settings also on your connected display

and have fun

JoShmo · March 26, 2021, 12:55am

Absolutely love what you’ve done here. I’ve using it here on the official RPi screen, and was wondering if its easy to implement having the Album Title on a separate line under the Artist Name, rather than trying to cram them both in on one? Thank you!

2aCD · March 26, 2021, 10:58am

this is a little bit tricky. The only way to do that without changing of html-code is this:
seach this section:

#trackInfo-compact #trackInfo-artist-album #trackInfo-album {
    color: #c1c1c1;
}

and add this section after:

#trackInfo-compact #trackInfo-artist-album #trackInfo-album:before {
    content: "\A";
    white-space: pre;
}

This insert a new line command. But you can’t remove the hyphen, the first character of album.

JoShmo · March 26, 2021, 5:04pm

Thank you for this. I’ll check it out!

JoShmo · March 29, 2021, 10:12am

Works a treat - thank you so much. Such a shame about the errant hyphen, but small potatoes now I can display the info without truncation.

kit_z4 · April 4, 2021, 8:38am

Hello,
Thanks for the great works. I have followed all the step and install the mod successfully. However, every modification i made in .css was not appear in the browser. I can still select the mod even i delete one of the _x.css.
*I edit the .css via OSX Transmit. reboot the volumio and re-select the mod after I modified .css
Would you give me some suggestion what I have missed? Thanks.

2aCD · April 4, 2021, 10:42am

Hi and thanks for the interest on this mod.
I don’t know exactly, have you also installed the UI Integration, or have you replace the css direct.
With the UI Integration you made the change on the file with _1.css or _2.css and then select again the mod 1 or mod 2 in Volumio settings. You don’t need a reboot. The UI copied the _1.css or _2.css to the original css without _1 or _2. and restart chromium to activate the settings.

Lintbf · April 12, 2021, 7:01pm

Hello 2aCD,
Could you please help me on next issue :
I have update to buster version v3.068. The oled files were retained during the udpate process but now I cannot switch to con_mod_1 layout . I have this
.
I have added again the index.json etc files . in sources I have the drop down list but when I select the mod_1 , the original contemporary remains active . I have deleted also the file from last step.

Many thanks

2aCD · April 13, 2021, 2:58pm

Hi Lintbf,
what is the original css file in buster. Is it this:
app-3a6d55fad7.css

Then it have a new ID and the replace procedure from UI not more works.

Can you upload the original css, I’ll compare it and create a new package for 3.068 buster version.

Lintbf · April 13, 2021, 3:18pm

Hi 2aCD,

The new file in Volumio buster started with V3.068 I guess is the attached one . On volumio 2.x I do not have this file.

Many thanks app-3a6d55fad7.zip (32.8 KB)

2aCD · April 13, 2021, 3:36pm

Hi Lintbf,
can you give me a link, where can I find the 3.068 download, I can’t find it.

Lintbf · April 13, 2021, 3:45pm

Hi 2aCD,
I have asked one of moderators. I have updated via Ota. I also could not find it. As soon as he respinds I will give you the link.

Or install it from here then activate test mode and do the Ota updates until mod will give the curent download link

https://updates.volumio.org/pi/volumiobuster/3.051/Volumiobuster-3.051-2021-03-06-pi.zip

@2acd mod said to install above version then enter in test mode and update via Ota.

2aCD · April 13, 2021, 5:47pm

Ok I’ll try it with update.
I have compare now the old and the new original css file and have find some differences. So it’s necessary to patch the new file instead to use the old with a simple rename.
I’ll do this, but spend me a little bit time, to do this without mistakes. I’ll install at first a fresh buster and make an update to 3.068, to have a test environment.

Lintbf · April 13, 2021, 5:54pm

I guess the latest is 3.061. Not 3.068. I have 3.061. And no update foujd on Ota check.
Take your time
Mnay thanks again for your support.

chsims1 · April 13, 2021, 6:06pm

v3.061 is latest … link now updated at top of Buster beta thread.