Page 1 of 2

Web-UI enhancements

PostPosted: Mon May 19 2014 18:07
by jotak
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 : https://github.com/jotak/Volumio-WebUI

On the other hand i've seen you are working on a complete UI refactoring through https://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

Re: Web-UI enhancements

PostPosted: Fri May 23 2014 03:10
by aborboa
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!

Re: Web-UI enhancements

PostPosted: Sun May 25 2014 20:58
by jotak
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 : https://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

Re: Web-UI enhancements

PostPosted: Sun May 25 2014 21:04
by jotak
aborboa wrote: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 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! ;)

Re: Web-UI enhancements

PostPosted: Sun May 25 2014 21:27
by jotak
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
Code: Select all
cd /var
mv www www-backup

- Clone my repo under "www"
Code: Select all
git clone git@github.com:jotak/Volumio-WebUI.git www

(you must have "git" installed)
- Restart the PHP server
Code: Select all
sudo /etc/init.d/php5-fpm restart

- Refresh Volumio on your browser

Re: Web-UI enhancements

PostPosted: Sun May 25 2014 21:37
by kali1705
Hi,
Thanks for the great gui !

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

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

Re: Web-UI enhancements

PostPosted: Wed May 28 2014 18:57
by aborboa
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.

Re: Web-UI enhancements

PostPosted: Thu May 29 2014 07:12
by arginine
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 ?

Re: Web-UI enhancements

PostPosted: Thu May 29 2014 17:50
by aborboa
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 :roll: . 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. :)

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:
Code: Select all
scp -r /Your/Local/Volumio/Directory/www root@your.volumio.ip:/var


- Open ssh session:
Code: Select all
ssh root@your.columio.ip

and enter password (default: volumio).

- Once you've done that you'll need to run the command
Code: Select all
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:
Code: Select all
nano /etc/init.d/shairport

It should look like this:
Code: Select all
#! /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:
Code: Select all
sudo visudo


It will look something like this:

Code: Select all
#
# 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


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: Select all
#
# 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

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:
Code: Select all
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).

Re: Web-UI enhancements

PostPosted: Mon Jun 02 2014 16:44
by michelangelo
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...