Uploading with a Browser

This application note describes how to use a web browser to supply a single image to the dynamic image server.  It’s a fairly basic example, and perhaps not particularly useful on its own, but it introduces a number of important concepts subsequently used in other examples.

The WATCHOUT Dynamic Image Server works by serving images located in a designated folder (or a sub-folder of this folder). It doesn’t deal with the process of actually providing, or sourcing, those images. You can provide an image by simply dropping it into the folder and, assuming it has the same name as the image requested by WATCHOUT, the image will be displayed. While useful for testing purposes, this method isn’t very practical in a presentation.

Ideally, you want an automated way to provide the image, perhaps on a user’s request. Such automation can be provided by a separate software application, running in the background on the dynamic image server computer. A  web server can provide this functionality, while also presenting a user interface through which an image can be provided. Choosing and uploading a file using a web browser is a familiar to many users.

Outline

These are the steps required to provide dynamic images to WATCHOUT, as described in this application note:

  • Configure the Dynamic Image Server to look for images in a specific folder.
  • Create a WATCHOUT show displaying an image originating from the image server.
  • Obtain and install a simple web server.
  • Configure the server to receive an image from a web browser, storing it in the folder used by the Dynamic Image Server.

webserverandclient.jpg

 

Configuring the Dynamic Image Server

isshortcut.pngThe image server needs to be configured to search for images in the folder where the web server has stored them. Also, you need to ensure that the Dynamic Image Server is up and running whenever the computer is turned on. Both these steps can be accomplished using a shortcut in the Startup folder of the image server computer. This folder is found under All Programs on the Start menu. Right-click the Startup folder and choose Open. Open the WATCHOUT application folder in another window. Using the right mouse button, drag the Image Server icon into the Startup folder window. When releasing the right mouse button, choose “Create shortcut here.”

To tell the image server where to look for the images, use the -f  command line option. This can be added to the shortcut that you just created in the Startup folder. Right-click the shortcut and choose Properties, then append the -f option, and the path to the desired folder to the Target field. It should read as follows:

C:\WATCHOUT\ImageServer.EXE -f c:\DynImages
 

The first item is the path to the Dynamic Image Server application itself. In the example above, WATCHOUT is installed in the WATCHOUT folder at the root level of the C: drive. If you’ve installed WATCHOUT somewhere else (such as in the Program Files folder), that will be shown here instead. If the path contains spaces, it will be enclosed in double quotes, like this:

“C:\Program Files\Dataton\WATCHOUT\ImageServer.EXE” -f C:\DynImages
 

NOTE: If the path to the dynamic image folder contains spaces, you need to enclose this in quotes as well.

Creating a WATCHOUT show

To display the image in WATCHOUT, you need a show that uses a Dynamic Image media item. A basic WATCHOUT show is attached to this page (“simpleupload.zip”). Download, extract and open it in WATCHOUT and click the single cue on the timeline to display the dynamic image (once a corresponding image is provided in the folder specified above). The image must be named “TheImage.jpg”, and should be 1024x768 pixels in size. The image is displayed in the Stage window; if you want to show it on a display computer, too, connect a display computer, set the IP address accordingly and go online.

Installing a Web Server

Although most versions of Windows come with a built-in web server, installing, enabling and configuring the right components is a rather time-consuming task. To speed things up, we’ll use the free WAMP server, which is is based on the open-source Apache web server, and other associated components. You can download this from:

Install it at the default location on your computer (i.e., C:\wamp). Start it using the “Start WampServer” command on the Start menu, then bring the server online by left-clicking the WAMP icon in the lower right corner of the screen and choosing “Start all Services” and “Put Online”. A Green WAMP icon indicates that the server is running.

IMPORTANT: The default settings of the WAMP server are intended for internal use only. Do not use it on the Internet or any other publicly available network without first adjusting its security settings as appropriate.

Configuring the Server

You need to add two files to the WAMP server in order to allow images to be uploaded. Those files are included in the enclosed “serverfiles.zip” file. Unzip this file, and place the resulting two files “index.html” and “upload.php” directly into the “C:\wamp\www” folder (so that the file “upload.php” is found at “C:\wamp\www\upload.php”. The index.html file, shown below, provides a basic user interface, allowing you to upload a file:

<form enctype=”multipart/form-data” action=”upload.php” method=”POST”>
    First Choose an Image: <input name=”userfile” type=”file” />
    <input type=”submit” value=”Send the Image” />
</form>
 

With these files in place, you should now be able to browse to your web server. Open a web browser on the computer running the server and simply type localhost into the address bar. Alternatively, browse to it using a separate computer connected to the same network (as shown in the illustration above) by entering the IP address of the computer acting as a web server. This should display a form that looks something like this: uploadimage1.png

The controls shown in the window vary slightly depending on your web browser, but should let you choose a file and subsequently send it to the server.

The “upload.php” file you added to the web server looks like this:

<?php
move_uploaded_file($_FILES[‘userfile’][‘tmp_name’], ‘/DynImages/TheImage.jpg’);
 

It contains the move_uploaded_file instruction, which tells the web server to move the uploaded file to the /DynImages folder, setting its filename to “TheImage.jpg.” This matches the location and name of the dynamic image server and media item as configured above.

CAUTION: The PHP code used in this example is deliberately kept as simple as possible. It doesn’t perform any error handling, or verification of the file supplied by the user. Do not use this on a publicly accessible network as is, as doing so may pose a security risk.

Uploading an Image using a Web Browser

Using the form shown above, choose a new file (a JPEG file of 1024x768 pixels, as configured for the dynamic media item in WATCHOUT), then click the “Send the Image” button to send the image to the web server. The image should replace “TheImage.jpg” in the “/DynImages” folder. If this image is currently displayed by the Dynamic Image Server, it should update accordingly.

Files attached to this recipe: