xipmix/Volumio2-UI

Volumio2 Web Based User Interface

Volumio Web Interface

This UI is meant to be used as a standalone Web User Interface communicating via Volumio2 Backend via Socket.io API, see Volumio2 WebSocket API reference

Currently the UI is served via Express Static Server, and resides at /volumio/http/www

Repo information

This repo is used as a git submodule in Volumio2.
Only the dist/ directory is needed by Volumio2, so there is a dist branch which contains just that.

To update the dist branch with the latest changes, run:

git subtree split --prefix dist -b dist
git push origin dist:dist

Set up development environment

You must have Node.js, Npm and Bower installed

First clone it

git clone https://github.com/volumio/Volumio2-UI.git

Then, install its depencencies

cd Volumio2-UI
npm install
bower install

Now, you can develop on it, while retrieving data from Volumio2 backend (you must have a Volumio2 device on your network and know its IP address). To tell the UI where to find Volumio 2 backend, create a file with the IP of Volumio2 in

/src/app/local-config.json

The file will look like

{
  "localhost": "http://192.168.31.234"
}

Now, feel free to edit and see live changes on a local browser with dynamically generated UI. To do so:

gulp serve --theme="volumio"

Additional parameters can be env, for selecting the environment which can be production or development

gulp serve --theme="volumio" --env="production"

And debug, to show debug console logs on the browser

gulp serve --theme="volumio" --env="production" --debug

Once finished, to deploy on Volumio 2, first build it. if you want production optimization use --env="production"

npm run gulp build --theme="volumio" --env="production"

And deploy by copying the content of dist directory on Volumio2 device to:

/volumio/http/www