Contemporary optimizations plugin for local connected displays

dvo · March 5, 2021, 12:08pm

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.

Lintbf · March 9, 2021, 11:57am

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 …

Thanks.

Lintbf · March 9, 2021, 2:12pm

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 .

2aCD · March 9, 2021, 3:14pm

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.

Lintbf · March 14, 2021, 3:42pm

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

dvo · March 15, 2021, 8:12pm

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

dvo · March 17, 2021, 11:45am

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;

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