Project 6: Adding Photos

Almost everyone has acquired an inexpensive webcam that plugs into the USB port of their PC.  This project will show how to integrate images to your Temperature Logger web page.  This adds another dimension to data logging, especially if you are trying to track an experiment remotely – it is always helpful to see what is happening. 

To add a photo to our data logging program  we will use a free image capture program called Yet Another Web Cam or YAWCAM.

Getting YAWCAM
You can download the YAWCAM software from their website here.  Installation is easy and when you launch YAWCAM you will see the window shown below:

Project 6 - YAWCAM Window

YAWCAM will detect your webcam automatically when you plug the device into the USB port.  You will see a live preview image that updates several times per second.  

The plan is to configure YAWCAM to capture an image from the webcam and place it in the C:\freelogger folder.  Then we can embed this image in the Temperature Logger web page from Project 5.

To configure YAWCAM for saving the image, click on the Setting drop-down and go to Edit Settings.  You will be presented with the screen shown below:

Project 6 - YAWCAM config screen

Click on the File icon in the left margin to bring up the file configuration screen.  This will allow you to specify how often YAWCAM saves an image from your webcam and places that image in a specified folder.  Set the file type to .jpg and set the path to C:\freelogger\photo.jpg  I set the update rate to 30 seconds so that a fresh image will appear each time the temperature readings are updated and a new web page is generated by the Temperature Logger.

I also enabled a text overlay (click the Overlay settings in the left margin) that inserts the date and time in the image.  When you have finished the configuration, click OK at the bottom of the configuration screen.  Be sure to click the File Enable button on the main YAWCAM window.

YAWCAM will now update a fresh webcam image to C:\freelogger\photo.jpg every 30 seconds.   All we have to do now is add a link to this image in the Temp Logger web page.

Adding the Image to the Logger Web Page
Fortunately it is very easy to include the photo.jpg image in the web page generated by the temperature data logger program. We simply insert 2 lines of code just before the webpage file is closed:

Project 6 - Code added for image in web page

Notice that this is simply html code for adding an image link. The image is already there – placed by YAWCAM. If you know a little about BASIC programming you will appreciate the CHR$(34) functions in the Print statement. This adds the required quotation marks around the file name in the html code without causing a syntax error in the Print statement (which uses quotation marks for printed strings).

There are a few other details that were changed in the program – the Project name was changed on the webpage and DOS box, but the temperature data file tdata is generated in the same way as before.

The completed Project 6 code is shown here.

Running the New Temperature Data Logger
Copy the .pdf code and paste into a blank Thin Basic project page and save as Project6.tbasic.   When everything is running: Tiny Web Server, MBM 5 and now YAWCAM, start the Project 6 Thin Basic program and launch a browser.

 Now calling up http://localhost/pctemp.html will look like this:

Project 6 - New Temp Logger screen w/video

The image is a simple metronome so you can see that it changes position when a new image is generated by YAWCAM. 

Going Further
There are a number of interesting YAWCAM configurations.  There is a way to detect motion, to send an image to a remote server via FTP or to serve images directly from YAWCAM.  You can also experiment with streaming images and adding various text overlays to the fixed photo.jpg image available to the data logging program.

%d bloggers like this: