Theme & Language Selector - Installation.

ok, here’s the toggle version, they’re not identical to the others on the page but they’re close and they behave in the same way as the others (inline in landscape mode and stacked in portrait mode).

I’ve been working on self resizing time and volume knobs but there’s a way to go so I’ve commented it all out to provide this update.

out of date files removed

Languages on the way… :nerd:

Just registered to say thanks for the work you have done on this.

I bought a Pi 2 a couple of days ago and spent yesterday tinkering with the rc4.4 version files, looks good! Though as an Android user I have been tweaking colours to create a Holo theme version on top of your theme_blu2d.css :slight_smile:

I’m new to css… (yuck!) so only really tweaking colors at this point but if I can help in anyway with stuff then I’ll be around.

EDIT -

I went back and did some more tweaking… created my own theme file based off your template.

I also changed panels.css to make the Library view readable with the new background you created, is there a way to get those fields added to the theme file? (I can’t work it out!)

The three I changed were -

#lib-content li div:hover
#lib-content li div.active
#lib-content span

But they of course change it for all themes. :slight_smile:

Browser wise I’m testing it on Windows 7, Firefox 37.0.1 until my Hifiberry appears and I’ll be swapping to Phone/Tablet.

hi @snipperdag, thanks for the compliments, if you include ALL your theme css in your holo theme css file it won’t affect the other themes. this themes project is designed to work alongside the original volumio. it has taken a lot of workarounds and testing at each stage. please don’t post release candidates of edits of my work. :wink: I’m updating this daily so by the time your edited files are posted here they are sadly out of date. I’ve not yet put this on the first post as it still requires work. :nerd:

once its working on all platforms I will be putting a working template out for personal themes. :smiley:

thanks for pointing out the library panel problem, I’ll look into it. :smiley:

ok, here’s the latest theme selector with added languages support! :smiley: still needs testing and a little edit to the volumio.api.js

I don’t speak any other languages so I’ll be on the hunt for translators!!! it works using a 'lang.[country].php language file for the main interface and redirects the settings pages to folders, it defaults to lang.en.php and uses the en folder for translated settings pages. the French files can be found in /var/www/lang/lang.fr.php and /var/www/lang/fr/ for the settings pages (hint hint @balbuze lol :wink: )

anybody wanting to contribute translations please copy the www/lang/en folder to www/lang/[country code] and copy the lang.en.php and call it lang.[country code].php. Once you have translated them, zip and post them here and I will add a flag to the language selector. :nerd: :smiley:

I’ve put a ‘fr’ and an ‘it’ folder in to test the selector. the translations have not been done. (apologies for the bits I have tried to translate lol)

firstly we need to (backup the www folder then) edit

(if you are on volumio v1.55 the below edits are included in the zip file so you can skip this bit)

/var/www/js/volumio.api.js and change (line 509)

$('.open-panel-sx').html('<i class="fa fa-refresh fa-spin"></i> Updating');

to (don’t forget to leave the space just after )

$('.open-panel-sx').html('<i class="fa fa-refresh fa-spin"></i> '+document.getElementById('dummyknobs').getAttribute('data-tab-browse-updating'));

then almost the same on line 511

$('.open-panel-sx').html('<i class="fa fa-music sx"></i> Browse');

to (don’t forget to leave the space just after )

$('.open-panel-sx').html('<i class="fa fa-music sx"></i> '+document.getElementById('dummyknobs').getAttribute('data-tab-browse'));

(the images go in www/images/toggle/ not www/images-toggle/)

here’s the files, I had problems until I restarted volumio, closed the volumio browser window and deleted the cache.

updated to correct files 12/04/15 @ 12.10 BST

** out of date files removed **

Hello Sog-sussex,
I have applied your last files and modified Volumio.api.js
For now, even after reboot and clean cache, I can’t see language selector… If I go to /www/lang/lang.fr.php , I’ve got a blank page.
So what am I doing wrong ?
I’ll try with another browser .

Hi Sog Sussex,

File deleted, I only put it there so you could get a copy if you wanted as it’s from your work and you were welcome to keep the theme I added.

I’ve been tweaking my Pi during the week at work… so I’ll try out any changes you made on Monday when I go back there. :wink:

For testing on browsers I recommend using Private Browsing mode. Chrome/IE/Firefox all have one and it solves the problem of caching (open FF, ctrl+shift+p - open volumio).

@snipperdag
You are right, using the private mode is a good idea, but don’t forget to clear the cache from volumio 's dev.php page.

@sog-sussex
In fact in line 511 I have : $('.open-panel-sx').html('<i class="fa fa-music sx"></i> Browse');
and not $('.open-panel-sx').html('<i class="fa fa-refresh fa-spin"></i> Browse');
as you wrote. Can’t find it the file. :frowning:

ah, yes a copy & paste error on my instructions. really sorry! I’ll update now, did you use all the files? (except images)?

I’ll check through the uploaded files to see if I’ve missed anything…

repeated post removed. I don’t know how I managed that lol

Hi!
Yes, I used all the files you provied.

all the language and settings files are in the lang folder, I didn’t write that the lang folder goes in the www folder so you end up with www/lang/, (I guess you worked that out tho)

I had a problem where the playback page would only half load (no knobs, just text and buttons and the right hand buttons were too high up the page. it was a missing ; in volumio.api.js, )

here’s my working version for now.

out of date files removed

I’m gonna dig a little deeper as I cant remember exactly what I changed when I first started the languages so will go through and check from scratch. I may have missed a file/edit out in the instructions…

DOH!!! IM AN IDIOT!!! I had made a little edit to the php on the 5 settings pages, here they are, they go straight in the www folder…

out of date files removed

really sorry, I was knackered!

ok ! It’s far better now ! :wink: I’ll test it deeply soon.

nice one. thanks @balbuze :smiley:

@snipperdag, no worries at all, I will be producing theme packs and a template. I have to keep it down to 6 themes until I’ve streamlined all the css files, otherwise it gets laggy on low power/memory devices. the theme packs will have individual button images that get used on the selector settings page. that way you can mix and match your preferred themes (still only loading 6 at a time). To keep the theme*.css files small most of the theme is the same, just a change of colour and the 3d overlay. :smiley:

edit
I also need to remove my nas as the library panel never populates. ill use a usb stick with a few albums (with safe characters in the titles) and sort out the panels. for now its just black and useless.

another edit
if you’re unsure… to access dev.php go to http://yourvolumioipaddress/dev.php (apologies if you already knew that)

here’s the complete set of files

out of date files removed

There’s still a load of menu selections to add to the lang.**.php files…

ok, think I’ve covered all the bases for translations… but I bet there’s still some I’ve missed…

[Updated 12/4/15 @ 02.20 BST]

** out of date files removed **

Hello,
I won’t be able to fully test it today. (Maybe tonight). But it works :smiley:
Buttons in the selector are missing (screenshot)
Other thing, there is a unofficial tweaking of net-config.php to accelerate boot when Ethernet is not plugged. So if you want to use this, have a look at thread speeding-boot-process-when-using-wifi-t2907.html
But Well done. :smiley:
Screenshot_2015-04-12-09-19-58.png

silly me! here’s the flags!

** out of date files removed **

they go in www/images/flags

the complete set of files for those trying this for the first time.

** out of date files removed **

I had forgotten about the faster boot., I will check the link out later, I have mine set up with its own network, I followed some instructions on this forum and elsewhere to get it to work. (and the eth0 ‘hotplug’ fix) before I started the theme selector I wanted to make it simpler to find volumio on first setup. (provided you had the correct chipset in your wifi dongle!) it was all a bit beyond me as I had never used Linux before and networking stuff is still a headache lol but I’ll look into it again. :nerd: I’m not sure how to implement it as everyone’s network setup is different. mine is set up to broadcast wireless ssid ‘volumio’ and act as an access point when plugged into Ethernet.

something else I was thinking was adding a ‘party mode’ that puts a password on the settings menu hopefully with options to hide the browse and or playlist tab. (even disable the whole interface) it could have 2 passwords, one for all access and one for guest access configurable on the settings page.

So, I have installed all your last files. Great job! Even if there some adjustement to be done for the french translation :wink: . I’ll have a look tomorrow to start translating the .php and html .pages.
I still have the refresh problem in Dolphin/ android KK. (see a exemple in screenshot). Music is playing with a sound level different of 0 and time stay a 00:00.
Same thing if I change the color, nothing happen. But after, if I click one of the flag, lang is changed and color too.
For the password it a good idea and it is already in the whish list. A thread about it (there is problably plenty of othe…) : password-dor-web-t1274.html
:wink:
Screenshot_2015-04-12-20-06-32.png

1 Like

ok, I’ve got hold of an android phone to test dolphin browser, there’s lots wrong!!! I’m going to start from scratch to see what breaks it as a lot of it makes no sense to me. I cant see how these bits aren’t working…

update well, I put a clean install of volumio onto the pi and it appears to have the same problems in dolphin browser.

a tip for the translations… if you do it via ssl all the text in html files is dark blue and the plain text that needs translating is white so very easy to find. though I guess most programming editors can be set up that way… I realise its quite a task so no problem if you’ve not got time. I need to check through all the js and other php files for the pop-up messages etc before inviting people to make translations otherwise we’ll end up with partial translations if I add to the lang.*.php files…