beomoment/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 (Classic UI) and /volumio/http/www3 (Contemporary UI)

Repo information

This repo holds the source code of Volumio UI Volumio2, which is compiled and hosted in Volumio system images. Only the dist/ and dist3/ branches are needed by Volumio2, so there is a dist branch which contains just that.

Set up development environment

You must have Node.js, Npm and Bower installed. Node.js suggested version is 10.22.1 (lower versions and higher versions might fail). It's strongly suggested to use NVM to set up the proper Node.js Environment.

Clone the Repo:

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