Inputs with Sliders

This recipe shows how to create a basic iOS (iPhone/iPad) web app for controlling WATCHOUT inputs using sliders displayed on your iOS device. It’s a web app consisting of a set of files you load onto a web server. You then browse to this location using your iOS device.

WATCHOUT Configuration

This recipe assumes that there is a show on your display computer named “Sliders.” Follow these steps to prepare your display computers:

  1. Download the attached “Sliders_show.zip” file to your production computer.
  2. Unzip the file, and open the enclosed Sliders.watch file using WATCHOUT production software.
  3. Open the single display and change its Address to match the IP address of your display computer.
  4. Make sure your display computer is operational, with WATCHOUT display software running.
  5. Choose “Online” on the Stage menu to transfer the show to the display computer. You can now try the inputs by dragging the values in the Input window. Doing so will reveal the image as three horizontal strips and the length of each is controlled by an input (see below).
  6. Finally, choose “Online” again to take the production computer offline. This ensures the display computer can be controlled from the iOS app.

Web Server Configuration

This recipe uses the same web server as the recipe titled “Uploading with a Browser”, but adds a new folder containing the web app used here. Download the attached “Sliders.zip” file, unpack it, and copy the entire resulting “Sliders” folder to c:\wamp\www, so that the enclosed index.html file is located at c:\wamp\www\Sliders\index.html. After making sure that your web server is running, you can browse to the app using your iOS device by entering this address (substituting your web server’s IP address as appropriate):

http://192.168.0.48/Sliders/

 

If all works well, you will see three sliders, as shown below. If you get no response, make sure your web server is running, and double-check that the IP number you entered as part of the URL above matches the IP number on your web server.

Sliders.PNG

Sliders, as shown on an iPhone.

Editing the App

You will probably need to make minor changes to the web app to suit your system configuration. Locate the file named “Control.js” in the “js” folder of the “Sliders” folder you installed on the web server above. Open “Control.js” using a text editor by right-clicking it and choosing “Edit”. The content of the file looks like this:

var wo = new WATCHMan;            // Create object used to talk to WATCHOUT
wo.SetAddress(“192.168.0.49”);    // IP address of cluster master
wo.SetConnected(true);            // Connect to WATCHOUT

/*    Once connected, load the “Sliders” show.
*/
function connectionChanged() {
    if (wo.IsConnected())
        wo.SetShowName(“Sliders”);    // Loads the show with specified name
}
wo.addEventListener(WATCHMan.KEvt_ConnectedChanged, connectionChanged);

/*    Handle a value change in one of the sliders by sending a setInput command to WATCHOUT.
*/
function sliderChange(evt) {
    wo.SetInput(evt.target.id, evt.target.value / 100);
}

 

Change the IP address (shown in bold above) to match the address of your display computer. Make sure you keep the quotation marks around the address. Save the file.

In addition to setting the address and connecting to WATCHOUT, the above script contains two functions. The first one, named connectionChanged, is performed as soon as the connection is established to WATCHOUT. It uses the SetShowName command to load the show named “Sliders” to the display computer. The other function, named sliderChange, is performed whenever you move one of the sliders displayed on screen. It obtains the ID and value of the slider in question, and calls the SetInput function in the WATCHMan API to set the input value. The sliders shown on screen range from 0 to 100, while WATCHOUT uses a 0…1 range, which means the value is divided by 100 before being passed to the function.

The other main file in this app is the index.html, located in the “Sliders” folder. Although you don’t need to make any changes to this file, it’s a good idea to open it to see how it works. To open this file, drag it onto a text editor, such as Notepad. (You may want to add a shortcut to Notepad on your desktop to make this easier.) The interesting part of this file, presenting the three sliders, looks like this:

<div id=”sliders”>
  <input type=”range” min=”0” max=”100” value=”0” id=”slider1” onchange=”sliderChange(event)”/>
  <input type=”range” min=”0” max=”100” value=”0” id=”slider2” onchange=”sliderChange(event)”/>
  <input type=”range” min=”0” max=”100” value=”0” id=”slider3” onchange=”sliderChange(event)”/>
</div>

 

To change the name of the inputs being controlled, simply change the ID attributes accordingly. You can add more sliders in the same way, each with its own unique ID.

Testing the App

Reload the app in your iOS device, by tapping the refresh arrow at the right end of the address bar. You should now be able to control the show by moving the sliders. As you move the sliders, the image appears in WATCHOUT, as shown below. The image is divided into three horizontal strips, where each slider controls the length of a strip. You can use multiple fingers to move several sliders at the same time, thanks to the iPhone’s multi-touch capabilities.

SlidersImage.jpg

Image being displayed by WATCHOUT. Strip width changes as you move the sliders.

If nothing happens, run through this checklist:

  • Make sure that the show is available in the display computer (see “WATCHOUT Configuration” above), and that the production software is offline.
  • Double-check that the IP address specified in the script (see under “Editing the App” above) matches the address of your display computer, and re-load the app into the browser.

Installing the App on your Home Screen

Once everything is working OK, you can install the app on the home screen of your iOS device. Do so by tapping the InstallBtn.png button located at the navigation bar at the bottom of the iPhone display (shown at the bottom of the iPhone illustration above). Tap this button, then choose “Add to Home Screen.” This adds an icon to the home screen so you can start the app without going through the web browser.

Starting the app from the home screen also removes the navigation bar from the bottom of the screen, providing more space for your controls. Furthermore, since the app is now installed on your device, it will work even if the web server isn’t accessible. Try this by stopping the web server: left-click the green “W” icon in your computer’s task bar and choose “Stop All Services.” Re-open the app from your home screen to make sure it’s still working.

Files attached to this recipe: