Custom UI for 5'' horizontal touch display

Polls, free discussions and debates. Talk now or shut up forever

Ads helps Volumio remain Free and Open Source. Please consider donating to help us continue to serve you.

Custom UI for 5'' horizontal touch display

Postby sibbo » Fri May 22 2020 19:19

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).

Cattura.JPG
Cattura.JPG (80.1 KiB) Viewed 102 times


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.
Thanks!

(The first thing I'll do is increase the fonts)
Random avatar
sibbo
Fresh off the boat
Fresh off the boat
 
Posts: 2
Joined: Fri May 22 2020 18:55

Ads helps Volumio remain Free and Open Source. Please consider donating to help us continue to serve you.


Custom UI for 5'' horizontal touch display

Postby wikipeter » Sat May 23 2020 14:45

Optimizes it for 800x480 and it would be an ideal minimal UI
Random avatar
wikipeter
Sunday DIYer
Sunday DIYer
 
Posts: 19
Joined: Wed May 10 2017 20:44


Custom UI for 5'' horizontal touch display

Postby sibbo » Sun May 24 2020 06:45

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:
1.PNG
1.PNG (947.16 KiB) Viewed 49 times

2.PNG
2.PNG (924.77 KiB) Viewed 49 times

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.
3.PNG
3.PNG (833.3 KiB) Viewed 49 times

(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
Code: Select all
<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:
Code: Select all
<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
Code: Select all
@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}}
Random avatar
sibbo
Fresh off the boat
Fresh off the boat
 
Posts: 2
Joined: Fri May 22 2020 18:55


Return to Vox Populi

Who is online

Users browsing this forum: No registered users and 1 guest