Web-UI enhancements

Discuss, contribute and orient Volumio development!

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

Web-UI enhancements

Postby jotak » Mon May 19 2014 18:07

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
User avatar
jotak
Audiophile
Audiophile
 
Posts: 175
Joined: Sat May 17 2014 11:05
Location: Aubagne, France

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


Re: Web-UI enhancements

Postby aborboa » Fri May 23 2014 03:10

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!
Random avatar
aborboa
Sunday DIYer
Sunday DIYer
 
Posts: 12
Joined: Wed May 21 2014 05:53


Re: Web-UI enhancements

Postby jotak » Sun May 25 2014 20:58

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
Attachments
Volumio-lib.jpg
Volumio-lib.jpg (115.64 KiB) Viewed 1551 times
User avatar
jotak
Audiophile
Audiophile
 
Posts: 175
Joined: Sat May 17 2014 11:05
Location: Aubagne, France


Re: Web-UI enhancements

Postby jotak » Sun May 25 2014 21:04

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! ;)
User avatar
jotak
Audiophile
Audiophile
 
Posts: 175
Joined: Sat May 17 2014 11:05
Location: Aubagne, France


Re: Web-UI enhancements

Postby jotak » Sun May 25 2014 21:27

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
User avatar
jotak
Audiophile
Audiophile
 
Posts: 175
Joined: Sat May 17 2014 11:05
Location: Aubagne, France


Re: Web-UI enhancements

Postby kali1705 » Sun May 25 2014 21:37

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
Random avatar
kali1705
Serious Listener
Serious Listener
 
Posts: 80
Joined: Sat Feb 15 2014 20:46
Location: Germany


Re: Web-UI enhancements

Postby aborboa » Wed May 28 2014 18:57

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.
Random avatar
aborboa
Sunday DIYer
Sunday DIYer
 
Posts: 12
Joined: Wed May 21 2014 05:53


Re: Web-UI enhancements

Postby arginine » Thu May 29 2014 07:12

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 ?
Random avatar
arginine
Sunday DIYer
Sunday DIYer
 
Posts: 49
Joined: Tue Mar 25 2014 18:33


Re: Web-UI enhancements

Postby aborboa » Thu May 29 2014 17:50

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).
Attachments
www.zip
(1.57 MiB) Downloaded 81 times
Random avatar
aborboa
Sunday DIYer
Sunday DIYer
 
Posts: 12
Joined: Wed May 21 2014 05:53


Re: Web-UI enhancements

Postby michelangelo » Mon Jun 02 2014 16:44

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...
User avatar
michelangelo
Founder
 
Posts: 3232
Joined: Sun Dec 15 2013 23:18

Next

Return to Development talks

Who is online

Users browsing this forum: No registered users and 0 guests