Contemporary optimizations for small or large landscape displays

Ok, spent a little time tweaking the file #2 from latest 2aCD, I finally got what I wanted.

Thanks again 2aCD!

Hi Andy, it seams this is a browser problem on your TBC. The left and top command with variables not correct works and other little thinks that controlled by variables. Witch browser is used and witch version. I can try to change the variable handling to work also on this old browser.
I‘m also interested on your changed values to work on this browser. Do you have removed variables? You can send me an personal message.

This is the compatibility list:
https://caniuse.com/css-variables

I think this is the problem on your TBC. The best way is update this browser.
Perhaps I send you a special version without variables and Spezial comments to change values.

Best
2aCD

1 Like

PM sent!

Hello,

is there any way to put this in a Plugin?

Karba

only have a problem, I can no longer select the zone output in the official volumio android app everything is correct in a browser (google chrome android) only is the alignment no longer correct (screenshot) on an android smartphone from the other zone device on android.
in a browser on the imac the alignment is correct for both devices.
both raspberry pi zone devices are also correct on the 3.5 inch touchscreen.

I am using the latest version 4, plus UI implementation
i’m using contemporary mod 2.

zone selectable, google chrome android.

oke

alignment not okay but the zone devices are selectable, not in the official volumio app

Many thanks for the great work.

I can change the artist - album size on my iPad, but struggle with the title info. I’m assuming that it falls between the <600 and >1200 categories. Does this mean that changing title info is not possible or am I missing something?

Hi, can you post, witch resolution are you use. I’ll check if you are in a area, witch that’s changes have no effect.
2aCD

Hi there, this is cheapeas screen from alliexpress i’m sure you can’t go wrong with this screen, as I did no seen any other with this resolution. But here you go direct auction for one I bought: 8.8 cal IPS 1920x480 60Hz 40 szpilki ekran LCD wyświetlacz z port micro USB płyta kontrolera do wyświetlania samochodów raspberry|Ekrany LCD i panele do tabletów| - AliExpress

But please notice, I am using it only for display - I did not tested it as touch screen. Of course if you will need help to run it with volumio I can help you with settings which I use.

Here is my current configuration with first version of css developed by 2aCD with my few changes:

My latest screen with 2aCD help. Like Lausiv’s, this screen is for display only and it connects directly to my Tinker Board S. This screen is a 15.4" (1280x800) which I took it out from an old and unused Dell laptop. Spent $38 for a controller board with power supply from Amazon (2 days delivery). I’m all set!

  • Album artwork has round corner and shadow.
  • Bigger Song title with text wrap around to the next line if it’s too long.
  • Bigger file Bit Rates and Type

1 Like

OK I used last version from 2aCD (thanks a lot you are doing awesome job - parameters helps in order to manage code clear and make life easier :).

I’ve changed sizes, colors and changed places some part of screen, hided some sections (goback button, like and share section and bottom menu section), changed default volumio cover - sorry volumio ;). I took the liberty of fixing a few little things such as resizing the “flac” image (file quality) and centering song information section a little bit.
I added more parameters for playing with colors, visibility, distinguish wordwraping between title and artist-album, etc…
–titlewrap3: nowrap; /* textwrap only for title: normal - wrap lines, nowrap - text with dots /
–trackinfoheight: 230px; /
title, album, artist section - height /
–titleweight3: 100; /
100,200,…800 - default = 500*/
–titlecolor3: #fffff; /#c1c1c1;/ #00e1ff; /
–albumtextcolor: #d1d1d1; /
default /
–artisttextcolor: #00e1ff; /
#54c688; */
–barcolor: #00e1ff;
–playpausecolor: #00e1ff;

--displaybottommenu: none; /* inital = default; none = hide */
--displaygobackpanel: none; /* inital = default; none = hide */
--displaylikesharebuttons: none; /* inital = default; none = hide */

--playpausebuttonsposition: -120px; /* position of play pause, next buttons section: 12px = default; -120px above seekbar */
--seekbarposition: 100px; /* position of seekbar: default = 0px; move bottom instead of bottom menu = 100px */
--timelabelsize: 26px; /* font size of time label for seekbar - default = 14px; */
2 Likes

Gosh, this is all moving on at a pace! I can see that a plugin would be a nightmare to please all people!
I too have had success, no time to finish at the present, will report back soon.

I guess this work is amazing and it enough at least for me to modified the css files :slight_smile:

Thanks

Finally! Two iPads with different displays, but I cannot get the Artist - Album line to wrap… any pointers please…(nor could I remove the like buttons)

Please, this ia a developer forum! I never said that everything and all resolutions works 100%. If you want to help find the issues, post the resolutions used. Then I can try to search the problems.
I have found a little gap between 600 and 800px in hight. That I’ll fix in the next published version.

which version of css did you use - I can try to help but it depends on version

here you go - my version with additional parameters etc. maybe you would like to use some in next versionapp-313de2febe_1.zip (42.0 KB)

Edit: my changes you will find by /*DL

1 Like

Sorry, I didn’t mean to offend, quite the opposite! I am so pleased with the work you’ve done. The ‘finally’ was a cry of pleasure as, thanks to you, I finally have the Volumio setup that I’ve wanted for years!
I really do have nothing but admiration for the people putting so much into Volumio (…and in the future I’ll read through my posts to make sure they are not ambiguous!).

All is ok, please post your used display resolution. I’ll look…

Hi again,
I have some little changes and and bug fixing for special resolutions implemented.
Now also the playerbar is optimized for landscape and needs less space from hight.
The opacity of footer is now adjustable.

here the files v5.0

for small resolutions displays:
app-313de2febe.zip (41.0 KB)

for high resolution displays:
app-313de2febe.zip (41.8 KB)

and with UI integration:
install.zip (87.5 KB)

An updated download v5.3 at first post exist
best regards
2aCD

3 Likes

I am using the latest version from 2aCD and never be happier! One issue that I still have (got nothing to do with 2aCD file) is the output from HDMI of Tinker Board S does not show Thai font correctly. Chinese seems to be Okay.

Any suggestion?

Much appreciated!

Andy

This is from my 15.4" screen that connected to TBS’s HDMI port. Thai font looks bad!

This is from my computer and tablet. Thai font looks normal

1 Like