Contemporary optimizations plugin for local connected displays

official beta doesn’t support plugin’s and is still in testing fase it will take a while before
it will be a real version supporting all the things… so the 3.015 version is all he can do.

Hello ,

I am also interesting if this css files are working in buster beta version . I already installed spotify plugin , pepyemeter and it is working ok .
I got used with this new layout and when I do not have it is …


1 Like

I have add the css file to buster beta version and it is working . I do not know if the files from install kit will work, config.json etc , if are compatible with buster beta .

1 Like

Hi Lintbf,
the css-file is installed with the touch-plugin. If this not changed, the css is the same. To be sure compare the original css-files from both versions.

Also the other original files that’s replaced with my installation you can compare before.
You can use a compare tool notepad++ or other text editor.

I test at time the PeppyMeter as fullframe on a 1920 AMOLED Display. I have it run as screensaver for play mode with touch to wakeup on 2.8 Volumio. I have modified the sources a little bit to add custom pictures with 1920 resolution. But I‘ll open a new thread with a Step-by-step guide to install it manually.

1 Like

Hi ,
I have add the v5 in buster beta and is working great , :slight_smile: hI have forget why I have _0, _1 and _2 and original . I modify _1 :d The ftopacity and bgdarkness are really nice options .

if you need a 3.015 version… 800 x 600 raspberry touchscreen classic version

hey @2aCD nice job on Contemporary ,
is there away to a just all text on the right to go down,
in the middle where should be i use 800x 600 rpi touch screen.
now all text is hanging in the top with alot of unused space under it…

found it …
–tinfoY: 25vh;
–tinfoY2: 25vh;

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 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…

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

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!

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.

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

1 Like

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

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!

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.

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

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.

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.

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.

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 :slight_smile:
image .
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