Cantabile’s New Web UI

Brad -

Cantabile Performer now supports a built in web server that lets you control Cantabile from remote devices like tablets, phones and other PCs — basically anything with a modern web browser should work.

Setup

For this work you’ll need Cantabile Performer build 3544 or later running on Windows 8 or later. Once installed just go to the Miscellaneous tab in Options and turn on Enable Network Server:

Now bring up your favourite web browser and navigate to this URL:

http://localhost:35007

and you should see the Web UI appear:

Connecting from a Remote Device

The above works when your browser and Cantabile are running on the same machine. To access the Web UI from a remote machine you’ll need the IP address of the machine on which Cantabile is running.

To find the IP address, bring up a Windows command prompt (click the start button and type cmd . Once you’re in the command prompt, type ipconfig like so and look for the IPv4 address as highlighted in this screen shot. Usually the IP address will start with either 10.1.1 or 192.168.0 (but not always).

Once you’ve got the IP address go to any other machine on the same local network and navigate to http://ipaddress:35007 . eg: if you IP address is 10.1.1.4 then you’d navigate to http://10.1.1.4:35007

(Don’t forget the :35007 port number on the end — it won’t work with out that)

Getting Rid of the Address Bar and Tabs

The WebUI works great in the browser, but you can get rid of the address bars and tabs to make it looks more like a stand-alone application. Here’s how to set that up on various platforms:

Windows Desktop with Google Chrome

On Windows desktop with Google Chrome installed you can run it as a standalone app as follows:

  1. Right click on your desktop and choose “New Shortcut”
  2. For the Location of the Item, enter the path shown below (don’t forget to replace localhost with the IP address if on a different machine).
  3. Click Next
  4. For the name of the shortcut enter something like “Cantabile Web UI”
  5. Press Finish
"%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe" --app=http://localhost:35007

Here’s a video showing it. (Note that you can also use F11 to switch the view to full screen!)

iOS

For iOS you can use the “Add to Home Screen” option which makes the Web UI look just like a regular iOS application.

  1. Navigate to the Web UI in Safari
  2. Click the More Actions button
  3. Choose “Add to Home Screen” button

Here’s a video walkthrough:

Android

Android has a similar feature.

  1. Navigate to the WebUI in Google Chrome
  2. Click the menu button in the top right-hand corner
  3. Choose “Add to Home Screen” option
  4. Confirm the settings and tap OK.

Here’s a video walkthrough:

About the WebUI

Currently the WebUI supports:

  • Set List and Song Selection
  • Song States List
  • Show Notes Display
  • Panic Button
  • Master Transport Controls
  • Continue Button (moves to the next song state, or next song if at the end of the current song).
  • Clock

There’s more work that could be done in this area but wanted to get some feedback before spending more time on. It works quite well but is definitely oriented towards touch devices (keyboard control doesn’t work).

Also, the WebUI was designed to work with a fast modern browser. If you just get a mostly black screen and nothing else then your browser it probably too old. eg: it doesn’t work on an iPad 3 but does work on a Nexus 7.

Available Now

The new Web UI, along with a bunch of new features and improvements is available now in the latest experimental build of Cantabile (get it here).

Please let me know what you think or if you encounter any problems.