Adaptive Show Loader

This recipe shows a slightly more complex iOS web app for controlling WATCHOUT. Compared to the Basic iPhone Controller app, this recipe uses more complex Javascript to automatically adapt to the shows currently available. It also shows how the buttons can be styled (using a separate CSS file), as shown below. A green LED in each button indicates the show that currently loaded.

The iOS web app adapts automatically to the set of shows available in the display computer, showing a list of buttons, one per show. This is done using the GetShowNames function of the WATCHOUT Systems Manager API, which retrieves the list of shows found in the display computer. In the same way you can retrieve the timelines available in a show, or the control cues found on a timeline, thereby creating general purpose applications that can be used with any show.

Web Server Configuration

A web app consists of a set of files loaded onto a web server. You then browse to this location using your iOS device.

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 “” file, unzip it, and copy the entire resulting “ShowLoader” folder to c:\wamp\www, so that the enclosed index.html file is located at c:\wamp\www\ShowLoader\index.html.

Open the file Control.js in the folder named “js”, and change the second line to match the IP address of your WATCHOUT display computer (the text shown in bold below):

wo.SetAddress(“”); // Set IP address of cluster master

Start WATCHOUT display software on that computer. If you haven’t already downloaded any shows to this display computer, use the WATCHOUT production software to do so, then go offline with the production software.

After making sure that your WATCHOUT display and your web server are running, you can browse to the app using your iOS device by entering this address (substituting your web server’s IP address as appropriate):

If everything is working well, you will see a list of buttons, as shown below one for each show available in your display computer. If you get no response, make sure your web server is running and double-check that you entered the right IP number for your web server.


The app described in this recipe, installed on an iPhone

You can install the app in your iPhone so that it’s available even when the web server can’t be accessed, as shown here. This also removes the address bar and navigation bar typically shown in Safari, displaying only the buttons as shown above.


Files attached to this recipe: