Web-UI enhancements

Hi there, hi Michelangelo

I’ve recently forked the Web-UI sources for my personal use, because I wanted to change some things. You can check it out there : github.com/jotak/Volumio-WebUI

On the other hand i’ve seen you are working on a complete UI refactoring through github.com/volumio/WebUI-new

Does that mean you’re completely abandonning the existing web-ui, and you don’t want to focus on its improvements? Or is there a chance to keep it alive, and I could ask for a pull request?

For your information here is the changes I made :

  • some weird scrolling behaviour fixed (like when you delete a song from playlist)
  • ability to save a playlist
  • on “browse” panel, merge top line with “back” button line to save space
  • make play/pause state more explicit with a “hover” icon change
  • fix a bug that prevent loading MPD playlist (without “pls” or “m3u” extension)

And I plan to work on a bigger improvement which is displaying available musics as a “library” that can be browsed by artist, genre or album, in the same way I used to see in that good old winamp

Hi everyone! I received my UDOO two days ago and installed Volumio. I love it!

I had some problems configuring the airplay feature.
My findings are in this thread: http://volumio.org/forum/udoo-quad-airplay-shairport-usb-dac-t1242.html

As my last post explains, I will soon be implementing an “activate airplay” button to the UI.
So I thought this would be a more appropriate section to post about it so that any WEB-UI enhancement- related topics can be discussed here.

Cheers!

Hi all,

I’ve just finished to develop my “library” section. Here’s how it looks like (see attachment)

Some words about it :

  • It will load in javascript your full MPD library on UI startup, which can take a lot of time depending on how many files you have (but the interface is not frozen meanwhile). For me it’s ok : 6 seconds for 3200 files. It both relative to your MPD server host capacity, and your client capacity.
  • I changed the CSS theme, but it’s easy to recover Volumio’s theme or change to your own with some knowledge of CSS
  • I did this enhancement for my own use, and it’s available for sharing. But I’ll likely not continue to work on it. Everybody is free to modify it and continue the work.
  • You can try it on your own installation by pulling my git repo : github.com/jotak/Volumio-WebUI ; if you don’t know git and need some assistance, leave me a message I’d be happy to help.

To Michelangelo : if you’re interested in this, I’ll do a pull request
Volumio-lib.jpg

Hi aborboa

Did you finally add this “activate airplay” button?
I suggest you fork Web-UI on github and integrate your changes, so that other people can benefit from this! :wink:

Here’s how you can integrate my work in your own installation :

  • Connect to your pi (with ssh)
  • Under “/var”, make a copy of the existing “www” folder
cd /var
mv www www-backup
  • Clone my repo under “www”
git clone git@github.com:jotak/Volumio-WebUI.git www

(you must have “git” installed)

  • Restart the PHP server
sudo /etc/init.d/php5-fpm restart
  • Refresh Volumio on your browser

Hi,
Thanks for the great gui !

The command to clone did not work for me, but this one worked fine:

sudo git clone github.com/jotak/Volumio-WebUI www

I think I’m finally done. I’m sorry. I didn’t merge to your branch. I maintained the original UI and added the button. I’ll make the attachment here once I get home, along with the instructions to get it running and some recommendations.

Looks very nice !!! Looking forward for the instructions. Btw I did a small php scrip for “converting” itunes playlist to volumio. Possibly you might be interested also ?

Here it is.

WARNING: I’ve been having some crash problems with Shairport launching from webUI and not having an ssh session open. It’s really driving me mad :unamused: . I don’t have to be doing anything in SSH, I just need to have an open session for shairport to work normally.
If someone could shed some light over this, it would be awesome. :slight_smile:

INSTRUCTIONS:

  • First of all rename (or backup) your current “www” directory as “www2” so you won’t lose it.

  • You need to replace your “www” directory in /var on volumio with the new one. Something like this:

scp -r /Your/Local/Volumio/Directory/www root@your.volumio.ip:/var
  • Open ssh session:
ssh root@your.columio.ip

and enter password (default: volumio).

  • Once you’ve done that you’ll need to run the command aplay -l
    It will give you the list of available sound cards.

Something like:
**** List of PLAYBACK Hardware Devices ****
card 0: vt1613audio [vt1613-audio], device 0: HiFi vt1613-0 []
Subdevices: 1/1
Subdevice #0: subdevice #0
card 1: imxhdmisoc [imx-hdmi-soc], device 0: IMX HDMI TX mxc-hdmi-soc-0 []
Subdevices: 1/1
Subdevice #0: subdevice #0
card 2: CODEC [USB Audio CODEC], device 0: USB Audio [USB Audio]
Subdevices: 0/1
Subdevice #0: subdevice #0

In my case, i want to use “card 2”. (Pay close attention to which device you want to use and its card and device number).

  • Then, you’ll have to edit the shairport init file:
nano /etc/init.d/shairport

It should look like this:

#! /bin/sh
# /etc/init.d/shairport
#
NAME="your desired airplay name"
 
case "$1" in
  start)
    /usr/bin/mpc stop
    /usr/local/bin/shairport -d hw:2,0 -a "$NAME"
    ;;
  stop)
    killall shairport
    ;;
  *)
    echo "Usage: /etc/init.d/shairport {start|stop}"
    exit 1
    ;;
esac
 
exit 0

Notice how in the line:
/usr/local/bin/shairport -d hw:2,0 -a “$NAME”
I used the values hw:2,0 based on the results from aplay -l, using the card and device number.

Save and exit your file with ctrl + x

  • Next, we need to edit the sudoers list.
    WARNING: Editing this list is a great security risk if you’re running volumio from a public network, or otherwise not-home unprotected network (which i think, is not the case for the majority of users running volumio at their home).
    Run:
sudo visudo

It will look something like this:

[code]#

This file MUST be edited with the ‘visudo’ command as root.

Please consider adding local content in /etc/sudoers.d/ instead of

directly modifying this file.

See the man page for details on how to write a sudoers file.

Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

Host alias specification

User alias specification

Cmnd alias specification

User privilege specification

root ALL=(ALL:ALL) ALL
volumio ALL=(ALL:ALL) ALL

Allow members of group sudo to execute any command

%sudo ALL=(ALL:ALL) ALL

See sudoers(5) for more information on “#include” directives:

#includedir /etc/sudoers.d
[/code]

You should add the line “www-data ALL=(ALL) NOPASSWD: ALL” just below the line “volumio ALL=(ALL:ALL) ALL”.
Your sudoers list should now look like this:

[code]#

This file MUST be edited with the ‘visudo’ command as root.

Please consider adding local content in /etc/sudoers.d/ instead of

directly modifying this file.

See the man page for details on how to write a sudoers file.

Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

Host alias specification

User alias specification

Cmnd alias specification

User privilege specification

root ALL=(ALL:ALL) ALL
volumio ALL=(ALL:ALL) ALL
www-data ALL=(ALL) NOPASSWD: ALL

Allow members of group sudo to execute any command

%sudo ALL=(ALL:ALL) ALL

See sudoers(5) for more information on “#include” directives:

#includedir /etc/sudoers.d
[/code]
You need to be very careful with this. Saving your sudoers list with any error will block the file, forcing you to recover it.
If this happens, here’s the solution:
http://askubuntu.com/questions/73864/how-to-modify-a-invalid-etc-sudoers-file-it-throws-out-an-error-and-not-allowi
Save and exit your file with “ctrl + x”, and hit “y” when asked to save changes.

That’s it! You’re done.
Just reboot the system:

reboot

Once the reboot is complete Just refresh the volumio webUI in your web browser and you should see the “airplay” tab in the top left corner (below the volumio logo).
www.zip (1.57 MB)

Jotak! Your work is just excellent… Merged the branches… Your work will be present from now on. I’m adding some new features and then publish a new release…

Thank you Michelangelo! :slight_smile:

If anyone uses it I’d be glad to have any feedback, and more especially about how it behaves with several thousand files in the library.

Salut Jotak
j’ai un probleme avec le Library Panel sur la nouvelle webUI: il ne montre point la liste de albums, artist, songs, etc. J’ai fait un restart du mpd, et j’ai aussi redemarré volumio. Il a reconstruit la base de données, qui apparaissent sur le panel “Browse”, mais le panel “Library” reste vide. J’apprecierais beaucoup ton aide.
Cordialement,
Gercho

ps. La source de données est situé dans un Western Digital NAS, la plataforme est raspberry-pi B, et le système Volumio 1.4