Contemporary optimizations plugin for local connected displays

[Lintbf]

Hi 2acd,
I have v 3.067 and is working de v from 3.066 which you gave me last time
Thanks

[2aCD]

Yes, for Buster it’s working, but now the standard version is changed. I’m working at time on a install script, that’s check if the ID’s match and copy only the right css files, to avoid compatibility problems.
The most people don’t look before start an installation. And now it seams the standard version has the same ID for css as the Buster version but with different content. So I’ll check this with installation.

[Totonello]

Hi 2aCD, I’m talking about this:

• 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

[2aCD]

Now I’m ready with a better install script. It check if your version match with included css files.
I have add a complete UI-Integration for both files, all variables are now integrated and some additional options (hide footer on PlayNow view and some color options)

It’s very important to remove all additional files from the styles folder and revert to original files also in appearance folder before you start the installation from first post.

Best regards
2aCD

[akelge]

Cool stuff! I already wrote an ansible role to customize Volumio and I had integrated your changes, but now with the install script it seems easier
I see from your screenshots that you changed the colors in the CSS too, would it be possible to have a look at your themes? I am trying to make Volumio UI blue, but I can’t come up with a complete solution. I am too lazy to fiddle with scss and compile the css files
EDIT: I managed to setup a dev environment, so I am able to build my own CSS. Would it be possible to have the source files for your modifications? That way I could add them to Volumio source, patch them with my changes and build my own image

[vishal]

Thanks to @2aCD and @lausiv i was able to do this and add it to my DAC which doesn’t support android phones, i used volumio and raspberry pi to connect to it. Its in the testing phase but so far very happy considering it’s the first time i’ve done this.

I tried to use lausiv UI although very visual it was limiting on menu functions so im using @2aCD UI from post 98, just need to make the FONTS bigger as they are much smaller, still going though the forum to learn how to do it but any tips to make it more readable and how to change it would be greatly appreciated!

Thanks for this

[Alain]

look into the css file at “title info size for landscape”

[Xhorder]

Holy crap, this is absolutely great! Thank you so much for this.
This plus Tidal Connect makes volumio nearly perfect.
I’d definitely paypal you a few $$ if I could.

Just one very minor request: It may not be possible, but right now the album art doesn’t extend all the way to to bottom of the screen. For me, the ability to have the album art left justified + vertically maximized would be the best.

Thanks again for all your hard work.

[Alain]

Hi @Xhorder ,
not sure if it’s the right way to do it but it’s working for me.
I added the following at line 9888 in the css file:
@media (min-width: 799px) and (max-width: 801px) {
#playbackPanelWrapper.mobile #albumartContainer .cover-art-container {
text-align: center;
scrollbar-width: none;
position: absolute;
top: 25px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
}

top: 25px is what center vertically the picture on my screen.
of course replace the width(799/801) with your screen size.
One thing is weird, Appearance is set to ***_1.css (mod1) , but only modifying ***.css works.
Maybe 2aCD knows why (the same for title size).

[2aCD]

Hi xhorder,
set the option ‘space around albumart’ to ‘0’ then the albumart is placed in the left upper corner and then set the ‘resize’ option a little bit greater to fill the complete hight. So you don’t change the css

[vishal]

Hi Guys

So i managed to increase the text size for the Name of the track, bitrate etc, i messed about with the play buttons got this set to 2, may try 1 but its the right size, know idea if i can move it up a little?

Not really fussed i’m trying to figure out how to incease the “spotify” logo as it’s so small but not sure which part of the script i’m supposed to change. Same for the like, add and share icons on my screen they are just a little too small as im using it as a touch screen

I’m basically learning as i go along so forgive me but i haven’t really got a clue at the moment!

Thanks in advance.

[Xhorder]

That worked! Thanks

[2aCD]

@vishal
I think you need a global scale factor at first. With the new TouchScreen plugin you can set a global scale factor. Please try 120%

This set the Chrome scale in /opt/volumiokiosk.sh

–force-device-scale-factor=1.2

[Piranti13]

Hello!

I use the same panel. Please let me know how can setting it.

[Lintbf]

Hi,
I saw that a new beta version is out with UI improvements. V 3.063. Could someone pls confirm if already updated the sw if the files are changed or not.

I will flash now on a sd card and post the results here.

Edit 2
The files are not changed. Updated to 3.073 and the modification are retained.

Thanks.

[fotograff]

Все получилось! Супер!!

[2aCD]

Hi @Lintbf
I have test it with the new Buster 3.073, and all is ok. The css files are the same and for all other files I use ‘sed’ to insert my additional code at the right place. So it’s not a problem, if they changed a little bit with a new version.

[akelge]

I repeat the question, as I am progressing in my customizations of base Volumio: would it be possible to have the source files of your modifications to be able to incorporate the mod properly in a custom image?

[2aCD]

Hi, don’t understand exactly, which source code do you mean. The installation package with the install script contains all code that inserted in original files. Also the css files with changes. Nothing is compiled all is open and readable. No other files are exist.

[absarshah]

Thanks so much for this. I just built a small streaming box at home with a small 5” display, and this is exactly what I was looking for. I even made a feature request to volumio for something like this