Custom UI for 5'' horizontal touch display

Hi everyone, I’m customizing the UI, and it looks something like this (work in progress).
I added some code to the css file, and I just added a single word in the html (in the js file that creates the html) (to add a class).


Two things:
Maybe it could be implemented in the official version, if someone is interested. Otherwise can I ask the developers just to add a class in the place I need, so that it can be easier for people to use the line that I wrote.
In the mean time if anyone is interested I can post the code I wrote with some explanation.

(The first thing I’ll do is increase the fonts)


Optimizes it for 800x480 and it would be an ideal minimal UI

I just finished coding, and I’m quite happy with the results.
I made the buttons a little bit bigger, and I did the same for the track info and for the volume slider.
The only thing I noticed is trhat the “time slider” disappears after the first song, and reappears only if you skip back, I don’t know if it is normal.

These are the results:
Tell me if you like it, and if you have any suggestion!

For what concerns the code this is what I did:
I had to add a class to a div html element.
(to do this you simply have to modify a part of the third row from the bottom of /volumio/http/www3/scripts/app-d505dc622d.js from <i ng-if="playback.playerService.state.icon" ng-class="playback.playerService.state.icon"></i></div></div><div class="col-xs-24" style="flex-shrink: 0;"><div class="row"><div class="col-xs-24 text-center track-info-container"><track-info is-in-footer="true"></track-info></div> into: <i ng-if="playback.playerService.state.icon" ng-class="playback.playerService.state.icon"></i></div></div><div class="col-xs-24 robe" style="flex-shrink: 0;"><div class="row"><div class="col-xs-24 text-center track-info-container"><track-info is-in-footer="true"></track-info></div>
You can see that the only difference is a new class called robe (=things in italian), but you can use what you like, the only thing is that it must be the same in the css code.

For the CSS code simply add this new line to /volumio/http/www3/styles/app-bd5cbd8b95.css

@media (max-width:802px) and (min-width:799px) and (orientation:landscape){#albumartContainer{width:auto;height:350px}.robe{width:50%;margin-top:auto;margin-bottom:auto}#playbackPanelWrapper{flex-wrap:wrap;flex-direction:unset!important}#playerButtons>button i{font-size:30px!important;padding-top:0px !important}.playPause{height:55px!important;width:55px!important;top:-40px!important;font-size:30px!important;padding-left:14px}.col-sm-offset-4{margin-left:0px!important}.col-sm-16{width:100%;}#playerButtons{padding-top:22px}#trackInfo-title{font-size:1.8em !important;}#player-bar{font-size:10px;}.robe{font-size:20px;}#trackInfo-album,#trackInfo-artist{font-size:1.4em!important}.slider.slider-vertical .slider-track{width:30px!important;margin-left:-15px!important;}.slider.slider-vertical .slider-handle{width:35px!important;height:35px!important;margin-left:-3px!important}}


Thank you.

This is the perfect solution what I had been searching to fix my LCD display for showing what music is playing now.

It is just great-!

1 Like

I really like it!

are you planning to release it?

Really good one.

Can you guide me how to configure this for 3.5 inch display?

This is excellent. Please make this a plugin for us novices!

Hi, look here, similar customizations since two weeks.

I see http in three difference


can somebody tell me which one is for the display HDMI on the RPI,
I only what to change the layout for the display and not for the
monitor PC and Mobile display