Theme & Language Selector - Installation.

[Sog_Sussex]

Hi All, I’ve created a theme selector so you can have a different colour scheme for each room. each person can choose their own theme as its device specific. this has been tested with a ton of help from @Balbuze on many devices and browsers. but please if you notice anything let me know the operating system and browser used and I’ll try and fix it.

** Now with added Languages support! **

Firstly Backup!

Save a copy of your /var/www/ folder. if you run into problems having this folder will save you lots of time and I can’t help you without these files.

Adding the files

jquery.knob.js goes in ‘/var/www/js/’
This has been edited to enable css control of its colours.

‘themeswitcher.js’ goes in ‘/var/www/js/’
This is the bit that applies the theme/language and sets the cookie. At the moment any new device connected will see the default grey/green theme. they will then be able to choose a theme and it will stay on that theme on that device from then on or until changed again.

‘notify.js’ goes in ‘/var/www/js/’
This file has been edited for languages support.

‘volumio.api.js’, ‘volumio.playback.js’ and ‘volumio.settings.js’ go in ‘/var/www/js/’
These have been edited for languages support.

‘_header.php’ goes in ‘/var/www/’
This has been edited to include the style sheets we’re adding to the css folder and language support.

‘_footer.php’ goes in ‘/var/www/’
This has been edited for theme and language support. it also contains a fix for Add Webradio. It should now format the new file as a .pls file, it will copy the contents of a url pointing to a pls file or convert a direct stream link or an m3u into a .pls file.

‘credits.php’, ‘index.php’, ‘mpd-config.php’, ‘net-config.php’, ‘settings.php’ and ‘sources.php’ go in ‘/var/www/’
These have been edited for language support.
(‘mpd-config.php’ has also been edited to reduce file logging in MPD. Thanks to @Stephane and @esseki for the fix posted in the forum)
(‘net-config.php’ has also been edited to allow a faster boot when not using Ethernet. Thanks to @Stephane for the fix posted in the forum)

‘indextpl.html’, ‘credits.html’, ‘mpd-config.html’, ‘net-config.html’, ‘settings.html’, ‘source.html’ and ‘sources.html’ go in ‘/var/www/’
These have all been edited to allow the themes and languages to work.

‘player_wrk.php’ goes in ‘/var/www/command/’
This has been edited to allow a faster boot when not using Ethernet. (Thanks to @Stephane for the fix posted in the forum)

‘player_lib.php’ goes in ‘/var/www/inc/’
This file is optional and has been edited to sort web radio stations alphabetically. (edit provided by @AussieRules in the forum)

‘volumio.css’ goes in ‘/var/www/css/’
This file carries global ui tweaks.

• removed the ability to select text on the players info and knobs.
• rounded off the selection area of the volume knob. (I kept accidently changing the volume when scrolling on my mobile)
• changed the z-index of the ‘Action’ buttons to prevent long filenames covering them. (mainly for mobile phones)
• hidden the white square that flashes up when page loads. (usually only on slow or weak wireless signals)
• other minor visual tweaks.

‘*.css’ go in ‘/var/www/css/’
These files carry the colour and style information.

‘icon-*.png’ go in ‘/var/www/images/toggle/’
These are the toggle switch button images.

flags ‘*.png’ images go in ‘/var/www/images/flags’
These are the flags used in the language selector settings section.

the ‘lang’ folder goes in ‘/var/www/’
The language selector files live here. (all the ‘lang.*.php’ files and the ‘common.php’ file).

Theme & Language Selector Files - Updated: 28/04/15 @ 12.30 BST.

ThemeAndLanguageSelectorFiles-rc9.zip (105 KB)

Available Languages:

• English - Volumio Default Language
• French - Translated and Debugged by @Balbuse.

** Anybody interested in translating volumio please download the template below and, once translated, post it back on this thread.
as soon as I can, I’ll update the selector and re-attach the latest version to this post. **

Language Template - Updated: 27/04/15 @ 02.00 BST.

lang.template.php_v3.zip (5.46 KB)

Please let me know what OS and Browser you’re using so I can create a list of known working setups, cheers

[Sog_Sussex]

Here’s some screenshots of the Final ‘3d’ Style Themes.

[Sog_Sussex]

[Sog_Sussex]

Solutions to Problems

Where did the single play button go?

I’ve disabled the ‘single play’ button for visual balance. if you use this button you can edit the ‘volumio.css’ file and comment out the line

#single { display: none; }

or use #repeat, #random or #consume to hide a different button.

[balbuze]

Great job ! I like it ! I’ll try it ASAP

[Sog_Sussex]

The Settings Page, Showing the Theme Selector

In Detail (cropped, not shrunk)

The 2d Styles

[dynobot]

Wow, very nice!!!

[Sog_Sussex]

out of date images removed…

[balbuze]

Hi!
I have tested . Great! But I have a small problem concerning some details. Please find attached a screenshot…
edit : In fact,the time button appears ok on my android tablett running firefox.
The screenshots are taken from ubuntu / firefox

[Sog_Sussex]

ok, the dials get their colours from the hidden button we added to _header.php in the above instructions, so it might be worth trying style=“visibility: hidden” instead of style=“display: none” let me know how you get on…

[edit] I’ve changed mine to visibility: hidden and it still appears to work on ie, firefox and opera so hopefully that should do it. I had a sneaky suspicion display: none might give a problem but it seemed to work… [/edit]

the missing background at the bottom of the page is resolved in the Mk2 version added to the first post

(I have also noticed it takes a lot of page refreshes to get any edit in _header.php to show in my browser as it doesn’t seem to refresh that file and uses one stored locally on the device. flushing the cache is how to get round it but I end up just refreshing the page quickly until I get a 404 error then the next refresh shows the change…)

[Sog_Sussex]

Mk2 version files added to the first post!

[balbuze]

Hello,
I have applied the mk2 theme, but I’ve got the same problem with the knob. (see screenshot). On my phone, the time knob is ok but not the volume. On my computer both are in wrong color (screenshot) . I don’t know why… And what is the clickable small button just below play / stop button ?

[Sog_Sussex]

I’m going to have to look into that, I don’t have a Linux machine (apart from the pi) . it isn’t possible to set the knob colours directly so it gets its colours from the hidden button. the clickable button should show next to the volumio logo when its not hidden. the fact its showing below the play buttons is weird. I’ll be back v.soon…

ok, it looks like your dummy button in _header.php is inside the player-controls div, I’ll attach a zip with:

jquery.knobs.js to go in the www/js/ folder and
_header.php to go in www/ folder and lastly a new
volumio.css to go in www/css/ folder

[edit] ok, will not need to post these now [/edit]

[balbuze]

Oh! I found my mistake for the color… I miss a replacement in file… So now it’s ok.
But in dolphin browser under android kk there is a white background. I set round theme and after reset the flat theme but it style the round one displayed in some browser even forcing the refresh.this case appears in the volumio web app. It’s also seems the system restart when I refresh several times the page:. The start sound is played !

[Sog_Sussex]

ok, a quick fix for browsers that cant handle gradient backgrounds would be to add

html, body {
background: #000;
}

to the top of the volumio.css file. can you try this on the grey theme then a colour theme in dolphin browser? just to see if you get a plain black background… I’ll update the files and replace the ones on the first post if it works…

[balbuze]

In dolphin I get a withe background even with the workaround (see the screenshot)
So to resume:
1 laptop with ubuntu 14.04 Firefox 36 : volume knob color and time knob color not ok
2 laptop with unbuntu 14.10 Firefox 36 : colors ok
3 android tablett firefox : colors ok
4 android tablett dolphin : colors and background not ok
5 android phone KK and chrome : colors and background ok
A thing I don’t understand, I switched back to the flat theme and I can’t see it anymore, even by flushing cache in dev.php section.

[Sog_Sussex]

ok, I’ll see if I can sort that, I’ll need to read up and find a way of talking to dolphin via css… and I’ll update volumio css to handle the button you have below the play buttons…

[balbuze]

ok, but don’t worry about dolphin. I tested it because it was not working with Firefox…

[Sog_Sussex]

ok, I’ve updated the Mk2 files in the attachment on the first post. I’ve attached some pre edited files from volumio v1.55 here:

[edit] out of date attachment removed [/edit]
just replace the existing files with these.

for those who are unsure…

indextpl.html and settings html go in www/templates/

jquery.knobs.js goes in www/js/

_header.php goes in www/

they will sort the hidden button showing.

Can you list what devices you have it working on as you did before but with the new files? (so I can put a list of confirmed working browsers on the first post) thanks for your time, hope you enjoy the new themes do you think I should colour the speaker background to match the theme as in the Mk1 themes?

[volumio]

Oh that’s nice!!!
DEFINETELY to introduce in next version!
Good work! Kudos!